Android EditText bottom line color and theme chang

Question

hello all i need to remove the edittext default style i want to remove the selected portion from both the side on focus of edittext or on normal edittext i just want the simple black line on normal edittext and blue line on focus

I have created 1 xml:

 <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">

        <item android:state_pressed="true"><shape android:shape="line">

                <!-- Draw a 2dp width border around shape -->
                <stroke android:width="1dp" android:color="@color/blue" />
            </shape>
               <!-- Overlap the left, top and right border using background color  -->
        <item
            android:bottom="1dp"
            >
            <shape android:shape="rectangle">
                <solid android:color="@color/white"/>
            </shape>
        </item> <!-- pressed -->
        </item>
        <item android:state_focused="true"><shape android:shape="rectangle">

                <!-- Draw a 2dp width border around shape -->
                <stroke android:width="1dp" android:color="@color/blue" />
            </shape></item>
     <!-- focused -->
        <item><shape android:shape="rectangle">

                <!-- Draw a 2dp width border around shape -->
                <stroke android:width="1dp" android:color="@color/orange" />
            </shape></item>
     <!-- default -->

    </selector>

but it giving me RECTANGLE i just want LINE @bottom

Answer 1

Try this code:

edit_text.xml

<EditText
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:id="@+id/edit_text"
        android:background="@drawable/custom_edit_text_black_line"
 />

Put the Xml file in Drawable Folder (custom_edit_text_black_line.xml)

 <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/black" />

        </shape>
    </item>

    <item android:bottom="2dp">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
        </shape>
    </item>

    </layer-list>

Put the Xml file in Drawable Folder (custom_edit_text_blue_line.xml)

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid android:color="@color/colorPrimaryDark" />

    </shape>
</item>

<item android:bottom="2dp">
    <shape android:shape="rectangle">
        <solid android:color="#ffffff" />
    </shape>
</item>

</layer-list>

And in Activity write the below code :

 edit_text.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View v, boolean hasFocus) {

                if(hasFocus){

                         edit_text.setBackground(MainActivity.this.getResources().getDrawable(R.drawable.custom_edit_text_blue_line));
                } else{
                    edit_text.setBackground(MainActivity.this.getResources().getDrawable(R.drawable.custom_edit_text_black_line));
                }

            }
        });

Answer 2

Create the new xml file inside drawable folder. lets say

a.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" /> <!--background color of box-->
        </shape>
    </item>

    <item
        android:top="-2dp"
        android:right="-2dp"
        android:left="-2dp">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke
                android:width="1dp"
                android:color="<Focus color>" />  <!-- color of stroke -->
        </shape>
    </item>
</layer-list>

Create another new xml file in drawable, lets say

b.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" /> <!--background color of box-->
        </shape>
    </item>

    <item
        android:top="-2dp"
        android:right="-2dp"
        android:left="-2dp">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke
                android:width="1dp"
                android:color="#8AC42F" />  <!-- color of stroke -->
        </shape>
    </item>
</layer-list>

Create another new xml file in drawable. lets say

c.xml

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

Try this code.

this is a selector file. it has to be made background to the edittext. selector automatically switches between two drawable file acording to its (edittext's) state.

Using This EditText

<EditText
    android:id="@+id/id_Login_emal_et"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:background="@drawable/c"
    android:ems="10"
    android:padding="10dip"
    android:hint="Email"
    android:inputType="textEmailAddress"
    >

Answer 3

Use Selector for different edittext states:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_window_focused="false" android:state_enabled="true"
        android:drawable="@drawable/twitter_im_edittext_normal" />
  <item android:state_window_focused="false" android:state_enabled="false"
        android:drawable="@drawable/twitter_im_edittext_normal" />
  <item android:state_pressed="true" android:drawable="@drawable/twitter_im_edittext_normal" />
  <item android:state_enabled="true" android:state_focused="true" android:drawable="@drawable/twitter_im_edittext_focused" />
  <item android:state_enabled="true" android:drawable="@drawable/twitter_im_edittext_normal" />
  <item android:state_focused="true" android:drawable="@drawable/twitter_im_edittext_focused" />
  <item android:drawable="@drawable/twitter_im_edittext_normal" />
</selector>

and your drawable would be as Jayanth sample:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" /> <!--background color of box-->
        </shape>
    </item>

    <item
        android:top="-2dp"
        android:right="-2dp"
        android:left="-2dp">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke
                android:width="1dp"
                android:color="#8AC42F" />  <!-- color of stroke -->
        </shape>
    </item>
</layer-list>

Answer 4

Use properties that define color for edit text that is colorControlActivated, colorControlHighlight and colorControlNormal in your app theme for style.xml.

<style name="Theme.App.Base" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorControlNormal">@color/blackColor</item>
    <item name="colorControlActivated">@color/blueColor</item>
    <item name="colorControlHighlight">@color/blueColor</item>
</style>