[Android, Kotlin] Compose에서 glance를 이용해 위젯 만들기

 

이번에 공부한 내용은 compose로 위젯을 만드는 라이브러리인 glance이다.

glance의 존재(?)는 이전에 들으러 갔던 컨퍼런스 강연에서 glance에 관련된 강연을 들게 되었는데, 그때부터 기회가 되면 공부해 보자 라는 생각을 하게 되었다. 그게 지금이다.

glance는 compose에서 위젯을 쉽게 만들 수 있게 해주는 라이브러리이고 2023년 8~9월에 1.0.0을 출시한 따끈따끈한 신상(?) 라이브러리이다.

아무튼 그래서 이번에 compose glance를 공부한 내용을 블로그에 정리해보려 한다.

그럼 바로 glance 사용법을 알아보자.

 

1. 라이브러리 추가하기

먼저 glance 라이브러리를 추가해 준다.

// glance
implementation("androidx.glance:glance-appwidget:1.0.0")
implementation("androidx.glance:glance-material3:1.0.0")

 

2. 위젯 레이아웃 구성하기

라이브러리 추가 후, 다음으로는 위젯의 UI를 구성해 보겠다.

object CounterWidget: GlanceAppWidget() {
    // widget body
    override suspend fun provideGlance(context: Context, id: GlanceId) {
        // use provideContent, you can use composable function
        provideContent {
            
        }
    }
}

위젯을 만들기 위해서는 GlanceAppWidget을 상속받아서 provideGlance 함수 안에 widget ui를 구성해야 한다.

그러나 그냥 provideGlance 함수 안에서는 Text나 Button 같은 composable function을 사용할 수 없으므로 provideContent를 사용해 그 안에 ui를 구성한다.

 

이번에 필자가 만들 예제는 philipp lackner의 영상으로 공부했다.

따라서 영상에 나오는 위젯 안에 버튼을 누르면 숫자가 +1 되는 간단한 예제를 만들어 보겠다.

https://www.youtube.com/watch?v=bhrN7yFG0D4&t=729s&pp=ygUWYW5kcm9pZCBjb21wb3NlIGdsYW5jZQ%3D%3D 

 

그러면 다음과 같이 UI를 구성할 수 있다.

Text(
    text = "0",
    style = TextStyle(
        fontWeight = FontWeight.Medium,
        color = ColorProvider(Color.White),
        fontSize = 26.sp
    )
)

Button(
    text = "추가",
    onClick = // add action
)

Text 부분에는 클릭하면 text가 변경될 수 있도록 로직을 짜야하고, Button에서는 click 했을 때 click action을 생성해 주어야 한다.

하지만 눈치가 빠른 분들은 이상함을 느꼈을 것이다.

바로 onClick부분이 lambda(람다) 형식이 아니라는 점인데, 위에 필자가 언급한 영상을 보면 금방 알 수 있을 것이다.

위의 Text와 Button Composable function들은 android에서 자체 제공하는 함수가 아닌 glance에서 제공하는 함수들이다.

그래서 기본 composable function들과 혼동하지 않도록 주의하자(함수 구성 요소들도 다르기에)

하지만 그냥 glance function 말고 기본 function은 사용하면 안 된다.

빌드되는 데는 문제가 없지만, 위젯을 폰에서 만들면 UI 요소 대신 위젯을 로드할 수 없다는 텍스트가 여러분들을 반겨줄 것이다.

 

그러면 중간 코드는 다음과 같다.

object CounterWidget: GlanceAppWidget() {
    // widget body
    override suspend fun provideGlance(context: Context, id: GlanceId) {
        // use provideContent, you can use composable function
        provideContent {
            Text(
                text = "0",
                style = TextStyle(
                    fontWeight = FontWeight.Medium,
                    color = ColorProvider(Color.White),
                    fontSize = 26.sp
                )
            )

            Button(
                text = "추가",
                onClick = // add action
            )
        }
    }
}

이제는 Button의 click action을 만들어줄 차례이다.

 

3. Click action 만들기

먼저 버튼 클릭 액션 클래스를 따로 생성 후, glance의 ActionCallback을 상속받아 준다.

// widget update action callback
object IncrementActionCallback: ActionCallback {
    override suspend fun onAction(
        context: Context,
        glanceId: GlanceId,
        parameters: ActionParameters
    ) {
    
    }
}

onAction안에 클릭 action을 줄 수 있다.

영상에서는 Text의 정보를 preferenceKey로 저장하였기에 preferenceKey를 담은 변수를 만들어 준다.

val countKey = intPreferencesKey("count")

그리고 Text에 적용할 클릭 카운트 변수를 만들어 준다.

val count = currentState(key = countKey) ?: 0

countKey의 value가 null이면 기본값(0)으로 시작하도록 만들어 주었다.

 

이제는 click action 클래스에서 작업을 해줄 차례이다.

glance에서는 action을 수행 시 위젯을 update 하는 형식으로 변경된 UI를 적용하는 것 같다.

updateAppWidgetState(context, glanceId) { prefs ->
    val currentCount = prefs[CounterWidget.countKey]
    if (currentCount != null) prefs[CounterWidget.countKey] = currentCount + 1
    else prefs[CounterWidget.countKey] = 1
}
CounterWidget.update(context, glanceId)

