Android Shape, Selector Examples

Shape, selector and layer-list are usually used to create custom drawable resources in android development. Those three xml elements can save a lot of UI resources and time if being used properly. This article will show you how to use them correctly.

1. Custom Drawable File Overview.

All the three xml element should be defined in a xml file under app / res / drawable folder. The file name is just the drawable resource id.

For example, if app / res / drawable / my_layer_list.xml is just the file. Then you can refer to it in both java code or other xml file.

  1. Java Code : R.drawable.my_layer_list.
  2. Xml Code : Android:background=”@drawable/my_layer_list”.

2. Shape.

Shape is used to define custom shape in android drawable resource. It is used in both selector and layer-list element. It has below properties.

  1. Android:shape : Value can be “line”, “rectangle”, “oval” or “ring”.

2.1 Shape’s Sub Element.

2.1.1 <gradient>.

Define color gradual change style.

  1. Android:startColor : Start color value.
  2. Android:endColor : End color value.
  3. Android:angle : Gradient angle, 0 means from left to right, 90 means from bottom to top, the value shoud be an integer that is multiple of 45, default value is 0;
  4. Android:type : linear, radial and sweep.

android shape gradient example

<shape android:shape="oval">
    <gradient android:startColor="@color/colorBlue"
                android:endColor="@color/colorGreen"
                android:angle="45"
                android:type="linear"/>
</shape>

2.1.2 <solid >

Defines shape internal fill color. It will override <gradient> attributes effect.

  1. Android:color : The color value that is used to fill shape.

android shape solid example

<shape android:shape="oval">
    <solid android:color="@color/colorRed" />
</shape>

2.1.3 <stroke >

Define shape bolder style.

  1. Android:width : Border width.
  2. Android:color : Border color.
  3. Android:dashWidth : Dash border width.
  4. Android:dashGap : Gap between two dash of the border.

android shape stroke border example

<shape android:shape="oval">
    <stroke android:color="@color/colorRed" 
             android:width="5dp" 
             android:dashGap="3dp" 
             android:dashWidth="5dp"/>
</shape>

2.1.4 <corners >

Define shape corner style.

  1. Android:radius : The radius of the corner. The bigger the radius value, the round shaped the corner.
  2. Android:topRightRadius : Top right corner radius value.
  3. Android:bottomLeftRadius : Bottom left radius value.
  4. Android:topLeftRadius : Top left radius value.
  5. Android:bottomRightRadius : Bottom right radius value.
READ :   How To Define Custom Color Variables In Android Studio

android shape corner dadius example

<shape android:shape="rectangle">
    <corners android:topLeftRadius="10dp"
              android:topRightRadius="5dp"
              android:bottomLeftRadius="15dp"
              android:bottomRightRadius="20dp" />
</shape>

2.1.5 <padding >

Define the padding values.

  1. android:top : Top padding value.
  2. android:bottom : Bottom padding value.
  3. android:left : Left padding value.
  4. android:right : Right padding value.

There are two custom shape in below example. Green shape is drawn at the top because it is defined at last in layer-list definition.

android shape padding example

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <corners android:topLeftRadius="10dp"
                      android:topRightRadius="5dp"
                      android:bottomLeftRadius="15dp"
                      android:bottomRightRadius="20dp" />

            <solid android:color="@color/colorRed" />

            <padding
                android:left="100dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />

            <size
                android:width="200dp"
                android:height="200dp" />
        </shape>
    </item>

    <item>
        <shape android:shape="rectangle" >
            <solid android:color="@color/colorGreen" />
            <size android:width="200dp" android:height="200dp" />
        </shape>
    </item>

</layer-list>

2.1.6 <size>

Define the shape width and height value.

3. Selector.

Selector is used to define view component’s background color or background image by it’s various state.

3.1 View Component’s State.

A view component has various state. For example, a button has following states:

  1. android:state_pressed : Boolean value, true means button is pressed, false means button is not pressed.
  2. android:state_enabled : Boolean value, true means button is enabled, false means button is disabled.
  3. android:state_focused : Boolean value, true means button is focused, false means button lost focus.
  4. android:state_window_focused : Boolean value, this is the button default state. It is same as do not specify button state.

3.2 Selector Definition.

You should define a selector in a xml file under app / res / drawable folder. Such as my_selector.xml

You can define several items in the selector definition xml file. Each item include a drawable object (color or image) that will be used for a button state.

Android system will check each item in the selector by it’s list order, if one item match current button state, then use that drawable object. If no state match, then use default item.

READ :   Android Custom Toast Example

Please Note : The default state item should be written in the end of the selector xml. If you put it at the beginning of selector xml, no other state will take effect.

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true"
           android:drawable="@color/colorGreen" />

    <item android:state_pressed="false"
           android:drawable="@color/colorYellow" />

     <!-- This is the default state item, it is same as <item android:drawable="@color/colorRed" />
          This item should be written in the end. -->
     <item android:state_window_focused="true" android:drawable="@color/colorRed"/>

</selector>

From above example, we can see below default state item at the end of the xml.

<item android:state_window_focused="true" android:drawable="@color/colorRed"/>

It behaves same as below default state item.

<item android:drawable="@color/colorRed"/>

If we apply above selector drawable to a button as background.

<Button
    android:id="@+id/selectorButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/my_selector"
    android:text="Click Me"
    android:layout_gravity="center_horizontal" />

We can see below screen effect. When the button is pressed, the background color is green, when not pressed the background color change to orange.

android selector example

Above example use some custom color variables, if you do not know, please read How To Define Custom Color Variables In Android Studio.

(Visited 4,813 times, 32 visits today)

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.