Caio Filipe Caio Filipe - 1 month ago 54
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

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!!!

Comments