reis-mobile 0.3.6 → 0.5.0

package/skills/mobile-android/references/devices/display-glasses-with-jetpack-compose-glimmer/references/iconsizes-source.md

@@ -0,0 +1,78 @@
+When creating a Glimmer Icon component, refer to the following source code in
+`IconSizes.kt` for setting icon sizes:
+
+
+```kotlin
+/*
+ * Copyright 2025 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package androidx.xr.glimmer
+
+import androidx.compose.runtime.Immutable
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+/**
+ * A set of named icon sizes.
+ *
+ * Sizes can be provided using [LocalIconSize] to set the size for [Icon]s within a component, or
+ * they can be set explicitly using [androidx.compose.foundation.layout.size].
+ *
+ * @property small the size of a small icon.
+ * @property medium the size of a medium icon. This is the default icon size.
+ * @property large the size of a large icon.
+ * @see Icon
+ * @see LocalIconSize
+ */
+@Immutable
+public class IconSizes(
+    public val small: Dp = 32.dp,
+    public val medium: Dp = 40.dp,
+    public val large: Dp = 48.dp,
+) {
+
+    /** Returns a copy of this IconSizes, optionally overriding some of the values. */
+    public fun copy(
+        small: Dp = this.small,
+        medium: Dp = this.medium,
+        large: Dp = this.large,
+    ): IconSizes = IconSizes(small = small, medium = medium, large = large)
+
+    override fun equals(other: Any?): Boolean {
+        if (this === other) return true
+        if (other !is IconSizes) return false
+
+        if (small != other.small) return false
+        if (medium != other.medium) return false
+        if (large != other.large) return false
+
+        return true
+    }
+
+    override fun hashCode(): Int {
+        var result = small.hashCode()
+        result = 31 * result + medium.hashCode()
+        result = 31 * result + large.hashCode()
+        return result
+    }
+
+    override fun toString(): String {
+        return "IconSizes(small=$small, medium=$medium, large=$large)"
+    }
+}
+```
+
+<br />

package/skills/mobile-android/references/devices/display-glasses-with-jetpack-compose-glimmer/references/list-source.md

@@ -0,0 +1,27 @@
+When creating a Glimmer List component, refer to the following source code in
+`GlimmerLazyColumnSamples.kt`:
+
+
+```kotlin
+@Composable
+fun GlimmerLazyColumnSample() {
+    GlimmerLazyColumn {
+        item { ListItem { Text("Header") } }
+        items(count = 10) { index -> ListItem { Text("Item-$index") } }
+        item { ListItem { Text("Footer") } }
+    }
+}
+```
+
+```kotlin
+@Composable
+fun GlimmerLazyColumnWithTitleChipSample() {
+    val ingredientItems =
+        listOf("Milk", "Flour", "Egg", "Salt", "Apples", "Butter", "Vanilla", "Sugar", "Cinnamon")
+    GlimmerLazyColumn(title = { TitleChip { Text("Ingredients") } }) {
+        items(ingredientItems) { text -> ListItem { Text(text) } }
+    }
+}
+```
+
+<br />

package/skills/mobile-android/references/devices/display-glasses-with-jetpack-compose-glimmer/references/listitem-source.md

