Develop Reference

Problem with buttons showing on top layer with jetpack compose

I'm trying to convert my old XML layout to #Composable classes in a test app I made, but I encountered a problem with my "loading" screen.
The app has a button to fetch quotes from a free API and, when clicked, a loading screen should appear on top of the page, effectively blocking possible further interactions with the button.
The loading screen was previously RelativeLayout with a ProgressBar inside.
Now with Compose I cannot manage to have this loading screen to be "on top" because the buttons still show above it and remain clickable.
The same "wrong" behaviour can also be reproduced with XML layouts when using MaterialButtons, whereas with AppCompatButtons the issue is solved.
Is there a way to make this work in compose?
p.s. here is my solution with Compose
#Composable
fun QuoteButton(text: String, onClick: () -> Unit) {
Button(
onClick,
shape = RoundedCornerShape(20.dp),
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 20.dp, vertical = 5.dp)
) {
Text(text = text)
}
}
#Composable
fun QuoteLoading(
isLoading: MutableState<Boolean>,
content: #Composable () -> Unit
) = if (isLoading.value) {
Box(
Modifier
.fillMaxSize()
.background(Color.Black.copy(alpha = 0.3f))
.pointerInput(Unit) {}
) {
CircularProgressIndicator(modifier = Modifier.align(Alignment.Center))
}
content()
} else {
content()
}
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ComposeTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
QuoteLoading(isLoading = loadingState) {
Column {
QuoteDisplay(textState)
QuoteButton(getString(R.string.button_fetch_quote)) {
viewModel.setEvent(Event.GetQuote)
}
QuoteButton(getString(R.string.button_save_quote)) {
viewModel.setEvent(Event.SaveQuote)
}
QuoteButton(getString(R.string.button_clear_quotes)) {
viewModel.setEvent(Event.ClearQuote)
}
}
}
}
}
}
}
}
private val DarkColorPalette = darkColors(
primary = Color(0xFFBB86FC),
primaryVariant = Color(0xFF3700B3),
secondary = Color(0xFF03DAC5)
)
private val LightColorPalette = lightColors(
primary = Color(0xFF6200EE),
primaryVariant = Color(0xFF3700B3),
secondary = Color(0xFF03DAC5)
)
#Composable
fun ComposeTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: #Composable () -> Unit) {
MaterialTheme(
colors = if (darkTheme) DarkColorPalette else LightColorPalette,
content = content
)
}

First of all put your progress bar in a dialogue that is not cancellable by any input except loading has been finished.
#Composable
fun QuoteLoading(
isLoading: MutableState<Boolean>,
content: #Composable () -> Unit
) = if (isLoading.value) {
Box(
Modifier
.fillMaxSize()
.background(Color.Black.copy(alpha = 0.3f))
.pointerInput(Unit) {}
) {
Dialog(
onDismissRequest = onDismiss,
properties = DialogProperties(dismissOnBackPress = false,
dismissOnClickOutside = false),
content = {
CircularProgressIndicator()
}
)
}
content()
} else {
content()
}

Jetpack Compose LazyColumn inside Scrollabe Column

