How to add a character counter to a material design textfield in Android studio Java

Question

I am trying to add a character counter to a material design textfield, this is the textfield xml code:

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/outlinedTextFieldDescripcionUniverso"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_width="370dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="40dp"
    android:hint="@string/descripcion"
    android:textColorHint="@color/textos"
    app:counterEnabled="true"
    app:counterMaxLength="150"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/outlinedTextFieldNombreUniverso"> 

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/textInputEditTextDescripcionUniverso"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="top"
        android:inputType="textMultiLine"
        android:textColor="@color/textos" />
</com.google.android.material.textfield.TextInputLayout>

this works nicely and the counter appears,

textfield with counter

but then i want to make the textfield to be vertically bigger, so it works as a textarea where you can write multiple lines and always has the same height. So i change the layout height of textfield and textInputEditText, the code looks like this:

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/outlinedTextFieldDescripcionUniverso"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_width="370dp"
    android:layout_height="150dp"
    android:layout_marginTop="40dp"
    android:hint="@string/descripcion"
    android:textColorHint="@color/textos"
    app:counterEnabled="true"
    app:counterMaxLength="150"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/outlinedTextFieldNombreUniverso">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/textInputEditTextDescripcionUniverso"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="top"
        android:inputType="textMultiLine"
        android:textColor="@color/textos" />
</com.google.android.material.textfield.TextInputLayout>

bigger textfield without counter

And now the character counter has dissapeared (im assuming its hidden under the textfield). ¿Why doesn't it move to be at the end of the textfield?

¿is there any other way to do this? i have tried normal textfield and the same happens

Answer 1

I think it's because the TextInputLayout has a fixed height as I saw in your code android:layout_height="150dp"

Solution Code :

<com.google.android.material.textfield.TextInputLayout
android:id="@+id/outlinedTextFieldDescripcionUniverso"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="370dp"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:hint="@string/descripcion"
android:textColorHint="@color/textos"
app:counterEnabled="true"
app:counterMaxLength="150"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/outlinedTextFieldNombreUniverso">

<com.google.android.material.textfield.TextInputEditText
    android:id="@+id/textInputEditTextDescripcionUniverso"
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:gravity="top"
    android:inputType="textMultiLine"
    android:textColor="@color/textos" />
</com.google.android.material.textfield.TextInputLayout>

Feel free to ask if something is unclear. And Kindly mark it as the correct answer if it helps you so that in future this answer could help any other needy.😀