4

I have some trouble with a TextInputEditText and his hint message if I use the last material library version com.google.android.material:material:1.2.0-alpha02 .. I set 5 lines scrollable textInputEditText and I want to show the hint message align to top margin of that text input. On layout editor appears in the correct position, but when I run the app the position is vertical centered. Why ?

Instead i'm not encounter this problem with com.google.android.material:material:1.1.0-beta02

This is my layout:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    android:id="@+id/sendMailContainer"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">


        <TextView
            android:id="@+id/popupTitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:layout_marginTop="20dp"
            android:text="@string/sendBusinessCard"
            android:textColor="@android:color/black"
            android:textSize="22sp" />

        <TextView
            android:id="@+id/subTitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/sendBusinessCard"
            android:textColor="@android:color/black"
            android:textSize="18sp"
            android:layout_below="@+id/popupTitle"
            android:layout_marginEnd="40dp"
            android:layout_marginStart="40dp"
            android:layout_marginTop="20dp"/>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/noteMessageContainer"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/subTitle"
            android:layout_marginEnd="40dp"
            android:layout_marginStart="40dp"
            android:layout_marginTop="10dp">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/noteMessage"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/emailText"
                android:inputType="text|textMultiLine|textCapSentences"
                android:textColor="@android:color/black"
                android:textColorHint="@color/gray9B"
                android:textSize="16sp"
                android:isScrollContainer="true"
                android:scrollbars="vertical"
                android:textIsSelectable="true"
                android:minLines="5"
                android:maxLines="5"
                android:gravity="top"/>

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

        <Button
            android:id="@+id/notePopupLeftButton"
            android:layout_width="180dp"
            android:layout_height="35dp"
            android:layout_alignParentStart="true"
            android:layout_below="@+id/noteMessageContainer"
            android:layout_marginBottom="20dp"
            android:layout_marginStart="20dp"
            android:layout_marginTop="40dp"
            android:background="#FF515151"
            android:text="@string/Cancel"
            android:textAllCaps="true"
            android:textColor="@android:color/white"
            android:textSize="16sp"
            android:textStyle="bold" />

        <Button
            android:id="@+id/notePopupRightButton"
            android:layout_width="180dp"
            android:layout_height="35dp"
            android:layout_alignParentEnd="true"
            android:layout_below="@+id/noteMessageContainer"
            android:layout_marginBottom="20dp"
            android:layout_marginEnd="20dp"
            android:layout_marginTop="40dp"
            android:background="#FF515151"
            android:text="@string/Send"
            android:textAllCaps="true"
            android:textColor="@android:color/white"
            android:textSize="16sp"
            android:textStyle="bold" />

    </RelativeLayout>
</ScrollView>

And this is two screenshot, one of the layout editor with hint in correct position and other is an app screenshot:

enter image description here enter image description here

aeroxr1
  • 1,014
  • 1
  • 14
  • 36
  • material:1.2.0-alpha02, I tried android:gravity="top|start" but didn't work. material:1.2.0-alpha01, android:gravity="top" is enough for this to work. I'm not sure what's going on – Master Zzzing Nov 21 '19 at 07:09
  • 1
    It should be releated to this [commit](https://github.com/material-components/material-components-android/commit/20f113212d6904c6f0ec9dc412e0b7fea8b80ab2) introduced by the version `1.2.0-alpha02`: [`TextInputLayout`] Adding support for the collapsed label position to be determined via the edit text **gravity**, such as center_horizontal. – Gabriele Mariotti Nov 21 '19 at 07:25
  • @GabrieleMariotti do you think is a bug or a sort of feature ? o.O – aeroxr1 Nov 21 '19 at 12:29
  • @aeroxr1 Not sure about it. In most of cases the TextInputLayout works with 1 line and it doesn't affect this case. Als the material guideline are followed in your case, it should be centered vertically. – Gabriele Mariotti Nov 21 '19 at 13:00
  • @GabrieleMariotti on material guideline is written that we should use a text area for a multiline edit text. But in what way can I create a material designe textArea without using an TextInputEditText ? https://material.io/components/text-fields/#input-types – aeroxr1 Nov 21 '19 at 13:09
  • @aeroxr1 About multiline: *These fields initially appear as single-line fields, which is useful for compact layouts that need to be able to accomodate large amounts of text.* For the textarea: *These should be used instead of multi-line fields on the web*. – Gabriele Mariotti Nov 21 '19 at 13:19

4 Answers4

16

You can use

android:gravity="top|start" 

property in your EditText of the address block and it shall act as the container's underlying controlling property and take the hint to top left corner.

Dharman
  • 30,962
  • 25
  • 85
  • 135
Darshan Komu
  • 176
  • 1
  • 10
2

Add android:gravity="top|start" to the EditText in the layout XML file.

Swati
  • 146
  • 1
  • 10
0

Add this code in your EditText / TextInputEditText:

android:gravity="top|start"
fcdt
  • 2,371
  • 5
  • 14
  • 26
Tippu Fisal Sheriff
  • 2,177
  • 11
  • 19
0

I faced the same problem. I tried to remove the inputType attribute and the height of edit text becomes now dependent on the lines attribute. Then my problem is solved