[Google Material Design] Button 만들기 -2

지난 포스트에 이어 OutlinedButton 을 만들어 보겠다. 우선 지난 포스트에서 사용한 코드를 공유한다.

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    
    <com.google.android.material.button.MaterialButton
    	android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/colorPrimary"
        android:elevation="5dp"
        android:text="Button"
        android:textAppearance="@style/TextAppearance.AppCompat.Medium"
        android:textColor="@android:color/white"
        app:icon="@drawable/ic_launcher_foreground"
        app:iconGravity="start"
        app:iconPadding="@dimen/cardview_compat_inset_shadow"
        app:iconSize="50dp"
        app:iconTint="@android:color/white"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:rippleColor="@color/colorAccent"
        app:shapeAppearance="@style/ShapeAppearance.MaterialComponents.MediumComponent"
        app:strokeColor="@color/colorAccent"
        app:strokeWidth="3dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

 

​

 

버튼을 만들었고, 터치하면 동그란 애니메이션이 발생하는 것을 볼 수 있다. 이제 Outlined button을 살펴보자.

우선 Outlined button은 원래 MaterialButton 에 Outline 을 적용하는 style 만 추가하면 바로 결과를 확인할 수 있다.

​

xml 코드에서 MaterialButton 아래에 새로운 버튼을 추가해 보자.

지난 포스트와 마찬가지로 parent 레이아웃에 제약 조건을 잡아 주고, 너비를 150dp로 고정해 보자. 단, 두 번째 버튼의 상단은 parent가 아닌, 지난 포스트에서 만들었던 MaterialButton이 될 것이다. 두 버튼이 겹치면 안 되기 때문이다. 그렇다면 다음과 같은 결과물이 보일 것이다.

 

 

못 따라오실 분들을 위해 코드도 공유한다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"> 

    <com.google.android.material.button.MaterialButton
		android:id="@+id/materialButton"
        android:layout_width="150dp" 
        android:layout_height="wrap_content"
        android:backgroundTint="@color/colorPrimary"
        android:elevation="5dp"
        android:text="Button"
        android:textAppearance="@style/TextAppearance.AppCompat.Medium"
        android:textColor="@android:color/white"
        app:icon="@drawable/ic_launcher_foreground"
        app:iconGravity="start"
        app:iconPadding="@dimen/cardview_compat_inset_shadow"
        app:iconSize="50dp"
        app:iconTint="@android:color/white"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:rippleColor="@color/colorAccent"
        app:shapeAppearance="@style/ShapeAppearance.MaterialComponents.MediumComponent"
        app:strokeColor="@color/colorAccent"
        app:strokeWidth="3dp" />
        
        <com.google.android.material.button.MaterialButton
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/materialButton" />
</androidx.constraintlayout.widget.ConstraintLayout>

 

위와 같은 버튼 컴포넌트를 구성하였으면, 이제 Outlined 스타일을 적용해줄 스타일을 적용해 보자. 두 번째 MaterialButton에 다음 style 만 추가해 주면 된다.

 

style="?attr/materialButtonOutlinedStyle"

 

​

Layout Preview에 옅은 테두리만 있는 버튼이 보일 것이다. 그렇다. 이것이 Outlined button의 기본 상태이다.

이제 이 버튼에 테두리 색상과 아이콘, 그리고 텍스트를 다음과 같이 넣어 보자. 지난 포스트에서 다루었던 속성의 내용과 동일하다.

<com.google.android.material.button.MaterialButton
	style="?attr/materialButtonOutlinedStyle"
    android:layout_width="300dp"
    android:layout_height="wrap_content"
    android:text="Outlined button"
    app:icon="@drawable/ic_launcher_foreground"
    app:iconSize="50dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/materialButton"
    app:strokeColor="@color/colorPrimary"
    app:strokeWidth="1dp" />

대부분 아시는 내용이실 것 같아 중요한 부분만 설명하도록 한다.

app:icon	버튼에 아이콘을 추가한다.
app:iconSize	아이콘의 크기를 지정한다.
app:strokeColor	버튼의 테두리 색상을 지정한다.
app:strokeWidth	버튼의 테두리 굵기를 지정한다.

 

컴포넌트 속성을 적용하고 실제 기기에서 구동하면 다음과 같은 결과를 볼 수 있을 것이다.

 

버튼이 하나 더 생성되었으며, OUTLINED BUTTON을 클릭하면 버튼 안쪽에 옅은 색이 나타나면서 동그란 효과를 나타낼 것이다.

이상 Outlined button의 기본적인 컴포넌트 생성을 해 보았다. Outlined button의 경우 보셨겠지만 기본 MaterialButton에 style만 추가한 것이므로 속성 부분에서 거의 동일하기 때문에 건너뛰도록 하겠다.

---

Contained button, Outlined button 에 이어, Text button에 대해 알아보자. 감사하게도 이 컴포넌트 또한 style 한 줄이면 단순하게 Text button을 구현할 수 있다! 다시 한 번 아래에 버튼을 생성해 보자. 그리고 아래 한 줄만 style에 추가하면 바로 적용이 가능하다.

style="@style/Widget.MaterialComponents.Button.TextButton"

 

​

이렇게 Text button도 쉽게 배치하였다. Text button의 경우 아이콘이 없는 것이 더 어울릴 수도 있으나, 그것은 실무진의 마음이니 편하게 사용하길 바란다.

---

마지막으로 Toggle button 도 살펴보자. Toggle button 의 경우는 지금까지 만들어왔던 버튼과는 다르다. 지금까지 만들었던 버튼은 하나이지만, Toggle button은 여러 개의 버튼 중 하나의 버튼을 선택하는 용도로 쓰이기 때문이다.

 

 

