javaandroidandroid-edittextandroid-input-method

Android java android.support.design.widget.TextInputLayout with clear button


Is there any way to get something like that, plus the button to clean/delete the text when it contains something?

<android.support.design.widget.TextInputLayout
android:id="@+id/text_input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Inserisci Username">

                    <EditText
                        android:id="@+id/editText"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:hint="Username"
                        android:inputType="text" />

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

Solution

  • To clear the text from edit text

    @Override
    public void onClick(View v) {
        editText.getText().clear(); 
        //or you can use editText.setText("");
    }
    

    To put the button inside edittext just make the custom layout

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    >
    
    <RelativeLayout android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/oval"
        android:layout_centerInParent="true"
        >
    
        <android.support.design.widget.TextInputLayout
            android:id="@+id/text_input_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_toLeftOf="@+id/id_search_button"
            android:hint="Inserisci Username">
    
            <EditText
                android:id="@+id/editText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="username"
                android:background="@android:color/transparent"
                android:inputType="text" />
    
        </android.support.design.widget.TextInputLayout>
    
        <ImageButton android:id="@+id/id_search_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginRight="5dp"
            android:layout_centerVertical="true"
            android:background="@drawable/ic_clear_black"
            android:layout_alignParentEnd="true" />
    
    </RelativeLayout>
    
    </RelativeLayout>
    

    drawable oval

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
        <solid android:color="#ffffff"/>
        <stroke android:width="2px" android:color="#ff00ffff"/>
        <corners android:radius="24dp" />
    </shape>
    

    To hide focus of the editText when app starts

    add these lines inside activity tag of your class name in manifest file

    <activity
            android:name=".yourActivityName"
            android:windowSoftInputMode="stateAlwaysHidden"
            android:focusable="true"
            android:focusableInTouchMode="true"
            />
    

    You can set property of Layout like android:descendantFocusability="beforeDescendants" and android:focusableInTouchMode="true"

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:descendantFocusability="beforeDescendants"
    android:focusableInTouchMode="true"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    >