CODEWITHSUNDEEP
androidandroid-jetpackandroid-jetpack-compose
Sweta Jain
Sweta Jain

Reputation: 4364

How do I use Color resource directly in Jetpack Compose?

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?

Upvotes: 68

Views: 52417

Answers (3)

Diana
Diana

Reputation: 41

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
}

Upvotes: 4

Vidyesh Churi
Vidyesh Churi

Reputation: 2589

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)

Upvotes: 24

Saurabh Thorat
Saurabh Thorat

Reputation: 20744

You can use colorResource() which loads a color resource.

Text(
    text = "Hello World",
    color = colorResource(R.color.purple_200)
)

Upvotes: 154

Related Questions