MainActivity.kt
package com.cfsuman.jetpackcompose
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.animation.animateColorAsState
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Icon
import androidx.compose.material.IconToggleButton
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
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.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
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(){
val liked = remember { mutableStateOf(true) }
val saved = remember { mutableStateOf(false) }
Column(
Modifier
.padding(16.dp)
.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally) {
Row(Modifier.padding(16.dp)) {
IconToggleButton(
checked = liked.value,
onCheckedChange = { liked.value = it }
) {
val tint by animateColorAsState(
if (liked.value) Color(0xFF7BB661)
else Color.LightGray
)
Icon(
Icons.Filled.Favorite,
contentDescription = "Localized description",
tint = tint
)
}
IconToggleButton(
checked = saved.value,
onCheckedChange = { saved.value = it }
) {
val tint by animateColorAsState(
if (saved.value) Color(0xFFEC407A)
else Color(0xFFB0BEC5)
)
Icon(
Icons.Filled.Save,
contentDescription = "Localized description",
tint = tint
)
}
}
val isLiked = if (liked.value) "Liked" else "Unliked"
val isSaved = if (saved.value) "Saved" else "Unsaved"
Text(
text = "$isLiked and $isSaved",
fontWeight = FontWeight.Bold,
fontSize = 25.sp,
fontFamily = FontFamily.Serif
)
}
}
@Preview
@Composable
fun ComposablePreview(){
//MainContent()
}
}


- jetpack compose - How to use Column layout
- jetpack compose - How to use Row layout
- jetpack compose - Box layout example
- jetpack compose - How to use AlertDialog
- jetpack compose - Get context
- jetpack compose - Box background color
- jetpack compose - Box rounded corners
- jetpack compose - Box center
- jetpack compose - Column center
- jetpack compose - Column background color
- jetpack compose - Column border
- jetpack compose - Column spacing
- jetpack compose - Column scrollable
- jetpack compose - Row spacing
- jetpack compose - Row scrolling