Android: Making EditText similar to Chrome's URL box

Question

I'm making chatting application for my school's assignment.

In my opinion, the default EditText in Android does not looks good. I want to make it looks like the URL box in Android's Chrome:

Chrome's EditText

I have seen this design used in other applications such as Catch Notes (which looks beautiful).

So, is there any built-in option to change the EditText or we must draw it from scratch? Can anyone give link? I tried googling it, but I don't know the correct term

Thanks

Sanket Kachhela · Answer 1 · 2012-11-01T12:36:37.270

enter image description here you can achieving this by doing edittext background transparent.

so put your image in background of your layout and take a edittext inside this. and make edittext transpernt..

or try this

<EditText
        android:id="@+id/tracknumbertxt"
        android:layout_width="fill_parent"
        android:layout_height="30dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_toLeftOf="@+id/info"
        android:background="@drawable/enter_tracking_no"
        android:ems="10"
        android:hint="Enter Tracking No."
        android:paddingLeft="30dp"
        android:inputType="text"
        android:imeOptions="actionGo"

        android:singleLine="true" >

    </EditText>

here i have assign padding left..

so as per your design you have to set paddingRight property instead of paddingLeft..

Thanks, but what is imeOptions for? it does not seem to have any effect — hrsetyono, Nov 01 '12 at 12:55

score 2 · Accepted Answer · answered Nov 01 '12 at 12:37

Blindly use below layout style.. You will have your layout ready. Just replace the button backgrounds and your are done.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" 
    android:background="@android:color/darker_gray"
    android:padding="5dip"
    android:gravity="center">
    <LinearLayout android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_weight="1"
        android:background="@android:color/white"
        android:gravity="center"
        android:padding="5dip">
        <EditText android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="Type URL"
            android:layout_weight="1"
            android:background="@android:color/transparent"/>
        <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Refresh"/>
    </LinearLayout>
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="btn1"/>
    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="btn2"/>
</LinearLayout>

Backround transparent seems to be the easiest way to achieve this, even though it is not exactly the same, but close enough. Thanks — hrsetyono, Nov 01 '12 at 12:53

score 2 · Answer 3 · edited May 23 '17 at 10:25

There is nothing native to the SDK that can make it look like that. (maybe if you restrict use to only a certain version of the OS, then you can use that version's default styling, but isn't really a viable solution)

You will need to create an image to use as a background for the EditText to make it look how you want. The best options for text boxes and things like that are to either use a 9-patch image, or to create a layer-list XML file and describe your design that way. Either way, the file would go in the res/drawable folder in the project and you would set it as the background like so:

<EditText android:id="@+id/et_whatever"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    background="@drawable/YOUR_FILE_NAME" />

Yeah, I'm restricting for ICS+ only. So I guess I'm okay with background: transparent 9 Patch image seems interesting, I will give it a try sometimes — hrsetyono, Nov 01 '12 at 12:57

Android: Making EditText similar to Chrome's URL box

3 Answers3