Change App Background Colour in the Android Studio

In this tutorial, we will take about how you can change app background colour in the android studio using the Radio Button inside Radio Group.

Developing boring Apps and publishing them just the sake for it won’t help you to gain many downloads for your App and maybe you would end up having bad ratings for your App on the Google Play Store.

People love dynamic Apps, not just static Apps. If your app is just a display -show type App people would just download it and would delete it eventually as the app would seem too plain.

What we are going to do?

I would give you full code below at the end of the post including XML file along with the main Java file.

In this tutorial, we would put three radio buttons with each labelled with different colour names. Once a user clicks on a particular Radio button. The background of the App would change according to the colour mentioned beside the radio button.

Read More: Google Login And Registration For Android Using Firebase Authentication

Activity_main.xml 

<?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:id="@+id/mainlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="298dp"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_marginStart="60dp"
        android:layout_marginTop="219dp"
        android:layout_marginEnd="60dp"
        android:text="ANDROIDHIRE.COM"
        android:textAlignment="center"
        android:textSize="24sp" />

    <RadioGroup
        android:id="@+id/rmain"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        >

        <RadioButton
            android:id="@+id/r_red"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Red" />


        <RadioButton
            android:id="@+id/r_blue"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Blue" />

        <RadioButton
            android:id="@+id/r_orange"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Orange" />


    </RadioGroup>

</RelativeLayout>

As stated above in the post that we are going to put three radio buttons, I have included three RadioButton tags each one having its text colour set to different ones.

You have to put RadioButton inside the RadioGroup Tags.

Also, note that we have given android:id within the tag of RadioButton, as well as layout_width and layout_height, is also set to wrap_content.

How To Change App Background Colour Using Java

So now coming to MainActivity file. In order to initiate colour change, we have used a switch case (having three cases .. one for each colour respectively).

As you can see from the code I have mentioned colour codes in Hexa format

  • #EC4849 for RED
  • #3498DB for BLUE
  • #f39c12 for ORANGE

In order to change the colour of the background once the radio button is activated, we have used onCheckedChanged function and setOnCheckedChangeListener on radioGroup.

MainActivity.Java

package androidhire.com.bgchanger;

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.RadioGroup;
import android.widget.RelativeLayout;

public class MainActivity extends AppCompatActivity {

    RelativeLayout layout; RadioGroup radioGroup;
    // androidhire.com


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        layout = findViewById(R.id.mainlayout);
        radioGroup = findViewById(R.id.rmain);

        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId) {
                    case R.id.r_red:
                        layout.setBackgroundColor(Color.parseColor("#EC4849"));
                        break;

                    case R.id.r_blue:
                        layout.setBackgroundColor(Color.parseColor("#3498DB"));
                        break;

                    case R.id.r_orange:
                        layout.setBackgroundColor(Color.parseColor("#f39c12"));
                        break;
                }
            }
        });
    }
}

How To Change App Background Colour Using Kotlin 

What you have to do to just make a kotlin file and import the kotlin plugin to do the configuration. After the import of the kotlin plugin make kotlin file. Right click on a package and click on NEW -> Kotlin File. Copy and paste below code in your kt file.

MainActivity.kt

package androidhire.com.myapplication

import android.graphics.Color
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.RadioGroup
import android.widget.RelativeLayout

class MainActivity : AppCompatActivity() {

    internal lateinit var layout: RelativeLayout
    internal lateinit var radioGroup: RadioGroup

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        layout = findViewById(R.id.mainlayout)
        radioGroup = findViewById(R.id.rmain)

        radioGroup.setOnCheckedChangeListener { group, checkedId ->
            when (checkedId) {
                R.id.r_red -> layout.setBackgroundColor(Color.parseColor("#EC4849"))

                R.id.r_blue -> layout.setBackgroundColor(Color.parseColor("#3498DB"))

                R.id.r_orange -> layout.setBackgroundColor(Color.parseColor("#f39c12"))

            }
        }
    }
}

ScreenShot

Result

Thus you can see that upon clicking on different radio buttons the background colour is changing accordingly. This would make your App look attractive if you are a beginner in Android Development. Do try these on your own.

Thanks a lot guys for following our series on Android Tutorials. If you want a tutorial on any topic do let us know in the comments section below. We would try to upload it here on AndroidHire.

Related Stories