Change-Id: I6a85ee82a78b1897020f1737503611bd100764a1pull/2/head
Jolanda Verhoef
3 years ago
committed by
Don Turner
parent
cce9402b04
commit
ce0142b98a
@ -0,0 +1,143 @@
|
|||||||
|
/*
|
||||||
|
* Copyright 2022 The Android Open Source Project
|
||||||
|
*
|
||||||
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
* you may not use this file except in compliance with the License.
|
||||||
|
* You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* https://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
package com.google.samples.apps.nowinandroid.core.ui.component
|
||||||
|
|
||||||
|
import android.content.res.Configuration
|
||||||
|
import androidx.compose.foundation.background
|
||||||
|
import androidx.compose.foundation.layout.Box
|
||||||
|
import androidx.compose.foundation.layout.fillMaxSize
|
||||||
|
import androidx.compose.foundation.layout.size
|
||||||
|
import androidx.compose.material3.Surface
|
||||||
|
import androidx.compose.runtime.Composable
|
||||||
|
import androidx.compose.ui.Modifier
|
||||||
|
import androidx.compose.ui.graphics.Brush
|
||||||
|
import androidx.compose.ui.graphics.Color
|
||||||
|
import androidx.compose.ui.tooling.preview.Preview
|
||||||
|
import androidx.compose.ui.unit.Dp
|
||||||
|
import androidx.compose.ui.unit.dp
|
||||||
|
import com.google.samples.apps.nowinandroid.core.ui.theme.LocalBackgroundTheme
|
||||||
|
import com.google.samples.apps.nowinandroid.core.ui.theme.NiaTheme
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The main background for the app.
|
||||||
|
* Uses [LocalBackgroundTheme] to set the color and tonal elevation of a [Surface].
|
||||||
|
*
|
||||||
|
* @param modifier Modifier to be applied to the background.
|
||||||
|
* @param content The background content.
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun NiaBackground(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
content: @Composable () -> Unit
|
||||||
|
) {
|
||||||
|
val color = LocalBackgroundTheme.current.color
|
||||||
|
val tonalElevation = LocalBackgroundTheme.current.tonalElevation
|
||||||
|
Surface(
|
||||||
|
color = if (color == Color.Unspecified) Color.Transparent else color,
|
||||||
|
tonalElevation = if (tonalElevation == Dp.Unspecified) 0.dp else tonalElevation,
|
||||||
|
modifier = modifier.fillMaxSize(),
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A gradient background for select screens, to be overlaid on top of [NiaBackground].
|
||||||
|
* Uses [LocalBackgroundTheme] to set the gradient colors of a [Box].
|
||||||
|
*
|
||||||
|
* @param modifier Modifier to be applied to the background.
|
||||||
|
* @param topColor The top gradient color to be rendered.
|
||||||
|
* @param bottomColor The bottom gradient color to be rendered.
|
||||||
|
* @param content The background content.
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun NiaGradientBackground(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
topColor: Color = LocalBackgroundTheme.current.primaryGradientColor,
|
||||||
|
bottomColor: Color = LocalBackgroundTheme.current.secondaryGradientColor,
|
||||||
|
content: @Composable () -> Unit
|
||||||
|
) {
|
||||||
|
val gradientModifier = Modifier.background(
|
||||||
|
Brush.verticalGradient(
|
||||||
|
listOf(
|
||||||
|
if (topColor == Color.Unspecified) Color.Transparent else topColor,
|
||||||
|
Color.Transparent,
|
||||||
|
if (bottomColor == Color.Unspecified) Color.Transparent else bottomColor
|
||||||
|
)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
Box(
|
||||||
|
modifier = modifier
|
||||||
|
.fillMaxSize()
|
||||||
|
.then(gradientModifier)
|
||||||
|
) {
|
||||||
|
content()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO, name = "Light theme")
|
||||||
|
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES, name = "Dark theme")
|
||||||
|
@Composable
|
||||||
|
fun BackgroundDefault() {
|
||||||
|
NiaTheme {
|
||||||
|
NiaBackground(Modifier.size(100.dp), content = {})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO, name = "Light theme")
|
||||||
|
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES, name = "Dark theme")
|
||||||
|
@Composable
|
||||||
|
fun BackgroundDynamic() {
|
||||||
|
NiaTheme(dynamicColor = true) {
|
||||||
|
NiaBackground(Modifier.size(100.dp), content = {})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO, name = "Light theme")
|
||||||
|
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES, name = "Dark theme")
|
||||||
|
@Composable
|
||||||
|
fun BackgroundAndroid() {
|
||||||
|
NiaTheme(androidTheme = true) {
|
||||||
|
NiaBackground(Modifier.size(100.dp), content = {})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO, name = "Light theme")
|
||||||
|
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES, name = "Dark theme")
|
||||||
|
@Composable
|
||||||
|
fun GradientBackgroundDefault() {
|
||||||
|
NiaTheme {
|
||||||
|
NiaGradientBackground(Modifier.size(100.dp), content = {})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO, name = "Light theme")
|
||||||
|
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES, name = "Dark theme")
|
||||||
|
@Composable
|
||||||
|
fun GradientBackgroundDynamic() {
|
||||||
|
NiaTheme(dynamicColor = true) {
|
||||||
|
NiaGradientBackground(Modifier.size(100.dp), content = {})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO, name = "Light theme")
|
||||||
|
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES, name = "Dark theme")
|
||||||
|
@Composable
|
||||||
|
fun GradientBackgroundAndroid() {
|
||||||
|
NiaTheme(androidTheme = true) {
|
||||||
|
NiaGradientBackground(Modifier.size(100.dp), content = {})
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
/*
|
||||||
|
* Copyright 2022 The Android Open Source Project
|
||||||
|
*
|
||||||
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
* you may not use this file except in compliance with the License.
|
||||||
|
* You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* https://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
* See the License for the specific language governing permissions and
|
||||||
|
* limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
package com.google.samples.apps.nowinandroid.core.ui.theme
|
||||||
|
|
||||||
|
import androidx.compose.runtime.Immutable
|
||||||
|
import androidx.compose.runtime.staticCompositionLocalOf
|
||||||
|
import androidx.compose.ui.graphics.Color
|
||||||
|
import androidx.compose.ui.unit.Dp
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A class to model background values for Now in Android,
|
||||||
|
* including color, tonal elevation and gradient colors.
|
||||||
|
*/
|
||||||
|
@Immutable
|
||||||
|
data class BackgroundTheme(
|
||||||
|
val color: Color = Color.Unspecified,
|
||||||
|
val tonalElevation: Dp = Dp.Unspecified,
|
||||||
|
val primaryGradientColor: Color = Color.Unspecified,
|
||||||
|
val secondaryGradientColor: Color = Color.Unspecified,
|
||||||
|
val tertiaryGradientColor: Color = Color.Unspecified,
|
||||||
|
val neutralGradientColor: Color = Color.Unspecified
|
||||||
|
)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A composition local for [BackgroundTheme].
|
||||||
|
*/
|
||||||
|
val LocalBackgroundTheme = staticCompositionLocalOf { BackgroundTheme() }
|
||||||
Loading…
Reference in new issue