Customize the design for EditText in android

Question

I have tried with some solution over the problem that I have but fail to get the expected design for EditText in android.

The Final Design should look like this. It has the light gray color border at the bottom and on focus it should change the color to something else.

All the suggestions and solutions are welcome. Thank you.

check following link http://stackoverflow.com/questions/25203292/how-to-set-line-as-a-background-using-xml-shape-below-to-edittext — krishna, Feb 09 '16 at 05:56
use this may it help you https://github.com/wrapp/floatlabelededittext — Karan Mavadhiya, Feb 09 '16 at 05:56

score 2 · Accepted Answer · answered Feb 09 '16 at 05:57

2

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

<item>
    <shape>
        <solid android:color="@color/gray" />
    </shape>
</item>

<item
    android:bottom="1px"
    android:left="0px">
    <shape android:shape="rectangle" >
        <solid android:color="#FFFFFF" />
    </shape>
</item>

</layer-list>

answered Feb 09 '16 at 05:57

krishna

301
1
8

it's not working, Any additional thins are there might be I have missed? – iSandeep Feb 09 '16 at 06:20
you have add this xml as background of your edit text?? – krishna Feb 09 '16 at 06:24
I have made cleaned and build and its working now! Don't know what exactly was the issue! Thanks @Krishna – iSandeep Feb 09 '16 at 06:35

score 0 · Answer 2 · answered Feb 09 '16 at 05:55

I think so this is your point:

<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:gravity="center_horizontal"
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">    

<!-- Login progress -->
<ProgressBar
    android:id="@+id/login_progress"
    style="?android:attr/progressBarStyleLarge"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:visibility="gone" />

<ScrollView
    android:id="@+id/login_form"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/email_login_form"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <AutoCompleteTextView
                android:id="@+id/email"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/prompt_email"
                android:inputType="textEmailAddress"
                android:maxLines="1"
                android:singleLine="true" />

        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <EditText
                android:id="@+id/password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/prompt_password"
                android:imeActionId="@+id/login"
                android:imeActionLabel="@string/action_sign_in_short"
                android:imeOptions="actionUnspecified"
                android:inputType="textPassword"
                android:maxLines="1"
                android:singleLine="true" />

        </android.support.design.widget.TextInputLayout>

        <Button
            android:id="@+id/email_sign_in_button"
            style="?android:textAppearanceSmall"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:text="@string/action_sign_in"
            android:textStyle="bold" />

    </LinearLayout>
</ScrollView>

@iSandeep are you add compile 'com.android.support:design:23.1.1' to your gradle? — javad, Feb 09 '16 at 06:30

score 0 · Answer 3 · answered Feb 09 '16 at 06:11

0

It can be done using styles try adding below lines of code to your activity's style or theme

<item name="colorControlNormal">@color/yourNormalColor</item>
        <item name="colorControlActivated">@color/yourActiveColor</item>
        <item name="colorControlHighlight">@color/yourHighlightColor</item>

answered Feb 09 '16 at 06:11

Shishram

1,514
11
20

it's not working, Any additional thins are there might be I have missed? – iSandeep Feb 09 '16 at 06:20
How you have done it?, can you post your code.@iSandeep – Shishram Feb 09 '16 at 06:22
Here is my style.xml` ` – iSandeep Feb 09 '16 at 06:23
did you put this in your manifest for particular activity? and try putting this in styles-v21 as well, and put some colors also if u haven't. – Shishram Feb 09 '16 at 06:28

score 0 · Answer 4 · edited May 23 '17 at 12:30

Use the following drawable as horizontal line (extracted from https://stackoverflow.com/a/21555379/3027124)

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="@android:color/darker_gray" />
            <padding android:bottom="1dp"/>
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="@android:color/white" />
        </shape>
    </item>
</layer-list>

And set the background to EditText in xml as

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="3dp"
        android:layout_marginRight="3dp"
        android:text="User Name" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="User Name"
        android:layout_marginLeft="3dp"
        android:layout_marginRight="3dp"
        android:background="@drawable/horizonal_line"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="3dp"
        android:layout_marginRight="3dp"
        android:text="Password" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:layout_marginLeft="3dp"
        android:layout_marginRight="3dp"
        android:background="@drawable/horizonal_line"/>

</LinearLayout>

Hope this helps.

Customize the design for EditText in android

4 Answers4