Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate to Jetpack Tile previews #1162

Merged
merged 4 commits into from
Aug 2, 2024
Merged

Migrate to Jetpack Tile previews #1162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3d7dd46
Migrate build scripts to Kotlin DSL
ithinkihaveacat Jul 18, 2024
d381cea
Bump lib versions and eliminate warnings
ithinkihaveacat Jul 18, 2024
e6632b1
Migrate to Jetpack Tile previews
ithinkihaveacat Jul 31, 2024
6bffa46
Merge remote-tracking branch 'upstream/main' into updates
ithinkihaveacat Jul 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
138 changes: 64 additions & 74 deletions WearTilesKotlin/app/src/main/java/com/example/wear/tiles/messaging/MessagingTileLayout.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,9 @@
package com.example.wear.tiles.messaging

import android.content.Context
import android.graphics.BitmapFactory
import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalContext
import androidx.wear.protolayout.DeviceParametersBuilders
import androidx.wear.protolayout.ModifiersBuilders
import androidx.wear.protolayout.ResourceBuilders.Resources
import androidx.wear.protolayout.material.Button
import androidx.wear.protolayout.material.ButtonColors
import androidx.wear.protolayout.material.ChipColors
Expand All @@ -33,23 +31,21 @@ import androidx.wear.tiles.tooling.preview.TilePreviewHelper
import androidx.wear.tooling.preview.devices.WearDevices
import com.example.wear.tiles.R
import com.example.wear.tiles.golden.resources
import com.example.wear.tiles.tools.IconSizePreview
import com.example.wear.tiles.tools.emptyClickable
import com.google.android.horologist.compose.tools.LayoutElementPreview
import com.google.android.horologist.compose.tools.buildDeviceParameters
import com.google.android.horologist.tiles.images.drawableResToImageResource

