How to adjust ToggleButtons in Android such that they have a rim and change their color?

Question

I have 3 ToggleButtons in a row as you can see in the screenshot:

I would like to have the following layout modifications:

1. There should be rims separating the Toggle Buttons
2. The fill in color of the unchecked Toggle Buttons should be white while the fill in color of the checked Toggle Button should be green sucht that you can see which of those is checked (I will make sure programatically that only one of those can be checked)

Here is my XML layout for the Toggle Buttons inside a Liner Layout:

    <LinearLayout
        android:id ="@+id/linearLayoutForButtons"
        android:layout_width="0dp"
        android:layout_height="@dimen/_25sdp"
        android:orientation="horizontal"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        >


        <ToggleButton
            android:id="@+id/button_1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:textAllCaps="false"
            android:background="#95f9ad"
            android:layout_weight="1"
            android:checked="true"
            android:textOn="Button 1"
            android:textOff="Button 1"
            android:textSize="@dimen/_8ssp"
            app:layout_constraintTop_toTopOf="parent" />

        <ToggleButton
            android:id="@+id/button_2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="#95f9ad"
            android:layout_weight="1"
            android:textAllCaps="false"
            android:checked="false"
            android:textSize="@dimen/_8ssp"
            android:textOn="Button 2"
            android:textOff="Button 2" />

        <ToggleButton
            android:id="@+id/button_3"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="#95f9ad"
            android:textAllCaps="false"
            android:layout_weight="1"
            android:checked="false"
            android:textSize="@dimen/_8ssp"
            android:textOn="Button 3"
            android:textOff="Button 3"/>
    </LinearLayout>

Any idea how I can do that? It should actually look similar to the ToggleButtons used hereenter link description here

Reminder: Does anyone have an idea how to do that? I'll appreciate every comment.

Answer 1

We can also create it like this

Perhaps this is more of what you are looking for. This does require some changes.

activity_main.xml

<?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">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/root_view_background"
        android:padding="1dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ToggleButton
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/button_1_selector"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ToggleButton
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/button_2_selector"
            app:layout_constraintStart_toEndOf="@id/button1"
            app:layout_constraintTop_toTopOf="@id/button1" />

        <ToggleButton
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/button_3_selector"
            app:layout_constraintStart_toEndOf="@id/button2"
            app:layout_constraintTop_toTopOf="@id/button1" />

        </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Drawable root_view_background.xml (This is the black outlining)

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle">
    <stroke android:color="@color/black" android:width="1dp" />
    <corners android:radius="3dp" />
</shape>

Drawable button_1_background_checked (This is the green background for the left button)

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

Drawable button_2_background_checked (This is the green background for the middle button)

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

Drawable button_3_background checked (This is the green background for the right button)

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

Drawable button_1_selector (This changes the background of the first button when it's checked or not)

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

Drawable button_2_selector (This changes the background of the second button when it's checked or not)

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

Drawable button_3_selector (This changes the background of the last button when it's checked or not)

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