How can i get the selected Id of the DropDownMenuItem in Jetpack Compose

Question

I have a drop down spinner where i am able to get the category_title . how to get selected category_id i have created a two mutableStateOf of selected title and Id .is there any other way to get the selected category id

var mSelectedText by remember { mutableStateOf("") }

var mSelectedCategoryId by remember { mutableStateOf("") }

data class

data class MainCategory(
var category_id: String? = null,
var category_name: String? = null,
var categoryImage_url: String? = null,
var category_priority:Int? = null

)

list variable

val mCategories = mainCategories.mapTo(arrayListOf()){it.category_name}

DropDownMenu

 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun MainCatDownloadContent(
   mainCategories: Categories,
    mainCategoryOnClick: (categoryId: String, categoryTitle: 
String) -> Unit,
) {
var mExpanded by remember { mutableStateOf(false) }
val mCategories = mainCategories.mapTo(arrayListOf()){it.category_name}


var mSelectedText by remember { mutableStateOf("") }

var mSelectedCategoryId by remember { mutableStateOf("") }

var mTextFieldSize by remember { mutableStateOf(Size.Zero) }

// Up Icon when expanded and down icon when collapsed
val icon = if (mExpanded)
    Icons.Filled.KeyboardArrowUp
else
    Icons.Filled.KeyboardArrowDown

Column(Modifier.padding(20.dp)) {

    OutlinedTextField(
        value = mSelectedText, onValueChange = { mSelectedText = it },
        modifier = Modifier
            .fillMaxWidth()
            .onGloballyPositioned { coordinates ->
                mTextFieldSize = coordinates.size.toSize()
            },
        readOnly = true,
        label = { Text(text = "Select MainCategory")},
        trailingIcon = {
            Icon(icon,"contentDescription",
                Modifier.clickable { mExpanded = !mExpanded })
        }
    )



        mCategories.forEach{ mainCategory ->
            DropdownMenuItem(onClick = {
                mSelectedText = mainCategory.toString()
                mExpanded = false }) {
                
                Text(text = mainCategory.toString())
            }
        }
    }

}

For ex if there is list of items like this

[MainCategory(category_id=11, category_name=Fruits, 
  categoryImage_url=https:www category_priority=1), 
MainCategory(category_id=22, category_name=Vegetable , 
  categoryImage_url=https:www, category_priority=2), 
MainCategory(category_id=33, category_name=Greens, 
  categoryImage_url=https:www, category_priority=3)

if selected item lets assume is "Fruits"! how to get its category_id which is "11" and assign to the mSelectedCategoryId variable

score 1 · Answer 1 · answered Nov 09 '22 at 16:35

as @Gabriele Mariotti says you need to create rememberSaveable State Just elaborating his answer

I assume mainCategories: Categories // is a List<> so State you can by

 val selectCategory by rememberSaveable {
    mutableStateOf(mainCategories)
}

Other two variables which you have

var mSelectedText by remember { mutableStateOf("") }

var mSelectedCategoryId by remember { mutableStateOf("") }

Your are missing the DropDownMenu and i assume you just need to show the categoryName and get the selected id of the drop down menu from your question you can do this way

 Column(Modifier.padding(20.dp)) {

    OutlinedTextField(
        value = mSelectedText,
        onValueChange = { mSelectedText = it },
        modifier = Modifier
            .fillMaxWidth()
            .onGloballyPositioned { coordinates ->
                mTextFieldSize = coordinates.size.toSize()
            },
        readOnly = true,
        label = { Text(text = "Select MainCategory") },
        trailingIcon = {
            Icon(icon, "contentDescription",
                Modifier.clickable { mExpanded = !mExpanded })
        }
    )

    DropdownMenu(expanded = mExpanded,
        onDismissRequest = { mExpanded = false },
        modifier = Modifier.width(with(
            LocalDensity.current) {
            mTextFieldSize.width.toDp()
        })) {
        selectCategory.forEach {
            DropdownMenuItem(onClick = {
                mSelectedText = it.category_name.toString()
                mSelectedCategoryId = it.category_id.toString()
                mExpanded = false
            }) {

                Text(text = it.category_name.toString())
            }
        }
    }
}

Log.i(TAG,"Get the category_name: $mSelectedText and category_id: $mSelectedCategoryId" )

Gabriele Mariotti · Accepted Answer · 2022-11-09T13:21:39.820

0

You can use something different.

Add the @Parcelize annotation to the object:

@Parcelize
data class MainCategory(
    var category_id: String,
    var category_name: String,
) : Parcelable

Then you can use a list of MainCategory and save the state of the selected MainCategory using:

@Composable
fun MainCatDownloadContent(
    mainCategories: List<MainCategory>
){

    var mExpanded by remember { mutableStateOf(false) }
    var selectedCategory by rememberSaveable {
        mutableStateOf(mainCategories[0])
    }

    //...

    OutlinedTextField(
       value = value = selectedCategory.category_name + " - " + selectedCategory.category_id, //you can access all the properties inside the selectedCategory
       //..
    )
    //..
    mainCategories.forEach{ mainCategory ->
        DropdownMenuItem(
               onClick = {
                 selectedCategory = mainCategory
                 mExpanded = false 
              }
        ){
             //....
        }
    }

}

Finally in your case is better to use a ExposedDropdownMenuBox + ExposedDropdownMenu as described in this question.

edited Nov 09 '22 at 13:21

answered Nov 09 '22 at 10:23

Gabriele Mariotti

320,139
94
887
841

How to get the category_id of the selected item for ex [MainCategory(category_id=11, category_name=Fruits) MainCategory(category_id=22, category_name=Vegetable – Shiva s Nov 09 '22 at 11:06
@Shivas You can use: selectedCategory.category_id – Gabriele Mariotti Nov 09 '22 at 11:18
No can't assign or get the category_id event after parcelize the model class – Shiva s Nov 09 '22 at 12:09
@Shivas it is not clear what you are trying to achieve. – Gabriele Mariotti Nov 09 '22 at 12:20
have edited the question hope you get idea what i am trying to achieve after seeing the example from above – Shiva s Nov 09 '22 at 13:08
@Shivas In the `onCilck` lambda you can use `selectedCategory = mainCategory` to get the selected `MainCategory`. Then you can access all its attributes. You don't need 2 different variables to store `mSelectedCategoryId` and `mSelectedText`. If you want to use them just put in the `onClick` lambda `mSelectedCategoryId=mainCategory.category_id mSelectedText=mainCategory.category_name`. Check the updated answer and how the `TextField` is updated with `value = selectedCategory.category_name + " - " + selectedCategory.category_id` – Gabriele Mariotti Nov 09 '22 at 13:26

How can i get the selected Id of the DropDownMenuItem in Jetpack Compose

2 Answers2