Jetpack Compose Theming: Colors. Exploring colors in Android apps | by Gözde Kaval | May, 2022

Exploring colours in Android apps

Picture by Robert Katzki on Unsplash

Creating screens is far simpler with Jetpack compose, nonetheless it comes with its personal means of working and it is likely to be difficult typically.

One matter I used to be battling is colours.

In accordance with Jetpack examples, we should always use MaterialTheme fairly than old skool XML theme. I used to be by no means an professional on XML theming both, that is why I made a decision to dig Materials Theme. Since it is a large matter, I’ll cowl solely colours for this text.

As you could know, at any time when we create an app Jetpack Compose characteristic, the venture provides the theme mechanically, lets’s take a look.

@Composable
enjoyable MaterialTheme(
colours: Colours = MaterialTheme.colours, // WILL BE FOCUSED
typography: Typography = MaterialTheme.typography, // WILL BE COVERED LATER
shapes: Shapes = MaterialTheme.shapes, // WILL BE COVERED LATER
content material: @Composable () -> Unit
)

MaterialTheme comes with these default colours:

However what do these colours imply, what are their usages within the app, and the way we should always use them? Let’s take a look on the materials design website:

A major colour is the colour displayed most often throughout your app’s screens and parts.

A secondary colour gives extra methods to accent and distinguish your product.

Your major colour can be utilized to make a colour theme to your app, together with darkish and lightweight major colour variants.

Similar to the first colour, your secondary colour can have darkish and lightweight variants.

Floor colours have an effect on the surfaces of parts.

The background colour seems behind scrollable content material.

Error colour signifies errors in parts.

To sum up:

Major and Secondary(elective) colours signify the model.

Floor, background, and error colours usually don’t signify model.

It means major/secondary colours should be outstanding and consultant of your model and the remainder should be extra inconspicuous.

Materials Theme default colours are often white and black for non-brand colours, nonetheless, to know higher, we are going to give totally different colours to every variable:

We are going to work with backgroundColor on this article, as a result of content material colour is determined by background typically.

I add Card layouts with Textual content (with out particular colour) and provides our theme’s colours as background colours.

The code:

The outcome:

So, how does it work? How do our view parts learn the colours and apply colour adjustments to inside parts? It is a Textual content view in our case.

If we undergo in Card Structure (or any), we see this extension perform. It tells us how the colour is picked for the content material typically. Learn extra here

enjoyable Colours.contentColorFor(backgroundColor: Coloration): Coloration 
return when (backgroundColor)
major -> onPrimary
primaryVariant -> onPrimary
secondary -> onSecondary
secondaryVariant -> onSecondary
background -> onBackground
floor -> onSurface
error -> onError
else -> Coloration.Unspecified

As we noticed from the display and the theme now we have, the colours matched.

Ideally, we should not have to set the colour for each UI. A few of the UIs learn from the totally different colour sections by default, it’s good to say a few of them.

To grasp it higher, I added these UI parts respectively and all colours are learn from the theme. No colour is added manually.

Let’s take a look at them one-by-one.

StatusBar

  • Default colour: primaryVariant

Scaffold

Used to point out totally different layouts on the display e.g.bottomSheet or floating motion button.

  • Default colour: background
  • Content material colour: onBackground
Scaffold(
topBar =
/****/


)

TopAppBar

Used to show details about the present display, together with actions. It makes use of totally different colours by app theme.

  • Default colour: primarySurface (mild theme:major/darkish theme:floor)
  • Content material colour: onPrimary(L)/onSurface(D)
TopAppBar(
title =
Textual content(textual content = "Toolbar textual content")
,
actions =
IconButton(onClick = )
Icon(Icons.Crammed.Favourite, contentDescription = null)


)

Card

Used for content material and actions a few single topic.

  • Default colour: floor
  • Content material colour: onSurface
Card(
modifier = Modifier
.padding(8.dp)
.fillMaxWidth()
.peak(100.dp)
)
Textual content
(textual content = "Card Default")

Floor

Every floor exists at a given elevation, which influences how that piece of floor visually pertains to different surfaces and the way that floor casts shadows.

  • Default colour: floor
  • Content material colour: onSurface

FloatingActionButton

Used to outline the first motion of a display.

  • Default colour: secondary
  • Content material colour: onSecondary
FloatingActionButton(onClick =  ) 
Textual content(textual content = "FAB", textAlign = TextAlign.Heart)

Button

