Instruction
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
Material Theming in Jetpack Compose
Theming in Jetpack Compose has a different take compared to how it’s done in the UI toolkit. Instead of inheriting from a Material components style, extending the theme as per your requirement, and applying them to your views, you define:
@Composable
fun MaterialTheme(
colors: Colors = MaterialTheme.colors,
typography: Typography = MaterialTheme.typography,
shapes: Shapes = MaterialTheme.shapes,
content: @Composable () -> Unit
)
Exploring Colors in Material Design
A Material Design compliant color system consists of the following key colors:
Implementing a Color Palette
Based on the schematic discussed above, a Material compliant palette can be created as follows:
val yellow200 = Color(0xffffeb46)
val yellow400 = Color(0xffffc000)
val yellow500 = Color(0xffffde03)
val yellowDarkPrimary = Color(0xff242316)
val blue200 = Color(0xff91a4fc)
val blue700 = Color(0xff0336ff)
val blue800 = Color(0xff0035c9)
val blueDarkPrimary = Color(0xff1c1d24)
private val LightPalette = lightColors(
primary = yellow500,
primaryVariant = yellow400,
onPrimary = Color.Black,
secondary = blue700,
secondaryVariant = blue800,
onSecondary = Color.White
)
private val DarkPalette = darkColors(
primary = yellow200,
secondary = blue200,
onSecondary = Color.Black,
surface = yellowDarkPrimary
)
@Composable
fun MyCustomYellowTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
) {
val colors = if (darkTheme) {
DarkPalette
} else {
LightPalette
}
MaterialTheme(
colors = colors,
content = content
)
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyCustomYellowTheme {
TaxiApp()
}
}
}
TopAppBar(
backgroundColor = MaterialTheme.colors.primarySurface,
// ...
)
Typography in Material Design
A typographic scale is a collection of font styles that can be used across an app for different levels of emphasis and for establishing visual hierarchy.
Implementing a Typographic Scale
Building the typographic scale becomes quite straightforward once you’ve determined what font pairing you’d like to use in your app.
val raleway = FontFamily(
Font(R.font.raleway_regular),
Font(R.font.raleway_medium, FontWeight.W500),
Font(R.font.raleway_semibold, FontWeight.SemiBold)
)
val typography = Typography(
h1 = TextStyle(
fontFamily = raleway,
fontWeight = FontWeight.W300,
fontSize = 96.sp),
body1 = TextStyle(
fontFamily = raleway,
fontWeight = FontWeight.W600,
fontSize = 16.sp),
button = TextStyle(
fontSize = 14.sp,
fontFamily = raleway,
fontWeight = FontWeight.Normal)
/*... Define more styles as needed ...*/
)
@Composable
fun MyCustomYellowTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
) {
/*...*/
MaterialTheme(
colors = colors,
typography = Typography,
content = content
)
}
Text(
text = "Heading",
style = MaterialTheme.typography.h1
)
Exploring Shapes in Material Design
Material Design uses shapes extensively. According to the guidelines, surfaces can be displayed in different shapes. Shapes direct attention, identify components, communicate state, and express brand.
val customShapes = Shapes(
small = RoundedCornerShape(percent = 50),
medium = RoundedCornerShape(0f),
large = CutCornerShape(
topStart = 16.dp,
topEnd = 0.dp,
bottomEnd = 0.dp,
bottomStart = 16.dp
)
)
@Composable
fun MyCustomYellowTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
) {
/*...*/
MaterialTheme(
colors = colors,
typography = Typography,
shapes = customShapes,
content = content
)
}
Card(shape = MaterialTheme.shapes.large) {
/*...*/
}