Monday, March 8, 2021

jetpack compose - How to use Snackbar

MainActivity.kt

package com.cfsuman.jetpackcompose

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
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.tooling.preview.Preview
import androidx.compose.ui.unit.dp

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MainContent()
        }
    }


    @Composable
    fun MainContent(){
        val visibleState = remember { mutableStateOf(false) }
        val backgroundColor = remember { mutableStateOf(Color(0xFFE3DAC9))}

        Scaffold(
            backgroundColor = backgroundColor.value,

            content = {
                Column(
                    Modifier
                        .fillMaxWidth()
                        .padding(16.dp),
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    Button(onClick = {
                        visibleState.value = !visibleState.value
                    }) {
                        if (visibleState.value){
                            Text(text = "Hide Snackbar")
                        }else{
                            Text(text = "Show Snackbar")
                        }
                    }
                }
            },

            snackbarHost = {
                if (visibleState.value){
                    Snackbar(
                        action = {
                            Button(onClick = {
                                backgroundColor.value = Color.Red
                                visibleState.value = false
                            }) {
                                Text(text = "Apply Red")
                            }
                        }
                    ) {
                        Text(text = "Change background color")
                    }
                }
            }
        )
    }


    @Preview
    @Composable
    fun ComposablePreview(){
        //MainContent()
    }
}