CODEWITHSUNDEEP
androidandroid-textinputlayoutmaterial-componentsmaterial-components-android
Gober
Gober

Reputation: 3672

How to change hint padding for TextInputLayout when using the new prefixText?

I have tried implementing TextInputLayout with the new prefixText, using com.google.android.material:material:1.2.0-alpha02. This is a very cool feature, but when I add a prefix text the hint label floats up and aligns after the prefix. This does not look good, especially if you have more input fields on the same page without prefix, the floating labels does not align.

screenshot

Relevant parts of my layout code:

 <LinearLayout
       android:id="@+id/login_input_fields"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical">

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/login_username_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/username_hint"
        app:prefixText="Prefix">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/login_username_edit_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="number"
            android:singleLine="true" />
    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/login_password_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/default_margin"
        android:imeOptions="actionDone"
        app:endIconMode="password_toggle">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/password_hint"
            android:inputType="textPassword"
            android:singleLine="true"/>

    </com.google.android.material.textfield.TextInputLayout>
</LinearLayout>

Upvotes: 5

Views: 3223

Answers (2)

Livnat Avikasis
Livnat Avikasis

Reputation: 21

 val prefixView = textInputLayout.findViewById<AppCompatTextView>(com.google.android.material.R.id.textinput_prefix_text)
  prefixView.layoutParams = LinearLayout.LayoutParams(
      ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT)
  prefixView.gravity = Gravity.CENTER

you may find more details here https://github.com/material-components/material-components-android/issues/773 if you wish to light prefix with input text

Upvotes: 2

Gabriele Mariotti
Gabriele Mariotti

Reputation: 364005

To use the Material Components Library you have to use a Theme.MaterialComponents.* theme.

Using your layout with this theme:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
 ...
</style>

enter image description here

Using your layout with this theme:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
  ...
</style>

enter image description here

Upvotes: 5

Related Questions