Colours can be specified in a variety of ways, including:
Color.Yellow (limited range)Color(255,0,255)Color(255,0,0,150)Color(0xff336699)Colour can't simply be applied to the Window background. Instead colour is applied to the Row and/or Column containers within using Modifiers.
fun main() = singleWindowApplication(
title = "Coloured Window"
) {
App()
}
@Composable
fun App() {
Column(
modifier = Modifier.fillMaxSize().background(Color.Cyan)
) {
Text("Hello World!")
}
}Colour can be applied to any text by setting the color parameter to the desired colour.
fun main() = singleWindowApplication(
title = "Coloured Text"
) {
App()
}
@Composable
fun App() {
Column() {
Text(
text = "Hello World",
color = Color.Red
)
Text(
text = "from",
color = Color.Green
)
Text(
text = "Kotlin Compose MP!",
color = Color.Blue
)
}
}Colours can be applied to buttons by setting a backgroundColor and contentColor value (see the example code).
fun main() = singleWindowApplication(
title = "Coloured Text"
) {
App()
}
@Composable
fun App() {
Row() {
Button(
onClick = {...},
colors = ButtonDefaults.buttonColors(
backgroundColor = Color.Red,
contentColor = Color.White
)
) {
Text("A")
}
Button(
onClick = {...},
colors = ButtonDefaults.buttonColors(
backgroundColor = Color.Green,
contentColor = Color.White
)
) {
Text("B")
}
Button(
onClick = {...},
colors = ButtonDefaults.buttonColors(
backgroundColor = Color.Blue,
contentColor = Color.White
)
) {
Text("C")
}
}
}Containers such as Rows and Columns can have borders added to them using the border Modifier.
Note that the Modifier order is important: Add borders and backgrounds before padding.
fun main() = singleWindowApplication(
title = "Borders"
) {
App()
}
@Composable
fun App() {
Row() {
Column(
modifier = Modifier
.border(4.dp, Color.Green)
.background(Color.Yellow)
.padding(30.dp)
) {
Text("Hello")
Text("World!")
}
Column(
modifier = Modifier
.border(4.dp, Color.Blue)
.background(Color.Cyan)
.padding(30.dp)
) {
Text("Hello")
Text("World!")
}
}
}The size, weight and style of text can be modified using fontWeight, fontStyle and fontSize parameters.
fun main() = singleWindowApplication(
title = "Styled Text"
) {
App()
}
@Composable
fun App() {
Column() {
Text("Hello World!", fontWeight = FontWeight.Bold)
Text("Hello World!", fontStyle = FontStyle.Italic)
Text("Hello World!", fontSize = 30.sp)
Text("Hello World!", fontSize = 60.sp)
}
}Fonts can be loaded and used, either as the default font for the whole UI, or on an individual text element.
Font files should be placed into a 'fonts' folder within the resources folder inside your project (see here). TrueType (TTF) fonts should be used.
Note, make sure the correct Font class is imported: androidx.compose.ui.text.
val antonFont = FontFamily(Font("fonts/Anton-Regular.ttf"))
val caveatFont = FontFamily(Font("fonts/Caveat-Regular.ttf"))
fun main() = singleWindowApplication(
title = "Fonts"
) {
App()
}
@Composable
fun App() {
// Set the default font for the app
MaterialTheme(
typography = Typography(defaultFontFamily = caveatFont)
) {
Column() {
// All elements will use default font...
Text("The default font for all UI elements ...")
Row() {
OutlinedTextField(
label = { Text("Name") },
value = "Jimmy Smith",
onValueChange = {...}
)
Button(onClick = {}) { Text("Press Me!") }
}
// ... unless a different font is specified
Text(
"This has a different font specified",
fontFamily = antonFont
)
}
}
}This example note-taking app shows off various theming techniques: custom fonts; background, button and text colours; custom borders; etc.
val antonFont = FontFamily(Font("fonts/Anton-Regular.ttf"))
val caveatFont = FontFamily(Font("fonts/Caveat-Regular.ttf"))
val backCol = Color(0xfffff176)
val accentCol = Color(0xffd32f2f)
fun main() = singleWindowApplication(
title = "Notes"
) {
App()
}
@Composable
fun App() {
MaterialTheme(
typography = Typography(defaultFontFamily = caveatFont)
) {
Column(
modifier = Modifier.background(backCol)
) {
Text(
"My Important Notes",
fontFamily = antonFont,
fontSize = 30.sp,
color = accentCol
)
Column() {
Text(notes[0], fontSize = 20.sp )
Text(notes[1], fontSize = 20.sp )
Text(notes[2], fontSize = 20.sp )
Text(notes[3], fontSize = 20.sp )
Text(notes[4], fontSize = 20.sp )
}
Row() {
OutlinedTextField(
value = newNote,
onValueChange = {...},
modifier = Modifier.border(3.dp, accentCol)
)
Button(
onClick = {...},
colors = ButtonDefaults.buttonColors(
backgroundColor = accentCol,
contentColor = Color.White
)
) {
Text("+")
}
}
}
}
}
This example game window showing some player stats, shows off various theming techniques: custom font, background and text colours, borders, etc.
val antonFont = FontFamily(Font("fonts/Anton-Regular.ttf"))
val backCol = Color(0xff37474f)
val borderCol = Color(0xff263238)
val panelCol = Color(0xff90a4ae)
fun main() = singleWindowApplication(
title = "Player Stats"
) {
App()
}
@Composable
fun App() {
Row(
modifier = Modifier.background(backCol)
) {
Image(
painter = painterResource(playerImage),
contentDescription = "Player image",
modifier = Modifier.border(4.dp, borderCol)
)
Column() {
Text(
playerName,
fontFamily = antonFont,
fontSize = 30.sp,
color = Color(0xffffca28)
)
Row() {
Column(
modifier = Modifier
.background(panelCol)
.border(4.dp, borderCol)
) {
Text(playerClass)
Text(
playerDescription,
fontSize = 12.sp
)
}
Column(
modifier = Modifier
.background(panelCol)
.border(4.dp, borderCol)
) {
Row() {
Text("STR")
Text(
playerStrength,
fontWeight = FontWeight.Bold
)
}
Row() {
Text("DEX")
Text(
playerDexterity,
fontWeight = FontWeight.Bold
)
}
Row() {
Text("CON")
Text(
playerConstitution,
fontWeight = FontWeight.Bold
)
}
Row() {
Text("INT")
Text(
playerIntelligence,
fontWeight = FontWeight.Bold
)
}
Row() {
Text("WIS")
Text(
playerWisdom,
fontWeight = FontWeight.Bold
)
}
Row() {
Text("CHA")
Text(
playerCharisma,
fontWeight = FontWeight.Bold
)
}
}
}
}
}
}Note that these examples have spacing added around elements to help show how the layouts work. The code snippets don't apply the same spacing.