How can i create Material Design Toggle Button or Switch?

6 years ago Views 1643 Visit Post Reply

I am using Switch button for toggle status but it's not showing same as in Lolipop and above Android KitKat Version. What did I do for all Version Mobiles to have same Toggle button style or Lookfeel? below is my code what I am using.

<Switch
    android:id="@+id/switch3"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Switch"/>

Thanks In Advance.

Posted byHemant Sharma

Thread Reply

Hemant Sharma

- 6 years ago

Follow this steps It's Easy to Do Set material Switch Button.

Declare custom style in your styles.xml file.

<style name="VbageTechSwitch" parent="Theme.AppCompat.Light">  
    <!-- active thumb & track color (30% transparency) -->
    <item name="colorControlActivated">@color/indigo</item>

    <!-- inactive thumb color -->
    <item name="colorSwitchThumbNormal">@color/blue</item>

    <!-- inactive track color (30% transparency) -->
    <item name="android:colorForeground">@color/grey</item>
</style>

Apply this style to your SwitchCompat via android:theme attribute.

<android.support.v7.widget.SwitchCompat  
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true"
    android:theme="@style/VbageTechSwitch"/>

Mark As Correct

Hemant Sharma

- 6 years ago

Follow this steps It's Easy to Do Set material Switch Button.

Declare custom style in your styles.xml file.

<style name="VbageTechSwitch" parent="Theme.AppCompat.Light">  
    <!-- active thumb & track color (30% transparency) -->
    <item name="colorControlActivated">@color/indigo</item>

    <!-- inactive thumb color -->
    <item name="colorSwitchThumbNormal">@color/blue</item>

    <!-- inactive track color (30% transparency) -->
    <item name="android:colorForeground">@color/grey</item>
</style>

Apply this style to your SwitchCompat via android:theme attribute.

<android.support.v7.widget.SwitchCompat  
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true"
    android:theme="@style/VbageTechSwitch"/>

Mark As Correct

Anonymous

- 5 years ago

Download Free Sketch 42 + Craft of Android Mobile UI Desing https://checkout.greatsimple.io/download/209269/d3c4da7dca0336de8bed03b54ccc28b0

Mark As Correct

Question Detail