19

I have some EditText in my code and I want to make the bottom border of it a bit thinner. Couldn't find anything about it in the Internet, maybe anyone here can help me with it.

What I have: enter image description here

What I want: enter image description here

Nikola Despotoski
  • 49,966
  • 15
  • 119
  • 148
Ronaldo
  • 774
  • 3
  • 8
  • 29

2 Answers2

47

Try like this for focus effects:

edt_bg_selector.xml :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/edt_bg_selected" android:state_focused="true"/>
<item android:drawable="@drawable/edt_bg_normal" android:state_focused="false"/>
</selector>

edt_bg_normal.xml :

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
    android:bottom="1dp"
    android:left="-2dp"
    android:right="-2dp"
    android:top="-2dp">
    <shape android:shape="rectangle" >
        <stroke
            android:width="1px"
            android:color="#FF000000" />

        <solid android:color="#00FFFFFF" />

        <padding
            android:bottom="5dp"
            android:left="5dp"
            android:right="5dp"
            android:top="5dp" />
    </shape>
</item>
</layer-list>

edt_bg_selected.xml :

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
    android:bottom="1dp"
    android:left="-2dp"
    android:right="-2dp"
    android:top="-2dp">
    <shape android:shape="rectangle" >
        <stroke
            android:width="1px"
            android:color="#ff0000" />

        <solid android:color="#00FFFFFF" />

        <padding
            android:bottom="5dp"
            android:left="5dp"
            android:right="5dp"
            android:top="5dp" />
    </shape>
</item>
</layer-list>

and change your edit text like:

 <EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/edt_bg_selector" />
Srikanth
  • 1,555
  • 12
  • 20
  • one more question, which attribute I must change to make the boarder just a litte bit thicker? @Srikanth – Ronaldo Jan 05 '16 at 14:06
  • I don't think we can draw drawable thinner than 1px as it is basic unit. you can set 0.01dp like that. but it will round to 1px only by using 'px = (int)(scale * dp + 0.5)' this formula where scale is '1 for mdpi', '1.5 for hdpi', '2 for xhdpi' and '3 for xxhdpi'. – Srikanth Jan 05 '16 at 15:00
  • If you want more thinner than 1px, try by change your drawable color to more transparent color like '#26000000'. check 'http://stackoverflow.com/questions/15852122/hex-transparency-in-colors' for transparency percentages. – Srikanth Jan 05 '16 at 15:01
  • 1
    No, i wanted to have it a little bit thicker not thinner...and changing the `android:width` to _2px _ or _ 3px_ doesn't change anything @Srikanth – Ronaldo Jan 06 '16 at 00:51
  • changing like android:width="2px" is working fine for me. – Srikanth Jan 06 '16 at 05:22
  • When I add this code to my project using android studio, in the design editor lines become white (as i defined), but when i run it on a phone, the lines are black again (as it is in default). Why? – MoOoG Mar 03 '17 at 13:23
  • @Srikanth Thanks :) – Subhan Ali Jul 20 '17 at 07:19
3

Try like this below:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@null"
        android:hint="Biografie"
        android:textColorHint="#99000000"
        android:drawableLeft="@drawable/quote_img" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="#80000000" />
</LinearLayout>

Or

keep this btm_line_shape.xml in your drawable folder:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
    android:bottom="1dp"
    android:left="-2dp"
    android:right="-2dp"
    android:top="-2dp">
    <shape android:shape="rectangle" >
        <stroke
            android:width="1px"
            android:color="#FF000000" />

        <solid android:color="#00FFFFFF" />

        <padding
            android:bottom="5dp"
            android:left="5dp"
            android:right="5dp"
            android:top="5dp" />
    </shape>
</item>
</layer-list>

and 

<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Biografie"
    android:textColorHint="#99000000"
    android:background="@drawable/btm_line_shape"
    android:drawableLeft="@drawable/quote_image" />
Prashant Jajal
  • 3,469
  • 5
  • 24
  • 38
Srikanth
  • 1,555
  • 12
  • 20
  • Thank you, worked perfectly! Do you know how i can chance the focus color of the EditText when its clicked? @Srikanth – Ronaldo Jan 05 '16 at 09:41
  • Check this: http://stackoverflow.com/questions/23417443/change-border-color-when-edittext-is-focused – Srikanth Jan 05 '16 at 10:18
  • change above btm_line_shape.xml like in this link and apply it as background. – Srikanth Jan 05 '16 at 10:20
  • Right now with the code of the link this happens: When I click on the `EditText`, a rectangle around the`EditText` is quickly shown but i just wanted the border line to stay in a red color when it is focused. @Srikanth – Ronaldo Jan 05 '16 at 10:52
  • i posted another answer check it. – Srikanth Jan 05 '16 at 10:54