이 버튼은 순수 MaterialButton 으로만 동작하지 않고, MaterialButtonToggleGroup과 함께 동작한다. 그러면 바로 코드로 옯겨 보자.

마찬가지로 세 버튼 아래에 새로운 컴포넌트를 생성한다. 다만, 이번에는 MaterialButtonToggleGroup 안에 MaterialButton이 있는 다음과 같은 구조로 작성한다.

<MaterialButtonToggleGroup
	...
	...>
    
    <MaterialButton
    	...
        ... />
        
    <MaterialButton
    	...
        ... />
        
    <MaterialButton
    	...
        ... />
</MaterialButtonToggleGroup>

자세한 코드와 결과는 다음과 같다.

<com.google.android.material.button.MaterialButtonToggleGroup
	android:id="@+id/toggleButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/materialButton3">
    
    <com.google.android.material.button.MaterialButton
    	android:id="@+id/button1"
        style="?attr/materialButtonOutlinedStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1" />
        
    <com.google.android.material.button.MaterialButton
    	android:id="@+id/button2"
        style="?attr/materialButtonOutlinedStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2" />
    
    <com.google.android.material.button.MaterialButton 
    	android:id="@+id/button3"
        style="?attr/materialButtonOutlinedStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 3" />
</com.google.android.material.button.MaterialButtonToggleGroup>

 

​

가장 하단에 세 개의 버튼이 생겼다. 세 개의 버튼이 모두 붙어 있고, 하나를 선택할 수 있다. 그런데 문제가 있다. BUTTON 1을 선택했는데, BUTTON 2 와 BUTTON 3 이 함께 선택된다. MaterialButtonToggleGroup은 다음 두 가지의 속성을 통해 개발자가 해당 Toggle button 에서 한 개만 선택할 수 있게 할 것인지, 선택이 필수적인지 설정할 수 있도록 지원한다.

​	속성	관련 속성	기본 값
단일 선택 (Single selection)	app:singleSelection	setSingleSelection isSingleSelection	false
선택 필수 (Selection required)	app:selectionRequired	setSelectionRequired isSelectionRequired	false

 

따라서 다음과 같이 MaterialButtonToggleGroup의 속성에 추가하면 하나만 선택할 수 있도록 설정할 수 있다.

 

<com.google.android.material.button.MaterialButtonToggleGroup
	android:id="@+id/toggleButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/materialButton3"
    
    <!-- 속성 추가 -->
    app:singleSelection="true">
    
<!-- 중략 -->
</MaterialButtonToggleGroup>

 

그러면 다음과 같이 한 개의 버튼만 선택할 수 있도록 설정된다.

 

---

 

위와 같이 Button 에 Material Components 를 사용하면 일일이 버튼에 테두리와 누름 효과를 줄 필요 없이 Google Material Components 시스템에서 알아서 최적의 UI/UX를 제공해준다. 지금까지 했던 작업이 아니어도 style, color 등을 이용해 개발자가 직접 컴포넌트를 커스터마이징할 수 있는 방법도 무궁무진하다. 전체 코드와 완성된 결과물 스크린샷과 함께 포스트를 마친다.

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  	xmlns:app="http://schemas.android.com/apk/res-auto"
 	xmlns:tools="http://schemas.android.com/tools"
 	android:layout_width="match_parent"
 	android:layout_height="match_parent"
 	tools:context=".MainActivity">

	<com.google.android.material.button.MaterialButton
    	android:id="@+id/materialButton"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/colorPrimary"
        android:elevation="5dp"
        android:text="Button"
        android:textAppearance="@style/TextAppearance.AppCompat.Medium"
        android:textColor="@android:color/white"
        app:icon="@drawable/ic_launcher_foreground"
        app:iconGravity="start"
        app:iconPadding="@dimen/cardview_compat_inset_shadow"
        app:iconSize="50dp"
        app:iconTint="@android:color/white"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:rippleColor="@color/colorAccent"
        app:shapeAppearance="@style/ShapeAppearance.MaterialComponents.MediumComponent"
        app:strokeColor="@color/colorAccent"
        app:strokeWidth="3dp" />
        
	<com.google.android.material.button.MaterialButton
    	android:id="@+id/materialButton2"
        style="?attr/materialButtonOutlinedStyle"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:text="Outlined button"
        app:icon="@drawable/ic_launcher_foreground"
        app:iconSize="50dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/materialButton"
        app:strokeColor="@color/colorPrimary"
        app:strokeWidth="1dp" />
	
    <com.google.android.material.button.MaterialButton
    	android:id="@+id/materialButton3"
        style="@style/Widget.MaterialComponents.Button.TextButton"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:text="Outlined button"
        app:icon="@drawable/ic_launcher_foreground"
        app:iconSize="50dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/materialButton2" />
        
    <com.google.android.material.button.MaterialButtonToggleGroup
        android:id="@+id/toggleButton" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/materialButton3"
        app:singleSelection="true">
        
    	<com.google.android.material.button.MaterialButton
        	android:id="@+id/button1"
            style="?attr/materialButtonOutlinedStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 1" />
            
        <com.google.android.material.button.MaterialButton
            android:id="@+id/button2"
            style="?attr/materialButtonOutlinedStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 2" />
        
    	<com.google.android.material.button.MaterialButton
        	android:id="@+id/button3"
            style="?attr/materialButtonOutlinedStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 3" />
        </com.google.android.material.button.MaterialButtonToggleGroup>
</androidx.constraintlayout.widget.ConstraintLayout>

 

다음 포스트에서는 또다른 Material Components인 Bottom Navigation에 대해 알아보겠다.

 

​