How to create a drop-down list?

Question

How can I create a drop-down list? I've tried a ScrollView but it's not exactly what I need.

Seems like you are looking for [Spinner](http://developer.android.com/guide/topics/ui/controls/spinner.html) — Shashank Kadne, Nov 14 '12 at 10:49
Possible answer for your question: https://stackoverflow.com/a/39678401/5875797 — pvrforpranavvr, Oct 11 '18 at 16:50

string.Empty · Answer 1 · 2021-01-13T10:08:23.410

358

simple / elegant / how I do it:

Preview:

enter image description here

XML:

<Spinner
    android:id="@+id/spinner1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:drawable/btn_dropdown"
    android:spinnerMode="dropdown"/>

spinnerMode set to dropdown is androids way to make a dropdown. (https://developer.android.com/reference/android/widget/Spinner#attr_android:spinnerMode)

Java:

//get the spinner from the xml.
Spinner dropdown = findViewById(R.id.spinner1);
//create a list of items for the spinner.
String[] items = new String[]{"1", "2", "three"};
//create an adapter to describe how the items are displayed, adapters are used in several places in android.
//There are multiple variations of this, but this is the basic variant.
ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_spinner_dropdown_item, items);
//set the spinners adapter to the previously created one.
dropdown.setAdapter(adapter);

Documentation:

This is the basics but there is more to be self taught with experimentation. https://developer.android.com/guide/topics/ui/controls/spinner.html

You can use a setOnItemSelectedListener with this. (https://developer.android.com/guide/topics/ui/controls/spinner.html#SelectListener)
You can add a strings list from xml. (https://developer.android.com/guide/topics/ui/controls/spinner.html#Populate)
There is an appCompat version of this view. (https://developer.android.com/reference/androidx/appcompat/widget/AppCompatSpinner)

edited Jan 13 '21 at 10:08

answered Jul 15 '13 at 08:47

string.Empty

10,393
4
39
67

1

Tayler you are using `String array` with static values, what if data comes from `web service` into the `spinner`(drop down)`? How should we do that? – Zubair Ahmed Aug 06 '13 at 06:57
3

same way, infact i do that on my apps. Create the spinner, get the array from the service, add the array to the adapter and add the adapter to the spinner. – string.Empty Aug 06 '13 at 07:00
@MartinezToni `this` in this example is referring to the activity. But yes you do need to pass a valid `Context` object into that parameter. – string.Empty Mar 10 '17 at 09:51
the background drawable you used is now obsolete – Alberto M Dec 13 '17 at 11:05
2

@AlbertoM Its not obsolete, its optional. You don't need to use the default background if you don't want too. But you can... – string.Empty Dec 13 '17 at 12:23
Some versions of android (5 and lower) require you to specify that the view you are finding is a spinner or you will get a "expecting spinner, found view" error. – John Lord Jan 21 '19 at 02:23
Error said: " cannot infer arguments unable to resolve constructor" when define ArrayAdapter – Majedur Jan 30 '19 at 06:41
Sounds like invalid Context to the Constructor of ArrayAdapter – string.Empty Jan 30 '19 at 07:10
good answer but it would also be handy to know how to use the result (like in other answers...) – SanThee Mar 30 '19 at 16:40
how do you change the design on the background? – chia yongkang Nov 19 '19 at 02:28
@chiayongkang You need a custom spinner style. Or if you just want to change the text then you can make a custom layout for the dropdown items. – string.Empty Nov 19 '19 at 05:42
Not working in my case, giving an error in `new ArrayAdapter<>(...)` (unable to resolve constructor) – Abdulbosid Mar 18 '20 at 18:01
That's _bizarre_. Who ever would have thought that a drop down list would be a spinner? – Richard Barraclough May 28 '20 at 09:01
@RichardBarraclough The name derived from older GUI elements into what it is today. https://en.wikipedia.org/wiki/Spinner_(computing) – string.Empty May 29 '20 at 08:48

score 126 · Answer 2 · edited Nov 27 '19 at 07:10

Spinner xml:

<Spinner
      android:id="@+id/spinner"
      android:layout_width="wrap_content"
      android:layout_height="match_parent" />

java:

public class MainActivity extends AppCompatActivity implements AdapterView.OnItemSelectedListener{

    private Spinner spinner;
    private static final String[] paths = {"item 1", "item 2", "item 3"};

    @Override
    protected void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_layout);

        spinner = (Spinner)findViewById(R.id.spinner);
        ArrayAdapter<String>adapter = new ArrayAdapter<String>(MainActivity.this,
                android.R.layout.simple_spinner_item,paths);

        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        spinner.setAdapter(adapter);
        spinner.setOnItemSelectedListener(this);

    }

    @Override
    public void onItemSelected(AdapterView<?> parent, View v, int position, long id) {

        switch (position) {
            case 0:
                // Whatever you want to happen when the first item gets selected
                break;
            case 1:
                // Whatever you want to happen when the second item gets selected
                break;
            case 2:
                // Whatever you want to happen when the thrid item gets selected
                break;

        }
    }

    @Override
    public void onNothingSelected(AdapterView<?> parent) {
            // TODO Auto-generated method stub
        }

}

I want to call Multiple value in Place of private static final String[]paths = {"item 1", "item 2", "item 3"}; help of php code taking data from my sql How can I Take these Value from mysql server and make dynamic and admin Updatable spinner — Ashish Shahi, May 31 '17 at 10:17

score 63 · Answer 3 · answered Apr 21 '15 at 16:45

enter image description here

Here is the code for it.

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<Spinner
    android:id="@+id/static_spinner"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="20dp"
    android:layout_marginTop="20dp" />

<Spinner
    android:id="@+id/dynamic_spinner"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" />

strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Ahotbrew.com - Dropdown</string> 
<string-array name="brew_array">
    <item>Cappuccino</item>
    <item>Espresso</item>
    <item>Mocha</item>
    <item>Caffè Americano</item>
    <item>Cafe Zorro</item>
</string-array>

MainActivity

Spinner staticSpinner = (Spinner) findViewById(R.id.static_spinner);

    // Create an ArrayAdapter using the string array and a default spinner
    ArrayAdapter<CharSequence> staticAdapter = ArrayAdapter
            .createFromResource(this, R.array.brew_array,
                    android.R.layout.simple_spinner_item);

    // Specify the layout to use when the list of choices appears
    staticAdapter
            .setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

    // Apply the adapter to the spinner
    staticSpinner.setAdapter(staticAdapter);

    Spinner dynamicSpinner = (Spinner) findViewById(R.id.dynamic_spinner);

    String[] items = new String[] { "Chai Latte", "Green Tea", "Black Tea" };

    ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
            android.R.layout.simple_spinner_item, items);

    dynamicSpinner.setAdapter(adapter);

    dynamicSpinner.setOnItemSelectedListener(new OnItemSelectedListener() {
        @Override
        public void onItemSelected(AdapterView<?> parent, View view,
                int position, long id) {
            Log.v("item", (String) parent.getItemAtPosition(position));
        }

        @Override
        public void onNothingSelected(AdapterView<?> parent) {
            // TODO Auto-generated method stub
        }
    });

This example is from http://www.ahotbrew.com/android-dropdown-spinner-example/

score 19 · Answer 4 · answered Dec 22 '14 at 08:08

This code is workig fine for me, hope it will help you too.

item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="1dip" >
    <TextView
        android:id="@+id/spinnerItem"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="2dp"
        android:textSize="12sp" >
    </TextView>
</RelativeLayout>

details.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_marginBottom="20dp"
        android:background="#FF00FF">   
    <Spinner
            android:id="@+id/dropStatus"
            android:layout_width="250dp"
            android:layout_height="30dp"
            android:layout_marginBottom="7dp"
            android:drawSelectorOnTop="true"/> 
</LinearLayout>

Adapter class:

import java.util.ArrayList;

import android.content.Context;
import android.content.res.Resources;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;

public class StatusAdapter extends ArrayAdapter<StatusBean> {

    private Context context;
    private ArrayList<StatusBean> statuses;
    public Resources res;
    StatusBean currRowVal = null;
    LayoutInflater inflater;

    public StatusAdapter(Context context,
            int textViewResourceId, ArrayList<StatusBean> statuses,
            Resources resLocal) {
        super(context, textViewResourceId, statuses);
        this.context = context;
        this.statuses = statuses;
        this.res = resLocal;        
        inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    @Override
    public View getDropDownView(int position, View convertView, ViewGroup parent) {
        return getCustomView(position, convertView, parent);
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        return getCustomView(position, convertView, parent);
    }

    public View getCustomView(int position, View convertView, ViewGroup parent) {
        View row = inflater.inflate(R.layout.status_item, parent, false);
        currRowVal = null;
        currRowVal = (StatusBean) statuses.get(position);
        TextView label = (TextView) row.findViewById(R.id.spinnerItem);
        if (position == 0) {
            label.setText("Please select status");
        } else {
            label.setText(currRowVal.getStatus());
        }

        return row;
    }
}

StatusBean class:

public class StatusBean {

    private String status;
    private String statusCode;

    public StatusBean() {
    }

    public StatusBean(String status,
            String statusCode) {
        this.status = status;
        this.statusCode = statusCode;
    }

    public String getStatus() {
        return status;
    }

    public void setStatus(String status) {
        this.status =  status;
    }

    public String getStatusCode() {
        return statusCode;
    }

    public void setStatusCode(String statusCode) {
        this.statusCode = statusCode;
    }
}

Activity class :

Inside onCreate methos:

static ArrayList<StatusBean> STATUS_LIST = new ArrayList<StatusBean>();

for(int i=0;i<=10;i++) {
STATUS_LIST.add(new StatusBean(“Status ”+i, “Stattus ”+i));
}

final Spinner  dropStatus = (Spinner)findViewById(R.id.dropStatus);
            Resources res = getResources(); 
            StatusAdapter adapter = new StatusAdapter(this, R.layout.item, SessionData. STATUS_LIST, res);
            dropStatus.setAdapter(adapter);

score 16 · Answer 5 · edited Jan 05 '20 at 16:25

You need a Spinner. Here it is an example:

spinner_1 = (Spinner) findViewById(R.id.spinner1);
spinner_1.setOnItemSelectedListener(this);
List<String> list = new ArrayList<String>(); 
list.add("RANJITH");
list.add("ARUN");
list.add("JEESMON");
list.add("NISAM");
list.add("SREEJITH");
list.add("SANJAY");
list.add("AKSHY");
list.add("FIROZ");
list.add("RAHUL");
list.add("ARJUN");
list.add("SAVIYO");
list.add("VISHNU");

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, list);
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
spinner_1.setAdapter(adapter);


spinner_2 = (Spinner) findViewById(R.id.spinner_two);
spinner_2.setOnItemSelectedListener(this);
List<String> city = new ArrayList<String>();
city.add("KASARGOD");
city.add("KANNUR");
city.add("THRISSUR");
city.add("KOZHIKODE");
city.add("TRIVANDRUM");
city.add("ERNAMKULLAM");
city.add("WAYANAD");
city.add("PALAKKAD");
city.add("ALAPUZHA");
city.add("IDUKKI");
city.add("KOTTAYAM");
city.add("PATHANAMTHITTA");
city.add("KOLLAM");
city.add("MALAPPURAM");
ArrayAdapter<String> adapter2 = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, city);
adapter2.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
spinner_2.setAdapter(adapter2);

@Override
public void onItemSelected(AdapterView<?> parent, View view, int position,
        long id) {
    // TODO Auto-generated method stub
    Toast.makeText(this, "YOUR SELECTION IS : " + parent.getItemAtPosition(position).toString(), Toast.LENGTH_SHORT).show();


}

@Override
public void onNothingSelected(AdapterView<?> parent) {
    // TODO Auto-generated method stub

}

score 9 · Answer 6 · answered Aug 09 '20 at 16:49

In Kotlin you can do as:

First, put this code in your layout

   <Spinner
            android:id="@+id/spinner"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"/>

Then you can do in onCreate() in Activity as ->

   val spinner = findViewById<Spinner>(R.id.spinner)
    val items = arrayOf("500g", "1kg", "2kg")
    val adapter = ArrayAdapter<String>(
        this,
        android.R.layout.simple_spinner_dropdown_item,
        items
    )
    spinner.setAdapter(adapter)

You can get listener from dropdown as:

 spinner.onItemSelectedListener = object : OnItemSelectedListener {
        override fun onItemSelected(
            arg0: AdapterView<*>?,
            arg1: View?,
            arg2: Int,
            arg3: Long
        ) {
            // Do what you want
            val items = spinner.selectedItem.toString()
            
        }

        override fun onNothingSelected(arg0: AdapterView<*>?) {}
    }

Where does the `R.layout.simple_spinner_dropdown_item` come into play? Does it wrap the ` — Forrest, Sep 08 '20 at 21:42

score 7 · Answer 7 · edited Oct 15 '18 at 08:52

Try this...

<string-array name="names">

        <item></item>
        <item>By Bus</item>
        <item>By Train</item>
        <item>By Van</item>
        <item>By Bike</item>
    </string-array>


String travel_type;


ArrayAdapter<String> myAdapter = new ArrayAdapter(AddNew_Trip.this,android.R.layout.simple_list_item_1, getResources().getStringArray(R.array.names)); 
        myAdapter.setDropDownViewResource(android.R.layout.simple_dropdown_item_1line); 
        mySpinner.setAdapter(myAdapter); 

        mySpinner.setOnItemSelectedListener( 
                new AdapterView.OnItemSelectedListener() { 

                    @Override 
                    public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) { 
                        travel_type = String.valueOf(adapterView.getItemAtPosition(i)); 
                        //Toast.makeText(Plan_Trip.this, travel_type, Toast.LENGTH_SHORT).show(); 
                    } 

                    @Override 
                    public void onNothingSelected(AdapterView<?> adapterView) { 

                    } 

                } 
        ); 
    }

score 6 · Answer 8 · answered Dec 10 '17 at 09:55

You can also use AppCompatSpinner widget:

<android.support.v7.widget.AppCompatSpinner
    android:id="@+id/spinner_order_type"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:backgroundTint="@color/red"/>

Inside your Activity class:

AppCompatSpinner spinOrderType = (AppCompatSpinner) findViewById(R.id.spinner_order_type);
List<String> categories = new ArrayList<String>();
        categories.add(getString(R.string.label_table_order));
        categories.add(getString(R.string.label_take_away));

        ArrayAdapter<String> dataAdapter = new ArrayAdapter<String>(mContext,
                R.layout.layout_spinner_item, categories);
        dataAdapter.setDropDownViewResource(R.layout.layout_spinner_item);
        spinOrderType.setAdapter(dataAdapter);
        spinOrderType.setSelection(0);

        spinOrderType.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> parent, View view, int position, long l) {
                String item = parent.getItemAtPosition(position).toString();
                Log.d(TAG, item);
            }

            @Override
            public void onNothingSelected(AdapterView<?> adapterView) {

            }
        });

