Android material design drop-down layout issue when array list added

user_13622208 0
Viewed 1586

I am facing some issue's with android material design drop-down menu items. Below are my issues with code and images. I implemented material design drop-down menu items and earlier the layout was absolutely fine. but after adding the array-list my layout width automatically get increased. below is mine code:

XML:

<com.google.android.material.textfield.TextInputLayout
                    android:id="@+id/text_input_layout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:layout_marginRight="5dp"
                    android:hint="Product Category"
                    app:endIconMode="dropdown_menu"
                    app:hintTextColor="@color/colorPrimary">

                    <AutoCompleteTextView
                        android:id="@+id/productCategoryDropdown"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:textCursorDrawable="@null"
                        android:paddingStart="10dp" />

                </com.google.android.material.textfield.TextInputLayout>


                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:weightSum="2">

                    <com.google.android.material.textfield.TextInputLayout
                        android:layout_width="wrap_content"
                        android:layout_height="65dp"
                        android:layout_marginStart="5dp"
                        android:layout_marginTop="7dp"
                        android:layout_marginEnd="5dp"
                        android:layout_weight="1.115"
                        android:hint="Product Weight"
                        app:hintTextColor="@color/colorPrimary">

                        <com.google.android.material.textfield.TextInputEditText
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:inputType="number"
                            android:textCursorDrawable="@null" />
                    </com.google.android.material.textfield.TextInputLayout>

                    <com.google.android.material.textfield.TextInputLayout
                        android:layout_width="wrap_content"
                        android:layout_height="65dp"
                        android:layout_marginStart="5dp"
                        android:layout_marginEnd="5dp"
                        android:layout_weight="0.9"
                        android:hint="Weight Unit"
                        app:endIconMode="dropdown_menu"
                        app:hintTextColor="@color/colorPrimary">

                        <AutoCompleteTextView
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:id="@+id/productWeightUnitDropdown"
                            android:paddingStart="5dp"
                            android:textCursorDrawable="@null"/>

                    </com.google.android.material.textfield.TextInputLayout>

                </LinearLayout>

My Layout after XML:

enter image description here

Java code for same:

Dropdown = view.findViewById(R.id.productWeightUnitDropdown);

        String[] weightUnit = new String[] {
                "kg (Kilogram)",
                "pcs (Piece)"
        };

        ArrayAdapter<String> weightUnitAdapter = new ArrayAdapter<>(
                getActivity(),
                R.layout.dropdown_item,
                weightUnit
        );

        weightUnitDropdown.setAdapter(weightUnitAdapter);

Drop-Down Item.XML

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:ellipsize="end"
    android:maxLines="1"
    android:textAppearance="?attr/textAppearanceSubtitle1">
</TextView>

After adding the java code width of the weight unit drop-down layout automatically increased. and now my layout looks like this. Not understanding why alignment gets disturbed.:

enter image description here

Also please help why in product category layout my selected item is coming over the hint. why it's not taking equal spacing like edit-text. The same issue is with the weight unit layout also. Compare product weight text and weight unit text, not in the same alignment. also, my keyboard opens when I click on this drop-down. I don't want a keyboard in this.

material-design android-layout android xml java
1 Answers

Had the same issue and as the documentation explains, you better use a style in your TextInputLayout to achieve the right effects and behaviors for ExposedDropdownMenus as follows:

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"

And also for TextInputLayout with TextInputEditText:

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

Result:

enter image description here

Code:

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

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/text_input_layout"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:hint="Product Category"
        app:endIconMode="dropdown_menu"
        app:hintTextColor="@color/colorPrimary">

        <AutoCompleteTextView
            android:id="@+id/productCategoryDropdown"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="none"
            android:paddingStart="10dp"
            android:paddingLeft="10dp"
            android:paddingEnd="10dp"
            android:paddingRight="10dp"
            android:textCursorDrawable="@null" />

    </com.google.android.material.textfield.TextInputLayout>

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

        <com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:layout_marginTop="5dp"
            android:layout_marginEnd="5dp"
            android:layout_marginRight="5dp"
            android:layout_weight="1"
            android:hint="Product Weight"
            app:hintTextColor="@color/colorPrimary">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="number" />
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:layout_marginTop="5dp"
            android:layout_marginEnd="5dp"
            android:layout_marginRight="5dp"
            android:layout_weight="1"
            android:hint="Weight Unit"
            app:hintTextColor="@color/colorPrimary">

            <AutoCompleteTextView
                android:id="@+id/productWeightUnitDropdown"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="none" />

        </com.google.android.material.textfield.TextInputLayout>

    </LinearLayout>

</LinearLayout>

P.S: No need to mention that it has some behavior issues with AutoCompleteTextView like when you tap on the widget, it show show the DropDown menus (and it shouldn't get any values and the like) which can be solved by a trick using onFocusChangeListener to tell when user tapped on the widget and has focus, hide the keyboard and make it to show only the list:

(state_layout.editText as AutoCompleteTextView).inputType = EditorInfo.TYPE_NULL
        state_layout.onFocusChangeListener = View.OnFocusChangeListener { _: View?, hasFocus ->
            if (hasFocus) {
                hideKeyboard(this)
            }
        }
user_44091130
Related