Changing the look of an EditText widget in android studio

Question

How does one style the default edit text field in android studio from this look:

to this:

This is different from How to change style of a default EditText because I am going from the default underline layout to the box layout, not vice versa.

For reference, here is the XML representing the overall activity. The EditText field in question is displayed below. There is another one like it with almost identical traits:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
    ...>

<GridLayout
    ...>

    ...

    *<EditText
        android:id="@+id/editText2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="1"
        android:layout_row="1"
        android:ems="10"
        android:inputType="textPersonName" />*
      ...
</GridLayout>
...
</android.support.constraint.ConstraintLayout>

Rakshit Sorathiya · Accepted Answer · 2018-02-04T06:04:30.773

3

Create an XML file with the name "EditTextStyle.xml" in the drawable folder in your project and write the following code:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
    android:width="2dp"
    android:color="@color/black" />
<solid
    android:color="#00FFFFFF"
    android:paddingLeft="6dp"
    android:paddingTop="6dp" />
<padding
    android:bottom="6dp"
    android:left="6dp"
    android:right="6dp"
    android:top="6dp" />
</shape>

Use this xml as property of background in edit text like android:background="@drawable/EditTextStyle" in your layout file. Like this

<EditText
    android:id="@+id/editText2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_column="1"
    android:layout_row="1"
    android:background="@drawable/EditTextStyle"
    android:ems="10"
    android:inputType="textUserName" />

It will work for you.

edited Feb 04 '18 at 06:04

answered Jan 23 '18 at 04:43

Rakshit Sorathiya

519
5
16

If I use the code as written, it returns an unexpected end of file error. Adding a backslash before the first ">" returns a "multiple root tags" error. Is there a missing character? – isakbob Feb 02 '18 at 18:59
@BenjaminSarkis can you please post your code snippet so I can help you to resolve the issue. – Rakshit Sorathiya Feb 03 '18 at 16:16
Here is the code snippet inside the res/drawable directory. My file name is EditTextStyle.xml: `` `` `` `` – isakbob Feb 03 '18 at 19:51
@BenjaminSarkis Can you now please try the edited answer above. Hope it helps you. – Rakshit Sorathiya Feb 04 '18 at 06:05
That worked! However, xml files for me only work if they are lowercase. – isakbob Feb 04 '18 at 18:39

score 0 · Answer 2 · answered Jan 23 '18 at 04:35

you have two choices either use TextInputLayout with Edittext like this or simple use Edittext like you are already using and give it a background.

Approach One:

<android.support.design.widget.TextInputLayout
        android:id="@+id/tilSignUpFirstName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="20dp"
        android:layout_marginStart="20dp"
        android:layout_marginTop="5dp"
        app:hintTextAppearance="@style/TextAppearence.App.TextInputLayout"
      >

        <android.support.design.widget.TextInputEditText
            android:id="@+id/etYourEdittext"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fontFamily="serif"
            android:hint="@string/first_name"
            android:inputType="textPersonName"
            android:maxLines="1"
            android:padding="15dp"
            android:textAppearance="?android:attr/textAppearanceSmall" />

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

and add style in your styles.xml

<style name="TextAppearence.App.TextInputLayout" parent="@android:style/TextAppearance">
<item name="android:textColor">@color/white</item>
<item name="colorControlNormal">@color/white</item>
<item name="colorControlActivated">@color/white</item>
<item name="colorControlHighlight">@color/white</item>
<item name="android:textColorHighlight">@color/white</item>
<item name="android:textColorHint">@color/white</item>
<item name="android:textColorPrimary">@color/white</item>

Approach Two:

      <EditText
                        android:id="@+id/editText3"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"


 android:background="@drawable/bg_spinner_nothing_selected"
                        android:hint="@string/quantity"
                        android:padding="5dp"
                        android:textSize="12sp" />

and add a drawable in your drawable files.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="1dp" android:bottom="1dp">
    <shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle"
        >
        <solid android:color="@color/white" />
        <stroke android:width="1dp"
                android:color="@color/black_overlay"/>

    </shape>
</item>

Where does app:hintTextAppearance="@style/TextAppearence.App.TextInputLayout" factor into the display? This seems a little out of place, and my android studio could not pick it up as a valid attribute. — isakbob, Jan 23 '18 at 04:59
@BenjaminSarkis you have to include app: name space too. Like this in your parent layout. xmlns:app="http://schemas.android.com/apk/res-auto" — Umair, Jan 23 '18 at 05:00
Thank you @Umair for your advice, however, I went with the first answer and that worked sufficiently for me. — isakbob, Feb 27 '18 at 20:31

Changing the look of an EditText widget in android studio

2 Answers2