How to change the border colour for the button and changing the colour for underline in the editText?

Question

I have tried many methods but my issues is not solved.I am facing the issue in changing the colour for the border of the button and underline in the editText. In changing the colour of the button the background colour should be transparent but the border of the button should be visible in white colour. EditText underline colour is should be in white. How to create the design like below image.

Please help me how to design Login with Facebook button border is in white colour should be visible and also edittext underline colour should be in white.

use this linnk http://stackoverflow.com/questions/7690416/android-border-for-button — android_jain, Mar 13 '17 at 05:46
Possible duplicate of [Android - border for button](http://stackoverflow.com/questions/7690416/android-border-for-button) — android_jain, Mar 13 '17 at 06:24

rafsanahmad007 · Accepted Answer · 2017-03-15T05:17:20.683

2

Try this:

For Edittext underline color use:

 <EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="20dp"
    android:layout_marginTop="20dp"
    android:backgroundTint="@android:color/white"
    android:hint="Username"
    android:paddingLeft="20dp"
    android:textColorHint="@android:color/white" />

For Button background:

drawable/background.xml:

 <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--stroke width and color-->
    <stroke
        android:width="2dp"
        android:color="@android:color/white" />

    <!-- corner radius-->
    <corners
        android:radius="0dp" />
</shape>

And in layout:

 <Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/background"
    android:text="Login With Facebook"
    android:textColor="@android:color/white" />

EDIT

backgroungTint will not work on Pre lollipop devices

try using this:

 <android.support.v7.widget.AppCompatEditText
    android:id="@+id/my_appcompat_imageview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:backgroundTint="@android:color/white"
    android:hint="Username"
    android:textColorHint="@android:color/white"
    android:tint="@android:color/white" />

output:

edited Mar 15 '17 at 05:17

answered Mar 13 '17 at 07:00

rafsanahmad007

23,683
6
47
62

I solved this , please help me how to solve changing the editText underline colour – Prabha Karan Mar 13 '17 at 07:02
in your `values/color.xml` u need to add this `#ffffffff` – rafsanahmad007 Mar 13 '17 at 07:06
The error is shown in "R.color.White" error is should pass the resolved colour instead of the resource id – Prabha Karan Mar 13 '17 at 07:08
still not changed the color – Prabha Karan Mar 13 '17 at 07:18
sorry for late reply,the edittext underline colour changes is android sdk emulator but when i run in real device the colour was not changed – Prabha Karan Mar 15 '17 at 05:01
I using the custom edittext,when i run the app in lollypop device the colour changes – Prabha Karan Mar 15 '17 at 05:22
that why i edited the answer ....`backgroungTint will not work on Pre lollipop devices` – rafsanahmad007 Mar 15 '17 at 05:23
Is there any way to change the colour for pre lollypop device by using the custom edittext – Prabha Karan Mar 15 '17 at 05:24
u can use `style` ..see this [ANSWER](http://stackoverflow.com/questions/21480398/edittext-underline-below-text-property) – rafsanahmad007 Mar 15 '17 at 05:28
I dont know how to apply that style and it not working – Prabha Karan Mar 15 '17 at 05:33
pls go through the answer properly ...it is the 2nd answer...if yet problem not solved post another question so that everyone can help – rafsanahmad007 Mar 15 '17 at 05:37

score 1 · Answer 2 · edited May 23 '17 at 12:02

1

Border for Button: You can set a drawable shape as background of button to change it's border color. See this

Change EditText UnderLine: You can add colorHighlight and colorNormal to your BaseTheme. It will change the underline color of editText. See this.

Hope this helps.

edited May 23 '17 at 12:02

Community

1
1

answered Mar 13 '17 at 05:52

tahsinRupam

6,325
1
18
34

I used your answer but the background color only changed – Prabha Karan Mar 13 '17 at 05:57
try using android:theme="@style/Theme.App.Base to your editText. – tahsinRupam Mar 13 '17 at 05:58
I don't know how to use theme will you help me – Prabha Karan Mar 13 '17 at 05:59
Sure. Copy the solution from the link and paste it in styles.xml in value folder. Then apply the theme to your editText by adding this - android:theme="@style/Theme.App.Base . Hope this works. – tahsinRupam Mar 13 '17 at 06:01
But the solution is created in the drawable folder then how i can use in style folder – Prabha Karan Mar 13 '17 at 06:04
Sorry, I thought you are talking about editText underine. If you are applying border for button, just set button background as android:background="@drawable/button_boarder" – tahsinRupam Mar 13 '17 at 06:09
I applied your condition but the background colour is not transparent – Prabha Karan Mar 13 '17 at 06:13
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/137915/discussion-between-tahsinrupam-and-prabha-karan). – tahsinRupam Mar 13 '17 at 06:14

Nikhil Sharma · Answer 3 · 2017-03-13T07:01:25.790

Just make button_bg.xml file in drawable and put given code below

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item>
    <shape android:shape="rectangle">

        <solid android:color="#30055fab" />
        <stroke android:width="2dp" android:color="#FFFFFF" />
        <corners android:radius="0dp" />
    </shape>
</item>

and define button background as above created xml file

<Button
        android:id="@+id/btnLogin"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/_10dp"
        android:background="@drawable/button_bg"
        android:text="Log in"
        android:textColor="@android:color/white" />

To add line in editext try this code

 <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/_10dp"

        android:textColorHint="@android:color/white"
        app:hintEnabled="true">

        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/transparent"
            android:hint="@string/password"
            android:inputType="textPassword"
            android:padding="@dimen/_10dp"
            android:textColor="@android:color/white"
            android:textColorHint="@android:color/white" />

        <view
            android:layout_width="match_parent"
            android:background="@android:color/white"
            android:layout_height="1dp"/>
    </android.support.design.widget.TextInputLayout>

Do you know how to change the colour for underline in edittext — Prabha Karan, Mar 13 '17 at 06:46
Check my edited post xml for adding line under editext the way you wanted to..enjoy :) — Nikhil Sharma, Mar 13 '17 at 07:02

How to change the border colour for the button and changing the colour for underline in the editText?

3 Answers3