layout_spinner_item.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:tools="http://schemas.android.com/tools"
    android:gravity="left"
    android:textSize="@dimen/text.size.large"
    android:textColor="@color/text.link"
    android:padding="@dimen/margin.3" />

Using Spinner widget in the XML alias' to AppCompatSpinner, there is no difference between and android.support.v7.widget.AppCompatSpinner/> From: https://developer.android.com/reference/android/support/v7/widget/AppCompatSpinner "This will automatically be used when you use Spinner in your layouts. You hould only need to manually use this class when writing custom views." — Kenneth Argo, Jun 11 '19 at 02:57

score 3 · Answer 9 · edited Mar 16 '19 at 14:40

Try this:

package example.spin.spinnerexample;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements AdapterView.OnItemSelectedListener{

    String[] bankNames={"BOI","SBI","HDFC","PNB","OBC"};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //Getting the instance of Spinner and applying OnItemSelectedListener on it
        Spinner spin = (Spinner) findViewById(R.id.simpleSpinner);
        spin.setOnItemSelectedListener(this);

        //Creating the ArrayAdapter instance having the bank name list
        ArrayAdapter aa = new ArrayAdapter(this,android.R.layout.simple_spinner_item,bankNames);
        aa.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        //Setting the ArrayAdapter data on the Spinner
        spin.setAdapter(aa);
    }


    //Performing action onItemSelected and onNothing selected
    @Override
    public void onItemSelected(AdapterView<?> arg0, View arg1, int position,long id) {
        Toast.makeText(getApplicationContext(), bankNames[position], Toast.LENGTH_LONG).show();
    }

    @Override
    public void onNothingSelected(AdapterView<?> arg0) {
        // TODO Auto-generated method stub

    }
}

