Темы. Material Design

Чтобы обеспечить определенный уровень единообразия дизайна между различными приложениями с точки зрения выбора цвета, типографики, формы и других параметров пользовательского интерфейса компания Google разработала набор рекоммендаций, который называется Material Design. Помимо рекомендаций по проектированию, Material Design также включает набор компонентов пользовательского интерфейса и тем, которые можно использовать при разработке макетов пользовательского интерфейса.

Стоит отметить, что сам Material Design постоянно развивается. Так, на момент написания текущей статьи в Android Studio (в частности, в версии Android Studio Iguana) по умолчанию используется Material Design 3. Material Design 3 обеспечивает основу для Material You — функциональности, представленной в Android 12, которая позволяет приложению применять настройки, установленные пользователем на устройстве.

При создании проекта по умолчанию в Android Studio, например, по умолчанию в проект добавляется каталог ui.theme, который содержит ряд файлов:

Сама тема объявляется в файле Theme.kt, который начинается с объявления различных цветовых палитр для использования, когда устройство находится в светлом (дневном) или темном (ночном) режиме. Эти палитры создаются путем вызова функций darkColorScheme() и lightColorScheme(). Параметры этих функций представляют цветовые слоты, которые задают цвета для различных ситуаций:

private val DarkColorScheme = darkColorScheme(
        primary = Purple80,
        secondary = PurpleGrey80,
        tertiary = Pink80
)

private val LightColorScheme = lightColorScheme(
        primary = Purple40,
        secondary = PurpleGrey40,
        tertiary = Pink40

        /* Other default colors to override
    background = Color(0xFFFFFBFE),
    surface = Color(0xFFFFFBFE),
    onPrimary = Color.White,
    onSecondary = Color.White,
    onTertiary = Color.White,
    onBackground = Color(0xFF1C1B1F),
    onSurface = Color(0xFF1C1B1F),
    */
)

Стоит отметить, что Material Design 3 в общей сложности доступно более 30 цветовых слота, которые можно использовать при разработке темы:

• background

• error

• errorContainer

• inverseOnSurface

• inversePrimary

• inverseSurface

• onBackground

• onError

• onErrorContainer

• onPrimary

• onPrimaryContainer

• onSecondary

• onSecondaryContainer

• onSurface

• onSurfaceVariant

• onTertiary

• onTertiaryContainer

• outline

• outlineVariant

• primary

• primaryContainer

• scrim

• secondary

• secondaryContainer

• surface

• surfaceBright

• surfaceContainer

• surfaceContainerHigh

• surfaceContainerHighest

• surfaceContainerLow

• surfaceContainerLowest

• surfaceDim

• surfaceTint

• surfaceVariant

• tertiary

• tertiaryContainer

Если какой-то слот не указан, то для него применяются значения по умолчанию.

Эти цветовые слоты используются рядом компонентов для установки цвета. Например, слот primary используется в качестве цвета фона для кнопки. Фактические цвета, назначенные слотам, объявлены в файле Color.kt:

val Purple80 = Color(0xFFD0BCFF)
val PurpleGrey80 = Color(0xFFCCC2DC)
val Pink80 = Color(0xFFEFB8C8)

val Purple40 = Color(0xFF6650a4)
val PurpleGrey40 = Color(0xFF625b71)
val Pink40 = Color(0xFF7D5260)

Темы Material Design 3 также могут включать поддержку динамических цветов посредством вызовов функций dynamicDarkColorScheme() и dynamicLightColorScheme(), передавая текущий локальный контекст в качестве параметра. Эти функции затем сгенерируют цветовые схемы, соответствующие настройкам пользователя на устройстве. Поскольку динамические цвета поддерживаются только начиная с Android 12 (S), то для более ранних версий Android определяются резервные цветовые темы:

@Composable
fun HelloAppTheme(
        darkTheme: Boolean = isSystemInDarkTheme(),
        // динамические цвета доступны только на Android 12+
        dynamicColor: Boolean = true,
        content: @Composable () -> Unit
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }
        // резервные цветые темы, если Android 11 и ниже
        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }
    val view = LocalView.current
    if (!view.isInEditMode) {
        SideEffect {
            val window = (view.context as Activity).window
            window.statusBarColor = colorScheme.primary.toArgb()
            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
        }
    }

    MaterialTheme(
            colorScheme = colorScheme,
            typography = Typography,
            content = content
    )
}

Обратите внимание, что динамические цвета будут работать только в том случае, если они включены на устройстве пользователем в настройках в разделе обоев и стилей приложения.

Также по умолчанию проект имеет настройки типографики - в файле Type.kt. В частности, Material Design имеет набор масштабов шрифта (два из них закомментированы):

// Настройки типографики Material
val Typography = Typography(
        bodyLarge = TextStyle(
                fontFamily = FontFamily.Default,
                fontWeight = FontWeight.Normal,
                fontSize = 16.sp,
                lineHeight = 24.sp,
                letterSpacing = 0.5.sp
        )
        /* Остальные стили текста
    titleLarge = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Normal,
        fontSize = 22.sp,
        lineHeight = 28.sp,
        letterSpacing = 0.sp
    ),
    labelSmall = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Medium,
        fontSize = 11.sp,
        lineHeight = 16.sp,
        letterSpacing = 0.5.sp
    )
    */
)

Создание темы

Создание собственной темы включает в себя редактирование этих файлов с использованием различных цветов, типографики и настроек формы. Эти изменения затем будут использоваться компонентами Material, которые составляют пользовательский интерфейс приложения.

Для создания темы в графическом режиме можно использовать такой инструмент как Material Theme Builder, который предоставляется компанией Google и который доступен по адресу https://m3.material.io/theme-builder#/custom:

На этой странице надо нажать в верхней части экрана на кнопку "Custom". Затем в разделе "Core colors" можно нажать на кружок цвета и установить любой цвет

Когда тема будет готова, нажмите кнопку "Export" в правом верхнем углу и выбрать опцию «Jetpack Compose (Theme.kt)». При появлении запроса сохраните файл в подходящем месте файловой системы вашего компьютера. Тема будет сохранена в виде архива с именем "material-theme.zip".

Распакуем загруженный файл и в папке "material-theme/ui/theme" мы сможем найти два файла:

• Color.kt

• Theme.kt

Для добавления этих файлрв проект сначала нужно удалить файлы старой темы - файлы Color.kt и Theme.kt из папки ui.theme проекта Android Studio. После удаления файлов возьмем файлы пользовательских тем из распакованной папки "material-theme/ui/theme" и скопируум их в папку ui.theme проекта. После добавления файлов может потребоваться отредактировать новые файлы, чтобы объявление пакета в этих файлах соответствовало текущему проекту.