updateAppWidgetState의 param으로 이전에 생성한 onAction의 param을 추가해서 사용할 수 있다.

현재 count를 불러와서 null이 아닌 경우에는 이전 count의 +1을,

null(0)인 경우에는 1로 바뀌도록 작업을 해 주었다.

 

updateAppWidgetState 작업을 해주고 나서 위젯 UI를 업데이트해 주는 작업은 필수이다.

 

Click action callback의 전체 코드

// widget update action callback
object IncrementActionCallback: ActionCallback {
    override suspend fun onAction(
        context: Context,
        glanceId: GlanceId,
        parameters: ActionParameters
    ) {
        updateAppWidgetState(context, glanceId) { prefs ->
            val currentCount = prefs[CounterWidget.countKey]
            if (currentCount != null) prefs[CounterWidget.countKey] = currentCount + 1
            else prefs[CounterWidget.countKey] = 1
        }
        CounterWidget.update(context, glanceId)
    }
}

이제 기능적 부분은 완료하였으니 핸드폰에서 보이게 하는 작업을 해줄 것이다.

 

4.  위젯 마무리 작업

이번에 변경해야 할 작업은 휴대전화에서 위젯이 보이는 것에 대한 설정을 해주어야 한다.

예를 들면,

위의 시계 앱의 위젯처럼, 하단의 Title과 기본 크기 등을 설정할 수 있다.

res -> xml 패키지 안에 휴대폰에 보이는 위젯의 정보를 수정할 수 있도록 파일을 만들어 주겠다.

파일 이름 설정 후, root element를 appwidget-provider로 설정하고 생성한다.

 

counter_widget_info.xml

<?xml version="1.0" encoding="utf-8"?>
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:previewImage="@drawable/compose"
    android:description="@string/app_name"
    android:minResizeWidth="50dp"
    android:minResizeHeight="50dp"
    android:resizeMode="horizontal|vertical"
    android:widgetCategory="home_screen" />

description이 폰에서 보이는 Title이고 minReziseWidth/Height로 개발자가 직접 크기를 정해줄 수 있다.

resizeMode는 사용자가 위젯을 길게 누르면 위젯을 가로 또는 세로로 늘릴 수 있는 기능을 제공한다.

기본 위젯

가로로 늘린 위젯

세로로 늘린 위젯

previewImage는 위젯을 화면에 넣을 때 뜨는 기본 이미지를 보여준다.(위의 시계 위젯의 기본 이미지가 시계인 것처럼)

이제 마지막으로 manifest를 건드려야 할 차례이다.

 

manifest에서는 위젯을 receiver 태그를 이용해 위젯 리시버를 달아 주어야 하는데 그것이 GlanceAppWidgetReceiver이다.

하지만 아직 만들어주지 않았기 때문에 빠르게 만들어 주도록 하겠다.

class SimpleCountWidgetReceiver : GlanceAppWidgetReceiver() {
    override val glanceAppWidget: GlanceAppWidget
        get() = CounterWidget
}

클래스를 만들어 GlanceAppWidgetReceiver를 상속받은 후, glanceAppWidget 변수를 받아와 get() 부분에 자신이 생성한 위젯 이름을 넣어 준다.

 

위젯 리시버 생성까지 완료했으면 진짜로 manifest에 리시버를 넣어주는 작업을 해주겠다.

리시버는 application 안에 넣어주자.

<receiver android:name=".SimpleCountWidgetReceiver" 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/counter_widget_info" />
</receiver>

 

receiver name에 바로 전에 만든 GlanceAppWidgetReceiver 클래스를 넣어주고, meta data에 resource에 이전에 생성한 xml 파일을 넣어준다.

intent filter의 name과 meta data의 name의 자동완성이 안 되는 경우가 있을 건데, 당황하지 말고 정확히 타이핑을 해주기만 하면 전혀 문제 될 게 없으니 안심해도 된다.

 

위의 작업까지 완료했으면, 결과를 확인해 보자.

 

5. 결과

직접 만든 위젯이 정상적으로 업로드된 것을 볼 수 있다.

위젯을 넣어주고 나면, 처음에는 다음과 같이 위젯이 생성될 것이다.

추가 버튼을 클릭하면 text가 정상적으로 count 되어 바뀌는 것을 볼 수 있다.

 

 

정리

---

• compose로 위젯을 만들어볼 기회가 없기도 했고, 이 라이브러리가 있는 줄도 몰랐었는데 컨퍼런스에서 우연히 듣게 된 내용으로 glance를 공부하여 직접 예제를 만들어 보았다. 컨퍼런스 강사님께 감사를 표한다 :)
• glance는 아직 출시 초기인데도 상당히 완성도가 높아 보였다. 자신이 원하는 위젯을 자유롭게 만들 수 있다는 점이 장점 같다. 단점을 뽑자면 glance의 composable과 기존 compose의 composable의 이름이 똑같아서 혼동이 오는 정도?
• 시간이 지나면서 아우 유용한 compose 전용 위젯 생성 라이브러리가 될 것 같다.

glance에 관한 유용한 정보와 제 글의 잘못된 점을 알고 계신 분들의 댓글은 적극 환영입니다.