Spinner dropdown items: how is width determined?

Question

I have a Spinner in my app, with customized dropdown views. This is what the layout of the dropdown items look like:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:focusable="false"
    android:orientation="horizontal">

    <androidx.appcompat.widget.AppCompatImageButton
        android:id="@+id/leadingButton"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_weight="0" />

    <FrameLayout
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_gravity="center_vertical"
        android:layout_weight="1">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:id="@+id/dropdown_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <androidx.appcompat.widget.AppCompatTextView
                android:id="@+id/dropdown_text_subtitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/dropdown_text" />
        </RelativeLayout>
    </FrameLayout>

    <androidx.appcompat.widget.AppCompatImageButton
        android:id="@+id/trailingButton"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_weight="0" />
</LinearLayout>

Android Studio warns me that my FrameLayout is useless. But when I take out the FrameLayout the dropdown views become narrow, and don't align with the spinner itself anymore. I have had the same problem when I tried to rewrite the drop-down items with a ConstraintLayout: the dropdown list became narrow, about half of the Spinner's size, and could not display all text, even though the ConstraintLayout had android:layout_width="match_parent".

A sketch to illustrate what I mean:

Why does this happen? How can I predict what the width of the dropdown menu will be based on the layout?

I find this dropdown view sizing quite magical

Answer 1

Did you look at the source code of the Spinner class? I just did. Here's what I found (API 27 Sources):

The spinner uses a ListView internally (first LOL), backed by DropdownPopup (private class):

private class DropdownPopup extends ListPopupWindow implements SpinnerPopup {

Before looking at it, look at ListPopupWindow because has a lot of info about the problems it has to deal with. It's a big class but among these things, you can see:

    private int mDropDownHeight = ViewGroup.LayoutParams.WRAP_CONTENT;
    private int mDropDownWidth = ViewGroup.LayoutParams.WRAP_CONTENT;
    private int mDropDownHorizontalOffset;
    private int mDropDownVerticalOffset;

It appears the DropDown is -by default- WRAPPING the content based upon the base class, however, the DropDownPopup that drives (and contains the adapter with all the items in the spinner) also has a void computeContentWidth() { method.

This method is called from the show() method, so before showing the popup, this computation happens every time.

I think here's part of the answer you're looking for:

        void computeContentWidth() {
            final Drawable background = getBackground();
            int hOffset = 0;
            if (background != null) {
                background.getPadding(mTempRect);
                hOffset = isLayoutRtl() ? mTempRect.right : -mTempRect.left;
            } else {
                mTempRect.left = mTempRect.right = 0;
            }

            final int spinnerPaddingLeft = Spinner.this.getPaddingLeft();
            final int spinnerPaddingRight = Spinner.this.getPaddingRight();
            final int spinnerWidth = Spinner.this.getWidth();

            if (mDropDownWidth == WRAP_CONTENT) {
                int contentWidth =  measureContentWidth(
                        (SpinnerAdapter) mAdapter, getBackground());
                final int contentWidthLimit = mContext.getResources()
                        .getDisplayMetrics().widthPixels - mTempRect.left - mTempRect.right;
                if (contentWidth > contentWidthLimit) {
                    contentWidth = contentWidthLimit;
                }
                setContentWidth(Math.max(
                       contentWidth, spinnerWidth - spinnerPaddingLeft - spinnerPaddingRight));
            } else if (mDropDownWidth == MATCH_PARENT) {
                setContentWidth(spinnerWidth - spinnerPaddingLeft - spinnerPaddingRight);
            } else {
                setContentWidth(mDropDownWidth);
            }

            if (isLayoutRtl()) {
                hOffset += spinnerWidth - spinnerPaddingRight - getWidth();
            } else {
                hOffset += spinnerPaddingLeft;
            }
            setHorizontalOffset(hOffset);
        }

You may want to DEBUG and set breakpoints here to observe what these values are and what they mean.

The other piece there is the setContentWidth() method. This method is from the ListPopupWindow, and looks like:

/**
     * Sets the width of the popup window by the size of its content. The final width may be
     * larger to accommodate styled window dressing.
     *
     * @param width Desired width of content in pixels.
     */
    public void setContentWidth(int width) {
        Drawable popupBackground = mPopup.getBackground();
        if (popupBackground != null) {
            popupBackground.getPadding(mTempRect);
            mDropDownWidth = mTempRect.left + mTempRect.right + width;
        } else {
            setWidth(width);
        }
    }

And setWidth (also in that class) all it does is:

    /**
     * Sets the width of the popup window in pixels. Can also be {@link #MATCH_PARENT}
     * or {@link #WRAP_CONTENT}.
     *
     * @param width Width of the popup window.
     */
    public void setWidth(int width) {
        mDropDownWidth = width;
    }

This mDropDownWidth seems used all over the place, but also made me found this other method in ListPopupWindow...

    /**
     * Sets the width of the popup window by the size of its content. The final width may be
     * larger to accommodate styled window dressing.
     *
     * @param width Desired width of content in pixels.
     */
    public void setContentWidth(int width) {
        Drawable popupBackground = mPopup.getBackground();
        if (popupBackground != null) {
            popupBackground.getPadding(mTempRect);
            mDropDownWidth = mTempRect.left + mTempRect.right + width;
        } else {
            setWidth(width);
        }
    }

So there you have it, more logic needed including the "window dressing" (?)

I agree the Spinner is a badly designed class (or rather, with outdated design) and even more so with the name (at this Google I/O in 2019, they actually explained in one of the sessions why the name "Spinner" hint: it comes from the 1st android prototypes). By looking at all this code, it would take a few hours to figure out what the spinner is trying to do and how it works, but the trip won't be pleasant.

Good luck.

I will reiterate my advice to use ConstraintLayout which you said you were familiar with; at the very least, discard weights. By looking at how this works (ListView!!!) the weight calculation warrants a 2nd measure/layout pass, which is not only extremely inefficient and not needed, but also may be causing issues with the internal data adapter this DropDown thing manages so the "list" is displayed.

Ultimately, another class is also involved, this is all presented in a PopupView. PopupViews are what you see when you open a Menu item for example, and are very hard to customize sometimes, depending what you want to do.

Why Google chose this approach at the time, I don't know, but it certainly warrants an update and Material Design hasn't brought much to the table in this regard yet, as it will always be incomplete or in alpha state a year behind anything else.

Answer 2

It is telling you the FrameLayout is useless because it has a single child view ( the Relative Layout).

Your Framelayout has width defined as so:

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

Your relative layout has its width defined as:

<RelativeLayout
    android:layout_width="match_parent"

So just removing the FrameLayout means that a different "rule" is in place for the width.

To truly replace the FrameLayout with the RelativeLayout it should look like this:

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