activity_main.xml:-

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <Spinner
        android:id="@+id/simpleSpinner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="100dp" />

</RelativeLayout>

Could you please edit this post and explain how this code answers the question? — tshimkus, Mar 16 '19 at 14:57

score 3 · Answer 10 · answered Dec 19 '20 at 10:05

You can create spinner by these simple steps

first create spinner in xml

<Spinner
        android:id="@+id/select"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textColor="#070707"></Spinner>

now create string arary in values

 <string-array name="itemselect">
    <item>Repurchase</item>
    <item>Coupons</item>
</string-array>

now initialized in java file

public class MemberCart_Activity extends AppCompatActivity {

Spinner select;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_member_cart);

 
    select=findViewById(R.id.select);
 ArrayAdapter<String> myadapter=new ArrayAdapter<String>(Main_Activity.this,android.R.layout.simple_list_item_1,getResources().getStringArray(R.array.itemselect));
    myadapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
    select.setAdapter(myadapter);

score 0 · Answer 11 · edited Jan 31 '22 at 09:14

enter image description here

parseInt(binding.inputAge.text.toString()),

New android Ressource File (dropdown_item) in R.layout.dropdown_item, place textview inside.

TextView Code:

`<TextView android:id="@+id/textView"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:padding="14sp"
 android:text="textView"
 android:textColor="@color/black"
 android:textSize="16sp"
 android:textStyle="bold"
 xmlns:android="http://schemas.android.com/apk/res/android"/>`

