Skip to content

Commit

Permalink
Merge pull request #1165 from hiroaki404/update/apply_responsive_tiles
Browse files Browse the repository at this point in the history 
apply responsive tiles to alarm, calendar, news, timer, mediation
  • Loading branch information
@yschimke
yschimke authored Aug 6, 2024
2 parents 3ec82cc + d6450f1 commit 83c777b
Show file tree
Hide file tree
Showing 7 changed files with 199 additions and 1 deletion.
24 changes: 24 additions & 0 deletions WearTilesKotlin/app/src/debug/java/com/example/wear/tiles/golden/Alarm.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,11 @@ import androidx.wear.protolayout.material.Text
import androidx.wear.protolayout.material.TitleChip
import androidx.wear.protolayout.material.Typography
import androidx.wear.protolayout.material.layouts.PrimaryLayout
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.tools.emptyClickable

object Alarm {

Expand All @@ -36,6 +41,7 @@ object Alarm {
alarmDays: String,
clickable: Clickable
) = PrimaryLayout.Builder(deviceParameters)
.setResponsiveContentInsetEnabled(true)
.setPrimaryLabelTextContent(
Text.Builder(context, timeUntilAlarm)
.setColor(ColorBuilders.argb(GoldenTilesColors.White))
Expand All @@ -62,7 +68,25 @@ object Alarm {
Text.Builder(context, alarmDays)
.setColor(ColorBuilders.argb(GoldenTilesColors.Yellow))
.setTypography(Typography.TYPOGRAPHY_CAPTION1)
.setMaxLines(2)
.build()
)
.build()
}

@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 {
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()
}
23 changes: 23 additions & 0 deletions WearTilesKotlin/app/src/debug/java/com/example/wear/tiles/golden/Calendar.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,11 @@ import androidx.wear.protolayout.material.CompactChip
import androidx.wear.protolayout.material.Text
import androidx.wear.protolayout.material.Typography
import androidx.wear.protolayout.material.layouts.PrimaryLayout
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.tools.emptyClickable

object Calendar {

Expand All @@ -34,6 +39,7 @@ object Calendar {
eventLocation: String,
clickable: Clickable
) = PrimaryLayout.Builder(deviceParameters)
.setResponsiveContentInsetEnabled(true)
.setPrimaryLabelTextContent(
Text.Builder(context, eventTime)
.setColor(ColorBuilders.argb(GoldenTilesColors.LightBlue))
Expand All @@ -58,3 +64,20 @@ object Calendar {
)
.build()
}

@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 {
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()
}
4 changes: 3 additions & 1 deletion WearTilesKotlin/app/src/debug/java/com/example/wear/tiles/golden/GoldenTilesPreviewsRow2.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ fun MeditationChips(context: Context) = TilePreviewData(resources {
Meditation.chipsLayout(
context,
it.deviceConfiguration,
numOfLeftTasks = 2,
session1 = Meditation.Session(
label = "Breathe",
iconId = Meditation.CHIP_1_ICON_ID,
Expand Down Expand Up @@ -103,6 +104,7 @@ fun Timer(context: Context) = TilePreviewData {
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()
Expand All @@ -117,7 +119,7 @@ fun Alarm(context: Context) = TilePreviewData {
it.deviceConfiguration,
timeUntilAlarm = "Less than 1 min",
alarmTime = "14:58",
alarmDays = "Mon, Tue, Wed",
alarmDays = "Mon, Tue, Wed, Thu, Fri,Sat",
clickable = emptyClickable
)
).build()
Expand Down
9 changes: 9 additions & 0 deletions WearTilesKotlin/app/src/debug/java/com/example/wear/tiles/golden/GoldenTilesPreviewsRow3.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,10 @@ 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
Expand Down Expand Up @@ -55,12 +59,17 @@ fun Weather(context: Context) = TilePreviewData(resources {
@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()
Expand Down
53 changes: 53 additions & 0 deletions WearTilesKotlin/app/src/debug/java/com/example/wear/tiles/golden/Meditation.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,13 @@ import androidx.wear.protolayout.material.Text
import androidx.wear.protolayout.material.Typography
import androidx.wear.protolayout.material.layouts.MultiButtonLayout
import androidx.wear.protolayout.material.layouts.PrimaryLayout
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

object Meditation {
const val CHIP_1_ICON_ID = "meditation_1"
Expand All @@ -40,10 +47,22 @@ object Meditation {
fun chipsLayout(
context: Context,
deviceParameters: DeviceParameters,
numOfLeftTasks: Int,
session1: Session,
session2: Session,
browseClickable: Clickable
) = PrimaryLayout.Builder(deviceParameters)
.setResponsiveContentInsetEnabled(true)
.apply {
if (deviceParameters.screenWidthDp > 225) {
setPrimaryLabelTextContent(
Text.Builder(context, "$numOfLeftTasks mindful tasks left")
.setTypography(Typography.TYPOGRAPHY_BODY2)
.setColor(ColorBuilders.argb(GoldenTilesColors.Pink))
.build()
)
}
}
.setContent(
Column.Builder()
// See the comment on `setWidth` below in `sessionChip()` too. The default width for
Expand Down Expand Up @@ -147,3 +166,37 @@ object Meditation {
data class Session(val label: String, val iconId: String, val clickable: Clickable)
data class Timer(val minutes: Int, val clickable: Clickable)
}

@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 MeditationChipsPreview(context: Context) = TilePreviewData(resources {
addIdToImageMapping(
Meditation.CHIP_1_ICON_ID,
drawableResToImageResource(R.drawable.ic_breathe_24)
)
addIdToImageMapping(
Meditation.CHIP_2_ICON_ID,
drawableResToImageResource(R.drawable.ic_mindfulness_24)
)
}) {
TilePreviewHelper.singleTimelineEntryTileBuilder(
Meditation.chipsLayout(
context,
it.deviceConfiguration,
numOfLeftTasks = 2,
session1 = Meditation.Session(
label = "Breathe",
iconId = Meditation.CHIP_1_ICON_ID,
clickable = emptyClickable
),
session2 = Meditation.Session(
label = "Daily mindfulness",
iconId = Meditation.CHIP_2_ICON_ID,
clickable = emptyClickable
),
browseClickable = emptyClickable
)
).build()
}
55 changes: 55 additions & 0 deletions WearTilesKotlin/app/src/debug/java/com/example/wear/tiles/golden/News.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,39 @@ import androidx.wear.protolayout.material.CompactChip
import androidx.wear.protolayout.material.Text
import androidx.wear.protolayout.material.Typography
import androidx.wear.protolayout.material.layouts.PrimaryLayout
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.tools.emptyClickable
import java.time.Clock
import java.time.LocalDate
import java.time.LocalDateTime
import java.time.ZoneOffset
import java.time.format.DateTimeFormatter
import java.time.format.FormatStyle

object News {

fun layout(
context: Context,
deviceParameters: DeviceParameters,
date: LocalDate,
clock: Clock = Clock.systemDefaultZone(),
headline: String,
newsVendor: String,
clickable: Clickable
) = PrimaryLayout.Builder(deviceParameters)
.setResponsiveContentInsetEnabled(true)
.apply {
if (deviceParameters.screenWidthDp > 225) {
setPrimaryLabelTextContent(
Text.Builder(context, date.formatLocalDateTime(today = LocalDate.now(clock)))
.setColor(ColorBuilders.argb(GoldenTilesColors.White))
.setTypography(Typography.TYPOGRAPHY_CAPTION1)
.build()
)
} }
.setContent(
Text.Builder(context, headline)
.setMaxLines(3)
Expand All @@ -51,3 +74,35 @@ object News {
)
.build()
}

fun LocalDate.formatLocalDateTime(today: LocalDate = LocalDate.now()): String {
val yesterday = today.minusDays(1)

return when {
this == yesterday -> "yesterday ${format(DateTimeFormatter.ofPattern("MMM d"))}"
this == today -> "today ${format(DateTimeFormatter.ofPattern("MMM d"))}"
else -> format(DateTimeFormatter.ofLocalizedDate(FormatStyle.FULL))
}
}

@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 NewsPreview(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()
}

32 changes: 32 additions & 0 deletions WearTilesKotlin/app/src/debug/java/com/example/wear/tiles/golden/Timer.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,11 @@ import androidx.wear.protolayout.material.CompactChip
import androidx.wear.protolayout.material.Typography
import androidx.wear.protolayout.material.layouts.MultiButtonLayout
import androidx.wear.protolayout.material.layouts.PrimaryLayout
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.tools.emptyClickable

object Timer {

Expand All @@ -37,15 +42,22 @@ object Timer {
timer3: Timer,
timer4: Timer,
timer5: Timer,
timer6: Timer,
clickable: Clickable
) = PrimaryLayout.Builder(deviceParameters)
.setResponsiveContentInsetEnabled(true)
.setContent(
MultiButtonLayout.Builder()
.addButtonContent(timerButton(context, timer1))
.addButtonContent(timerButton(context, timer2))
.addButtonContent(timerButton(context, timer3))
.addButtonContent(timerButton(context, timer4))
.addButtonContent(timerButton(context, timer5))
.apply {
if (deviceParameters.screenWidthDp > 225) {
addButtonContent(timerButton(context, timer6))
}
}
.build()
)
.setPrimaryChipContent(
Expand Down Expand Up @@ -77,3 +89,23 @@ object Timer {

data class Timer(val minutes: String, val clickable: Clickable)
}

@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 TimerPreview(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()
}

0 comments on commit 83c777b

Please sign in to comment.