I'm trying to create some custom toggle buttons in my Android App. And I want them to look like the following:
In this image 75, 39, and A-Z are in the "Off" state and 37 is in the "On" state.
So my Question is:
Which is the best way to generate those in Android:
XML drawables with borders, backgrounds, border radii
A bunch of 9-patch images for each shape, state, and screen density, or
Use a WebView and use CSS3?
Alright. I've gone with the XML Drawable. Here's my solution:
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="true">
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:top="0dp"
android:bottom="2dp"
android:left="0dp"
android:right="0dp">
<shape android:shape="rectangle">
<solid android:color="@color/toggle_border_dark" />
<corners
android:topLeftRadius="20dp"
android:topRightRadius="20dp"
android:bottomRightRadius="30dp"
android:bottomLeftRadius="30dp" />
</shape>
</item>
<item
android:top="2dp"
android:bottom="0dp"
android:left="0dp"
android:right="0dp">
<shape android:shape="rectangle">
<solid android:color="@color/toggle_border_light" />
<corners
android:topLeftRadius="30dp"
android:topRightRadius="30dp"
android:bottomRightRadius="20dp"
android:bottomLeftRadius="20dp" />
</shape>
</item>
<item
android:top="1dp"
android:right="1dp"
android:left="1dp"
android:bottom="1dp">
<shape android:shape="rectangle" >
<solid android:color="@color/toggle_bg_on" />
<corners
android:topLeftRadius="20dp"
android:topRightRadius="20dp"
android:bottomRightRadius="20dp"
android:bottomLeftRadius="20dp" />
</shape>
</item>
</layer-list>
</item>
<item>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:top="0dp"
android:bottom="2dp"
android:left="0dp"
android:right="0dp">
<shape android:shape="rectangle">
<solid android:color="@color/toggle_border_light" />
<corners
android:topLeftRadius="20dp"
android:topRightRadius="20dp"
android:bottomRightRadius="30dp"
android:bottomLeftRadius="30dp" />
</shape>
</item>
<item
android:top="2dp"
android:bottom="0dp"
android:left="0dp"
android:right="0dp">
<shape android:shape="rectangle">
<solid android:color="@color/toggle_border_dark" />
<corners
android:topLeftRadius="30dp"
android:topRightRadius="30dp"
android:bottomRightRadius="20dp"
android:bottomLeftRadius="20dp" />
</shape>
</item>
<item
android:top="1dp"
android:right="1dp"
android:left="1dp"
android:bottom="1dp">
<shape android:shape="rectangle" >
<solid android:color="@color/toggle_bg_off" />
<corners
android:topLeftRadius="20dp"
android:topRightRadius="20dp"
android:bottomRightRadius="20dp"
android:bottomLeftRadius="20dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With