CODEWITHSUNDEEP
androidandroid-textinputlayoutandroid-textinputedittext
Riddhi Daftary
Riddhi Daftary

Reputation: 301

Customize Text Input Layout

I want to apply a border to a TextInputLayout as shown in the image.

Right now, it looks like this:

Image of what the product currently looks like

But, I need it to look like this (i.e. label is placed within border):

What the products should look like

The code that I have implemented for my EditText is as below.

<customviews.MyEditText
             android:id="@+id/email"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:background="@drawable/edittext_border_background"
             android:layout_marginEnd="30dp"
             android:layout_marginStart="30dp"
             android:layout_marginTop="45dp"
             android:gravity="start"
             android:hint="@string/hint_username"
             android:imeOptions="actionNext|actionDone"
             android:inputType="textEmailAddress|text"
             android:padding="10dp"
             android:textColor="@color/primary_text"
             android:textColorHint="@color/secondary_text"
             android:textSize="16sp"
            />

And, for the border, I have applied the background edittext_border_background.xml like so:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:padding="20dp">
    <solid android:color="#FFFFFF"/>
    <corners
        android:bottomRightRadius="0dp"
        android:bottomLeftRadius="0dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="0dp"/>
    <stroke 
        android:width="1dip"
        android:color="@color/primary" />

</shape>

When I tried to apply the border to theTextInputLayout, however, it doesn't give the expected output.

Editor's note: not sure what this image is, seems to be the same as the first one

Can anyone help me?

Upvotes: 10

Views: 9847

Answers (4)

Naveen Kumar
Naveen Kumar

Reputation: 11

This will work 'hint' is inside in box .I  changed this property and add roundbox in background
  app:boxBackgroundMode="none" and app:boxCollapsedPaddingTop="5dp"
This is layout and change design according to your need.

<com.google.android.material.textfield.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="52dp"
                android:layout_marginTop="30dp"
                android:background="@drawable/round_box"
                app:boxBackgroundMode="none"
                app:boxCollapsedPaddingTop="5dp">
                <com.google.android.material.textfield.TextInputEditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@null"
                    android:gravity="center_vertical"
                    android:hint="hint"
                    android:inputType="textMultiLine"
                    android:maxLines="6"
                    android:paddingStart="5dp"
                    android:textSize="14dp" />
            </com.google.android.material.textfield.TextInputLayout>

round_box.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/listview_background_shape">
    <stroke android:width="2dp"
        android:color="#000000"
        />
    <padding android:left="2dp"
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp" />
    <corners android:radius="4dp" />
    <solid android:color="#2C000000" />
</shape>

    enter code here

sorry for my bad english

Upvotes: 0

Francis
Francis

Reputation: 7104

You should use Material Design style for Outline Box. Just simple use:

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

in TextInputLayout. See Text Field for Android in Material Design Guide

enter image description here

Upvotes: 10

AYUSH ARYA
AYUSH ARYA

Reputation: 113

Change color and border as per your use and where ever in any of your views where you want to apply this border and it in background property like... android:background="@drawable/border"

Use this code to make drawable file with name border in android drawable folder in resource directory.

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
   <solid android:color="#ffffff" />
    <stroke
       android:width="1dip"
       android:color="#000000" />
    <corners android:radius="4dip" />
    <padding
        android:bottom="0dip"
        android:left="0dip"
        android:right="0dip"
        android:top="0dip" />
</shape>

Upvotes: 0

Stanley Ko
Stanley Ko

Reputation: 3497

With "android:state_focused" option, you can archive your goal.

Details: https://stackoverflow.com/a/23417544/850347

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

<item android:state_enabled="true"
        android:state_focused="true">
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle"
        android:padding="20dp">
        <solid android:color="#FFFFFF"/>
        <corners
        android:bottomRightRadius="0dp"
        android:bottomLeftRadius="0dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="0dp"/>
    <stroke 
        android:width="1dip"
        android:color="#0000FF" />

</shape>
</item>
<item android:state_enabled="true">
          <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle"
        android:padding="20dp">
        <solid android:color="#FFFFFF"/>
        <corners
        android:bottomRightRadius="0dp"
        android:bottomLeftRadius="0dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="0dp"/>
    <stroke 
        android:width="1dip"
        android:color="@color/primary" />

</shape>
</item>

And, in java code:

editText.setBackgroundResource(R.drawable.yourFile);

Upvotes: 0

Related Questions