Issue with alignment using TextInputLayout and Spinner

Question

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:

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?

Darcydarda

check my editted answer – Luciennelucier

Answer 1

From what you mention you want to achive this result:

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

Luciennelucier

Thank you for the answer, but I want to achieve this -> [link] (imgur.com/a/ivuWg), the line with the telephone icon. – Darcydarda

why you didnt say that from the beginning? – Luciennelucier

Sorry if not I'm not clear (english is not my native lang), I told you about the telephone icon just to situate you where to look, I don't want the icon, just want the behavior which the EditText and the Spinner in that line has. I edited my question to make more clear. Found a solution too, but I'm not sure if is valid for every dispositive. Thank you! – Darcydarda

@helldawg13 edittext and spinner will be aligned ? Are you sure? – Hartle

@OvechkinPavel try it...and let me know if they are – Luciennelucier

@KostasDrak hi, I'm having difficulty relating your solution to the OP. but it seems that OP has been edited as well. Im looking for a way to align Spinner underline to EditText as well. can you guide me – Belt

Your layout weights will not work, if you want that to work properly, then make either height(if vertical layout) or width(if horizontal layout) to 0dp. And nesting the weighted layouts will slowdown the performance. – Peltry