@@ -0,0 +1,272 @@
+When creating a Glimmer Icon Sizes component, refer to the following source
+code in `ListItem.kt` for list items:
+
+
+```kotlin
+/*
+ * Copyright 2025 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package androidx.xr.glimmer
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.focusable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.defaultMinSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Alignment.Companion.CenterVertically
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.unit.dp
+
+/**
+ * ListItem is a component used to represent a single item in a
+ * [androidx.xr.glimmer.list.GlimmerLazyColumn]. A ListItem has a primary label [content], and may
+ * also have any combination of [supportingLabel], [leadingIcon], and [trailingIcon]. The supporting
+ * label is displayed below the primary label and can be used to provide additional information. A
+ * ListItem fills the maximum width available by default.
+ *
+ * This ListItem is focusable - see the other [ListItem] overload for a clickable ListItem.
+ *
+ * A simple ListItem with just a primary label:
+ *
+ * @sample androidx.xr.glimmer.samples.ListItemSample
+ *
+ * A ListItem with a primary and supporting label:
+ *
+ * @sample androidx.xr.glimmer.samples.ListItemWithSupportingLabelSample
+ *
+ * A ListItem with a primary label, a supporting label, and a leading icon:
+ *
+ * @sample androidx.xr.glimmer.samples.ListItemWithSupportingLabelAndLeadingIconSample
+ * @param modifier the [Modifier] to be applied to this list item
+ * @param supportingLabel optional supporting label to be placed underneath the primary label
+ *   [content]
+ * @param leadingIcon optional leading icon to be placed before the primary label [content]. This is
+ *   typically an [Icon] tinted with [contentColor] by default.
+ * @param trailingIcon optional trailing icon to be placed after the primary label [content]. This
+ *   is typically an [Icon] tinted with [contentColor] by default.
+ * @param shape the [Shape] used to clip this list item, and also used to draw the background and
+ *   border
+ * @param color background color of this list item
+ * @param contentColor content color used by components inside [content], [supportingLabel],
+ *   [leadingIcon], and [trailingIcon].
+ * @param contentPadding the spacing values to apply internally between the container and the
+ *   content
+ * @param interactionSource an optional hoisted [MutableInteractionSource] for observing and
+ *   emitting Interactions for this list item. You can use this to change the list item's appearance
+ *   or preview the list item in different states. Note that if `null` is provided, interactions
+ *   will still happen internally.
+ * @param content the main content / primary label to display inside this list item
+ */
+@Composable
+public fun ListItem(
+    modifier: Modifier = Modifier,
+    supportingLabel: @Composable (() -> Unit)? = null,
+    leadingIcon: @Composable (() -> Unit)? = null,
+    trailingIcon: @Composable (() -> Unit)? = null,
+    shape: Shape = GlimmerTheme.shapes.medium,
+    color: Color = GlimmerTheme.colors.surface,
+    contentColor: Color = calculateContentColor(color),
+    contentPadding: PaddingValues = ListItemDefaults.contentPadding,
+    interactionSource: MutableInteractionSource? = null,
+    content: @Composable () -> Unit,
+) {
+    ListItemImpl(
+        modifier = modifier,
+        onClick = null,
+        supportingLabel = supportingLabel,
+        leadingIcon = leadingIcon,
+        trailingIcon = trailingIcon,
+        shape = shape,
+        color = color,
+        contentColor = contentColor,
+        contentPadding = contentPadding,
+        interactionSource = interactionSource,
+        content = content,
+    )
+}
+
+/**
+ * ListItem is a component used to represent a single item in a
+ * [androidx.xr.glimmer.list.GlimmerLazyColumn]. A ListItem has a primary label [content], and may
+ * also have any combination of [supportingLabel], [leadingIcon], and [trailingIcon]. The supporting
+ * label is displayed below the primary label and can be used to provide additional information. A
+ * ListItem fills the maximum width available by default.
+ *
+ * This ListItem is focusable and clickable - see the other [ListItem] overload for a ListItem that
+ * is only focusable.
+ *
+ * A simple clickable ListItem with just a primary label:
+ *
+ * @sample androidx.xr.glimmer.samples.ClickableListItemSample
+ *
+ * A clickable ListItem with a primary and supporting label:
+ *
+ * @sample androidx.xr.glimmer.samples.ClickableListItemWithSupportingLabelSample
+ *
+ * A clickable ListItem with a primary label, a supporting label, and a leading icon:
+ *
+ * @sample androidx.xr.glimmer.samples.ClickableListItemWithSupportingLabelAndLeadingIconSample
+ * @param onClick called when this list item is clicked
+ * @param modifier the [Modifier] to be applied to this list item
+ * @param supportingLabel optional supporting label to be placed underneath the primary label
+ *   [content]
+ * @param leadingIcon optional leading icon to be placed before the primary label [content]. This is
+ *   typically an [Icon] tinted with [contentColor] by default.
+ * @param trailingIcon optional trailing icon to be placed after the primary label [content]. This
+ *   is typically an [Icon] tinted with [contentColor] by default.
+ * @param shape the [Shape] used to clip this list item, and also used to draw the background and
+ *   border
+ * @param color background color of this list item
+ * @param contentColor content color used by components inside [content], [supportingLabel],
+ *   [leadingIcon], and [trailingIcon].
+ * @param contentPadding the spacing values to apply internally between the container and the
+ *   content
+ * @param interactionSource an optional hoisted [MutableInteractionSource] for observing and
+ *   emitting Interactions for this list item. You can use this to change the list item's appearance
+ *   or preview the list item in different states. Note that if `null` is provided, interactions
+ *   will still happen internally.
+ * @param content the main content / primary label to display inside this list item
+ */
+@Composable
+public fun ListItem(
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    supportingLabel: @Composable (() -> Unit)? = null,
+    leadingIcon: @Composable (() -> Unit)? = null,
+    trailingIcon: @Composable (() -> Unit)? = null,
+    shape: Shape = GlimmerTheme.shapes.medium,
+    color: Color = GlimmerTheme.colors.surface,
+    contentColor: Color = calculateContentColor(color),
+    contentPadding: PaddingValues = ListItemDefaults.contentPadding,
+    interactionSource: MutableInteractionSource? = null,
+    content: @Composable () -> Unit,
+) {
+    ListItemImpl(
+        modifier = modifier,
+        onClick = onClick,
+        supportingLabel = supportingLabel,
+        leadingIcon = leadingIcon,
+        trailingIcon = trailingIcon,
+        shape = shape,
+        color = color,
+        contentColor = contentColor,
+        contentPadding = contentPadding,
+        interactionSource = interactionSource,
+        content = content,
+    )
+}
+
+@Composable
+private fun ListItemImpl(
+    modifier: Modifier,
+    onClick: (() -> Unit)?,
+    supportingLabel: @Composable (() -> Unit)?,
+    leadingIcon: @Composable (() -> Unit)?,
+    trailingIcon: @Composable (() -> Unit)?,
+    shape: Shape,
+    color: Color,
+    contentColor: Color,
+    contentPadding: PaddingValues,
+    interactionSource: MutableInteractionSource?,
+    content: @Composable () -> Unit,
+) {
+    val iconSize = GlimmerTheme.iconSizes.large
+    val typography = GlimmerTheme.typography
+    val innerPadding = GlimmerTheme.componentSpacingValues.small
+    val internalInteractionSource = interactionSource ?: remember { MutableInteractionSource() }
+
+    val surfaceModifier =
+        Modifier.surface(
+                shape = shape,
+                color = color,
+                contentColor = contentColor,
+                // TODO(b/532516157): Reenable depthEffect after b/446294492 is fixed.
+                depthEffect = null,
+                interactionSource = internalInteractionSource,
+            )
+            .then(
+                if (onClick != null) {
+                    Modifier.clickable(
+                        interactionSource = internalInteractionSource,
+                        onClick = onClick,
+                    )
+                } else {
+                    Modifier.focusable(interactionSource = internalInteractionSource)
+                }
+            )
+
+    Row(
+        modifier =
+            modifier
+                .then(surfaceModifier)
+                .fillMaxWidth()
+                .defaultMinSize(minHeight = MinimumHeight)
+                .padding(contentPadding),
+        verticalAlignment = CenterVertically,
+    ) {
+        if (leadingIcon != null) {
+            Box(modifier = Modifier.align(Alignment.Top), contentAlignment = Alignment.TopStart) {
+                CompositionLocalProvider(LocalIconSize provides iconSize, content = leadingIcon)
+            }
+        }
+        Column(Modifier.weight(1f).padding(horizontal = innerPadding)) {
+            if (supportingLabel == null) {
+                CompositionLocalProvider(
+                    LocalTextStyle provides typography.bodySmall,
+                    content = content,
+                )
+            } else {
+                CompositionLocalProvider(
+                    LocalTextStyle provides typography.titleSmall,
+                    content = content,
+                )
+                CompositionLocalProvider(
+                    LocalTextStyle provides typography.bodySmall,
+                    content = supportingLabel,
+                )
+            }
+        }
+        if (trailingIcon != null) {
+            Box(modifier = Modifier.align(Alignment.Top), contentAlignment = Alignment.TopEnd) {
+                CompositionLocalProvider(LocalIconSize provides iconSize, content = trailingIcon)
+            }
+        }
+    }
+}
+
+/** Default values used for [ListItem] */
+public object ListItemDefaults {
+    /** Default content padding used for a [ListItem] */
+    public val contentPadding: PaddingValues
+        @Composable get() = PaddingValues(GlimmerTheme.componentSpacingValues.large)
+}
+
+/** Default minimum height for a [ListItem] */
+private val MinimumHeight = 80.dp
+```
+
+<br />