Search code examples
androidandroid-layoutandroid-edittextandroid-textinputlayoutandroid-custom-drawable

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


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.!


Solution

  • @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