Drop-down / Spinner buttons, like those indicated in the design

Question

I am wondering how I can create a drop-down menu button / menu similar to those that we can see in the design specifications from Google and in the image below, so the list will expand below on the right. Do I need to set a custom layout for it instead of R.layout.support_simple_spinner_dropdown_item ?

Answer 1

Technically, it's just a Spinner with custom looks and styles.

I tried to create one that is similar to the one you published using AppCompat, working with custom drawings and with the view heights property, so it may not work fully for Android versions older than 5.0.

First, define our Spinner with its drop-down properties:

 <your.package.CustomSpinner android:id="@+id/spinner" style="@style/Widget.AppCompat.Spinner" android:layout_margin="10dp" android:layout_width="200dp" android:dropDownWidth="200dp" android:layout_height="?attr/dropdownListPreferredItemHeight" android:dropDownVerticalOffset="?attr/dropdownListPreferredItemHeight" android:background="@drawable/spinner_bg" android:popupBackground="@android:color/white" android:paddingRight="14dp" android:stateListAnimator="@drawable/spinner_sla" android:popupElevation="3dp" /> 

Important: we use the CustomSpinner class from this post because we need callbacks to know when the spinner opens the closure (for styling purposes).

Then we set up the counter: we use the custom view for the selected item (the layout defined below) to apply our styles and the default is AppCompat R.layout.support_simple_spinner_dropdown_item , but we can use a different layout to further customize the style.

 String[] data = {"Arial", "Calibri", "Helvetica", "Roboto", "Veranda"}; ArrayAdapter adapter = new ArrayAdapter<>(getContext(), R.layout.spinner_item_selected, data); adapter.setDropDownViewResource(R.layout.support_simple_spinner_dropdown_item); final CustomSpinner spinner = (CustomSpinner) view.findViewById(R.id.spinner); spinner.setAdapter(adapter); spinner.setSpinnerEventsListener(new CustomSpinner.OnSpinnerEventsListener() { public void onSpinnerOpened() { spinner.setSelected(true); } public void onSpinnerClosed() { spinner.setSelected(false); } }); 

And here is the spinner_item_selected.xml layout:

 <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/text1" style="?attr/spinnerDropDownItemStyle" android:singleLine="true" android:layout_width="match_parent" android:layout_height="?attr/dropdownListPreferredItemHeight" android:background="@drawable/abc_spinner_mtrl_am_alpha" android:ellipsize="marquee" /> 

Next, we need the above drawings:

spinner_bg.xml as the background of the counter:

 <selector xmlns:android="http://schemas.android.com/apk/res/android" android:exitFadeDuration="@android:integer/config_mediumAnimTime"> <item android:state_pressed="true" android:drawable="@android:color/white" /> <item android:state_selected="true" android:drawable="@android:color/white" /> <item> <inset android:insetLeft="-1dp" android:insetRight="-1dp"> <shape android:shape="rectangle"> <stroke android:width="1dp" android:color="#cccccc" /> <solid android:color="#f0f0f0" /> </shape> </inset> </item> </selector> 

spinner_sla.xml to animate counter elevation:

 <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true"> <set> <objectAnimator android:duration="@android:integer/config_mediumAnimTime" android:propertyName="translationZ" android:valueTo="3dp" /> </set> </item> <item android:state_selected="true"> <set> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="translationZ" android:valueTo="3dp" /> </set> </item> <item> <set> <objectAnimator android:duration="@android:integer/config_shortAnimTime" android:propertyName="translationZ" android:valueTo="0" /> </set> </item> </selector> 

This gives us this result (left crashed, right open):

If we want to use a counter with images, we will also need to define a custom look for the drop-down list.

Answer 2

You can use PopUpMenu https://developer.android.com/reference/android/widget/PopupMenu.html

 PopupMenu popup = new PopupMenu(context, view); for (Element e: elementsList) { popup.getMenu().add(e.id).setTitle(e.title); } popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() { public boolean onMenuItemClick(MenuItem item) { return true; } }); popup.show();