Android Day 10 Add interaction to the Textfield !

Let's add some interaction to the text field so user can actually achive something!

The best and the most simple way of adding is to add Button.

package com.williamjiamin.ourowncomposable

import android.os.Bundle
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.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 = {

        })

        Button(
            onClick = { },
            colors = ButtonDefaults.buttonColors(
                containerColor = Color.Red,
                contentColor = Color.White
            )
        ) {
            Text("Subscribe")
        }
    }
}

@Preview(showBackground = true)
@Composable
fun StackOfGreetingsPreview() {
    OurOwnComposableTheme {
    StackOfGreetings()
    }
}

So, you should see something like this: