[JetChat] Add glance widget for JetChat App #1424

Jetchat/README.md

@@ -25,6 +25,10 @@ This sample showcases:
 
 <img src="screenshots/screenshots.png"/>
 
+<img src="screenshots/widget.png" width="300"/>
+
+<img src="screenshots/widget_discoverability.png" width="300"/>
+
 ### Status: 🚧 In progress
 
 Jetchat is still in under development, and some features are not yet implemented.

Jetchat/app/build.gradle.kts

@@ -88,6 +88,8 @@ dependencies {
     implementation(composeBom)
     androidTestImplementation(composeBom)
 
+    implementation(libs.androidx.glance.appwidget)
+    implementation(libs.androidx.glance.material3)
     implementation(libs.kotlin.stdlib)
     implementation(libs.kotlinx.coroutines.android)
 

Jetchat/app/src/main/AndroidManifest.xml

@@ -34,6 +34,14 @@
                 <category android:name="android.intent.category.LAUNCHER" />
             </intent-filter>
         </activity>
-
+        <receiver android:name=".widget.WidgetReceiver"
+            android:exported="true">
+            <intent-filter>
+                <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
+            </intent-filter>
+            <meta-data
+                android:name="android.appwidget.provider"
+                android:resource="@xml/my_app_widget_info" />
+        </receiver>
     </application>
 </manifest>

Jetchat/app/src/main/java/com/example/compose/jetchat/components/JetchatDrawer.kt

@@ -16,6 +16,11 @@
 
 package com.example.compose.jetchat.components
 
+import android.appwidget.AppWidgetManager
+import android.content.ComponentName
+import android.content.Context
+import android.os.Build
+import android.widget.Toast
 import androidx.annotation.DrawableRes
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
@@ -45,13 +50,16 @@ import androidx.compose.ui.Alignment.Companion.CenterVertically
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.example.compose.jetchat.R
 import com.example.compose.jetchat.data.colleagueProfile
 import com.example.compose.jetchat.data.meProfile
 import com.example.compose.jetchat.theme.JetchatTheme
+import com.example.compose.jetchat.widget.WidgetReceiver
 
 @Composable
 fun JetchatDrawerContent(
@@ -61,7 +69,11 @@ fun JetchatDrawerContent(
 ) {
     // Use windowInsetsTopHeight() to add a spacer which pushes the drawer content
     // below the status bar (y-axis)
-    Column(modifier = Modifier.fillMaxSize().background(MaterialTheme.colorScheme.background)) {
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(MaterialTheme.colorScheme.background)
+    ) {
         Spacer(Modifier.windowInsetsTopHeight(WindowInsets.statusBars))
         DrawerHeader()
         DividerItem()
@@ -74,9 +86,13 @@ fun JetchatDrawerContent(
         ProfileItem("Taylor Brooks", colleagueProfile.photo) {
             onProfileClicked(colleagueProfile.userId)
         }
+        DividerItem(modifier = Modifier.padding(horizontal = 28.dp))
+        DrawerItemHeader("Settings")
+        WidgetDiscoverability()
     }
 }
 
+
 @Composable
 private fun DrawerHeader() {
     Row(modifier = Modifier.padding(16.dp), verticalAlignment = CenterVertically) {
@@ -91,6 +107,7 @@ private fun DrawerHeader() {
         )
     }
 }
+
 @Composable
 private fun DrawerItemHeader(text: String) {
     Box(
@@ -200,6 +217,7 @@ fun DrawerPreview() {
         }
     }
 }
+
 @Composable
 @Preview
 fun DrawerPreviewDark() {
@@ -211,3 +229,50 @@ fun DrawerPreviewDark() {
         }
     }
 }
+
+
+@Composable
+private fun WidgetDiscoverability() {
+    val context = LocalContext.current
+    Row(
+        modifier = Modifier
+            .height(56.dp)
+            .fillMaxWidth()
+            .padding(horizontal = 12.dp)
+            .clip(CircleShape)
+            .clickable(onClick = {
+                addWidgetToHomeScreen(context)
+            }),
+        verticalAlignment = CenterVertically
+    ) {
+        Text(
+            stringResource(id = R.string.add_widget_to_home_page),
+            style = MaterialTheme.typography.bodyMedium,
+            color = MaterialTheme.colorScheme.onSurface,
+            modifier = Modifier.padding(start = 12.dp)
+        )
+    }
+}
+
+private fun addWidgetToHomeScreen(context: Context) {
+    val appWidgetManager = AppWidgetManager.getInstance(context)
+    val myProvider = ComponentName(context, WidgetReceiver::class.java)
+
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+        if (appWidgetManager.isRequestPinAppWidgetSupported) {
+            appWidgetManager.requestPinAppWidget(myProvider, null, null)
+        } else {
+            Toast.makeText(
+                context,
+                "Unable to add widget, please add from home screen",
+                Toast.LENGTH_LONG
+            ).show()
+        }
+    } else {
+        Toast.makeText(
+            context,
+            "Unable to add widget, please add from home screen",
+            Toast.LENGTH_LONG
+        ).show()
+    }
+}

Jetchat/app/src/main/java/com/example/compose/jetchat/conversation/ConversationUiState.kt

@@ -39,5 +39,5 @@ data class Message(
     val content: String,
     val timestamp: String,
     val image: Int? = null,
-    val authorImage: Int = if (author == "me") R.drawable.ali else R.drawable.someone_else
+    val authorImage: Int = if (author == "me") R.drawable.ali else R.drawable.someone_else,
 )

Jetchat/app/src/main/java/com/example/compose/jetchat/data/FakeData.kt

@@ -64,6 +64,58 @@ private val initialMessages = listOf(
         "8:03 PM"
     )
 )
+val unreadMessages = listOf(
+    Message(
+        "Taylor Brooks",
+        "You can use all the same stuff",
+        "8:05 PM"
+    ),
+    Message(
+        "Taylor Brooks",
+        "@aliconors Take a look at the `Flow.collectAsStateWithLifecycle()` APIs",
+        "8:05 PM"
+    ),
+    Message(
+        "Taylor Brooks",
+        "You can use all the same stuff",
+        "8:05 PM"
+    ),
+    Message(
+        "Taylor Brooks",
+        "@aliconors Take a look at the `Flow.collectAsStateWithLifecycle()` APIs",
+        "8:05 PM"
+    ),
+    Message(
+        "Taylor Brooks",
+        "You can use all the same stuff",
+        "8:05 PM"
+    ),
+    Message(
+        "Taylor Brooks",
+        "@aliconors Take a look at the `Flow.collectAsStateWithLifecycle()` APIs",
+        "8:05 PM"
+    ),
+    Message(
+        "Taylor Brooks",
+        "You can use all the same stuff",
+        "8:05 PM"
+    ),
+    Message(
+        "Taylor Brooks",
+        "@aliconors Take a look at the `Flow.collectAsStateWithLifecycle()` APIs",
+        "8:05 PM"
+    ),
+    Message(
+        "Taylor Brooks",
+        "You can use all the same stuff",
+        "8:05 PM"
+    ),
+    Message(
+        "Taylor Brooks",
+        "@aliconors Take a look at the `Flow.collectAsStateWithLifecycle()` APIs",
+        "8:05 PM"
+    ),
+)
 
 val exampleUiState = ConversationUiState(
     initialMessages = initialMessages,

Jetchat/app/src/main/java/com/example/compose/jetchat/widget/JetChatWidget.kt

@@ -0,0 +1,19 @@
+package com.example.compose.jetchat.widget
+
+import android.content.Context
+import androidx.glance.GlanceId
+import androidx.glance.GlanceTheme
+import androidx.glance.appwidget.GlanceAppWidget
+import androidx.glance.appwidget.provideContent
+import com.example.compose.jetchat.widget.composables.MessagesWidget
+
+class JetChatWidget : GlanceAppWidget() {
+
+    override suspend fun provideGlance(context: Context, id: GlanceId) {
+        provideContent {
+            GlanceTheme {
+                MessagesWidget()
+            }
+        }
+    }
+}

Jetchat/app/src/main/java/com/example/compose/jetchat/widget/WidgetReceiver.kt

@@ -0,0 +1,11 @@
+package com.example.compose.jetchat.widget
+
+import androidx.glance.appwidget.GlanceAppWidget
+import androidx.glance.appwidget.GlanceAppWidgetReceiver
+
+class WidgetReceiver : GlanceAppWidgetReceiver() {
+
+    override val glanceAppWidget: GlanceAppWidget
+        get() = JetChatWidget()
+
+}

Jetchat/app/src/main/java/com/example/compose/jetchat/widget/composables/MessagesWidget.kt

@@ -0,0 +1,60 @@
+package com.example.compose.jetchat.widget.composables
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.unit.dp
+import androidx.glance.GlanceModifier
+import androidx.glance.ImageProvider
+import androidx.glance.LocalContext
+import androidx.glance.action.actionStartActivity
+import androidx.glance.action.clickable
+import androidx.glance.appwidget.components.Scaffold
+import androidx.glance.appwidget.components.TitleBar
+import androidx.glance.appwidget.lazy.LazyColumn
+import androidx.glance.layout.Column
+import androidx.glance.layout.Spacer
+import androidx.glance.layout.fillMaxWidth
+import androidx.glance.layout.height
+import androidx.glance.text.FontWeight
+import androidx.glance.text.Text
+import androidx.glance.text.TextStyle
+import com.example.compose.jetchat.NavActivity
+import com.example.compose.jetchat.R
+import com.example.compose.jetchat.conversation.Message
+import com.example.compose.jetchat.data.unreadMessages
+
+@Composable
+fun MessagesWidget() {
+    Scaffold(titleBar = {
+        TitleBar(
+            startIcon = ImageProvider(R.drawable.ic_jetchat),
+            iconColor = null,
+            title = LocalContext.current.getString(R.string.app_name_unreads),
+        )
+    }) {
+        val unreadMessage = unreadMessages
+        LazyColumn(modifier = GlanceModifier.fillMaxWidth()) {
+            unreadMessage.forEach {
+                item {
+                    Column(modifier = GlanceModifier.fillMaxWidth()) {
+                        MessageItem(it)
+                        Spacer(modifier = GlanceModifier.height(10.dp))
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun MessageItem(message: Message) {
+    Column(modifier = GlanceModifier.clickable(actionStartActivity<NavActivity>()).fillMaxWidth()) {
+        Text(
+            text = message.author,
+            style = TextStyle(fontWeight = FontWeight.Bold)
+        )
+        Text(
+            text = message.content,
+            style = TextStyle(fontWeight = FontWeight.Normal)
+        )
+    }
+}

Jetchat/app/src/main/res/layout/widget_error_layout.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:background="#ffffff"
+    android:gravity="center">
+
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:textColor="@color/black30"
+        android:text="@string/widget_loading_error" />
+</RelativeLayout>

Jetchat/app/src/main/res/layout/widget_loading_layout.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:background="#ffffff">
+
+    <ProgressBar
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_gravity="center" />
+</FrameLayout>

Jetchat/app/src/main/res/values/strings.xml

@@ -67,5 +67,8 @@
     <string name="more_options">More options</string>
     <string name="touch_and_hold_to_record">Touch and hold to record</string>
     <string name="record_message">Record voice message</string>
+    <string name="widget_loading_error">Cannot load Widget</string>
+    <string name="app_name_unreads">JetChat (Un-Reads)</string>
+    <string name="add_widget_to_home_page">Add Widget to Home Page</string>
 
 </resources>

Jetchat/app/src/main/res/xml/my_app_widget_info.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
+    android:initialLayout="@layout/widget_loading_layout"
+    android:minWidth="276dp"
+    android:minHeight="102dp"
+    android:previewImage="@drawable/widget_icon"
+    android:resizeMode="none"
+    android:targetCellWidth="4"
+    android:targetCellHeight="3" />