Android Day 11 Add Toast to the button
OK, the user can click the button, but they are not getting any respond, what to do next? Let's add some Toast message to it!
Remember , toast need to add context to access the infomation.
package com.williamjiamin.ourowncomposable
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.ui.Alignment
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.sp
import com.williamjiamin.ourowncomposable.ui.theme.OurOwnComposableTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
OurOwnComposableTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
StackOfGreetings()
}
}
}
}
}
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
Text(
text = "$name",
modifier = modifier
)
}
@Composable
fun StackOfGreetings() {
Column (
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally
)
{
Row {
Column {
Greeting("1-")
Greeting("2-")
Greeting("3-")
Greeting("4-")
Greeting("5-")
}
Greeting("2-")
Greeting("3-")
Greeting("4-")
Greeting("5-")
}
Greeting("Android")
Greeting("William Jiamin")
Greeting("Youtube Channel")
Greeting("Learn-IT-Free.com")
Greeting("Learn Kotlin The Hard Way")
UserInputField()
}
}
@Composable
fun UserInputField() {
var textState by remember { mutableStateOf("") }
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text("---------------------------------------")
Text("Just Text Field")
Text("---------------------------------------")
TextField(value = "Please Input your name:", onValueChange = {})
Text("---------------------------------------")
Text("Basic Text Field")
Text("---------------------------------------")
BasicTextField(
value = textState,
onValueChange = {
textState = it
},
textStyle = TextStyle(fontSize = 16.sp),
keyboardOptions = KeyboardOptions.Default.copy(keyboardType = KeyboardType.Text)
)
Text("---------------------------------------")
Text("Outlined Text Field")
Text("---------------------------------------")
Text("Please subscribe to my channel:")
OutlinedTextField(value = "", onValueChange = {
})
val context = LocalContext.current
Button(
onClick = { Toast
.makeText(context,
"You have subscribed to William Jiamin channel!",
Toast.LENGTH_LONG).show() },
colors = ButtonDefaults.buttonColors(
containerColor = Color.Red,
contentColor = Color.White
)
) {
Text("Subscribe")
}
}
}
@Preview(showBackground = true)
@Composable
fun StackOfGreetingsPreview() {
OurOwnComposableTheme {
StackOfGreetings()
}
}
So , when you click the Subscribe button, you can see something like this: