Change Button Color & Text Dynamically in Jetpack Compose - RRutors

Published September 25, 2021

In our previous jetpack example we cover how to add button to the screen and set background color to the button. In this example we will learn how to set the color dynamically for the button and dynamic text.

To handle the values of the composable we need to wrap Compose fun with MutableState component.

The MutableState class is a single value holder whose reads and writes are observed by Compose.

This mutablestate will initialize by passed value.

So in this example we will take a button and add click events to the button. Then onClick event of the button we will change the color of the button and Text string value dynamically.

So Let's get started

Step 1: Create android application in android studio

Step 2: Follow step for setup Jetpack Compose with Android Studio

Step 3: Create Compose function with text and button

Button(
    modifier=Modifier
        .align(alignment = Alignment.Center)
        .padding(all=0.dp),
    
    onClick = {
        
        Toast
            .makeText(context, "OnClick ", Toast.LENGTH_LONG)
            .show()
},content={
    Text(
        text = " Timed clicked",color = Color.White)
})

Now to add dynamic values we need to use MutableState instance for the variables. So let's defin variables with color and count .

var color = remember { mutableStateOf( Color.White) }
var count = remember { mutableStateOf( 0) }

we set default color and count with mustableState.

Let's change these values on button click by change mutablestate value property.

color.value=Color.Black
count.value=count.value+1;

Now when we run the application and click the button it will change the dynamic values to the text and color for the button

Change dynamic values to the text stirng button color

package com.example.jetpack.widget

import android.content.Context
import android.util.Log
import android.widget.Toast
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.SnackbarDefaults.backgroundColor
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.semantics.Role.Companion.Button
import androidx.compose.ui.unit.dp

@Composable
fun ComposeMenu(context: Context){


    Box(
        modifier= Modifier
            .fillMaxSize()
            .clickable(

                onClick = {
                    Toast
                        .makeText(context, "OnClick", Toast.LENGTH_LONG)
                        .show()
                    Log.v("OnClick", "OnClick ");
                }
            )
    ){
        var color = remember { mutableStateOf( Color.White) }
        var count = remember { mutableStateOf( 0) }

        Button(
            modifier=Modifier
                .align(alignment = Alignment.Center)
                .padding(all=0.dp),
            colors= ButtonDefaults.buttonColors(backgroundColor = color.value),
            onClick = {
                color.value=Color.Black
                count.value=count.value+1;
                Toast
                    .makeText(context, "OnClick ${count.value}", Toast.LENGTH_LONG)
                    .show()
        },content={
            Text(
                text = "${count.value} Timed clicked",color = Color.White)
        })

    }

}

Conclusion: In this Jetpack compose exmaple we covered how to set the dynamic values like text, color to the button using Mutablestate.