here's my situation: I have to show in my app a detail of a record I receive from API. Inside this view, I may or may not need to show some data coming from another viewmodel, based on a field.
Here my code:
#OptIn(ExperimentalMaterial3Api::class)
#Composable
fun ViewDetail(viewModel: MainViewModel, alias: String?, otherViewModel: OtherViewModel) {
viewModel.get(alias)
Scaffold {
val isLoading by viewModel.isLoading.collectAsState()
val details by viewModel.details.collectAsState()
when {
isLoading -> LoadingUi()
else -> Details(details, otherViewModel)
}
}
}
#OptIn(ExperimentalMaterial3Api::class)
#Composable
private fun Details(details: Foo?, otherViewModel: OtherViewModel) {
details?.let { sh ->
val scrollState = rememberScrollState()
Column(
modifier = Modifier
.fillMaxSize()
.verticalScroll(scrollState),
) {
Text(sh.title, fontSize = 24.sp, lineHeight = 30.sp)
Text(text = sh.description)
if (sh.other.isNotEmpty()) {
otherViewModel.load(sh.other)
val others by otherViewModel.list.collectAsState()
Others(others)
}
}
}
}
#OptIn(ExperimentalMaterial3Api::class)
#Composable
private fun Others(others: Flow<PagingData<Other>>) {
val items: LazyPagingItems<Other> = others.collectAsLazyPagingItems()
LazyColumn(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight(),
contentPadding = PaddingValues(16.dp),
) {
items(items = items) { item ->
if (item != null) {
Text(text = item.title, fontSize = 24.sp)
Spacer(modifier = Modifier.height(4.dp))
Text(text = item.description)
}
}
if (items.itemCount == 0) {
item { EmptyContent() }
}
}
}
All the description here may be very long, both on the main Details body or in the Others (when present), so here's why the scroll behaviour requested.
Problem: I get this error:
Vertically scrollable component was measured with an infinity maximum height constraints, which is disallowed. One of the common reasons is nesting layouts like LazyColumn and Column(Modifier.verticalScroll()).
I hoped that .wrapContentHeight() inside LazyColumn would do the trick, but to no avail.
Is this the right way to do it?
Context: all packages are updated to the latest versions available on maven

The main idea here is to merge your Column with LazyColumn.
As your code is not runnable, I'm giving more a pseudo code, which should theoretically work.
Also calling otherViewModel.load(sh.other) directly from Composable builder is a mistake. According to thinking in compose, to get best performance your view should be side effects free. To solve this issue Compose have special side effect functions. Right now your code is gonna be called on each recomposition.
if (sh.other.isNotEmpty()) {
LaunchedEffect(Unit) {
otherViewModel.load(sh.other)
}
}
val others by otherViewModel.list.collectAsState()
LazyColumn(
modifier = Modifier
.fillMaxSize()
.wrapContentHeight(),
contentPadding = PaddingValues(16.dp),
) {
item {
Text(sh.title, fontSize = 24.sp, lineHeight = 30.sp)
Text(text = sh.description)
}
items(items = items) { item ->
if (item != null) {
Text(text = item.title, fontSize = 24.sp)
Spacer(modifier = Modifier.height(4.dp))
Text(text = item.description)
}
}
if (items.itemCount == 0) {
item { EmptyContent() }
}
}

You can use a system like the following
#Composable
fun Test() {
Box(Modifier.systemBarsPadding()) {
Details()
}
}
#Composable
fun Details() {
LazyColumn(Modifier.fillMaxSize()) {
item {
Box(Modifier.background(Color.Cyan).padding(16.dp)) {
Text(text = "Hello World!")
}
}
item {
Box(Modifier.background(Color.Yellow).padding(16.dp)) {
Text(text = "Another data")
}
}
item {
Others()
}
}
}
#Composable
fun Others() {
val values = MutableList(50) { it }
values.forEach {
Box(
Modifier
.fillMaxWidth()
.padding(16.dp)
) {
Text(text = "Value = $it")
}
}
}
The result with scroll is:

Avoid accidental tap/touch in a Jetpack Compose Slider which is placed inside in a scrollable column

I have a Slider which is placed inside a Column which is scrollable. When i scroll through the components sometimes accidentally slider value changes because of accidental touches. How can i avoid this?
Should i be disable taps on slider? If yes how can i do it?
Is there any alternate like Nested scroll instead of Column which can prevent this from happening?
#Composable
fun ColumnScope.FilterRange(
title: String,
range: ClosedFloatingPointRange<Float>,
rangeText: String,
valueRange: ClosedFloatingPointRange<Float>,
onValueChange: (ClosedFloatingPointRange<Float>) -> Unit,
) {
Spacer(modifier = Modifier.height(Size_Regular))
Text(
text = title,
style = MaterialTheme.typography.h6
)
Spacer(modifier = Modifier.height(Size_X_Small))
Text(
text = rangeText,
style = MaterialTheme.typography.subtitle1
)
RangeSlider(
modifier = Modifier.fillMaxWidth(),
values = range,
valueRange = valueRange,
onValueChange = {
onValueChange(it)
})
Spacer(modifier = Modifier.height(Size_Small))
Divider(thickness = DividerSize)
}

