Develop Reference

Pagination in Wear OS

Good Morning, I'm developing a new Wear OS application. The thing is, I can't find anywhere how to make a good pagination.
I would like to change activity on swipe (no matter if it's vertical or horizontal) but can't find anywhere how to do it...
Maybe I should not navigate in my app like that ?
Can you help me if you have any answer on how to do it ?
thanks ! (for some reasons I can't say hello on my post ?)

You can use HorizontalPager or VerticalPager from Accompanist.
https://google.github.io/accompanist/pager/
HorizontalPager(
modifier = Modifier.fillMaxSize(),
count = 10,
state = state
) { page ->
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
Text(text = "Screen $page")
}
}
An example https://github.com/google/horologist/blob/e2741cef87774b18d58bb1b0f78bd5b60901f20d/sample/src/main/java/com/google/android/horologist/scratch/ScratchActivity.kt#L79
If you want something more custom, then it's probably a serious investment in a component. Especially if it needs to work with the system Swipe to Dismiss.

Android Jetpack Compose (Composable) Disable Hardware Acceleration for particular composable

I have a composable, that is using NativeCanvas together with BlurMaskFilter for applying some custom blur effect. This is working fine for device with with API > 23, and the problem is caused by hardware acceleration for older devices.
Here you can see the blur is working on API 30 (left) and not so much on API 22 (right).
I know that I can disable it manually for the whole application or activity from the manifest file using android:hardwareAccelerated="false".
For Views we could disable it for particular views rather than the whole activity using view.setLayerType(View.LAYER_TYPE_SOFTWARE, null)
Is there a way we could disable the hardware acceleration for particular Composable and not for the whole application/activity?

Using Interoperability APIs you can embed ComposeView with the needed configuration inside your composable:
#Composable
fun SoftwareLayerComposable(
modifier: Modifier = Modifier,
content: #Composable () -> Unit,
) {
AndroidView(
factory = { context ->
ComposeView(context).apply {
setLayerType(View.LAYER_TYPE_SOFTWARE, null)
}
},
update = { composeView ->
composeView.setContent(content)
},
modifier = modifier,
)
}
Usage:
SoftwareLayerComposable(Modifier) {
// your view
}

How to enable click preview in jetpack compose preview function in android studio?

I have this composable function:
#Composable
fun GreetingText(name: String) {
Text(text = "Hello $name!", modifier = Modifier
.padding(24.dp)
.clickable { }
)
}
And this preview function:
#Preview(showBackground = true)
#Composable
fun DefaultPreview() {
SampleTextTheme {
GreetingText("world")
}
}
This is my version of android studio: Android Studio Arctic Fox | 2020.3.1 Patch 2
This is the preview design that android studio gives me:
I believe that by inserting the ciclckable {} function into my Modifier android studio should provide me with a tool in the preview design that would make it easier to see what would happen visually when I click on the element.

You can do it in Interactive mode.
Right not this feature is experimental, so you should enable it within Android Studio preferences.

Coil don't load image in emulator with Jetpack Compose

I need to show an image in my app by url using Coil, but this image don't load. I follow the official documentation https://coil-kt.github.io/coil/compose/.
profile card
implementation "io.coil-kt:coil-compose:1.3.1"
#Composable
fun ProfilePicture(profilePicture: String, online: Boolean) {
Card(
shape = CircleShape,
border = BorderStroke(
width = 2.dp,
color = if (online) MaterialTheme.colors.lightGreen else Color.Red
),
modifier = Modifier.padding(16.dp),
elevation = 4.dp
) {
Image(
painter = rememberImagePainter(
data = profilePicture,
builder = {
transformations(CircleCropTransformation())
}
),
modifier = Modifier.size(72.dp),
contentDescription = "Profile picture"
)
}
}
Update
An exemplo to UserModel
UserModel(
name = "John Doe",
profilePicture = "https://randomuser.me/api/portraits/men/32.jpg",
online = true
)

Coil doesn't load images on the emulator because you need to enable clear text traffic, add this line to the application tag in AndroidManifest.xml.
android:usesCleartextTraffic="true"
Then uninstall the application from your emulator and install it again, it will work.

Check your date/time on the emulator.
The problem might be caused by the fact that Android emulator seems to not synchronize date and time with the network. This makes the emulator certificate appear as expired and leads to the server refusing connection.
After setting the emulator time/date manually to the current one, downloading images started working for me.
Also cold booting the emulator might help (looks like booting from a saved image for some reason sets the date/time to the one from when the image was saved).

I had the same issue, only occurring on the emulator.
Turning off mobile data, while leaving Wi-Fi enabled solved the problem for me.

Jetpack Compose expanding BottomSheet of BottomSheetScaffold only works after recomposition

I am trying to have a way to show a BottomSheet from everywhere within my app, for that I use the BottomSheetScaffold and a LiveData object that holds the current composable function which is observed as state:
val sheetContent by MusicHub.state.bottomSheet.getContent().observeAsState()
BottomSheetScaffold(
modifier = Modifier
.fillMaxSize(),
scaffoldState = bottomSheetScaffoldState,
sheetPeekHeight = 0.dp,
sheetContent = sheetContent!!
)
I use the BottomSheet as a context menu in my app. For example when i longClick on a playlist in my app it sets the content of the BottomSheet and shows it like this:
PlaylistItem(
// ...
onLongClick = {
// Set the LiveData composable
MusicHub.state.bottomSheet.setContent {
PlaylistContextMenuTest(playlist!!, viewModel)
}
// Expand BottomSheet
scope.launch {
MusicHub.state.bottomSheet.expand()
}
}
)
In general this works but the first time the BottomSheet gets expanded it shows for a split second before it disappears at the bottom again. Here is a small GIF:
My guess is that somehow the size of the BottomSheet is not recalculated yet and hence it only works in the next recomposition. Coming from web dev i would say its a typical case of requestAnimationFrame but i don't quite know how to solve this issue in compose.
Edit:
PlaylistContextMenuTest code:
#Composable
fun PlaylistContextMenuTest(playlist: Playlist, viewModel: LibraryViewModel = activityViewModel()){
val scrollState = rememberScrollState()
Column(
modifier = Modifier
.fillMaxWidth()
.navigationBarsPadding()
// TODO: Replace that with a percentage of the screen height
.heightIn(max = 384.dp)
.verticalScroll(scrollState),
content = {
ContextMenu {
repeat(4){
addOption(R.drawable.ic_delete_black_24dp, "Delete"){
Timber.d("Delete Playlist")
viewModel.deletePlaylist(playlist)
}
}
}
}
)
}
Full ContextMenu source: (https://pastebin.com/sg4ed96L)

You seem to be right. The first time it seems to be re-calculating the BottomSheet's height.
As this does not change on the second try, it will then be displayed.
Does this answer help you?
It seems to work out quite okay for BottomSheetScaffold, but not for ModalBottomSheetLayout (the thing I was looking for as you can see in the comments of the linked answer).
Edit: Accompanist's Navigation Material is also worth a look.

This issue has been resolved with a new release of jetpack compose. I am not sure if it was beta 8 or 9 but everything works as intended now.