Skip to content

Commit 3063fb4

Browse files
shamalipshamalip
committed
Add Android Studio Previews for other Glance layouts
1 parent ed436b6 commit 3063fb4

File tree

5 files changed

+332
-0
lines changed

5 files changed

+332
-0
lines changed

‎samples/user-interface/appwidgets/src/main/java/com/example/platform/ui/appwidgets/glance/layout/collections/layout/CheckListLayout.kt‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import androidx.compose.ui.unit.sp
88
import androidx.glance.GlanceModifier
99
import androidx.glance.GlanceTheme
1010
import androidx.glance.ImageProvider
11+
import androidx.glance.LocalContext
1112
import androidx.glance.LocalSize
1213
import androidx.glance.action.Action
1314
import androidx.glance.appwidget.components.CircleIconButton
@@ -16,10 +17,13 @@ import androidx.glance.appwidget.components.TitleBar
1617
import androidx.glance.layout.fillMaxSize
1718
import androidx.glance.layout.fillMaxWidth
1819
import androidx.glance.layout.padding
20+
import androidx.glance.preview.ExperimentalGlancePreviewApi
21+
import androidx.glance.preview.Preview
1922
import androidx.glance.text.FontWeight
2023
import androidx.glance.text.Text
2124
import androidx.glance.text.TextStyle
2225
import com.example.platform.ui.appwidgets.R
26+
import com.example.platform.ui.appwidgets.glance.layout.collections.data.FakeCheckListDataRepository.Companion.demoData
2327
import com.example.platform.ui.appwidgets.glance.layout.collections.layout.CheckListLayoutDimensions.checkListRowStartPadding
2428
import com.example.platform.ui.appwidgets.glance.layout.collections.layout.CheckListLayoutDimensions.checkListRowEndPadding
2529
import com.example.platform.ui.appwidgets.glance.layout.collections.layout.CheckListLayoutDimensions.scaffoldHorizontalPadding
@@ -29,6 +33,9 @@ import com.example.platform.ui.appwidgets.glance.layout.collections.layout.Check
2933
import com.example.platform.ui.appwidgets.glance.layout.collections.layout.CheckListLayoutSize.Companion.showTitleBar
3034
import com.example.platform.ui.appwidgets.glance.layout.collections.layout.CheckListLayoutSize.Small
3135
import com.example.platform.ui.appwidgets.glance.layout.utils.ActionUtils.actionStartDemoActivity
36+
import com.example.platform.ui.appwidgets.glance.layout.utils.LargeWidgetPreview
37+
import com.example.platform.ui.appwidgets.glance.layout.utils.MediumWidgetPreview
38+
import com.example.platform.ui.appwidgets.glance.layout.utils.SmallWidgetPreview
3239

3340
/**
3441
* A layout focused on presenting list of items in a check list. Content is displayed in a
@@ -410,4 +417,46 @@ private object CheckListLayoutDimensions {
410417
val checkListRowStartPadding = 2.dp
411418
// Padding to be applied on right of each item if there isn't a icon button on right.
412419
val checkListRowEndPadding = widgetPadding
420+
}
421+
422+
/**
423+
* Preview sizes of layout at the configured width breakpoints.
424+
*/
425+
@OptIn(ExperimentalGlancePreviewApi::class)
426+
@Preview(widthDp = 259, heightDp = 200)
427+
@Preview(widthDp = 303, heightDp = 200)
428+
@Preview(widthDp = 350, heightDp = 200)
429+
private annotation class CheckListBreakpointPreviews
430+
431+
/**
432+
* Previews for the check list layout.
433+
*
434+
* First we look at the previews at defined breakpoints, tweaking them as necessary. In addition,
435+
* the previews at standard sizes allows us to quickly verify updates across min / max and common
436+
* widget sizes without needing to run the app or manually place the widget.
437+
*/
438+
@CheckListBreakpointPreviews
439+
@SmallWidgetPreview
440+
@MediumWidgetPreview
441+
@LargeWidgetPreview
442+
@Composable
443+
private fun CheckListLayoutPreview() {
444+
val context = LocalContext.current
445+
CheckListLayout(
446+
title = context.getString(R.string.sample_check_list_app_widget_name),
447+
titleIconRes = R.drawable.sample_pin_icon,
448+
titleBarActionIconRes = R.drawable.sample_add_icon,
449+
titleBarActionIconContentDescription = context.getString(
450+
R.string.sample_add_button_text,
451+
),
452+
titleBarAction = actionStartDemoActivity("Add icon in title bar"),
453+
items = demoData,
454+
checkedItems = listOf("1"),
455+
checkButtonContentDescription = context.getString(
456+
R.string.sample_mark_done_button_content_description,
457+
),
458+
checkedIconRes = R.drawable.sample_checked_circle_icon,
459+
unCheckedIconRes = R.drawable.sample_circle_icon,
460+
onCheck = {},
461+
)
413462
}

