CODEWITHSUNDEEP
androidxmlandroid-edittext
iSandeep
iSandeep

Reputation: 715

Customize the design for EditText in android

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

enter image description here

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.

Upvotes: 1

Views: 2368

Answers (4)

Mustansar Saeed
Mustansar Saeed

Reputation: 2790

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.

Upvotes: 0

Shishram
Shishram

Reputation: 1516

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>

Upvotes: 0

krishna
krishna

Reputation: 301

<?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>

Upvotes: 2

javad
javad

Reputation: 835

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>

Upvotes: 0

Related Questions