Used for person actions.

  • Background colour: major
  • Content material colour: onPrimary
Button(onClick =  ) 
Textual content(textual content = "Common button")

TextButton

  • Background colour: clear
  • Content material colour: major
TextButton(onClick =  ) 
Textual content(textual content = "Textual content button")

OutlinedButton

  • Background colour: floor
  • Content material colour: major
OutlinedButton(onClick =  ) 
Textual content(textual content = "Outlined button")

Swap

Toggle the state of a single merchandise on or off.

  • Default colour (Checked): secondaryVariant/secondaryVariantAlpha
  • Default colour (Unchecked): floor/onSurface
Swap(checked = true, onCheckedChange = )

Swap
(checked = false, onCheckedChange = )

TextField

Used for person enter.

  • Background colour: onSurface.copy(alpha = BackgroundOpacity)
  • Textual content colour: onBackground
  • Backside Line (Common): onSurface.copy(alpha =
    TextFieldDefaults.UnfocusedIndicatorLineOpacity)
  • Backside Line (Error): onError

The unique onSurface colour is mild blue, subsequently the colour was not seen on the screenshot — particularly with opacity. Subsequently I used onSecondary colour as onSurface just for this screenshot.

To sum up:

  • Not each UI follows colour/<onColor> sample.
  • If we undergo the implementation of a UI factor, default colours are set. We don’t must memorize. Nevertheless, it’s helpful to know the fundamentals.
  • Let’s set onPrimary,onSecondary,onError, onSurface, onBackground as background colour respectively.

The background colour is taken from content material colours and the content material colour is learn from contentColorFor extension else case, which is Coloration.Unspecified on this case. If we examine the code, Coloration.Unspecified is black.

val Unspecified = Coloration(0f, 0f, 0f, 0f, ColorSpaces.Unspecified)

As we observe, the final one doesn’t present the textual content as a result of the onBackground colour and chosen content material colour are the identical.

onBackground = Coloration(0xFF000000)

It undoubtedly causes some issues:

  • The UI check will go as a result of the textual content is definitely there, we is not going to notice it.
  • Take time to search out the problem, as a result of the colour is definitely set correctly and who would take into consideration Coloration.Unspecified colour within the first place?
  • Consumer change theme (light->darkish), we would find yourself with a suboptimal person expertise.

Subsequently, we should be very cautious in regards to the theme colours.

We should always all the time take into account the colour palette for the darkish theme as effectively, in any other case, customers will find yourself with a nasty expertise on our app, even frustration! Some of the often-ignored half was making use of darkish theme — a minimum of for me. With materials compose, it’s extremely simple to implement.

To start with, we have to determine on the colour palette. I comply with the identical, giving totally different colours for all.

Now, let’s palette into our theme and run the app.

MaterialTheme(
colours = if (isSystemInDarkTheme()) darkColors else lightColors,
/***/
)

As we see, our app adapts the colour adjustments.

However what a minute, why does our principal background keep as white? This isn’t one thing we wish. Right here is why:

  • All UI parts are added in Columnfactor which does not comply with any theme, that is why our background truly does not have any colour.
@Composable
enjoyable Surfaces()
Column(modifier = Modifier.filllMaxSize())
Playing cards()

  • To have correct UIs, we all the time want to make use of a element that truly applies a colour theme. Let’s add Floor on prime of the composable perform.
@Composable
enjoyable Surfaces()
Floor
Column(modifier = Modifier.fillMaxSize())
Playing cards()


Voila, downside solved.

One in all my UI parts should be totally different from the remainder of the apps — none of my theme colours are appropriate. nonetheless, I don’t need to face issues.

We are able to override the colours of the UI factor. The category illustration is totally different for all UI elemements however the implementation is identical. Let’s take a look on Button and TextField.

For the button, we are going to use ButtonDefaults.buttonColors() extension and override.

Related for TextField, TextFieldDefaults.textFieldColors() will probably be overridden.

  • It is essential to needless to say, we should always take into account offering totally different colour palettes for mild/darkish mode. In any other case, we would find yourself with the issues that we talked about earlier than. (Background/textual content colour similar subject)

Let’s examine our newest app that incorporates common and customized parts for mild or darkish theme.

We lined these matters:

  • How colours are utilized in Materials Theme, each Gentle and Darkish
  • Default colours for UI parts
  • Frequent errors
  • The overriding colour palette for a UI factor

I hope the article was helpful. Within the subsequent ones, I’ll examine shapes and typography.

More Posts