‎samples/user-interface/appwidgets/src/main/java/com/example/platform/ui/appwidgets/glance/layout/collections/layout/ImageGridLayout.kt‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import androidx.glance.GlanceModifier
1010
import androidx.glance.GlanceTheme
1111
import androidx.glance.Image
1212
import androidx.glance.ImageProvider
13+
import androidx.glance.LocalContext
1314
import androidx.glance.LocalSize
1415
import androidx.glance.action.clickable
1516
import androidx.glance.appwidget.components.CircleIconButton
@@ -22,6 +23,8 @@ import androidx.glance.layout.fillMaxSize
2223
import androidx.glance.layout.fillMaxWidth
2324
import androidx.glance.layout.padding
2425
import androidx.glance.layout.wrapContentHeight
26+
import androidx.glance.preview.ExperimentalGlancePreviewApi
27+
import androidx.glance.preview.Preview
2528
import androidx.glance.text.FontWeight
2629
import androidx.glance.text.Text
2730
import androidx.glance.text.TextStyle
@@ -36,6 +39,9 @@ import com.example.platform.ui.appwidgets.glance.layout.collections.layout.Image
3639
import com.example.platform.ui.appwidgets.glance.layout.collections.layout.ImageGridLayoutSize.Medium
3740
import com.example.platform.ui.appwidgets.glance.layout.collections.layout.ImageGridLayoutSize.Small
3841
import com.example.platform.ui.appwidgets.glance.layout.utils.ActionUtils
42+
import com.example.platform.ui.appwidgets.glance.layout.utils.LargeWidgetPreview
43+
import com.example.platform.ui.appwidgets.glance.layout.utils.MediumWidgetPreview
44+
import com.example.platform.ui.appwidgets.glance.layout.utils.SmallWidgetPreview
3945

