Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Creating shapes,Boder,selector and Drawable using xml in Android

    • 0
    • 1
    • 0
    • 2
    • 0
    • 0
    • 0
    • 0
    • 397
    Comment on it

    This blog will help you to Create shapes,Border,selector and Drawable using xml in Android.

    1.Selector for a button: Create xml file named background_selector.xml in res/drawable and write the bellow code in that

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- Non focused states -->
        <item
            android:state_focused="false"
            android:state_selected="false"
            android:state_pressed="false"
            android:drawable="@drawable/home_unselected" />
        <item
            android:state_focused="false"
            android:state_selected="true"
            android:state_pressed="false"
            android:drawable="@drawable/home" />
        <!-- Focused states -->
        <item
            android:state_focused="true"
            android:state_selected="true"
            android:state_pressed="false"
            android:drawable="@drawable/home" />
        <!-- Pressed state -->
        <item
            android:state_pressed="true"
            android:drawable="@drawable/home" />
    </selector>
    

    Then put this as background:

    <ImageView
      android:id="@+id/imageView"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/background_selector"
      android:gravity="center" />
    

    2.Selector for CheckBox: Create xml file named checkbox_selector.xml in res/drawable and write the following code in that

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item android:drawable="@drawable/tick" android:state_checked="true"/>
        <item android:drawable="@drawable/un_tick" android:state_checked="false"/>
    
    </selector>
    

    then put this as background:

    <CheckBox
    android:id="@+id/do_not_show_checkbox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:button="@drawable/checkbox_selector" />
    

    3.Create List row selector: Create xml file named list_selector.xml in res/drawable and write the following code in this

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item android:drawable="@android:color/transparent" android:state_pressed="false" android:state_selected="false"/>
        <item android:drawable="#9DCAF1" android:state_pressed="true"/>
        <item android:drawable="#9DCAF1" android:state_pressed="false" android:state_selected="true"/>
    
    </selector>
    

    then use this as background in your layout that you want to set as list row as below:

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/messages_list_rows"
        android:layout_width="fill_parent"
        android:layout_height="90dip"
        android:background="@drawable/list_selector" >
    
        <TextView
                android:id="@+id/name"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:textColor="#B3FFFF"
                android:textSize="14dip" />
    </RelativeLayout>
    

    4.Create a border with round edges: Create xml file named layout_background.xml in res/drawable and write the following code in this

    <?xml version="1.0" encoding="UTF-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:padding="10dp"
        android:shape="rectangle" >
    
        <gradient
            android:angle="270"
            android:endColor="#d9dff9"
            android:startColor="#d9dff9" />
    
        <corners
            android:bottomLeftRadius="10dp"
            android:bottomRightRadius="10dp"
            android:topLeftRadius="10dp"
            android:topRightRadius="10dp" />
    
    </shape>
    

    then use this as background in your layout as below:

    <RelativeLayout
    android:id="@+id/user_image_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/layout_background">
    </RelativeLayout>
    

    5.Create red circle : Create xml file named custom_circle.xml in res/drawable and write the following code in this

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval" >
    
        <solid android:color="#C4110C" />
    
        <size
            android:height="20dp"
            android:width="20dp" />
    
    </shape>
    

    Hope this will help you :)

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: