Caio Filipe Caio Filipe - 11 months ago 224
Android Question

Issue with alignment using TextInputLayout and Spinner

I'm having an alignment issue with the TextInputLayout and the Spinner, I want the Spinner underline aligned with the EditText underline inside of TextInputLayout. This is what I'm doing:

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="bottom">

<android.support.design.widget.TextInputLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">

<EditText
android:id="@+id/txt_discipline_code"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/lbl_input_discipline_code"/>
</android.support.design.widget.TextInputLayout>

<Spinner
android:id="@+id/spnnr_color_discipline_register"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/Base.Widget.AppCompat.Spinner.Underlined">

</Spinner>
</LinearLayout>


But the Spinner is a
little bit below. Anyone can help me? Thanks in advance.

EDIT:

Here is what I want: The Y underline of the EditText equal to the Y underline of the Spinner

I reach this alignment setting the Spinner layout_marginBottom to 1.5dp:

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="bottom">

<android.support.design.widget.TextInputLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">

<EditText
android:id="@+id/txt_discipline_code"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Code"/>
</android.support.design.widget.TextInputLayout>

<Spinner
android:id="@+id/spnnr_color_discipline_register"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/Base.Widget.AppCompat.Spinner.Underlined"
android:layout_marginBottom="1.5dp">

</Spinner>
</LinearLayout>


But I'm afraid this will not work properly in others device, with different size. It is the only solution?

Answer Source

From what you mention you want to achive this result:

enter image description here

use this code:

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

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/ic_launcher"
            android:id="@+id/imageView"
            android:padding="10dp"
            android:layout_weight="5" />

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">
            <EditText
                android:id="@+id/name_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="0.5"
                android:hint="Name"/>
        </android.support.design.widget.TextInputLayout>
    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/ic_launcher"
            android:id="@+id/imageView1"
            android:padding="10dp"

            android:layout_weight="1.1" />

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="-12dp"
            android:layout_marginStart="-12dp"
            android:layout_weight="0.6">
            <EditText
                android:id="@+id/code_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"

                android:hint="Code"/>
        </android.support.design.widget.TextInputLayout>

        <Spinner
            android:id="@+id/spnnr_color_discipline_register"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:layout_height="wrap_content"/>
    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/ic_launcher"
            android:id="@+id/imageView2"
            android:padding="10dp"
            android:layout_weight="5" />

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">
            <EditText
                android:id="@+id/foo_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="0.5"
                android:hint="Foo"/>
        </android.support.design.widget.TextInputLayout>
    </LinearLayout>


</LinearLayout>

Hope it helps!!!