Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android Performance XML Drawable vs CSS3 vs Images

I'm trying to create some custom toggle buttons in my Android App. And I want them to look like the following:

Custom toggle buttons

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:

  1. XML drawables with borders, backgrounds, border radii

  2. A bunch of 9-patch images for each shape, state, and screen density, or

  3. Use a WebView and use CSS3?

like image 925
chrislondon Avatar asked Apr 17 '13 16:04

chrislondon


1 Answers

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>
like image 61
chrislondon Avatar answered Oct 12 '22 21:10

chrislondon