diff --git a/app/src/main/java/com/example/jetpackcompose/core/Utils.kt b/app/src/main/java/com/example/jetpackcompose/core/Utils.kt index 5a2d513..49f8ac7 100644 --- a/app/src/main/java/com/example/jetpackcompose/core/Utils.kt +++ b/app/src/main/java/com/example/jetpackcompose/core/Utils.kt @@ -18,7 +18,7 @@ data class Amenity( ) // Methods -fun getPersonList() = listOf( +fun getPersonList() = listOf( Person("Grace Hopper", 25), Person("Ada Lovelace", 29), Person("John Smith", 28), diff --git a/app/src/main/java/com/example/jetpackcompose/material/AlertDialogActivity.kt b/app/src/main/java/com/example/jetpackcompose/material/AlertDialogActivity.kt index bfb7478..f7f8a96 100644 --- a/app/src/main/java/com/example/jetpackcompose/material/AlertDialogActivity.kt +++ b/app/src/main/java/com/example/jetpackcompose/material/AlertDialogActivity.kt @@ -8,8 +8,9 @@ import androidx.compose.setValue import androidx.compose.state import androidx.ui.core.Modifier import androidx.ui.core.setContent -import androidx.ui.foundation.Clickable +import androidx.ui.foundation.Box import androidx.ui.foundation.Text +import androidx.ui.foundation.clickable import androidx.ui.foundation.shape.corner.RoundedCornerShape import androidx.ui.graphics.Color import androidx.ui.layout.Column @@ -55,11 +56,12 @@ fun ClickableText() { // text "Click to see dialog" is clicked. Every time the value of this variable changes, // the relevant sub-composables that use showPopup are automatically recomposed. var showPopup by state { false } - // Clickable wraps the child composable and enables it to react to a click through the onClick - // callback similar to the onClick listener that we are accustomed to on Android. + // Box with clickable modifier wraps the child composable and enables it to react to a click + // through the onClick callback similar to the onClick listener that we are accustomed to + // on Android. // Here, we just change the value of showPopup to be true every time we click on the text that // says "Click to see Popup" - Clickable(onClick = { showPopup = true }) { + Box(Modifier.clickable(onClick = { showPopup = true }), children = { // You can think of Modifiers as implementations of the decorators pattern that are used to // modify the composable that its applied to. In the example below, we add a padding of // 8dp to the Card composable and 16dp to the Text composable. @@ -72,7 +74,7 @@ fun ClickableText() { fontFamily = FontFamily.Serif) ) } - } + }) // A lambda that toggles the showPopup value to off. We pass it to the onDismiss equivalent // callback of the AlertDialog. diff --git a/app/src/main/java/com/example/jetpackcompose/material/DrawerAppActivity.kt b/app/src/main/java/com/example/jetpackcompose/material/DrawerAppActivity.kt index 7022eec..e511524 100644 --- a/app/src/main/java/com/example/jetpackcompose/material/DrawerAppActivity.kt +++ b/app/src/main/java/com/example/jetpackcompose/material/DrawerAppActivity.kt @@ -8,15 +8,14 @@ import androidx.compose.state import androidx.ui.core.Modifier import androidx.ui.core.setContent import androidx.ui.foundation.Box -import androidx.ui.foundation.Clickable import androidx.ui.foundation.ContentGravity import androidx.ui.foundation.Icon import androidx.ui.foundation.Text +import androidx.ui.foundation.clickable import androidx.ui.graphics.Color import androidx.ui.layout.Column import androidx.ui.layout.fillMaxSize import androidx.ui.layout.fillMaxWidth -import androidx.ui.layout.offset import androidx.ui.layout.padding import androidx.ui.material.DrawerState import androidx.ui.material.IconButton @@ -105,18 +104,19 @@ fun DrawerContentComponent( Column(modifier = Modifier.fillMaxSize()) { // We want to have 3 rows in this column to represent the 3 screens in this activity. for (index in DrawerAppScreen.values().indices) { - // Clickable wraps the child composable and enables it to react to a click through the onClick - // callback similar to the onClick listener that we are accustomed to on Android. + // Box with clickable modifier wraps the child composable and enables it to react to a + // click through the onClick callback similar to the onClick listener that we are + // accustomed to on Android. // Here, we just update the currentScreen variable to hold the appropriate value based on // the row that is clicked i.e if the first row is clicked, we set the value of // currentScreen to DrawerAppScreen.Screen1, when second row is clicked we set it to // DrawerAppScreen.Screen2 and so on and so forth. val screen = getScreenBasedOnIndex(index) - Clickable(onClick = { + Box(Modifier.clickable(onClick = { currentScreen.value = screen // We also close the drawer when an option from the drawer is selected. closeDrawer() - }) { + }), children = { // Surface is a composable provided to fulfill the needs of the "Surface" metaphor from // the Material Design specification. It's generally used to change the background // color, add elevation, clip or add background shape to its children composables. @@ -134,7 +134,7 @@ fun DrawerContentComponent( // composable to render text on the screen Text(text = screen.name, modifier = Modifier.padding(16.dp)) } - } + }) } } } diff --git a/app/src/main/java/com/example/jetpackcompose/material/FlowRowActivity.kt b/app/src/main/java/com/example/jetpackcompose/material/FlowRowActivity.kt index 4c5dc19..bf55303 100644 --- a/app/src/main/java/com/example/jetpackcompose/material/FlowRowActivity.kt +++ b/app/src/main/java/com/example/jetpackcompose/material/FlowRowActivity.kt @@ -9,8 +9,8 @@ import androidx.compose.state import androidx.ui.core.Modifier import androidx.ui.core.setContent import androidx.ui.foundation.Box -import androidx.ui.foundation.Clickable import androidx.ui.foundation.Text +import androidx.ui.foundation.clickable import androidx.ui.foundation.drawBackground import androidx.ui.foundation.shape.corner.RoundedCornerShape import androidx.ui.layout.Column @@ -80,13 +80,14 @@ fun SimpleFlowRow(amenityList: List) { mainAxisSize = SizeMode.Expand ) { amenityList.forEachIndexed { index, amenity -> - // Clickable wraps the child composable and enables it to react to a click through - // the onClick callback similar to the onClick listener that we are accustomed to on - // Android. Here, we just add the current index to the selectedIndices set every + // Box with clickable modifier wraps the child composable and enables it to react to + // a click through the onClick callback similar to the onClick listener that we are + // accustomed to on Android. + // Here, we just add the current index to the selectedIndices set every // time a user taps on it. - Clickable(onClick = { selectedIndices.add(index) }) { - // Text is a predefined composable that does exactly what you'd expect it to - - // display text on the screen. It allows you to customize its appearance using + Box(Modifier.clickable(onClick = { selectedIndices.add(index) }), children = { + // Text is a predefined composable that does exactly what you'd expect it to - + // display text on the screen. It allows you to customize its appearance using // style, fontWeight, fontSize, etc. Text( text = if (selectedIndices.contains(index)) "✓ ${amenity.name}" else amenity.name, @@ -95,7 +96,7 @@ fun SimpleFlowRow(amenityList: List) { color = colors[index % colors.size], shape = RoundedCornerShape(15.dp)) + Modifier.padding(8.dp) ) - } + }) } } } diff --git a/app/src/main/java/com/example/jetpackcompose/material/MaterialActivity.kt b/app/src/main/java/com/example/jetpackcompose/material/MaterialActivity.kt index 1539d22..d7a84dc 100644 --- a/app/src/main/java/com/example/jetpackcompose/material/MaterialActivity.kt +++ b/app/src/main/java/com/example/jetpackcompose/material/MaterialActivity.kt @@ -11,10 +11,10 @@ import androidx.ui.core.ContextAmbient import androidx.ui.core.Modifier import androidx.ui.core.setContent import androidx.ui.foundation.Box -import androidx.ui.foundation.Clickable import androidx.ui.foundation.Image import androidx.ui.foundation.Text import androidx.ui.foundation.VerticalScroller +import androidx.ui.foundation.clickable import androidx.ui.foundation.selection.ToggleableState import androidx.ui.foundation.shape.corner.RoundedCornerShape import androidx.ui.graphics.Color @@ -503,11 +503,12 @@ fun MaterialRippleComponent() { // 8dp to the Card composable. In addition, we configure it out occupy the entire available // width using the Modifier.fillMaxWidth() modifier. Card(shape = RoundedCornerShape(4.dp), modifier = Modifier.padding(8.dp) + Modifier.fillMaxWidth()) { - // Clickable wraps the child composable and enables it to react to a click through the - // onClick callback similar to the onClick listener that we are accustomed to on Android. + // Box with clickable modifier wraps the child composable and enables it to react to a click + // through the onClick callback similar to the onClick listener that we are accustomed to + // on Android. // In order to show a ripple effect, we make use of the Modifier.ripple modifier with the // default values. - Clickable(onClick = {}, modifier = Modifier.ripple(bounded = true)) { + Box(modifier = Modifier.ripple(bounded = true) + Modifier.clickable(onClick = {}), children = { // Box is a predefined convenience composable that allows you to apply common // draw & layout logic. Box(backgroundColor = Color.LightGray, shape = RoundedCornerShape(4.dp)) { @@ -518,7 +519,7 @@ fun MaterialRippleComponent() { )) } - } + }) } } diff --git a/app/src/main/java/com/example/jetpackcompose/theme/DarkModeActivity.kt b/app/src/main/java/com/example/jetpackcompose/theme/DarkModeActivity.kt index 772fa68..cfdac31 100644 --- a/app/src/main/java/com/example/jetpackcompose/theme/DarkModeActivity.kt +++ b/app/src/main/java/com/example/jetpackcompose/theme/DarkModeActivity.kt @@ -7,9 +7,10 @@ import androidx.compose.MutableState import androidx.compose.state import androidx.ui.core.Modifier import androidx.ui.core.setContent -import androidx.ui.foundation.Clickable +import androidx.ui.foundation.Box import androidx.ui.foundation.Icon import androidx.ui.foundation.Text +import androidx.ui.foundation.clickable import androidx.ui.graphics.Color import androidx.ui.layout.Column import androidx.ui.layout.Row @@ -178,36 +179,37 @@ fun ThemedDrawerContentComponent( // use the Scaffold composable that takes care of placing the drawer content in the correct // position. Look at [FixedActionButtonActivity] to see an example. Column(modifier = Modifier.fillMaxHeight()) { - // Clickable wraps the child composable and enables it to react to a click through the onClick - // callback similar to the onClick listener that we are accustomed to on Android. + // Box with clickable modifier wraps the child composable and enables it to react to a click + // through the onClick callback similar to the onClick listener that we are accustomed to + // on Android. // Here, we just update the currentScreen variable to hold the appropriate value based on // the row that is clicked i.e if the first row is clicked, we set the value of // currentScreen to DrawerAppScreen.Screen1, when second row is clicked we set it to // DrawerAppScreen.Screen2 and so on and so forth. - Clickable(onClick = { + Box(Modifier.clickable(onClick = { currentScreen.value = ThemedDrawerAppScreen.Screen1 // We also close the drawer when an option from the drawer is selected. closeDrawer() - }) { + }), children = { // Text is a predefined composable that does exactly what you'd expect it to - // display text on the screen. It allows you to customize its appearance using // the style property. Text(text = ThemedDrawerAppScreen.Screen1.name, modifier = Modifier.padding(16.dp)) - } + }) - Clickable(onClick = { + Box(Modifier.clickable(onClick = { currentScreen.value = ThemedDrawerAppScreen.Screen2 closeDrawer() - }) { + }), children = { Text(text = ThemedDrawerAppScreen.Screen2.name, modifier = Modifier.padding(16.dp)) - } + }) - Clickable(onClick = { + Box(Modifier.clickable(onClick = { currentScreen.value = ThemedDrawerAppScreen.Screen3 closeDrawer() - }) { + }), children = { Text(text = ThemedDrawerAppScreen.Screen3.name, modifier = Modifier.padding(16.dp)) - } + }) } }