Search code examples
androidandroid-orientation

TextInputLayout and 2 Imageviews in an horizontal layout


I am trying to align a TextInputLayout and 2 imageViews in a Linear layout with horizontal orientation. For some reason, I am having difficulties positioning them in a horizontal layout. This is what I have tried so far.

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="3.0">

        <android.support.design.widget.TextInputLayout
            android:id="@+id/longDescriptionTextInputLayout"
            style="@style/textfieldbox"
            app:hintTextAppearance="@style/TextAppearence.App.TextInputLayout"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/longDescriptionTextInputEditText"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="@null"
            android:layout_weight="1"
            android:drawablePadding="15dp"
            android:textColor="@color/textInputEditTextColor"
            android:drawableStart="@drawable/ic_attach_file_black_24dp"
            android:drawableTint="@color/Gallery"
            android:hint="@string/longDesc"
            android:inputType="textEmailAddress"
            tools:ignore="MissingPrefix,UnusedAttribute" />

        </android.support.design.widget.TextInputLayout>

        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            android:src="@drawable/ic_mic_black_24dp" />

        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            android:src="@drawable/ic_volume_up_black_48dp"/>

    </LinearLayout>

I am unable to figure out what I am doing wrong. Any help is appreciated. Attaching an image of the output. The white space in the front is the TextInputEditText.

Final Result


Solution

  • There are two problems in your layout.

    The first is that your TextInputEditText includes these two attributes:

            android:layout_width="0dp"
            android:layout_weight="1"
    

    This is the generally-accepted pattern for using layout_weight, but weight only makes sense on direct children of the LinearLayout, and since this view is wrapped in a TextInputLayout they are not appropriate here. Change those to:

            android:layout_width="match_parent"
    

    The second problem is that you are specifying android:weightSum="3.0" on your LinearLayout, but its direct children only have weights that add up to 2.0. Either change the value of that attribute to 2.0 or delete the weightSum attr altogether (it really only causes problems).