enter image description here

// Bind Adapter and get Values binding.ddCity.setAdapter(showCity) binding.ddCity.selectedItem.toString()

Try to don't post code as image – Elikill58 Jan 31 '22 at 09:14 — Elikill58, Jan 31 '22 at 09:14

score 0 · Answer 12 · answered Jan 31 '22 at 06:48

0

Create Spinner inm XML android:entries="@array/locations" Then hover over array/locations and create ressource file

Ressource File should look like ` "New Yorkshire"

    </resources>`

Then

binding.spinner.selectedItem.toString()

answered Jan 31 '22 at 06:48

Popoloi

1

score 0 · Answer 13 · answered Oct 04 '22 at 18:12

To add your list to the spinner dynamically like from webservice add items in an ArrayList and load it to the spinner

<androidx.appcompat.widget.AppCompatSpinner
    android:id="@+id/catNameSpinner"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:spinnerMode="dropdown"       
    />

    spinner = findViewById(R.id.catNameSpinner);
    ArrayList<String> cat = new ArrayList<>();
    cat.add("Choose");

    ArrayAdapter<String> spinnerAdapter = new ArrayAdapter<String> 
    (this,android.R.layout.simple_dropdown_item_1line,cat);
    spinner.setAdapter(spinnerAdapter);

Aakash · Answer 14 · 2023-08-03T06:11:06.373

