If you are a developer and are interested in changing the default background color of your app? I have curated a list for you to change the background color in seconds from Manifest, XML, and Jetpack compose, and programmatically using Kotlin on runtime.😯🥹
Let’s get started.
5 Steps to Changing Background 🔆
If you are new to Jetpack Compose or XML, becoming familiar with the layout and design process may take some time.
Skip Step 2 and proceed directly to Step 3 if you want to modify the background using XML.
Let’s Begin!🚀
1. Jetpack Compose Background
Splash Background:
Make sure you have the new splash screen library added to your build.gradle file for a better splash screen experience.
dependencies {
implementation("androidx.core:core-splashscreen:1.0.0")
}For Android 12 and higher use windowSplashScreenBackground. As for Android 11 & lower use android:windowBackground.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.JumpingMushroom" parent="android:Theme.Material.Light.NoActionBar">
<item name="android:windowBackground">@color/teal_700</item>
<item name="android:windowSplashScreenBackground">@color/teal_700</item>
</style>
</resources>App Theme Background
Go to the app > src > main > Java > com.yourpackagename > ui > theme > Theme.xml file. Inside you will find JumpingMushroomTheme composable. You can modify the material color scheme here. I will add the background-color property to override default colors as shown below.
private val LightColorScheme = lightColorScheme(
primary = Purple40,
secondary = PurpleGrey40,
tertiary = Pink40,
background = Color(0xFF009688)
)
@Composable
fun JumpingMushroomTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
// Dynamic color is available on Android 12+
dynamicColor: Boolean = true,
content: @Composable () -> Unit
) {
val colorScheme = when {
dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
val context = LocalContext.current
if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
}
darkTheme -> DarkColorScheme
else -> LightColorScheme
}
MaterialTheme(
colorScheme = colorScheme,
typography = Typography,
content = content
)
}Do make sure to disable dark theme and dynamic colors if you want to change colors using theme colors.
setContent {
JumpingMushroomTheme(false,false) {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background,
) {
}
}Composable Background:
I have a composable for displaying an error message inside which is a box element. Add .background(Color.red) attribute to set background to error box.
@Preview
@Composable
private fun ErrorBox() {
Box( modifier = Modifier
.padding(20.dp)
.clip(RoundedCornerShape(25.dp))
.align(Alignment.CenterHorizontally)
.background(Color.red)
)
}Change Background On Click:
If you want to change the background color with a click gesture, you can store the state in a separate variable and toggle it on click, thereby changing the background.
var selected by remember { mutableStateOf(false) }
val mycolor = if (selected) Color.Red else Color.Blue
Button(
onClick = { selected = !selected },
colors= ButtonDefaults.buttonColors(backgroundColor = mycolor)
){
Text("Change Color")
}2. XML Background
App Theme Background:
Go to the app > src > main > manifest.xml in the src directory. Inside the file application tag, there is an attribute for our default theme.
android:theme="@style/Theme.JumpingMushroomWe need to edit the theme to set our main app background color.
We will find the file on path res > values > theme.xml
Let’s open the file.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.JumpingMushroom" parent="android:Theme.Material.Light.NoActionBar" />
</resources>As you can see above the style contains a parent theme and nothing else. We will be modifying the above style to contain our new teal background color.
Let me show you how.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.JumpingMushroom" parent="android:Theme.Material.Light.NoActionBar">
<item name="android:windowBackground">@color/teal_700</item>
</style>
</resources>Layout / View Background:
Follow these steps to change the background color of your app.
Define Your Color Codes:
Define Colors (Optional) If you don’t have a color resource defined in your project, you can define it in the res/values/colors.xml file:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="myBackgroundColor">#FF5722</color>
</resources>Here, #FF5722 is a hexadecimal color code, and you can replace it with your desired color.
Change Background:
Open your XML Layout File In Android, the user interface is defined in XML layout files. Locate the XML layout file of the activity or fragment whose background color you want to change. This file will typically have a name like activity_main.xml or fragment_example.xml.
Add a Background Color Inside your XML layout file, you can define the background color using the android:background attribute. You can set the background color to a color resource, a hexadecimal color code, or even a color defined in your colors.xml resource file.
Here’s an example of setting the background color to a color resource:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/myBackgroundColor">
<!-- Your UI components go here -->
</RelativeLayout>In this example, replace @color/your_background_color with the actual color resource you want to use.
Change Background Programmatically:
If you wish to change the background on runtime in your Kotlin code, you can use the ContextCompat utility class to retrieve the color resource and set it as the background color of your view.
Here's an example:
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.core.content.ContextCompat
import kotlinx.android.synthetic.main.activity_main.* // Import your layout file
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main) // Set your layout file here
// Get the color resource
val backgroundColor = ContextCompat.getColor(this, R.color.myBackgroundColor)
// Set the background color programmatically
yourView.setBackgroundColor(backgroundColor)
}
}Now Build and Run the app.
You should see the background color of your activity or fragment changed to the one you specified.
By making small but effective changes, we have moved towards creating app interfaces that are more dynamic and responsive.
We write code to simplify and improve our lives and the lives of others. Let’s share what we’ve learned with others so we can grow together and be part of a community that writes code that is easy to manage, and understand, and helps us achieve the most benefit.
Sharing knowledge and helping others is the most important thing in software engineering. If you have anything to contribute, please let me know.
Until we meet again.
May your code be free of bugs and your coffee be strong!
