View Background
Background Color
UI Design
Android Development
Styling Views

How to set background color of a View

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Introduction

Setting the background color of a View is one of the most basic Android UI operations. You can do it declaratively in XML layout files, programmatically in Java or Kotlin, or through styles and themes for consistent app-wide appearance. The key methods are the android:background XML attribute and the setBackgroundColor() / setBackgroundResource() methods in code. Understanding the difference between color integers, color resources, and drawables prevents common bugs.

Setting Background Color in XML

xml
1<!-- Using a hex color directly -->
2<TextView
3    android:layout_width="match_parent"
4    android:layout_height="wrap_content"
5    android:background="#FF6200EE"
6    android:text="Purple background" />
7
8<!-- Using a color resource -->
9<TextView
10    android:layout_width="match_parent"
11    android:layout_height="wrap_content"
12    android:background="@color/teal_200"
13    android:text="Teal background" />
14
15<!-- Using a drawable resource -->
16<LinearLayout
17    android:layout_width="match_parent"
18    android:layout_height="100dp"
19    android:background="@drawable/rounded_background" />

The android:background attribute accepts hex colors (#AARRGGBB), color resources (@color/name), or drawable resources (@drawable/name). Hex colors with 8 digits include alpha — #FF prefix means fully opaque.

Setting Background Color Programmatically (Kotlin)

kotlin
1import android.graphics.Color
2import androidx.core.content.ContextCompat
3
4// Method 1: Color integer
5view.setBackgroundColor(Color.RED)
6
7// Method 2: Hex color
8view.setBackgroundColor(Color.parseColor("#6200EE"))
9
10// Method 3: ARGB values
11view.setBackgroundColor(Color.argb(255, 98, 0, 238))
12
13// Method 4: Color resource
14val color = ContextCompat.getColor(context, R.color.teal_200)
15view.setBackgroundColor(color)
16
17// Method 5: Drawable resource
18view.setBackgroundResource(R.drawable.rounded_background)

Setting Background Color Programmatically (Java)

java
1import android.graphics.Color;
2import androidx.core.content.ContextCompat;
3
4// Color integer
5view.setBackgroundColor(Color.RED);
6
7// Hex color
8view.setBackgroundColor(Color.parseColor("#6200EE"));
9
10// Color resource
11int color = ContextCompat.getColor(context, R.color.teal_200);
12view.setBackgroundColor(color);
13
14// Drawable resource
15view.setBackgroundResource(R.drawable.rounded_background);

Use ContextCompat.getColor() instead of the deprecated getResources().getColor() for backward compatibility with older Android versions.

Defining Color Resources

xml
1<!-- res/values/colors.xml -->
2<resources>
3    <color name="primary">#6200EE</color>
4    <color name="primary_dark">#3700B3</color>
5    <color name="accent">#03DAC5</color>
6    <color name="background_light">#F5F5F5</color>
7    <color name="semi_transparent">#80000000</color>
8</resources>

Color resources centralize color definitions. When you change @color/primary, every View referencing it updates automatically.

Using Styles and Themes

xml
1<!-- res/values/styles.xml -->
2<style name="CardStyle">
3    <item name="android:background">@color/background_light</item>
4    <item name="android:padding">16dp</item>
5    <item name="android:elevation">4dp</item>
6</style>
7
8<!-- Usage in layout -->
9<LinearLayout
10    style="@style/CardStyle"
11    android:layout_width="match_parent"
12    android:layout_height="wrap_content">
13    <!-- content -->
14</LinearLayout>

Styles extract repeated View attributes into reusable definitions. Apply a style to set background color along with other properties consistently across your app.

Rounded Corners and Shapes

xml
1<!-- res/drawable/rounded_background.xml -->
2<shape xmlns:android="http://schemas.android.com/apk/res/android"
3    android:shape="rectangle">
4    <solid android:color="#6200EE" />
5    <corners android:radius="12dp" />
6    <stroke android:width="1dp" android:color="#3700B3" />
7</shape>
kotlin
// Apply programmatically
view.setBackgroundResource(R.drawable.rounded_background)

A shape drawable gives you rounded corners, borders, and gradients — all things a flat color cannot provide.

Dynamic Color Changes

kotlin
1import android.animation.ArgbEvaluator
2import android.animation.ValueAnimator
3
4fun animateBackgroundColor(view: android.view.View, from: Int, to: Int) {
5    val animator = ValueAnimator.ofObject(ArgbEvaluator(), from, to)
6    animator.duration = 300
7    animator.addUpdateListener { anim ->
8        view.setBackgroundColor(anim.animatedValue as Int)
9    }
10    animator.start()
11}
12
13// Usage
14animateBackgroundColor(myView, Color.WHITE, Color.parseColor("#6200EE"))

ValueAnimator with ArgbEvaluator smoothly transitions between two colors. This is useful for selection states, hover effects, or theme transitions.

Jetpack Compose

kotlin
1import androidx.compose.foundation.background
2import androidx.compose.foundation.layout.Box
3import androidx.compose.foundation.layout.size
4import androidx.compose.ui.Modifier
5import androidx.compose.ui.graphics.Color
6import androidx.compose.ui.unit.dp
7
8@Composable
9fun ColoredBox() {
10    Box(
11        modifier = Modifier
12            .size(100.dp)
13            .background(Color(0xFF6200EE))
14    )
15}

In Jetpack Compose, use the background() modifier with a Color value. Compose handles recomposition automatically when the color changes.

Common Pitfalls

  • Using getResources().getColor() without theme: The single-argument getColor(int) is deprecated. Use ContextCompat.getColor(context, R.color.name) which handles theme attributes correctly on all API levels.
  • setBackgroundColor() removes drawable properties: Calling setBackgroundColor() replaces any existing background drawable (rounded corners, borders). If you need to change the color of a shape drawable, get the drawable and mutate it instead.
  • Forgetting alpha in hex colors: #6200EE is interpreted as #FF6200EE (fully opaque) in XML. But Color.parseColor("#6200EE") in code also defaults to opaque. For transparency, use 8-digit hex like #806200EE (50% opacity).
  • Null context in ContextCompat.getColor(): Passing a null context crashes. In Fragments, use requireContext() instead of getContext() to fail fast rather than getting a NullPointerException later.
  • Dark mode not handled: Hardcoding hex colors ignores dark mode. Use theme attributes (?attr/colorSurface) or color resources with res/values-night/colors.xml variants so backgrounds adapt to the system theme.

Summary

  • Use android:background in XML for static backgrounds (hex colors, resources, or drawables)
  • Use setBackgroundColor() in code with ContextCompat.getColor() for backward compatibility
  • Use setBackgroundResource() to apply shape drawables with rounded corners and borders
  • Define colors in res/values/colors.xml and reference with @color/name for maintainability
  • Use styles and themes for consistent backgrounds across multiple Views
  • In Jetpack Compose, use the background() modifier with Color values

Course illustration
Course illustration

All Rights Reserved.