With Jetpack Compose, you can easy create a dropdown list:

Preview:

Code Snippet:

@Composable
fun SelectField(
    modifier: Modifier = Modifier,
    label: String,
    options: List<String>,
    onChange: (String)->Unit,
    value: String,
) {
    var menuExpanded by remember {
        mutableStateOf(false)
    }
    val scrollState = rememberScrollState()
    Column(modifier = modifier) {
        val colors = OutlinedTextFieldDefaults.colors()
        OutlinedTextField(
            value = value,
            colors = OutlinedTextFieldDefaults.colors(
                unfocusedContainerColor = Color.Transparent,
                focusedContainerColor = Color.Transparent,
                disabledBorderColor = MaterialTheme.colorScheme.onSurfaceVariant,
                focusedBorderColor = MaterialTheme.colorScheme.primary,
                disabledPlaceholderColor = MaterialTheme.colorScheme.onSurfaceVariant,
                disabledLabelColor = MaterialTheme.colorScheme.onSurfaceVariant,
                unfocusedTextColor = MaterialTheme.colorScheme.onSurface,
                focusedTextColor = MaterialTheme.colorScheme.onSurface,
                disabledTextColor = MaterialTheme.colorScheme.onSurface,
                disabledTrailingIconColor = MaterialTheme.colorScheme.onSurfaceVariant,
                unfocusedBorderColor = MaterialTheme.colorScheme.primary,
            ),
            enabled = false,
            modifier = Modifier.clickable {
                menuExpanded = !menuExpanded
            },
            onValueChange = {},
            label = {
                Text(text = label)
            },
            trailingIcon = {
                if (menuExpanded) {
                    IconButton(onClick = {
                        menuExpanded = false
                    }) {
                        Icon(
                            painter = painterResource(id = R.drawable.baseline_arrow_drop_up_24),
                            contentDescription = "Close menu"
                        )
                    }
                } else {
                    IconButton(onClick = {
                        menuExpanded = true
                    }) {
                        Icon(
                            painter = painterResource(id = R.drawable.baseline_arrow_drop_down_24),
                            contentDescription = "Open menu"
                        )
                    }
                }
            },
            maxLines = 1
        )
        if (menuExpanded) {
            val customModifier = if (options.size > 5) {
                Modifier.height(235.dp)
            } else {
                Modifier
            }
            DropdownMenu(
                modifier = customModifier,
                expanded = menuExpanded,
                scrollState = scrollState,
                onDismissRequest = {
                    menuExpanded = false
                },
                offset = DpOffset(x = 0.dp, y = 0.dp)
            ) {
                options.map {
                    val background = if(value == it) {
                        MaterialTheme.colorScheme.surfaceContainerHigh
                    } else {
                        MaterialTheme.colorScheme.surface
                    }
                    DropdownMenuItem(
                        modifier = Modifier.background(background),
                        text = {
                            Text(text = it)
                        },
                        onClick = {
                            menuExpanded = false
                            onChange(it)
                        }
                    )
                }
            }
        }
    }
}