4046
/**
4147
* A layout focused on presenting a grid of images (with optional title and supporting text). The
@@ -295,4 +301,105 @@ private object ImageGridLayoutDimensions {
295301
else -> 1
296302
}
297303
}
304+
}
305+
306+
/**
307+
* Preview sizes for the widget covering the width based breakpoints of the image grid layout.
308+
*
309+
* This allows verifying updates across multiple breakpoints.
310+
*/
311+
@OptIn(ExperimentalGlancePreviewApi::class)
312+
@Preview(widthDp = 319, heightDp = 200)
313+
@Preview(widthDp = 321, heightDp = 200)
314+
@Preview(widthDp = 518, heightDp = 200)
315+
@Preview(widthDp = 520, heightDp = 200)
316+
private annotation class ImageGridBreakpointPreviews
317+
318+
/**
319+
* Previews for the image grid layout with both title and supporting text below the image
320+
*
321+
* First we look at the previews at defined breakpoints, tweaking them as necessary. In addition,
322+
* the previews at standard sizes allows us to quickly verify updates across min / max and common
323+
* widget sizes without needing to run the app or manually place the widget.
324+
*/
325+
@ImageGridBreakpointPreviews
326+
@SmallWidgetPreview
327+
@MediumWidgetPreview
328+
@LargeWidgetPreview
329+
@Composable
330+
private fun ImageTextGridLayoutPreview() {
331+
val context = LocalContext.current
332+
333+
ImageGridLayout(
334+
title = context.getString(R.string.sample_image_grid_app_widget_name),
335+
titleIconRes = R.drawable.sample_grid_icon,
336+
titleBarActionIconRes = R.drawable.sample_refresh_icon,
337+
titleBarActionIconContentDescription = context.getString(
338+
R.string.sample_refresh_icon_button_label
339+
),
340+
titleBarAction = {},
341+
items = listOf(
342+
ImageGridItemData(
343+
key = "0",
344+
image = null, // placeholder
345+
imageContentDescription = "A single water droplet rests in a budding red pansy.",
346+
title = "A single water droplet rests in a budding red pansy.",
347+
supportingText = "193 views"
348+
),
349+
ImageGridItemData(
350+
key = "1",
351+
image = null, // placeholder
352+
imageContentDescription = "A single water droplet rests in a budding red pansy.",
353+
title = "A single water droplet rests in a budding red pansy.",
354+
supportingText = "193 views"
355+
),
356+
ImageGridItemData(
357+
key = "2",
358+
image = null, // placeholder
359+
imageContentDescription = "Green plant, sky and flowers",
360+
title = "Green plant, sky and flowers",
361+
supportingText = "99,467 views"
362+
),
363+
ImageGridItemData(
364+
key = "3",
365+
image = null, // placeholder
366+
imageContentDescription = "A snow-shoer walking up Strelapass",
367+
title = "A snow-shoer walking up Strelapass",
368+
supportingText = "3,033 views"
369+
)
370+
)
371+
)
372+
}
373+
374+
/**
375+
* Previews for the image grid layout with only images
376+
*
377+
* First we look at the previews at defined breakpoints, tweaking them as necessary. In addition,
378+
* the previews at standard sizes allows us to quickly verify updates across min / max and common
379+
* widget sizes without needing to run the app or manually place the widget.
380+
*/
381+
@ImageGridBreakpointPreviews
382+
@SmallWidgetPreview
383+
@MediumWidgetPreview
384+
@LargeWidgetPreview
385+
@Composable
386+
private fun ImageOnlyGridLayoutPreview() {
387+
val context = LocalContext.current
388+
389+
ImageGridLayout(
390+
title = context.getString(R.string.sample_image_grid_app_widget_name),
391+
titleIconRes = R.drawable.sample_grid_icon,
392+
titleBarActionIconRes = R.drawable.sample_refresh_icon,
393+
titleBarActionIconContentDescription = context.getString(
394+
R.string.sample_refresh_icon_button_label
395+
),
396+
titleBarAction = {},
397+
items = (0..5).map { index ->
398+
ImageGridItemData(
399+
key = "$index",
400+
image = null, // placeholder
401+
imageContentDescription = null,
402+
)
403+
}
404+
)
298405
}

