Update/apply responsive remaining tiles (#1169)

* apply responsive tiles remaining

* commonize duplicate preview

* update preview function name start with lower case

* update preview access modifiers

* fix typo

* add image resources for social

* update argument of timer

* update skiPreview

* use primary layout in Ski

* change preview font scale in large device

WearTilesKotlin/app/src/debug/java/com/example/wear/tiles/golden/Alarm.kt

@@ -77,8 +77,8 @@ object Alarm {
 @Preview(device = WearDevices.SMALL_ROUND)
 @Preview(device = WearDevices.SMALL_ROUND, fontScale = 1.24f)
 @Preview(device = WearDevices.LARGE_ROUND)
-@Preview(device = WearDevices.LARGE_ROUND, fontScale = 1.24f)
-fun AlarmPreview(context: Context) = TilePreviewData {
+@Preview(device = WearDevices.LARGE_ROUND, fontScale = 0.94f)
+internal fun alarmPreview(context: Context) = TilePreviewData {
     TilePreviewHelper.singleTimelineEntryTileBuilder(
         Alarm.layout(
             context,

WearTilesKotlin/app/src/debug/java/com/example/wear/tiles/golden/Calendar.kt

@@ -68,8 +68,8 @@ object Calendar {
 @Preview(device = WearDevices.SMALL_ROUND)
 @Preview(device = WearDevices.SMALL_ROUND, fontScale = 1.24f)
 @Preview(device = WearDevices.LARGE_ROUND)
-@Preview(device = WearDevices.LARGE_ROUND, fontScale = 1.24f)
-fun CalendarPreview(context: Context) = TilePreviewData {
+@Preview(device = WearDevices.LARGE_ROUND, fontScale = 0.94f)
+internal fun calendarPreview(context: Context) = TilePreviewData {
     TilePreviewHelper.singleTimelineEntryTileBuilder(
         Calendar.layout(
             context,

WearTilesKotlin/app/src/debug/java/com/example/wear/tiles/golden/Goal.kt

@@ -23,10 +23,15 @@ import androidx.wear.protolayout.material.ProgressIndicatorColors
 import androidx.wear.protolayout.material.Text
 import androidx.wear.protolayout.material.Typography
 import androidx.wear.protolayout.material.layouts.EdgeContentLayout
+import androidx.wear.tiles.tooling.preview.Preview
+import androidx.wear.tiles.tooling.preview.TilePreviewData
+import androidx.wear.tiles.tooling.preview.TilePreviewHelper.singleTimelineEntryTileBuilder
+import androidx.wear.tooling.preview.devices.WearDevices
 
 object Goal {
     fun layout(context: Context, deviceParameters: DeviceParameters, steps: Int, goal: Int) =
         EdgeContentLayout.Builder(deviceParameters)
+            .setResponsiveContentInsetEnabled(true)
             .setEdgeContent(
                 CircularProgressIndicator.Builder()
                     .setProgress(steps.toFloat() / goal)
@@ -60,3 +65,15 @@ private fun blueOnTranslucentWhite() = ProgressIndicatorColors(
     /* trackColor = */
     ColorBuilders.argb(GoldenTilesColors.White10Pc)
 )
+
+@Preview(device = WearDevices.SMALL_ROUND)
+@Preview(device = WearDevices.SMALL_ROUND, fontScale = 1.24f)
+@Preview(device = WearDevices.LARGE_ROUND)
+@Preview(device = WearDevices.LARGE_ROUND, fontScale = 0.94f)
+internal fun goalPreview(context: Context) = TilePreviewData {
+    singleTimelineEntryTileBuilder(
+        Goal.layout(
+            context, it.deviceConfiguration, steps = 5168, goal = 8000
+        )
+    ).build()
+}

WearTilesKotlin/app/src/debug/java/com/example/wear/tiles/golden/GoldenTilesPreviewsRow1.kt

@@ -19,90 +19,30 @@ import android.content.Context
 import androidx.wear.protolayout.ResourceBuilders
 import androidx.wear.tiles.RequestBuilders
 import androidx.wear.tiles.tooling.preview.Preview
-import androidx.wear.tiles.tooling.preview.TilePreviewData
-import androidx.wear.tiles.tooling.preview.TilePreviewHelper.singleTimelineEntryTileBuilder
 import androidx.wear.tooling.preview.devices.WearDevices
-import com.example.wear.tiles.R
-import com.example.wear.tiles.tools.emptyClickable
-import com.google.android.horologist.tiles.images.drawableResToImageResource
 
 @Preview(device = WearDevices.SMALL_ROUND)
 @Preview(device = WearDevices.LARGE_ROUND)
-fun Goal(context: Context) = TilePreviewData {
-    singleTimelineEntryTileBuilder(
-        Goal.layout(
-            context, it.deviceConfiguration, steps = 5168, goal = 8000
-        )
-    ).build()
-}
+private fun goal(context: Context) = goalPreview(context)
 
 @Preview(device = WearDevices.SMALL_ROUND)
 @Preview(device = WearDevices.LARGE_ROUND)
-fun WorkoutButtons(context: Context) = TilePreviewData(onTileResourceRequest = resources {
-    addIdToImageMapping(
-        Workout.BUTTON_1_ICON_ID, drawableResToImageResource(R.drawable.ic_run_24)
-    )
-    addIdToImageMapping(
-        Workout.BUTTON_2_ICON_ID, drawableResToImageResource(R.drawable.ic_yoga_24)
-    )
-    addIdToImageMapping(
-        Workout.BUTTON_3_ICON_ID, drawableResToImageResource(R.drawable.ic_cycling_24)
-    )
-}) {
-    singleTimelineEntryTileBuilder(
-        Workout.buttonsLayout(
-            context,
-            it.deviceConfiguration,
-            weekSummary = "1 run this week",
-            button1Clickable = emptyClickable,
-            button2Clickable = emptyClickable,
-            button3Clickable = emptyClickable,
-            chipClickable = emptyClickable
-        )
-    ).build()
-}
+private fun workoutButtons(context: Context) = workoutButtonsPreview(context)
 
 @Preview(device = WearDevices.SMALL_ROUND)
 @Preview(device = WearDevices.LARGE_ROUND)
-fun WorkoutLargeChip(context: Context) = TilePreviewData {
-    singleTimelineEntryTileBuilder(
-        Workout.largeChipLayout(
-            context,
-            it.deviceConfiguration,
-            clickable = emptyClickable,
-            lastWorkoutSummary = "Last session 45m"
-        )
-    ).build()
-}
+private fun workoutLargeChip(context: Context) = workoutLargeChipPreview(context)
 
 @Preview(device = WearDevices.SMALL_ROUND)
 @Preview(device = WearDevices.LARGE_ROUND)
-fun Run(context: Context) = TilePreviewData {
-    singleTimelineEntryTileBuilder(
-        Run.layout(
-            context,
-            it.deviceConfiguration,
-            lastRunText = "2 days ago",
-            startRunClickable = emptyClickable,
-            moreChipClickable = emptyClickable
-        )
-    ).build()
-}
+private fun run(context: Context) = runPreview(context)
 
 @Preview(device = WearDevices.SMALL_ROUND)
 @Preview(device = WearDevices.LARGE_ROUND)
-fun Ski(context: Context) = TilePreviewData {
-    singleTimelineEntryTileBuilder(
-        Ski.layout(
-            context,
-            stat1 = Ski.Stat("Max Spd", "46.5", "mph"),
-            stat2 = Ski.Stat("Distance", "21.8", "mile")
-        )
-    ).build()
-}
+private fun ski(context: Context) = skiPreview(context)
 
 //@Preview
-fun SleepTracker(context: Context) {
+fun sleepTracker(context: Context) {
     // TODO: This tile doesn't use standard components; we can achieve it by drawing on a Canvas (Compose's DrawScope) then converting it to a bitmap using Horologist
 }
 

WearTilesKotlin/app/src/debug/java/com/example/wear/tiles/golden/GoldenTilesPreviewsRow2.kt

@@ -29,25 +29,16 @@ import com.google.android.horologist.tiles.images.drawableResToImageResource
  */
 @Preview(device = WearDevices.SMALL_ROUND)
 @Preview(device = WearDevices.LARGE_ROUND)
-fun HeartRateSimple(context: Context) = TilePreviewData {
-    TilePreviewHelper.singleTimelineEntryTileBuilder(
-        HeartRate.simpleLayout(
-            context,
-            it.deviceConfiguration,
-            heartRateBpm = 86,
-            clickable = emptyClickable
-        )
-    ).build()
-}
+private fun heartRateSimple(context: Context) = heartRateSimplePreview(context)
 
 //@Preview
-fun HeartRateGraph(context: Context) {
+private fun heartRateGraph(context: Context) {
     TODO()
 }
 
 @Preview(device = WearDevices.SMALL_ROUND)
 @Preview(device = WearDevices.LARGE_ROUND)
-fun MeditationChips(context: Context) = TilePreviewData(resources {
+private fun meditationChips(context: Context) = TilePreviewData(resources {
     addIdToImageMapping(
         Meditation.CHIP_1_ICON_ID,
         drawableResToImageResource(R.drawable.ic_breathe_24)
@@ -79,48 +70,12 @@ fun MeditationChips(context: Context) = TilePreviewData(resources {
 
 @Preview(device = WearDevices.SMALL_ROUND)
 @Preview(device = WearDevices.LARGE_ROUND)
-fun MeditationButtons(context: Context) = TilePreviewData {
-    TilePreviewHelper.singleTimelineEntryTileBuilder(
-        Meditation.buttonsLayout(
-            context,
-            it.deviceConfiguration,
-            timer1 = Meditation.Timer(minutes = 5, clickable = emptyClickable),
-            timer2 = Meditation.Timer(minutes = 10, clickable = emptyClickable),
-            timer3 = Meditation.Timer(minutes = 15, clickable = emptyClickable),
-            clickable = emptyClickable
-        )
-    ).build()
-}
+private fun meditationButtons(context: Context) = meditationButtonsPreview(context)
 
 @Preview(device = WearDevices.SMALL_ROUND)
 @Preview(device = WearDevices.LARGE_ROUND)
-fun Timer(context: Context) = TilePreviewData {
-    TilePreviewHelper.singleTimelineEntryTileBuilder(
-        Timer.layout(
-            context,
-            it.deviceConfiguration,
-            timer1 = Timer.Timer(minutes = "05", clickable = emptyClickable),
-            timer2 = Timer.Timer(minutes = "10", clickable = emptyClickable),
-            timer3 = Timer.Timer(minutes = "15", clickable = emptyClickable),
-            timer4 = Timer.Timer(minutes = "20", clickable = emptyClickable),
-            timer5 = Timer.Timer(minutes = "30", clickable = emptyClickable),
-            timer6 = Timer.Timer(minutes = "45", clickable = emptyClickable),
-            clickable = emptyClickable
-        )
-    ).build()
-}
+private fun timer(context: Context) = timerPreview(context)
 
 @Preview(device = WearDevices.SMALL_ROUND)
 @Preview(device = WearDevices.LARGE_ROUND)
-fun Alarm(context: Context) = TilePreviewData {
-    TilePreviewHelper.singleTimelineEntryTileBuilder(
-        Alarm.layout(
-            context,
-            it.deviceConfiguration,
-            timeUntilAlarm = "Less than 1 min",
-            alarmTime = "14:58",
-            alarmDays = "Mon, Tue, Wed, Thu, Fri,Sat",
-            clickable = emptyClickable
-        )
-    ).build()
-}
+private fun alarm(context: Context) = alarmPreview(context)

WearTilesKotlin/app/src/debug/java/com/example/wear/tiles/golden/GoldenTilesPreviewsRow3.kt

@@ -17,140 +17,33 @@ package com.example.wear.tiles.golden
 
 import android.content.Context
 import androidx.wear.tiles.tooling.preview.Preview
-import androidx.wear.tiles.tooling.preview.TilePreviewData
-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.tools.emptyClickable
-import com.google.android.horologist.tiles.images.drawableResToImageResource
-import java.time.Clock
-import java.time.LocalDate
-import java.time.LocalDateTime
-import java.time.ZoneOffset
 
 /**
  * b/238560022 misaligned because we can't add an offset, small preview is clipped
  */
 @Preview(device = WearDevices.SMALL_ROUND)
 @Preview(device = WearDevices.LARGE_ROUND)
-fun Weather(context: Context) = TilePreviewData(resources {
-    addIdToImageMapping(
-        Weather.SCATTERED_SHOWERS_ICON_ID,
-        drawableResToImageResource(R.drawable.scattered_showers)
-    )
-}) {
-    TilePreviewHelper.singleTimelineEntryTileBuilder(
-        Weather.layout(
-            context,
-            it.deviceConfiguration,
-            location = "San Francisco",
-            weatherIconId = Weather.SCATTERED_SHOWERS_ICON_ID,
-            currentTemperature = "52°",
-            lowTemperature = "48°",
-            highTemperature = "64°",
-            weatherSummary = "Showers"
-        )
-    ).build()
-}
+private fun weather(context: Context) = weatherPreview(context)
 
 /**
  * b/238556504 alignment doesn't match figma.
  */
 @Preview(device = WearDevices.SMALL_ROUND)
 @Preview(device = WearDevices.LARGE_ROUND)
-fun News(context: Context) = TilePreviewData {
-    val now = LocalDateTime.of(2024, 8, 1, 0, 0).toInstant(ZoneOffset.UTC)
-    val clock = Clock.fixed(now, Clock.systemUTC().zone)
-
-    TilePreviewHelper.singleTimelineEntryTileBuilder(
-        News.layout(
-            context,
-            it.deviceConfiguration,
-            headline = "Millions still without power as new storm moves across US",
-            newsVendor = "The New York Times",
-            date = LocalDate.now(clock).minusDays(1),
-            clock = clock,
-            clickable = emptyClickable
-        )
-    ).build()
-}
+private fun news(context: Context) = newsPreview(context)
 
 /**
  * b/238571095 Alignment doesn't match Figma
  */
 @Preview(device = WearDevices.SMALL_ROUND)
 @Preview(device = WearDevices.LARGE_ROUND)
-fun Calendar(context: Context) = TilePreviewData {
-    TilePreviewHelper.singleTimelineEntryTileBuilder(
-        Calendar.layout(
-            context,
-            it.deviceConfiguration,
-            eventTime = "6:30-7:30 PM",
-            eventName = "Morning Pilates with Christina Lloyd",
-            eventLocation = "216 Market Street",
-            clickable = emptyClickable
-        )
-    ).build()
-}
+private fun calendar(context: Context) = calendarPreview(context)
 
 @Preview(device = WearDevices.SMALL_ROUND)
 @Preview(device = WearDevices.LARGE_ROUND)
-fun Social(context: Context) = TilePreviewData(resources {
-    addIdToImageMapping(Social.AVATAR_ID_1, drawableResToImageResource(R.drawable.avatar1))
-    addIdToImageMapping(Social.AVATAR_ID_2, drawableResToImageResource(R.drawable.avatar2))
-}) {
-    TilePreviewHelper.singleTimelineEntryTileBuilder(
-        Social.layout(
-            context,
-            it.deviceConfiguration,
-            Social.Contact(
-                initials = "AC",
-                clickable = emptyClickable,
-                avatarId = Social.AVATAR_ID_1
-            ),
-            Social.Contact(initials = "AD", clickable = emptyClickable, avatarId = null),
-            Social.Contact(
-                initials = "BD",
-                color = GoldenTilesColors.Purple,
-                clickable = emptyClickable,
-                avatarId = null
-            ),
-            Social.Contact(
-                initials = "DC",
-                clickable = emptyClickable,
-                avatarId = Social.AVATAR_ID_2
-            )
-        )
-    ).build()
-}
+private fun social(context: Context) = socialPreview(context)
 
 @Preview(device = WearDevices.SMALL_ROUND)
 @Preview(device = WearDevices.LARGE_ROUND)
-fun Media(context: Context) = TilePreviewData(resources {
-    addIdToImageMapping(
-        Media.CHIP_1_ICON_ID,
-        drawableResToImageResource(R.drawable.ic_music_queue_24)
-    )
-    addIdToImageMapping(
-        Media.CHIP_2_ICON_ID,
-        drawableResToImageResource(R.drawable.ic_podcasts_24)
-    )
-}) {
-    TilePreviewHelper.singleTimelineEntryTileBuilder(
-        Media.layout(
-            context,
-            it.deviceConfiguration,
-            playlist1 = Media.Playlist(
-                label = "Liked songs",
-                iconId = Media.CHIP_1_ICON_ID,
-                clickable = emptyClickable
-            ),
-            playlist2 = Media.Playlist(
-                label = "Podcasts",
-                iconId = Media.CHIP_2_ICON_ID,
-                clickable = emptyClickable
-            ),
-            browseClickable = emptyClickable
-        )
-    ).build()
-}
+private fun media(context: Context) = mediaPreview(context)