askIT

Android EditText design

The default appearance of EditText in Android is underlined. This may confuse the user because it is common on website to have a border around input boxes.

01_standard_edittext_design.jpg

It possible to change the appearance of EditText by creating a separate drawable xml file. This is done by going to the folder
res > drawable,
then right-click and select
New > Drawable resource file.

02_new_drawable_res

03_edittext_new_resource_file.jpg

The code below is an example of a square with light gray edges. The code is entered into the edittext_standard.xml. The file "edittext_standard.xml" has to be located in the folder "drawable".

04_edittext.jpg

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:width="1dp"
        android:color="@android:color/tertiary_text_light" />
    <padding android:left="2dp"
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp" />

    <solid android:color="#fff" />
</shape>

Add the background on EditText in
layout > activity_main.xml.

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/editText"
        android:background="@drawable/edittext_standard" />

04_edittext_design_firkant.jpg

Add comment

avatar_blank_60.png

Comment:

Name:

Email:

Comments

No comments yet. You can be the first one to comment. Just write your comment in the form and click on the submit button.