[JAVA][Android] Segmented buttons 사용하기

안녕하세요.

오늘은 머터리얼 디자인 3 에서 소개하고 있는 Segmented  Buttons를 사용하는 방법에 대해 알아보겠습니다.

머터리얼 디자인 3 공식 페이지 링크는 아래와 같습니다.

https://m3.material.io/components/segmented-buttons/specs

Segmented button – Material Design 3

 

 

해당 세그먼트 버튼을 사용하려면 MaterialButtonToggleGroup으로 각 버튼을 묶어주어야 합니다.

그리고 한번에 하나의 버튼만 선택할 수 있도록 하려면 app:singleSelection="true" 로 지정해주어야 합니다.

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:padding="16dp">

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

</LinearLayout>

 

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

 

 

 

이렇게 하면 다음과 같이 버튼이 생성되는 것을 확인할 수 있습니다.