Inbox SwitchCompat button

Question

Today I saw the Inbox App.

_{(source: cbsistatic.com)}

I'd like to know how can I make THAT switch button on the toolbar (left of searchButton). I didn't find references to (Or I don't search a lot).

thanks ^^

Answer 1

This is an old question. But I'd like to answer to this question because I found a way of achieving the same thing without using any third party library.

1 - Add SwitchCompat to your layout

 <android.support.v7.widget.SwitchCompat
            style="@style/SwitchCompatStyle"
            android:id="@+id/toolbar_switch"
           android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"/>

2 - Create an XML shape. switch_thumb_on.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <!--shadow color-->
            <solid android:color="@color/colorGray2" />
        </shape>
    </item>
    <!--padding to have shodow effect-->
    <item
        android:bottom="1dp"
        android:left="0.5dp"
        android:right="0.5dp"
        android:top="0.5dp">

        <!--switch thumb color-->
        <shape android:shape="oval">
            <solid android:color="@color/colorWhite" />
        </shape>
    </item>
    <item
        android:bottom="1dp"
        android:left="0.5dp"
        android:right="0.5dp"
        android:top="0.5dp">

        <!--switch image-->
        <!--NOTE: switch_color_selector is not a color but a selector-->
        <bitmap
            android:src="@drawable/ic_network_on"
            android:tint="@color/switch_color_selector" />
    </item>
</layer-list>

ic_network_on is icon that is shown on switch thumb. You can add states/selector here if you like. switch_color_selector tints the icon according to the state switch is in.

3 - Here's the color selector switch_color_selector.xml

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

4 - Create a style to be applied on the Switch added in first step.

<style name="SwitchCompatStyle" parent="Widget.AppCompat.CompoundButton.Switch" >
        <item name="android:thumb">@drawable/switch_thumb_on</item>
        <item name="trackTint">@color/switch_color_selector</item>
    </style>

And thats the result I got.

Cheers.

Answer 2

Here you go. https://android-arsenal.com/details/1/1985

You can find similar material in the same site. Its easy to reuse something that is already available. Cheers!! Happy coding!