android: How to set margin/padding between EditText custom background and InputTextLayout Label?

Question

Well I want to set margin/padding between EditText and InputTextLayout Label on Pressed State.

Here's my image of - desired design

Main Xml code - `

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="56dp"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    android:paddingLeft="24dp"
    android:paddingRight="24dp">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="24dp"
        android:src="@drawable/headphones_3" />

    <android.support.design.widget.TextInputLayout
        android:id="@+id/textLabel"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        android:visibility="gone"
        app:theme="@style/TextLabel">

        <EditText
            android:id="@+id/input_email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Email"
            android:inputType="textEmailAddress" />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/password_label"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="gone"
        app:theme="@style/TextLabel">

        <EditText
            android:id="@+id/input_password"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:background="@drawable/edit_text_style"
            android:drawablePadding="@dimen/floating_hint_margin"
            android:hint="Password"
            android:inputType="textPassword"
            android:paddingLeft="@dimen/floating_hint_margin" />

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

`

Though right now i applied custom theme only to 'Password" TextInputLayout.!

Here is the code of edit_text_style

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- focused state -->
<item android:state_focused="true">
    <shape android:shape="rectangle">
        <solid android:color="#80FFFFFF" />
        <stroke android:width=".5dp" android:color="@color/colorPrimary" />
        <corners android:radius="6dp" />
    </shape>
</item>
<!-- normal state -->
<item>
    <shape>
        <solid android:color="@android:color/transparent" />
        <stroke android:width="2dp" android:color="@color/colorPrimary" />
        <corners android:radius="22dp" />
    </shape>
</item>

The result which I got - Resulted Image

As you can see the Label goes up to cursor and there's no padding between Label and EditText background.

And how to set Label to where the EditText Background starts ( as it's on top of cursor right now )?

( Sorry for my bad english )

UPDATE : Let me explain you - See those images again.! What i want to set padding between TextInputLayout label ( which is password here when you focus it ). What you guys said was creating padding between custom drawable ( which is edit_text_style here ) cursor and Label, but i want padding between the drawable I added and Label ( password text which appear when it's on focused state ) & Also want to set Label position as it's goes upward to cursor start.!

android:paddingTop="10dp" for top or android:padding="10dp" for all — Arjun saini, Jul 28 '16 at 08:29
It's not working @Vickyexpert. I guess it's because of background which i added. As it increase height between cursor & label ( but not between background & label ) — Ansh, Jul 28 '16 at 08:34
@Er.Arjunsaini see the updated question ( slightly made it clear now :) ) — Ansh, Jul 28 '16 at 08:35

score 0 · Accepted Answer · answered Jul 28 '16 at 09:11

@Ansh.... You are set the drawable to your TextInputLayout and take padding to both edittext and TextInputLayout.....

In your way it's is not work well.... if you want to do like that you want with textinputlayout

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="56dp"
        android:gravity="center_horizontal"
        android:orientation="vertical"
        android:paddingLeft="24dp"
        android:paddingRight="24dp">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="24dp"
            android:src="@mipmap/ic_launcher" />

        <android.support.design.widget.TextInputLayout
            android:id="@+id/textLabel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginTop="8dp"
            android:padding="10dp"
            android:background="@drawable/edit_text_style"
            android:visibility="visible">

            <EditText
                android:id="@+id/input_email"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@null"
                android:hint="Email"
                android:inputType="textEmailAddress"
                android:padding="10dp" />
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/password_label"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/edit_text_style"
            android:padding="10dp"

            android:visibility="visible">

            <EditText
                android:id="@+id/input_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@null"
                android:padding="10dp"
                android:hint="Password"
                android:inputType="textPassword"

             />

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

And also in your drawable take only one rectangle or Rounded for better View

score -1 · Answer 2 · edited May 23 '17 at 11:51

-1

You can apply a custom style to your EditText (the ones where you need to have a padding onPressedState) :

<EditText
        android:id="@+id/input_email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Email"
        android:inputType="textEmailAddress" />

And the style :

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
       <item android:state_focused="true"
             android:state_pressed="true"
             android:drawable="@drawable/next_white">
             <inset android:insetLeft=""YOUR_PADDING_IN_DP dp"/>

Source : android:drawableLeft margin and/or padding

For the margin, it isn't possible to do it with drawable, but you can still define an animation which will do the trick :

In res/anim, create a margin_animation.xml :

    <?xml version="1.0" encoding="utf-8"?>

    <set xmlns:android="http://schemas.android.com/apk/res/android"              android:interpolator="@android:anim/accelerate_interpolator">
               <translate android:fromYDelta="0" android:toYDelta="100%" />
    </set>

Source : In Android, is it possible to set the margin from the drawable?

edited May 23 '17 at 11:51

Community

1
1

answered Jul 28 '16 at 08:31

Maxime Flament

721
1
7
24

This is not what i asked for.! thank you though. I want padding between drawable background and TextInputLayout label and also want to move label position as it always goes upward to cursor. – Ansh Jul 28 '16 at 08:42
Sorry, I misunderstood you. If I understood you, you need margin between password EditText and its label ? If so, you should try to apply a **margin="8dp"** for your TextInputLayout corresponding to the Password EditText For the cursor padding, you should add padding="your_padding" to your EditText I guess – Maxime Flament Jul 28 '16 at 08:49
Let me explain you - See those images again.! What i want to set padding between TextInputLayout label ( which is password here when you focus it ). What you guys said was creating padding between custom drawable ( which is edit_text_style here ) cursor and Label, but i want padding between the drawable I added and Label ( password text which appear when it's on focused state ). – Ansh Jul 28 '16 at 08:54
If you want your custom background and label being spaced, you need to add **** in one of your ** tags** in **edit_text_style.xml** – Maxime Flament Jul 28 '16 at 09:15

android: How to set margin/padding between EditText custom background and InputTextLayout Label?

2 Answers2