Material Design 3 で Jetpack Compose チュートリアルをやってみた

2022.06.17

Material Design 3 で Jetpack Compose チュートリアルをやってみたところ、何点かエラーになったところがあったので記録として残しておきます。

環境
手順
エミュレータでの実行
最終的なコード

環境

Android Studio Chipmunk | 2021.2.1 Patch 1

手順

Android Studio で新規プロジェクト作成時に Empty Compose Activity (Material3) を選択します。

以降は基本的にチュートリアル通りに進めますが、注意が必要な点だけまとめます。

Javaのバージョン

プレビューを見るには「Build & Refresh」というボタンをクリックするのですが、このときに

Android Gradle plugin requires Java 11 to run. You are currently using Java 1.8.

というエラーが表示されてしまいます。

Java のバージョンが違うということなので、上部メニューから

　Android Studio > Preferences... > Build, Execution, Development > Build Tools > Gradle

と進み、Gradle JDK のところを 11 とします。

gradle ファイルの dependencies

マウスカーソルを合わせて、推奨されるバージョンに変えていきます。

$compose_version という変数を参照している部分は、プロジェクトの gradle ファイルの compose_version になるので、ここを 1.1.1 とします。

併せて、org.jetbrains.kotlin.android のバージョンも 1.6.10 に変えておきます。

buildscript {
    ext {
        compose_version = '1.1.1'
    }
}// Top-level build file where you can add configuration options common to all sub-projects/modules.
plugins {
    id 'com.android.application' version '7.2.1' apply false
    id 'com.android.library' version '7.2.1' apply false
    id 'org.jetbrains.kotlin.android' version '1.6.10' apply false
}
（以下略）

参照：Compose と Kotlin の互換性マップ

MaterialTheme.colors

MaterialTheme.colors となっている部分は MaterialTheme.colorScheme と置き換えます。

また secondaryVariant も存在しないので、サジェストされる適当なものに置き換えてください。

MaterialTheme.typography

MaterialTheme.typography についても値が変わっているので注意です。

私は subtitle2 を headlineMedium に、body2 を bodyMedium にしました。

エミュレータでの実行

エミュレータでの実行手順もついでに書いておきます。

プレビューの右上にあるボタンをクリックします。

「Device Manager」をクリックすると、デバイスの一覧が表示されます。

好きなデバイスを選択して実行できます。

デバイスがない場合は、「Create device」ボタンから作成できます。

最終的なコード

最終的なコードも載せておきます。

package com.example.composetutorial

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.animateContentSize
import androidx.compose.foundation.Image
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.composetutorial.ui.theme.ComposeTutorialTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeTutorialTheme {
                MessageCard(Message("Android", "Jetpack Compose"))
            }
        }
    }
}

data class Message(val author: String, val body: String)

@Composable
fun Conversation(messages: List<Message>) {
    LazyColumn {
        items(messages) { message ->
            MessageCard(message)
        }
    }
}

@Composable
fun MessageCard(msg: Message) {
    Row(modifier = Modifier.padding(all = 8.dp)) {
        Image(
            painter = painterResource(id = R.drawable.sample_image1),
            contentDescription = "Sample Image",
            modifier = Modifier
                .size(40.dp)
                .clip(CircleShape)
                .border(1.5.dp, MaterialTheme.colorScheme.secondary, CircleShape)
        )

        Spacer(modifier = Modifier.width(8.dp))

        var isExpanded by remember { mutableStateOf(false) }
        val surfaceColor by animateColorAsState(
            if (isExpanded) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.surface,
        )

        Column (modifier = Modifier.clickable { isExpanded = !isExpanded }) {
            Text(
                text = msg.author,
                color = MaterialTheme.colorScheme.secondaryContainer,
                style = MaterialTheme.typography.headlineMedium
            )

            Spacer(modifier = Modifier.height(4.dp))

            Surface(
                shape = MaterialTheme.shapes.medium,
                shadowElevation = 1.dp,
                color = surfaceColor,
                modifier = Modifier
                    .animateContentSize()
                    .padding(1.dp)
            ) {
                Text(
                    text = msg.body,
                    modifier = Modifier.padding(all = 4.dp),
                    maxLines = if (isExpanded) Int.MAX_VALUE else 1,
                    style = MaterialTheme.typography.bodyMedium
                )
            }
        }
    }
}

@Preview(name = "Light Mode")
//@Preview(
//    uiMode = Configuration.UI_MODE_NIGHT_YES,
//    showBackground = true,
//    name = "Dark Mode"
//)
@Composable
fun PreviewMessageCard() {
    ComposeTutorialTheme {
        Conversation(SampleData.conversationSample)
    }
}