I would disable the RangeSlider and only enable it when you tap on it. You disable it by tapping anywhere else within the Column. This is a similar behavior used to mimic losing focus. Here's an example:
class MainActivity : ComponentActivity() {
#ExperimentalMaterialApi
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
startActivity(intent)
setContent {
var rangeEndabled by remember { mutableStateOf(false)}.apply { this.value }
var sliderPosition by remember { mutableStateOf(0f..100f) }
Text(text = sliderPosition.toString())
Column(modifier = Modifier
.fillMaxSize()
.verticalScroll(rememberScrollState())
.pointerInput(Unit) {
detectTapGestures(
onTap = {
rangeEndabled = false
}
)
}) {
repeat(30) {
Text(it.toString())
}
RangeSlider(
enabled = rangeEndabled,
values = sliderPosition,
onValueChange = { sliderPosition = it },
valueRange = 0f..100f,
onValueChangeFinished = {
// launch some business logic update with the state you hold
// viewModel.updateSelectedSliderValue(sliderPosition)
},
modifier = Modifier.pointerInput(Unit) {
detectTapGestures(
onTap = {
rangeEndabled = true
}
)
}
)
repeat(30) {
Text(it.toString())
}
}
}
}
}

Jetpack Compose LazyColumn recomposition with remember()

Ive been trying out Jetpack Compose and ran into something with the LazyColumn list and remember().
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyApp{
MyScreen()
}
}
}
}
#Composable
fun MyApp(content: #Composable () -> Unit){
ComposeTestTheme {
// A surface container using the 'background' color from the theme
Surface(color = MaterialTheme.colors.background) {
content()
}
}
}
#Composable
fun MyScreen( names: List<String> = List(1000) {"Poofy #$it"}) {
NameList( names, Modifier.fillMaxHeight())
}
#Composable
fun NameList( names: List<String>, modifier: Modifier = Modifier ){
LazyColumn( modifier = modifier ){
items( items = names ) { name ->
val counter = remember{ mutableStateOf(0) }
Row(){
Text(text = "Hello $name")
Counter(
count = counter.value,
updateCount = { newCount -> counter.value = newCount } )
}
Divider(color = Color.Black)
}
}
}
#Composable
fun Counter(count: Int, updateCount: (Int) -> Unit) {
Button( onClick = {updateCount(count+1)} ){
Text("Clicked $count times")
}
}
This runs and creates a list of 1000 rows where each row says "Hello Poofy #N" followed by a button that says "Clicked N times".
It all works fine but if I click a button to update its count that count will not persist when it is scrolled offscreen and back on.
The LazyColumn "recycling" recomposes the row and the count. In the above sample the counter is hoisted up into NameList() but I have tried it unhoisted in Counter(). Neither works.
What is the proper way to remember the count? Must I store it in an array in the activity or something?

The representations for items are recycled, and with the new index the value of remember is reset. This is expected behavior, and you should not expect this value to persist.
You don't need to keep it in the activity, you just need to move it out of the LazyColumn. For example, you can store it in a mutable state list, as shown here:
val counters = remember { names.map { 0 }.toMutableStateList() }
LazyColumn( modifier = modifier ){
itemsIndexed(items = names) { i, name ->
Row(){
Text(text = "Hello $name")
Counter(
count = counters[i],
updateCount = { newCount -> counters[i] = newCount } )
}
Divider(color = Color.Black)
}
}
Or in a mutable state map:
val counters = remember { mutableStateMapOf<Int, Int>() }
LazyColumn( modifier = modifier ){
itemsIndexed(items = names) { i, name ->
Row(){
Text(text = "Hello $name")
Counter(
count = counters[i] ?: 0,
updateCount = { newCount -> counters[i] = newCount } )
}
Divider(color = Color.Black)
}
}
Note that remember will also be reset when screen rotates, consider using rememberSaveable instead of storing the data inside a view model.
Read more about state in Compose in documentation

Android Jetpack Compose capable of creating List with interactive Buttons and Values on each item?

