Android – Toggle Button with special shape

Let’s put together the last two snippets and build something better – some kind of a nice custom toggle that you may need in your app. See the bellow image for details.

toggle button

The special part of these buttons is the shape used for unpressed states – it is actually a rectangle with only 3 edges. This is done with the following layer-list:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item >
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
            <stroke android:width="5px" android:color="#337799" />
        </shape>
    </item>
    <item android:left="5dp"
        android:top="2dp"
        android:bottom="2dp">
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF" />
        </shape>
    </item>
</layer-list>
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item >
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
            <stroke android:width="5px" android:color="#337799" />
        </shape>
    </item>
    <item android:left="5dp"
        android:top="2dp"
        android:bottom="2dp">
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF" />
        </shape>
    </item>
</layer-list>

Further along, we need the following files:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@color/gen_app_color" android:state_pressed="true" />
    <item android:drawable="@color/gen_app_color" android:state_selected="true" />
    <item android:drawable="@drawable/shape_btn_unselected_left" />
</selector>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@color/gen_app_color" android:state_pressed="true" />
    <item android:drawable="@color/gen_app_color" android:state_selected="true" />
    <item android:drawable="@drawable/shape_btn_unselected_right" />
</selector>

As learned in the previous snippets with coloured buttons, we need the color selector for text also:

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

Let’s merge all in the main xml:

    <LinearLayout
        android:id="@+id/buttons_layout"
        android:layout_width="fill_parent"
        android:layout_height="54dp"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="30dp"
        >
        <Button
            android:id="@+id/test1_button"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:layout_weight="1"
            android:background="@drawable/selector_btn_right"
            android:text="Test 1"
            android:textColor="@color/selector_buttons_text"
            />

        <Button
            android:id="@+id/test2_button"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_marginRight="20dp"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:textColor="@color/selector_buttons_text"
            android:text="Test 2"
            android:background="@drawable/selector_btn_left"
            android:layout_weight="1"/>
    </LinearLayout>

And now the final touch – the toggle in code, after the inflation of the layout:

            final Button test1Button = (Button)rootView.findViewById(R.id.test1_button);
            final Button test2Button = (Button)rootView.findViewById(R.id.test2_button);

            View.OnClickListener topButtonsListener  = new View.OnClickListener(){
                @Override
                public void onClick(View view) {
                    if (view.getId() == R.id.test1_button){
                        test1Button.setSelected(true);
                        test2Button.setSelected(false);
                    }
                    else{
                        test1Button.setSelected(false);
                        test2Button.setSelected(true);
                    }
                }
            };
            test1Button.setOnClickListener(topButtonsListener);
            test2Button.setOnClickListener(topButtonsListener);
            test1Button.performClick();

Leave a Reply

You must be logged in to post a comment.