Friday, January 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