Home » Android » android – How to align widget.TextInputLayout with MaterialSpinner view?

android – How to align widget.TextInputLayout with MaterialSpinner view?

Posted by: admin June 15, 2020 Leave a comment

Questions:

I have a specific question concerning the use of the MaterialSpinner view.

I want the spinner to be perfectly aligned to the right of an EditText wrapped in a android.support.design.widget.TextInputLayout view group for floating label support.

I’ve tried both LinearLayout and RelativeLayout (using the align to layout attributes) and none are working properly.

I end up with something looking like this.

Below is my layout so far:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <android.support.design.widget.TextInputLayout
            android:id="@+id/weightWidget"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <EditText
                android:id="@+id/weight"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:ems="10"
                android:hint="@string/weight"
                android:inputType="number" />
        </android.support.design.widget.TextInputLayout>

        <fr.ganfra.materialspinner.MaterialSpinner
            android:id="@+id/spinner"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:entries="@array/weights_unit_array"
            app:ms_alignLabels="false"
            app:ms_arrowColor="#0000FF"
            app:ms_arrowSize="16dp"
            app:ms_floatingLabelColor="#00FF00"
            app:ms_floatingLabelText="floating label"
            app:ms_hint="@string/unit"
            app:ms_multiline="false"
            app:spinnerMode="dialog" />
    </LinearLayout>
</LinearLayout>

In the preview of the layout designer in Android Studio, it seems that it’s aligned but when I run it either on the emulator or a real device, the views are not aligned as shown in the previous screenshot.

How to&Answers:

I decided not to use the MaterialSpinner view although it looks good with the floating label.

I’m using a regular Spinner with the .underline style applied:

        <Spinner
            android:id="@+id/height_unit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:entries="@array/heights_unit_array"
            android:prompt="@string/unit"
            android:spinnerMode="dialog"
            style="@style/Widget.AppCompat.Spinner.Underlined"
            android:layout_gravity="bottom"/>