I implement this successfully
After that I want to implement custom search bar with menu icon like this on TopAppBar and no suggest strings needed, but this custom search bar not created by me
Please help
MenuSearchBar.kt
@Composable
fun CustomSearchView(
modifier: Modifier = Modifier,
text: String,
onTextChange: (String) -> Unit,
onCloseClick: () -> Unit,
onSearchClick: (String) -> Unit
) {
Box(
modifier = modifier
.padding(20.dp)
.clip(CircleShape)
.background(Color(0XFF101921))
) {
TextField(value = text,
onValueChange = onTextChange,
colors = TextFieldDefaults.colors(
//containerColor = Color.Transparent,
cursorColor = MaterialTheme.colorScheme.onSurface,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
disabledIndicatorColor = Color.Transparent,
),
placeholder = { Text("Search") },
singleLine = true, keyboardOptions = KeyboardOptions(imeAction = ImeAction.Search),
keyboardActions = KeyboardActions(onSearch = { onSearchClick(text) }),
leadingIcon = {
Icon(
Icons.Filled.Search,
contentDescription = stringResource(id = R.string.content_description_search)
)
},
trailingIcon = {
if (text.isNotEmpty()) {
Icon(
modifier = Modifier.clickable {
if (text.isNotEmpty()) {
onTextChange("")
} else {
onCloseClick()
}
},
imageVector = Icons.Filled.Close,
contentDescription = stringResource(id = R.string.content_description_close)
)
}
}
)
}
}
HomeScreenView.kt
var mShowSearch by remember { mutableStateOf(false) }
var mTextSearch by remember { mutableStateOf(mHomeViewModel.searchQuery.value) }
if (mShowSearch) {
MenuSearchBar(text = mTextSearch,
onTextChange = { mTextSearch = it }) {
mShowSearch = false
}
}
@Composable
fun TopAppBarWithNavigationBar() {
ModalNavigationDrawer(
drawerContent = {
ModalDrawerSheet {
NavShape(mCredit, mDebit)
Spacer(Modifier.height(12.dp))
mNavItemsList.forEachIndexed { index, item ->
//Spacer(Modifier.height(6.dp))
NavigationDrawerItem(
label = { Text(text = item.label) },
selected = index == mSelectedItems,
onClick = {
//navController.navigate(item.route)
mSelectedItems = index
mCoroutineScope.launch { mDrawerState.close() }
Toast.makeText(mContext, item.label, Toast.LENGTH_SHORT).show()
},
icon = {
Icon(
imageVector = if (index == mSelectedItems) {
item.selectedIcon
} else item.unselectedIcon,
contentDescription = item.contentDescription
)
},
badge = {
item.badgeCount?.let { Text(text = item.badgeCount.toString()) }
},
modifier = Modifier.padding(NavigationDrawerItemDefaults.ItemPadding)
)
}
}
}, drawerState = mDrawerState
){
Scaffold(modifier = Modifier.fillMaxSize(), topBar = {
TopAppBar(title = {
Text(
text = stringResource(R.string.app_name),
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
}, navigationIcon = {
IconButton(onClick = {
mCoroutineScope.launch { mDrawerState.open() }
}) {
Icon(
imageVector = Icons.Filled.Menu,
contentDescription = stringResource(id = R.string.content_description_menu)
)
}
}, actions = {
IconButton(onClick = { mShowSearch = true }) {
Icon(
imageVector = Icons.Filled.Search,
contentDescription = stringResource(id = R.string.content_description_search)
)
}
val mAngle: Float by animateFloatAsState(
targetValue = if (mShowDropdownMenu) 180f else 0f,
label = stringResource(id = R.string.label_animate_sort_icon)
)
IconButton(onClick = { mShowDropdownMenu = !mShowDropdownMenu }) {
Icon(
modifier = Modifier.rotate(mAngle),
imageVector = Icons.Filled.ArrowDropDown,
contentDescription = stringResource(id = R.string.content_description_sort)
)
}
DropdownMenu(expanded = mShowDropdownMenu,
onDismissRequest = { mShowDropdownMenu = false }) {
DropdownMenuItem(text = { Text(text = stringResource(R.string.label_sort_by_name)) },
onClick = {
mHomeViewModel.updateSortOrder(SortOrder.BY_NAME)
mShowDropdownMenu = false
},
leadingIcon = {
Icon(
imageVector = Icons.Filled.SortByAlpha,
contentDescription = stringResource(id = R.string.content_description_sort_by_name)
)
})
DropdownMenuItem(text = { Text(text = stringResource(R.string.label_sort_by_date_created)) },
onClick = {
mHomeViewModel.updateSortOrder(SortOrder.BY_DATE)
mShowDropdownMenu = false
},
leadingIcon = {
Icon(
imageVector = Icons.Filled.ChangeCircle,
contentDescription = stringResource(id = R.string.content_description_sort_by_date)
)
})
}
}, scrollBehavior = mScrollBehavior
)
})
}