Change Layout Background Colors with a Menu Items

 

Build an Android App to Change Background Colors with a Simple Menu — Step-by-Step in Android Studio

Step 1: Create a Menu Directory inside the res Directory

Inside the res directory, create a new directory named menu. Then, create a Menu Resource file named color_layout.xml.

color_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/yello" android:title="Yello" />
    <item android:id="@+id/orange" android:title="Orange" />
    <item android:id="@+id/blue" android:title="Blue" />
</menu>

Step 2: Add Colors in colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="yello">#FFEB3B</color>
    <color name="orange">#FB8C00</color>
    <color name="blue">#2196F3</color>
</resources>

Step 3: Update activity_main.xml

<LinearLayout 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/mainLinearLayout"
    android:layout_width="match_parent"
    android:gravity="center"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

</LinearLayout>

Step 4: Create MainActivity.java File

package com.tecvipul.layoutcolormenu;

import android.os.Bundle;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.widget.LinearLayout;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    LinearLayout mainLinearLayout;

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

        mainLinearLayout = findViewById(R.id.mainLinearLayout);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.color_layout, menu);
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.yello:
                mainLinearLayout.setBackgroundColor(getResources().getColor(R.color.yello));
                return true;

            case R.id.orange:
                mainLinearLayout.setBackgroundColor(getResources().getColor(R.color.orange));
                return true;

            case R.id.blue:
                mainLinearLayout.setBackgroundColor(getResources().getColor(R.color.blue));
                return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

Conclusion & Explanation

This simple Android app demonstrates how to dynamically change the background color of your layout using a menu. Here's what happens step by step:

• We define menu options with color choices in an XML file.
• We create predefined color values in colors.xml.
• Our layout file includes a LinearLayout where the background color will be applied.
• In MainActivity.java, we use onOptionsItemSelected() to detect menu selections and change the background color accordingly.

This example provides foundation for more complex menu-driven applications and dynamic UI modifications in Android.