Thursday, September 22, 2016

Android - How to change EditText border


1. Remove EditText Border XML

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#888e85"
    android:padding="10dp"
    >
    <EditText
        android:id="@+id/et"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|center_horizontal"
        android:textSize="25sp"
        android:hint="Write something here."
        android:background="@null"
        />
</android.support.design.widget.CoordinatorLayout>

2. Remove EditText Border Java

MainActivity.java [partial]

// Get the widget reference from XML layout
mEditText = (EditText) findViewById(R.id.et);

// Remove the border from EditText using code
mEditText.setBackground(null);

3. Change EditText Bottom Border Color

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#dfe6dd"
    android:padding="10dp"
    >
    <EditText
        android:id="@+id/et"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|center_horizontal"
        android:textSize="25sp"
        android:hint="Write something here."
        android:background="@drawable/edittext_bottom_border"
        />
</android.support.design.widget.CoordinatorLayout>
res/drawable/edittext_bottom_border.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="#fff"/>
            <stroke android:width="2dp" android:color="#ff0000"/>
        </shape>
    </item>
    <!-- Visible only the bottom border -->
    <item android:bottom="2dp">
        <shape android:shape="rectangle">
            <solid android:color="#fff"/>
        </shape>
    </item>
</layer-list>

4. Change EditText Border Color

res/drawable/edittext_border_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <stroke android:width="2dp" android:color="#e42f71"/>
        </shape>
    </item>
</selector>

5. Change EditText Border Color Programmatically

MainActivity.java [partial]

// Get the widget reference from XML layout
mEditText = (EditText) findViewById(R.id.et);

// Initialize a new GradientDrawable instance
GradientDrawable gd = new GradientDrawable();
// Set the gradient drawable background to transparent
gd.setColor(Color.parseColor("#00ffffff"));

// Set a border for the gradient drawable
gd.setStroke(2,Color.RED);

// Finally, apply the gradient drawable to the edit text background
mEditText.setBackground(gd);

6. Change EditText Border Style

res/drawable/edittext_border_style.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <stroke
                android:color="#5192e1"
                android:width="3dp"
                android:dashGap="3dp"
                android:dashWidth="3dp"
                />
        </shape>
    </item>
</selector>

7. EditText Rounded Corners Border

res/drawable/edittext_rounded_corners_border.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <stroke android:color="#be38df" android:width="2dp"/>
            <corners android:radius="10dp"/>
            <!--corners
                android:topLeftRadius="3dp"
                android:topRightRadius="5dp"
                android:bottomLeftRadius="7dp"
                android:bottomRightRadius="10dp"
                /-->
        </shape>
    </item>
</selector>

8. EditText Focus Border Color

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f1f8ff"
    android:padding="10dp"
    android:focusable="true"
    android:focusableInTouchMode="true"
    >
    <EditText
        android:id="@+id/et"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|center_horizontal"
        android:textSize="25sp"
        android:hint="Write something here."
        android:padding="5dp"
        android:background="@drawable/edittext_states"
        android:layout_marginTop="50dp"
        />
</android.support.design.widget.CoordinatorLayout>
res/drawable/edittext_states.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- edit text pressed state -->
    <item
        android:state_pressed="true"
        android:drawable="@drawable/edittext_pressed_state"
        />
    <!-- edit text focused state -->
    <item
        android:state_focused="true"
        android:drawable="@drawable/edittext_focused_state"
        />
    <!-- edit text default state -->
    <item
        android:drawable="@drawable/edittext_default_state"
        />
</selector>
res/drawable/edittext_pressed_state.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <stroke android:width="2dp" android:color="#274884"/>
            <gradient
                android:startColor="#b9daff"
                android:endColor="#7588ff"
                android:angle="90"
                />
        </shape>
    </item>
</selector>
res/drawable/edittext_focused_state.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <stroke android:width="2dp" android:color="#e42f71"/>
            <gradient
                android:startColor="#23f15d"
                android:endColor="#1caf45"
                android:angle="90"
                />
        </shape>
    </item>
</selector>
res/drawable/edittext_default_state.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <stroke android:width="2dp" android:color="#616161"/>
            <gradient
                android:startColor="#f4f4f4"
                android:endColor="#cccccc"
                android:angle="90"
                />
        </shape>
    </item>
</selector>