‎samples/user-interface/appwidgets/src/main/java/com/example/platform/ui/appwidgets/glance/layout/collections/layout/ImageTextListLayout.kt‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import androidx.glance.GlanceModifier
1010
import androidx.glance.GlanceTheme
1111
import androidx.glance.Image
1212
import androidx.glance.ImageProvider
13+
import androidx.glance.LocalContext
1314
import androidx.glance.LocalSize
1415
import androidx.glance.action.Action
1516
import androidx.glance.appwidget.components.CircleIconButton
@@ -21,6 +22,8 @@ import androidx.glance.layout.ContentScale
2122
import androidx.glance.layout.fillMaxSize
2223
import androidx.glance.layout.padding
2324
import androidx.glance.layout.size
25+
import androidx.glance.preview.ExperimentalGlancePreviewApi
26+
import androidx.glance.preview.Preview
2427
import androidx.glance.text.FontWeight
2528
import androidx.glance.text.Text
2629
import androidx.glance.text.TextStyle
@@ -37,6 +40,9 @@ import com.example.platform.ui.appwidgets.glance.layout.collections.layout.Image
3740
import com.example.platform.ui.appwidgets.glance.layout.collections.layout.ImageTextListLayoutSize.Medium
3841
import com.example.platform.ui.appwidgets.glance.layout.collections.layout.ImageTextListLayoutSize.Small
3942
import com.example.platform.ui.appwidgets.glance.layout.utils.ActionUtils.actionStartDemoActivity
43+
import com.example.platform.ui.appwidgets.glance.layout.utils.LargeWidgetPreview
44+
import com.example.platform.ui.appwidgets.glance.layout.utils.MediumWidgetPreview
45+
import com.example.platform.ui.appwidgets.glance.layout.utils.SmallWidgetPreview
4046

4147
/**
4248
* A layout focused on presenting a list of text with an image, and an optional icon button. The
@@ -422,4 +428,70 @@ private object Dimensions {
422428

423429
/** Corner radius for image in each item. */
424430
val imageCornerRadius = 12.dp
431+
}
432+
433+
/**
434+
* Preview sizes for the widget covering the width based breakpoints of the image grid layout.
435+
*
436+
* This allows verifying updates across multiple breakpoints.
437+
*/
438+
@OptIn(ExperimentalGlancePreviewApi::class)
439+
@Preview(widthDp = 259, heightDp = 200)
440+
@Preview(widthDp = 261, heightDp = 200)
441+
@Preview(widthDp = 480, heightDp = 200)
442+
@Preview(widthDp = 644, heightDp = 200)
443+
private annotation class ImageTextListBreakpointPreviews
444+
445+
/**
446+
* Previews for the image grid layout with both title and supporting text below the image
447+
*
448+
* First we look at the previews at defined breakpoints, tweaking them as necessary. In addition,
449+
* the previews at standard sizes allows us to quickly verify updates across min / max and common
450+
* widget sizes without needing to run the app or manually place the widget.
451+
*/
452+
@ImageTextListBreakpointPreviews
453+
@SmallWidgetPreview
454+
@MediumWidgetPreview
455+
@LargeWidgetPreview
456+
@Composable
457+
private fun ImageTextListLayoutPreview() {
458+
val context = LocalContext.current
459+
460+
ImageTextListLayout(
461+
items = listOf(
462+
ImageTextListItemData(
463+
key = "0",
464+
title = "Blossom, petal, flower",
465+
supportingText = "23,815 views",
466+
supportingImageBitmap = null // placeholder
467+
),
468+
ImageTextListItemData(
469+
key = "1",
470+
title = "Orchids at New York Botanical Garden",
471+
supportingText = "205,481 views",
472+
supportingImageBitmap = null // placeholder
473+
),
474+
ImageTextListItemData(
475+
key = "2",
476+
title = "Tabletop composition with flower",
477+
supportingText = "85,060 views",
478+
supportingImageBitmap = null // placeholder
479+
),
480+
ImageTextListItemData(
481+
key = "3",
482+
title = "Wild bee on flower",
483+
supportingText = "6,692 views ",
484+
supportingImageBitmap = null // placeholder
485+
)
486+
),
487+
title = context.getString(
488+
R.string.sample_text_and_image_list_app_widget_name
489+
),
490+
titleIconRes = R.drawable.sample_image_icon,
491+
titleBarActionIconRes = R.drawable.sample_refresh_icon,
492+
titleBarActionIconContentDescription = context.getString(
493+
R.string.sample_refresh_icon_button_label
494+
),
495+
titleBarAction = {},
496+
)
425497
}

0 commit comments

Comments
 (0)