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.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MainContent()
}
}
@Composable
fun MainContent(){
Column(Modifier.padding(25.dp)) {
val textState = remember{ mutableStateOf(TextFieldValue()) }
OutlinedTextField(
value = textState.value,
onValueChange = { textState.value = it },
label = { Text("City Name?") },
textStyle = TextStyle(
color = Color.Black,
fontSize = 22.sp,
fontWeight = FontWeight.Bold
)
)
Text(
text = "Your city is : " + textState.value.text,
fontSize = 22.sp,
color = Color.Blue,
fontFamily = FontFamily.SansSerif,
fontStyle = FontStyle.Italic,
modifier = Modifier.padding(top = 25.dp)
)
}
}
@Preview
@Composable
fun ComposablePreview(){
//MainContent()
}
}
- jetpack compose - How to use Text
- jetpack compose - ClickableText example
- jetpack compose - How to use Button
- jetpack compose - How to use TextField
- jetpack compose - Password TextField example
- jetpack compose - Handle changes in a TextField
- jetpack compose - How to use Card
- jetpack compose - How to use Checkbox
- jetpack compose - How to use RadioButton
- jetpack compose - How to use TopAppBar
- jetpack compose - How to use BottomAppBar
- jetpack compose - BottomAppBar with FAB example
- jetpack compose - Image from vector
- jetpack compose - Image from bitmap
- jetpack compose - Circular image example