Zenn
⌚

【Wear Compose】 Jetpack ComposeをWearOS開発で導入

2022/05/12に公開
Android
Kotlin
Wear OS
composewear
tech

はじめに

こんにちは。

今回はJetpack Composeで作成したプロジェクトでWear OSアプリを開発できるように修正してみたので、
簡単に紹介したいと思います。

経緯

私は今仕事でスマートウォッチのアプリの開発をしていますが、Jetpack ComposeのWear版、Wear Composeを導入するとき情報がなく、困ったのでシェアします！

Wear Composeは1.0.0 alpha21を使用しています（現在では最新のバージョンです）

github

https://github.com/lil-shimon/SampleComposeWear
ソースコード見たい方はこちらからどうぞ！

準備

  • Android Studio または IntelliJ Idea

導入方法

  1. Jetpack Composeでプロジェクトを作成
  2. build.gradle (app) を修正
/// minSdkを26に設定
defaultConfig {
        minSdk 26
    }
/// dependenciesにwear composeを追加
dependencies {
    // for wear
    implementation 'androidx.wear.compose:compose-material:1.0.0-alpha21'
    implementation 'androidx.wear.compose:compose-foundation:1.0.0-alpha21'
}

3.AndroidManifestを修正

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.example.samplewearcompose">

    <!--  追加  -->
    <uses-permission android:name="android.permission.WAKE_LOCK" />

    <!--  追加  -->
    <uses-feature android:name="android.hardware.type.watch" />

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.SampleWearCompose"
        tools:targetApi="31">

        <!--  追加  -->
        <uses-library
            android:name="com.google.android.wearable"
            android:required="false" />

        <!--  追加  -->
        <meta-data
            android:name="com.google.android.wearable.standalone"
            android:value="true" />

        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:label="@string/app_name"
            android:theme="@style/Theme.SampleWearCompose">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>
  1. MainActivity.ktを修正
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            <Project name>Theme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    WearApp(greetingName = "Android")
                }
            }
        }
    }
}

@Composable
fun WearApp(greetingName: String) {
    <Project name>Theme {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .background(MaterialTheme.colors.background)
                .selectableGroup(),
            verticalArrangement = Arrangement.Center
        ) {
            Greeting(greetingName)
        }
    }
}

@Composable
fun Greeting(greetingName: String) {
    Text(
        modifier = Modifier.fillMaxWidth(),
        textAlign = TextAlign.Center,
        color = MaterialTheme.colors.primary,
        text = "Hello $greetingName"
    )
}

うまく機能しました！

参考資料：
https://developer.android.com/jetpack/androidx/releases/wear-compose

Discussion