Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TextInputLayout :How to give padding or margin to hint?

I have to use TextInputLayout of design support library in my project. I want to give space between hint and EditText in TextInputLayout. I set margin and padding in TextInputLayout and even inside EditText but both are not work.So how to solve this issue. Here i attach screen shot and my coding.

==============================Style=================================  <style name="TextHint" parent="Base.TextAppearance.AppCompat">     <item name="android:textSize">18sp</item>     <item name="android:textColor">@color/green</item> </style>    =============================XML===================================   <android.support.design.widget.TextInputLayout     android:layout_width="match_parent"     app:hintTextAppearance="@style/TextHint"     android:layout_marginTop="10dp"     android:layout_marginLeft="30dp"     android:layout_marginRight="30dp"     android:layout_height="wrap_content"> <EditText     android:layout_width="match_parent"     android:layout_height="50dp"     android:id="@+id/edttxtEmailAddress"     android:singleLine="true"     android:hint="@string/enter_valid_email"     android:paddingLeft="20dp"     android:textSize="20sp"     android:background="@drawable/rounded_common"/> </android.support.design.widget.TextInputLayout> 

enter image description here

like image 350
Pranav Avatar asked Sep 16 '15 13:09

Pranav


People also ask

How do you set different gravity for TextInputLayout hint and text in Android?

To set a different gravity for the EditText , don't set any gravity attributes in the layout, then set the EditText 's gravity programmatically, in your code. That is, after setContentView() , use findViewById() to get the EditText , then call setGravity(Gravity. CENTER_HORIZONTAL) on it.

How do I remove the default padding in TextInputLayout?

You can just set the start and end padding on the inner EditText to 0dp. Here's a screenshot with Show Layout Bounds turned on so you can see that the hints go all the way to the edge of the view.


2 Answers

The solution proposed by ganesh2shiv works for the most part, although I've found it also de-centres the hint text displayed inside the EditText when not focused.

A better trick is to set the desired paddingTop to the EditText but also embed the extra padding within the EditText's background. A fairly sane way to do this is to wrap your original background in a <layer-list> and set the <item android:top="..."> attribute to match the paddingTop of your EditText.

<android.support.design.widget.TextInputLayout   android:layout_width="match_parent"   android:layout_height="wrap_content">    <EditText     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:paddingTop="@dimen/floating_hint_margin"     android:background="@drawable/bg_edit_text" /> </android.support.design.widget.TextInputLayout> 

And the bg_edit_text.xml drawable file:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">   <item android:top="@dimen/floating_hint_margin">     <your original background; can be <bitmap> or <shape> or whatever./>   </item> </layer-list> 
like image 85
Radu Topor Avatar answered Sep 24 '22 07:09

Radu Topor


I have been looking for the solution to this question from last couple of days myself. After tearing my hairs out for hours I have finally found a simple workaround. What I have noticed is that if you have custom background set on EditText the android:paddingTop attribute simple doesn't work to alter the spacing b/w the hint text and edit text (I have really no idea why). So if you have set custom background to your EditText, you can use android:translationY attribute in the EditText.

So here's your solution:

<android.support.design.widget.TextInputLayout     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:layout_marginLeft="30dp"     android:layout_marginRight="30dp"     android:layout_marginTop="10dp"     app:hintTextAppearance="@style/TextHint">      <EditText         android:id="@+id/edttxtEmailAddress"         android:layout_width="match_parent"         android:layout_height="50dp"         android:background="@drawable/rounded_common"         android:hint="@string/enter_valid_email"         android:paddingLeft="20dp"          android:translationY="10dp"           android:singleLine="true"         android:textSize="20sp" /> </android.support.design.widget.TextInputLayout> 

Hope it helps. :)


Update: My sincerest apologies for the late update. I have been really busy lately. If you haven't realized yet let me tell you this answer is straight out ugly and wrong. In retrospect I think I was probably drunk when I wrote it. As mentioned by others it might cut the bottom region of the editText background but there's an ugly fix for it as well - you can set the height of the (parent) textInputLayout sightly bigger (how big? you are supposed to find it by trial and error, yuck!) than the (child) editText. I hope you all do realize that would be crazy so please don't do it. Check out the answer written by @Radu Topor, it's by far the best and clean solution to this question. Thanks.

like image 41
Ganesh Mohan Avatar answered Sep 26 '22 07:09

Ganesh Mohan