[Android] 둥근 Toggle 커스텀 -> TabLayout 으로 !

토글 버튼을 제작해야 했는데 생각보다 돌고 돌았다..!

토글이라서 material의 toggleGroup만 생각했는데 생각보다 제약이 많았다.

 

왼쪽의 형태를 원했는데 material에서 적용하려면, 오른쪽 처럼 토글 느낌이 나게 만들수가 없다,,,!!

찾고찾고 삽질하고 삽질해서 tabLayout으로 만드는 방법으로 성공!

 

 

[코드]

toggle in xml

<com.google.android.material.card.MaterialCardView
    android:id="@+id/tab_card_view"
    android:layout_width="wrap_content"
    android:layout_height="25dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:strokeWidth="1dp"
    app:strokeColor="@color/theme_pink"
    app:cardCornerRadius="13dp">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:backgroundTint="@color/white"
        android:textSize="12dp"
        app:tabGravity="fill"
        app:tabMode="fixed"
        app:tabIndicatorColor="@color/transparent"
        app:tabIndicatorHeight="0dp"
        app:tabRippleColor="@color/transparent"
        app:tabTextColor="@color/theme_pink"
        app:tabSelectedTextColor="@color/white"
        app:tabBackground="@drawable/selector_btn_toggle_pink">

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/option_default" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="@string/option_pref" />
    </com.google.android.material.tabs.TabLayout>
    </com.google.android.material.card.MaterialCardView>

 

selector_btn_toggle_pink

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true"
        android:drawable="@drawable/btn_toggle_on" />
    <item android:state_selected="false"
        android:drawable="@drawable/btn_toggle_off" />
</selector>

btn_toggle_on

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="20dp"/>
    <solid android:color="@color/theme_pink" />
</shape>

btn_toggle_off

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/white" />
</shape>

 

완성된 토글

 

[참고]
https://stackoverflow.com/questions/69431976/how-to-make-customized-material-toggle-button

How to make customized Material Toggle Button?

https://leonardovinsen.medium.com/android-tablayout-with-gradient-indicator-bd49c3a0f4f6

Android TabLayout with Gradient Indicator