Custom designing EditText

Devrath picture Devrath · Oct 4, 2013 · Viewed 139.9k times · Source

I have custom designed EditText

enter image description here

search_page.xml

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="10dp"
    android:background="#E1E1E1"
    android:weightSum="1" >

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight=".25"
        android:text="City" />

    <EditText
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:background="@drawable/rounded_edittext"
        android:layout_weight=".75" />
</LinearLayout>

rounded_edittext.xml

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

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

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

</shape>

I want to use color code #2f6699 to get a border color like an outline to the EditText text box as below:

enter image description here

Any ideas on how to achieve this?

Answer

Manishika picture Manishika · Oct 4, 2013

Use the below code in your rounded_edittext.xml

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

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

    <stroke
        android:width="1dp"
        android:color="#2f6699" />
    <corners 
        android:radius="10dp"            
        />

</shape>

This should work