Jan 24, 2014

Implement custom shape for EditText

Example show how to implement custom shape for EditText.

EditText with custom shape
EditText with custom shape
Create XML files in /res/drawable/ folder to define shape.

/res/drawable/topbuttonshape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <solid
        android:color="#a0a0a0" >
    </solid>

    <corners
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="0dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp" >
    </corners>

</shape>

/res/drawable/midbuttonshape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <solid
        android:color="#b0b0b0" >
    </solid>

    <corners
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="0dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="0dp" >
    </corners>

</shape>

/res/drawable/downbuttonshape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <solid
        android:color="#c0c0c0" >
    </solid>

    <corners
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="0dp" >
    </corners>

</shape>

Use the shapes in layout XML android:background
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="android-coding.blogspot.com" />

    <EditText
     android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="28sp"
        android:background="@drawable/topbuttonshape"
        android:hint="topbuttonshape" />
    <EditText
     android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="28sp"
        android:background="@drawable/midbuttonshape"
        android:hint="midbuttonshape" />
 <EditText
     android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="28sp"
        android:background="@drawable/downbuttonshape"
        android:hint="downbuttonshape" />
 
</LinearLayout>

No comments:

Post a Comment

Infolinks In Text Ads