Search code examples
androidandroid-layoutandroid-spinnerandroid-textinputlayout

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?


Solution

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