Change TextInputLayout underline color in android tutorial

How to change floating edittext below line color after selecting TextInputLayout .

TextInputLayout also known as floating edittext is now most popular in android developers because of its double functionality to contain text and edittext together and when user selects the EditText to submit their input then it will automatically slide up the text and become the EditText visible. So here is the complete step by step tutorial for Change TextInputLayout underline color in android example tutorial.

android-project-download-code-button

Please follow the below steps :

1. Open your project’s build.gradle ( Module : app ) file.

build-gradle-app

2. Please add below code inside your build.gradle ( Module : app ) file.

compile 'com.android.support:appcompat-v7:24.0.0'
compile 'com.android.support:design:24.2.1'

3. Screenshot of build.gradle ( Module : app ) file after adding above code.

textinputlayout-library

Here your go friends….Now We are going start coding

How to Change TextInputLayout underline color in android example tutorial.

Add below line code inside your styles.xml file for changing TextInputLayout underline color after selection .

<item name="colorControlActivated">#009688</item>

Add below line code inside your styles.xml file for changing TextInputLayout underline color without selection .

<item name="colorControlNormal">#2196F3</item>

Code for MainActivity.java file.

package com.android_examples.floatingedittextunderline_android_examplescom;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

Code for activity_main.xml layout file.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:context="com.android_examples.floatingedittextunderline_android_examplescom.MainActivity">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/TextInputLayout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/edittext2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter Password"
            android:layout_below="@+id/TextInputLayout1"

             />

    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/TextInputLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/TextInputLayout2">

        <EditText
            android:id="@+id/edittext1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter Username"
            android:layout_below="@+id/TextInputLayout1"

            />

    </android.support.design.widget.TextInputLayout>

</RelativeLayout>

Code for styles.xml file.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="colorControlNormal">#2196F3</item>

        <item name="colorControlActivated">#009688</item>

    </style>

</resources>

Screenshots:

textinputlayout-line-1

 

Change TextInputLayout underline color in android example tutorial

Click here to download Change TextInputLayout underline color in android example tutorial project with source code.

4 Comments

  1. sir make an app like e commerce

  2. colorControlNormal inside AppTheme also results into backButton color on Toolbar. Please suggest any other scenario to change underline color of TextInputLayout.

Leave a Reply

Your email address will not be published. Required fields are marked *