Home Tutorials Change App Background Colour in the Android Studio

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.

Change App background colour in the Android Studio

Change App Background Colour in the Android Studio 1
Change App Background color in the Android Studio

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 color 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 color change, we have used a switch case (having three cases .. one for each color respectively).

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

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

In order to change the color 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.

Aditya Singh
Hi, I’m Aditya Singh. The Co-Founder of this blog AndroidHire. I’m Part-Time blogger, and digital marketer. If you want to contribute then you can contact us at contact@androidhire.com

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Android Messages just got better

The Android Messages application has just got revamped with the latest features. Here are the five new features that will sport the app. Web Messages Google...

Huawei P Smart+ 2019 Full Specifications

Huawei P Smart+ 2019 smartphone launched secretly by Huawei, which is the bigger version of the Huawei P Smart. The phone comes with a...

iPad may get a full PC like version of Photoshop

If you are a Photoshop and iPad, both, user then you must have always wanted to use the full-size display of iPad for using...

How to Force Quit in Mac Shortcut

If your program or finder got stuck somewhere then there is an option to Force Quit. A shortcut is really helpful in Mac if you want...