[TECKHIT] Material3 Button

출처 : Tekhit Android App School / Soft campus 윤재성 강사님

Material Design 공식 사이트

🎉 Material3 

• 구글에서 만들어 배포하고 있는 UI 라이브러리 입니다.

- 최신 Stable 버전 : 1.9.0
- 최신 버전 : 1.11.0-alpha01

• 사용 방법 : App 수준의 build.gradle에 다음 dependency를 추가해 줍니다.

implementation("com.google.android.material:material:1.11.0")

🎉 Button의 다양한 Material Design

• 기본 MaterialButton
• 일반 Button(Material 3 라이브러리를 적용해주면 그냥 Button을 사용해도 MaterialButton 처럼 사용할 수 있습니다.)

<com.google.android.material.button.MaterialButton
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="MatarialButton" />

<Button
    android:id="@+id/button2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Button" />

• ElevatedButton
• Icon Button
• FilledIcon Button
• OutlinedButton

<Button
    android:id="@+id/button3"
    style="@style/Widget.Material3.Button.ElevatedButton"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="ElevatedButton" />

<Button
    android:id="@+id/button4"
    style="@style/Widget.Material3.Button.ElevatedButton.Icon"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Icon Elevated Button"
    app:icon="@drawable/music_note_24px" />

<Button
    android:id="@+id/button5"
    style="@style/Widget.Material3.Button.IconButton.Filled.Tonal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Filled tonal button"
    app:icon="@drawable/music_note_24px" />

<Button
    android:id="@+id/buttonResult"
    style="@style/Widget.Material3.Button.OutlinedButton"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Outlined Button" />

• MaterialButtonToggleGroup : 다수의 버튼을 하나의 그룹으로 묶을 수 있습니다.
• singleSelection : 버튼 그룹 중 하나의 버튼만 선택할 수 있습니다.
• selectionRequired : singleSelection에 true를 줬을 때만 사용하며 true로 주면 선택한 것을 취소할 수 없습니다.

   <com.google.android.material.button.MaterialButtonToggleGroup
        android:id="@+id/toggleGroup1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <Button
            android:id="@+id/toggleButton1"
            style="@style/Widget.Material3.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="toggle1" />

        <Button
            android:id="@+id/toggleButton2"
            style="@style/Widget.Material3.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="toggle2" />

        <Button
            android:id="@+id/toggleButton3"
            style="@style/Widget.Material3.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="toggle3" />

    </com.google.android.material.button.MaterialButtonToggleGroup>


    <com.google.android.material.button.MaterialButtonToggleGroup
        android:id="@+id/toggleGroup2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:selectionRequired="true"
        app:singleSelection="true">

        <Button
            android:id="@+id/toggleButton4"
            style="@style/Widget.Material3.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="toggle4" />

        <Button
            android:id="@+id/toggleButton5"
            style="@style/Widget.Material3.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="toggle5" />

        <Button
            android:id="@+id/toggleButton6"
            style="@style/Widget.Material3.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="toggle6" />

    </com.google.android.material.button.MaterialButtonToggleGroup>

🎉 MaterialButtonToggleGroup 연습 예제

<?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"
    android:padding="10dp"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="숫자1"
        android:textSize="25sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/num1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="text"
        android:layout_marginStart="10dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toEndOf="@+id/textView"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="숫자2"
        android:textSize="25sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <EditText
        android:id="@+id/num2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="text"
        android:layout_marginStart="10dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView2"
        app:layout_constraintTop_toBottomOf="@+id/num1" />

    <com.google.android.material.button.MaterialButtonToggleGroup
        android:id="@+id/toggleGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/num2"
        app:singleSelection="true">


        <Button
            android:id="@+id/btn_add"
            style="@style/Widget.Material3.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="+"
            android:textSize="20sp"
            android:textStyle="bold" />

        <Button
            android:id="@+id/btn_sub"
            style="@style/Widget.Material3.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="-"
            android:textSize="20sp"
            android:textStyle="bold" />

        <Button
            android:id="@+id/btn_mul"
            style="@style/Widget.Material3.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="*"
            android:textSize="20sp"
            android:textStyle="bold" />

        <Button
            android:id="@+id/btn_div"
            style="@style/Widget.Material3.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="/"
            android:textSize="20sp"
            android:textStyle="bold" />
    </com.google.android.material.button.MaterialButtonToggleGroup>

    <Button
        android:id="@+id/btn_result"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="결과 계산하기"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toggleGroup" />

    <TextView
        android:id="@+id/resultArea"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:gravity="center"
        android:textSize="30sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn_result" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

class MainActivity : AppCompatActivity() {
    private lateinit var binding : ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.apply {
            btnResult.setOnClickListener {

                toggleGroup.checkedButtonIds.forEach { v->
                    val num1 = Integer.parseInt(num1.text.toString())
                    val num2 = Integer.parseInt(num2.text.toString())

                    when(v){
                        R.id.btn_add -> setCalcResult(num1 + num2)
                        R.id.btn_sub -> setCalcResult(num1 - num2)
                        R.id.btn_mul -> setCalcResult(num1 * num2)
                        R.id.btn_div -> setCalcResult(num1 / num2)
                    }
                }
            }
        }
    }

    fun setCalcResult(result: Int) {
        binding.resultArea.text = result.toString()
    }
}