I want to use custom colors defined in the colors.xml class directly without using the Material theme colors or the default theme provided by the Jetpack. Is there any straightforward way to do it?
3 Answers
You can use colorResource()
which loads a color resource.
Text(
text = "Hello World",
color = colorResource(R.color.purple_200)
)
-
6This certainly does work, however I think the idea is to have your colors in your Colors.kt file and part of the benefit of migrating to Jetpack Compose is being able to rid the project of that wretched thing we call XML. Lol happy coding! Commented Jun 10, 2021 at 14:58
-
@JoshuaKing ... the colorResource(...) idea works well because of that "magic numbers" thing that appears in static code analysis. Commented Aug 15, 2022 at 21:08
-
This worked for me. I just needed to add
import com.mypackagename.R
manually. Commented Jan 12, 2023 at 13:11
To use color in jetpack compose using recommended create a package ui.theme in com.<domain_name>.<app_name> which will likely be present by default if you are creating empty compose project. Now create Color.kt and Theme.kt kotlin files if they are not present in your project.
In Color.kt add the colors you need
package com.<domain_name>.<app_name>.ui.theme
import androidx.compose.ui.graphics.Color
val Purple200 = Color(0xFFBB86FC)
val Purple500 = Color(0xFF6200EE)
val Purple700 = Color(0xFF3700B3)
val Teal200 = Color(0xFF03DAC5)
val Flower = Color(0xFF4CAF50)
val Deer = Color(0xFFFF5722)
val Mango = Color(0xFFFF9800)
val AppbarColor = Color(0xFF2196F3)
Here is ready to use a Material Color template made by me
There are 3 common ways of using colors
Method 1 : Directly use color
import com.<domain_name>.<app_name>.ui.theme.*
Text(text = "Hello ", color = Flower)
Method 2 : Override default MaterialTheme colors
Now in, Theme.kt
private val DarkColorPalette = darkColors(
primary = Purple200,
primaryVariant = Purple700,
secondary = Teal200,
onBackground = Flower //Custom color
)
private val LightColorPalette = lightColors(
primary = Purple500,
primaryVariant = Purple700,
secondary = Teal200,
onBackground = Deer //Custom color
/* Other default colors to override
background = Color.White,
surface = Color.White,
onPrimary = Color.White,
onSecondary = Color.Black,
onBackground = Color.Black,
onSurface = Color.Black,
*/
)
@Composable
fun NotepadTheme(darkTheme: Boolean = isSystemInDarkTheme(),
content:@Composable() () -> Unit) {
val colors = if (darkTheme) {
DarkColorPalette
} else {
LightColorPalette
}
MaterialTheme(
colors = colors,
typography = Typography,
shapes = Shapes,
content = content
)
}
MainActivity.kt
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ColorApp()
}
}
}
@Composable
fun ColorApp() {
ColorTheme {
Surface(modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background) {
Greeting("Android")
}
}
}
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!", color = MaterialTheme.colors.onBackground) //Using color
}
@Preview(
showBackground = true, name = "Light mode",
uiMode = Configuration.UI_MODE_NIGHT_NO or
Configuration.UI_MODE_TYPE_NORMAL
)
@Preview(
showBackground = true, name = "Night mode",
uiMode = Configuration.UI_MODE_NIGHT_YES or
Configuration.UI_MODE_TYPE_NORMAL
)
@Composable
fun DefaultPreview() {
ColorApp()
}
Method 3 : Custom theme (Recommended method)
Text(text = "Hello ", color = AppNameTheme.colors.customColor)
-
Can you please provide more detail about Method 3, means where we can define customColor that can access using our app theme as in your example NotepadTheme?– DevenCommented Jul 28 at 12:36
Defined the colors in ui/theme/Color.kt
val LightGray = Color(0xFFE7E2E2)
val LighterGray = Color(0xFFDED8D8)
val MediumGray = Color(0xFFD3CACA)
val DarkerGray = Color(0xFF9D9999)
val VeryDarkGray = Color(0xFF646161)
val BlackGray = Color(0xFF020202)
than call them with:
import com.example.<appName>.ui.theme.*
than simply use them by writing their NAME:
val buttonColor = when (i) {
0 -> LightGray
1 -> LighterGray
2 -> MediumGray
3 -> DarkerGray
4 -> VeryDarkGray
else -> BlackGray
}