I'm currently thinking about creating an initiative tracker app for a friend of mine and since I've been out of touch with app development for quite a while I'm trying to evaluate which tools would best suit my needs.
Since the App is going to be developed for Android, I'm pretty sure I'll be using Kotlin and therefore Jetpack Compose caught my eye.
After making a bit of research and going through the docs though, I'm unsure if it is capable of what I want to achieve:
I want to be able to create a dynamic list of entry cards sorted by a certain value asigned to each card. (Which I'm relatively certain LazyColumns will be able to handle).
The catch is this: Each of these cards needs to have buttons and several additional values that can be manipulated with these buttons.
I haven't been able to find descriptions of something like this in the docs or any examples using Jetpack Compose LazyColumns.
I created a (badly made) mockup to hopefully better describe what it is I want to do:
Would anyone be able to share insights on if Jetpack Compose is capable of these features or if not could share advice on what tool to use instead?
Thanks alot and Kind regards.

Yes, with Compose, you can quite easily make such an application.
Here is a basic example of such a UI.
class MainActivity : FragmentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
AppTheme {
ItemsScreen()
}
}
}
}
class Item(val title: String, value1: Int, value2: Int, value3: Int) {
val value1 = mutableStateOf(value1)
val value2 = mutableStateOf(value2)
val value3 = mutableStateOf(value3)
val valueToSortBy: Int
get() = value1.value + value2.value + value3.value
}
class ScreenViewModel : ViewModel() {
val items = List(3) {
Item(
"Item $it",
Random.nextInt(10),
Random.nextInt(10),
Random.nextInt(10),
)
}.toMutableStateList()
fun sortItems() {
items.sortByDescending { it.valueToSortBy }
}
fun addNewItem() {
items.add(
Item(
"Item ${items.count()}",
Random.nextInt(10),
Random.nextInt(10),
Random.nextInt(10),
)
)
}
}
#Composable
fun ItemsScreen() {
val viewModel: ScreenViewModel = viewModel()
LaunchedEffect(viewModel.items.map { it.valueToSortBy }) {
viewModel.sortItems()
}
Box(
Modifier
.fillMaxSize()
.padding(10.dp)
) {
LazyColumn(
contentPadding = PaddingValues(vertical = 10.dp),
verticalArrangement = Arrangement.spacedBy(10.dp)
) {
items(viewModel.items) { item ->
ItemView(item)
}
}
FloatingActionButton(
onClick = viewModel::addNewItem,
modifier = Modifier.align(Alignment.BottomEnd)
) {
Text("+")
}
}
}
#Composable
fun ItemView(item: Item) {
Card(
elevation = 5.dp,
) {
Column(modifier = Modifier.padding(10.dp)) {
Row(
verticalAlignment = Alignment.CenterVertically,
) {
Text(
item.title,
style = MaterialTheme.typography.h5
)
Spacer(modifier = Modifier.weight(1f))
Text(
"Value to sort by: ${item.valueToSortBy}",
style = MaterialTheme.typography.body1,
fontStyle = FontStyle.Italic,
)
}
Spacer(modifier = Modifier.size(25.dp))
Row(
horizontalArrangement = Arrangement.SpaceBetween,
modifier = Modifier.fillMaxWidth()
) {
CounterView(value = item.value1.value, setValue = { item.value1.value = it })
CounterView(value = item.value2.value, setValue = { item.value2.value = it })
CounterView(value = item.value3.value, setValue = { item.value3.value = it })
}
}
}
}
#Composable
fun CounterView(value: Int, setValue: (Int) -> Unit) {
Row(verticalAlignment = Alignment.CenterVertically) {
CounterButton("+") {
setValue(value + 1)
}
Text(
value.toString(),
modifier = Modifier.padding(5.dp)
)
CounterButton("-") {
setValue(value - 1)
}
}
}
#Composable
fun CounterButton(text: String, onClick: () -> Unit) {
Box(
contentAlignment = Alignment.Center,
modifier = Modifier
.size(45.dp)
.background(Color.LightGray)
.clickable(onClick = onClick)
) {
Text(
text,
color = Color.White,
)
}
}
I'm sorting by sum of 3 values here. Note that sorting items like this may not do much performant in a production app, you should use a database to store items and request sorted items from it.