Usage

@Preview
@Composable
fun SelectFieldPreview() {
    var age by remember {
        mutableStateOf("")
    }
    var gender by remember {
        mutableStateOf("")
    }
    val menuItems = listOf(
        "0-4",
        "5-9",
        "10-14",
        "15-19",
        "20-24",
        "25-29",
        "30-34",
        "35-39",
        "40-44",
        "45-49",
        "50-54",
        "55-59",
        "60-64",
        "65-69",
        "70-74",
        "75-79",
        "80-84",
        "85-89",
        "90-94",
        "95-99",
        "100+"
    )
    HFNCheckinsTheme {
        Scaffold { padding ->
            ElevatedCard(
                modifier = Modifier
                    .padding(padding)
                    .padding(12.dp),
            ) {
                Column(
                    modifier = Modifier.padding(12.dp),
                    verticalArrangement = Arrangement.spacedBy(8.dp)
                ) {
                    Text(text = "The Form", style = MaterialTheme.typography.titleLarge)
                    OutlinedTextField(
                        value = "", onValueChange = {}, label = {
                        Text(text = "Full Name")
                    }, modifier = Modifier.fillMaxWidth())
                    Row(
                        modifier = Modifier.padding(),
                        horizontalArrangement = Arrangement.spacedBy(
                            16.dp
                        )
                    ) {
                        SelectField(
                            options = menuItems,
                            modifier = Modifier
                                .padding(padding)
                                .weight(1f),
                            label = "Age",
                            value=age,
                            onChange = {
                                age = it
                            }
                        )
                        SelectField(
                            options = listOf("Female", "Male", "Unspecified"),
                            modifier = Modifier
                                .padding(padding)
                                .weight(1f),
                            label = "Gender",
                            value = gender,
                            onChange = {
                                gender = it
                            }
                        )
                    }
                }
            }
        }
    }
}

How to create a drop-down list?

14 Answers14

Preview:

Code Snippet:

Usage

Linked

Related