05.18.21, была представлена следующая итерация Material Design. В этом туториале, будет пошагово продемонстрирована настройка проекта, для работы с новым Material You.
Выбираем в качестве шаблона Empty Compose Activity:
Далее добавим 3 версию Compose:
app/build.gradle
dependencies {
...
implementation "androidx.compose.material3:material3:1.0.0-alpha08"
}
Обновим файл темы:
package com.example.myapplication.ui.theme
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalContext
@Composable
fun MyApplicationTheme(
isDarkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
) {
val colorScheme = when {
isDarkTheme -> {
dynamicDarkColorScheme(LocalContext.current)
}
else -> {dynamicLightColorScheme(LocalContext.current)}
}
// Make use of Material3
MaterialTheme(
colorScheme = colorScheme,
content = content
)
}
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.myapplication">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/Theme.MyApplication">
<activity
android:name=".MainActivity"
android:exported="true"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
</application>
</manifest>
Теперь вы можете использовать набор динамических цветов, используя: androidx.compose.material3.MaterialTheme.colorScheme и/или же использовать компоненты из material 3:
package com.example.myapplication
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import com.example.myapplication.ui.theme.MyApplicationTheme
class MainActivity : ComponentActivity() {
@OptIn(ExperimentalMaterial3Api::class)
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyApplicationTheme {
Scaffold {
Text(text = "Hello!")
}
}
}
}
}
Подключим systemuicontroller, для того чтобы иметь возможность красить статус бар, в дин. цвета:
app/build.gradle
dependencies {
...
implementation "com.google.accompanist:accompanist-systemuicontroller:0.17.0"
}
package com.example.todo.theme
...
import com.google.accompanist.systemuicontroller.rememberSystemUiController
...
@Composable
fun MyApplicationTheme(
isDarkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
) {
val colorScheme = when {
isDarkTheme -> {
dynamicDarkColorScheme(LocalContext.current)
}
else -> {dynamicLightColorScheme(LocalContext.current)}
}
rememberSystemUiController().setSystemBarsColor(
color = colorScheme.background
)
// Make use of Material3
MaterialTheme(
colorScheme = colorScheme,
content = content
)
}
Так в несколько простых шагов, мы получили стартер jetpack compose приложения с Material You:
Комментарии (5)
SchwarzerEngel
31.03.2022 10:27А где работа с цветами, реализация палитр, работа с токенами? Это совершенно другой подход по сравнению с xml. Но в статье нет абсолютно ничего, кроме того, что нужно подключить библиотеки...
DavidNadejdin Автор
31.03.2022 11:00Да, но это статья лишь о том как завести Material You в Jetpack compose. Сам Jetpack compose, это совершено другой подход, который подразумевает отказ от xml, но тема статьи это не знакомство с Jetpack
DavidNadejdin Автор
31.03.2022 11:37Если про работу с цветами, то компоненты 3 версии, по умолчанию красятся в определеные констаны цветов, по типу background, onBackground(могу путать точные названия). Если вам нужно раскрасить в конкретный тип цвета, то вы можете достать его из androidx.compose.material3.MaterialTheme.colorScheme. Возможность реализовывать свою цветовую палитру для темы, конечно же осталась. Но все таки, Material You, подразумевает что цветовая палитра будет предоставлена системой, а не наоборот
Firsto
А продолжение будет? :)
DavidNadejdin Автор
не думаю что оно имеет место быть, так как во всем остальном это обычный jetpack compose