/**
* Layout definition for the Messaging Tile.
*
* By separating the layout completely, we can pass fake data for the [MessageTilePreview] so it can
* be rendered in Android Studio (use the "Split" or "Design" editor modes).
* By separating the layout completely, we can pass fake data for the [messagingTilePreview] so it
* can be rendered in Android Studio (use the "Split" or "Design" editor modes).
*/
internal fun messagingTileLayout(
state: MessagingTileState,
context: Context,
deviceParameters: DeviceParametersBuilders.DeviceParameters
) = PrimaryLayout.Builder(deviceParameters)
.setResponsiveContentInsetEnabled(true)
.setContent(
MultiButtonLayout.Builder()
.apply {
Expand Down Expand Up @@ -100,83 +96,77 @@ private fun searchLayout(
.setButtonColors(ButtonColors.secondaryButtonColors(MessagingTileTheme.colors))
.build()

@Preview(device = WearDevices.SMALL_ROUND, fontScale = 1.24f)
@Preview(device = WearDevices.LARGE_ROUND, fontScale = 0.94f)
private fun MessageTilePreview(context: Context): TilePreviewData {
@Preview(device = WearDevices.SMALL_ROUND)
@Preview(device = WearDevices.LARGE_ROUND)
private fun messagingTilePreview(context: Context): TilePreviewData {
val state = MessagingTileState(MessagingRepo.knownContacts)
return TilePreviewData(onTileResourceRequest = resources {
addIdToImageMapping(
state.contacts[1].imageResourceId(),
bitmapToImageResource(
BitmapFactory.decodeResource(context.resources, R.drawable.ali)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using drawableResToImageResource seems like an improvement.

You could consider inlining it if you want to minimise horologist usage here.

public fun drawableResToImageResource(
    @DrawableRes id: Int,
): ImageResource =
    ImageResource.Builder()
        .setAndroidResourceByResId(
            AndroidImageResourceByResId.Builder()
                .setResourceId(id)
                .build(),
        )
        .build()

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was considering an extension function to enable addIdToImageMapping() to take a DrawableRes or ImageResource:

fun ResourceBuilders.Resources.Builder.addIdToImageMapping(
    id: String,
    @DrawableRes resId: Int
): ResourceBuilders.Resources.Builder = addIdToImageMapping(
    id, ResourceBuilders.ImageResource.Builder()
        .setAndroidResourceByResId(
            ResourceBuilders.AndroidImageResourceByResId.Builder()
                .setResourceId(resId)
                .build()
        )
        .build()
)

Not sure whether this is idiomatic (versus the function approach) or whether it should be called addIdToResourceMapping(), etc. so was leaving it for a future PR.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added enhanced addIdToImageMapping() in #1164.

return TilePreviewData(
onTileResourceRequest = resources {
addIdToImageMapping(
state.contacts[1].imageResourceId(),
drawableResToImageResource(R.drawable.ali)
)
)
addIdToImageMapping(
state.contacts[2].imageResourceId(),
bitmapToImageResource(
BitmapFactory.decodeResource(context.resources, R.drawable.taylor)
addIdToImageMapping(
state.contacts[2].imageResourceId(),
drawableResToImageResource(R.drawable.taylor)
)
)
addIdToImageMapping(
MessagingTileRenderer.ID_IC_SEARCH,
drawableResToImageResource(R.drawable.ic_search_24)
)
}) {
addIdToImageMapping(
MessagingTileRenderer.ID_IC_SEARCH,
drawableResToImageResource(R.drawable.ic_search_24)
)
},
onTileRequest = { request ->
TilePreviewHelper.singleTimelineEntryTileBuilder(
messagingTileLayout(
state,
context,
request.deviceConfiguration
)
).build()
})
}

@Preview
private fun contactPreview(context: Context) = TilePreviewData(
onTileRequest = {
TilePreviewHelper.singleTimelineEntryTileBuilder(
messagingTileLayout(
state,
context,
buildDeviceParameters(context.resources)
contactLayout(
context = context,
contact = MessagingRepo.knownContacts[0],
clickable = emptyClickable
)
).build()
}
}

@IconSizePreview
@Composable
private fun ContactPreview() {
LayoutElementPreview(
contactLayout(
context = LocalContext.current,
contact = MessagingRepo.knownContacts[0],
clickable = emptyClickable
)
)
}
)

@IconSizePreview
@Composable
private fun ContactWithImagePreview() {
val context = LocalContext.current
@Preview
private fun contactWithImagePreview(context: Context): TilePreviewData {
val contact = MessagingRepo.knownContacts[1]
val bitmap = BitmapFactory.decodeResource(context.resources, R.drawable.ali)

val layout = contactLayout(
context = context,
contact = contact,
clickable = emptyClickable
)

LayoutElementPreview(layout) {
addIdToImageMapping(
"${MessagingTileRenderer.ID_CONTACT_PREFIX}${contact.id}",
bitmapToImageResource(bitmap)
)
}
return TilePreviewData(
onTileResourceRequest = {
Resources.Builder().addIdToImageMapping(
"${MessagingTileRenderer.ID_CONTACT_PREFIX}${contact.id}",
drawableResToImageResource(R.drawable.ali)
).build()
},
onTileRequest = {
TilePreviewHelper.singleTimelineEntryTileBuilder(
contactLayout(context = context, contact = contact, clickable = emptyClickable)
).build()
})
}

@IconSizePreview
@Composable
private fun SearchButtonPreview() {
LayoutElementPreview(
searchLayout(
context = LocalContext.current,
clickable = emptyClickable
)
) {
addIdToImageMapping(
@Preview
private fun searchButtonPreview(context: Context) = TilePreviewData(
onTileResourceRequest = {
Resources.Builder().addIdToImageMapping(
MessagingTileRenderer.ID_IC_SEARCH,
drawableResToImageResource(R.drawable.ic_search_24)
)
}
}
).build()
},
onTileRequest = {
TilePreviewHelper.singleTimelineEntryTileBuilder(
searchLayout(context, emptyClickable)
).build()
})
26 changes: 0 additions & 26 deletions WearTilesKotlin/app/src/main/java/com/example/wear/tiles/tools/IconSizePreview.kt
View file
Open in desktop

This file was deleted.

37 changes: 0 additions & 37 deletions WearTilesKotlin/app/src/main/java/com/example/wear/tiles/tools/WearPreviewDevices.kt
View file
Open in desktop

This file was deleted.