Material You и Jetpack Compose

05.18.21, была представлена следующая итерация Material Design. В этом туториале, будет пошагово продемонстрирована настройка проекта, для работы с новым Material You.

Выбираем в качестве шаблона пустое Compose активити:

Далее добавим 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>

Теперь вы можете использовать набор динамических цветов:

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