From 33a11e210113df097e512d94b0b2e5a571bc3586 Mon Sep 17 00:00:00 2001 From: Kaushal-Vasava Date: Thu, 5 Jan 2023 11:47:50 +0530 Subject: [PATCH 1/3] Add Surface to Greeting composable to enhance UI --- .../com/lahsuak/apps/jetpackcomposebasic/MainActivity.kt | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/app/src/main/java/com/lahsuak/apps/jetpackcomposebasic/MainActivity.kt b/app/src/main/java/com/lahsuak/apps/jetpackcomposebasic/MainActivity.kt index 187ee32..79878ac 100644 --- a/app/src/main/java/com/lahsuak/apps/jetpackcomposebasic/MainActivity.kt +++ b/app/src/main/java/com/lahsuak/apps/jetpackcomposebasic/MainActivity.kt @@ -28,6 +28,7 @@ class MainActivity : ComponentActivity() { } } } + /*** Composable functions : A composable function is a regular function annotated with @Composable. @@ -35,10 +36,12 @@ This enables your function to call other @Composable functions within it. You can see how the Greeting function is marked as @Composable. This function will produce a piece of UI hierarchy displaying the given input, String. Text is a composable function provided by the library. -***/ + ***/ @Composable fun Greeting(name: String) { - Text(text = "Hello $name!") + Surface(color = MaterialTheme.colorScheme.primary) { + Text(text = "Hello $name!") + } } @Preview(showBackground = true) From ec794aff20146d65e82c286887bfbba6ac10bf00 Mon Sep 17 00:00:00 2001 From: Kaushal-Vasava Date: Thu, 5 Jan 2023 12:04:16 +0530 Subject: [PATCH 2/3] Reused composable function --- .../apps/jetpackcomposebasic/MainActivity.kt | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/app/src/main/java/com/lahsuak/apps/jetpackcomposebasic/MainActivity.kt b/app/src/main/java/com/lahsuak/apps/jetpackcomposebasic/MainActivity.kt index 79878ac..c5b5990 100644 --- a/app/src/main/java/com/lahsuak/apps/jetpackcomposebasic/MainActivity.kt +++ b/app/src/main/java/com/lahsuak/apps/jetpackcomposebasic/MainActivity.kt @@ -4,6 +4,7 @@ import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Surface import androidx.compose.material3.Text @@ -18,17 +19,22 @@ class MainActivity : ComponentActivity() { setContent { JetPackComposeBasicTheme { // A surface container using the 'background' color from the theme - Surface( - modifier = Modifier.fillMaxSize(), - color = MaterialTheme.colorScheme.background - ) { - Greeting("Android") - } + MyApp(modifier = Modifier.fillMaxSize()) } } } } +@Composable +fun MyApp(modifier: Modifier = Modifier) { + Surface( + modifier = modifier, + color = MaterialTheme.colorScheme.background + ) { + Greeting("Android") + } +} + /*** Composable functions : A composable function is a regular function annotated with @Composable. @@ -48,6 +54,6 @@ fun Greeting(name: String) { @Composable fun DefaultPreview() { JetPackComposeBasicTheme { - Greeting("Android") + MyApp() } } \ No newline at end of file From 845c667e9b68395b0598482fb044e3af7e6a0577 Mon Sep 17 00:00:00 2001 From: Kaushal-Vasava Date: Thu, 5 Jan 2023 12:37:51 +0530 Subject: [PATCH 3/3] Add Row, Column and Button composable --- .../apps/jetpackcomposebasic/MainActivity.kt | 58 ++++++++++++++----- 1 file changed, 42 insertions(+), 16 deletions(-) diff --git a/app/src/main/java/com/lahsuak/apps/jetpackcomposebasic/MainActivity.kt b/app/src/main/java/com/lahsuak/apps/jetpackcomposebasic/MainActivity.kt index c5b5990..0722d94 100644 --- a/app/src/main/java/com/lahsuak/apps/jetpackcomposebasic/MainActivity.kt +++ b/app/src/main/java/com/lahsuak/apps/jetpackcomposebasic/MainActivity.kt @@ -3,14 +3,12 @@ package com.lahsuak.apps.jetpackcomposebasic import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent -import androidx.compose.foundation.layout.fillMaxSize -import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.Surface -import androidx.compose.material3.Text +import androidx.compose.foundation.layout.* +import androidx.compose.material3.* import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp import com.lahsuak.apps.jetpackcomposebasic.ui.theme.JetPackComposeBasicTheme class MainActivity : ComponentActivity() { @@ -26,27 +24,55 @@ class MainActivity : ComponentActivity() { } @Composable -fun MyApp(modifier: Modifier = Modifier) { - Surface( - modifier = modifier, - color = MaterialTheme.colorScheme.background - ) { - Greeting("Android") +fun MyApp( + modifier: Modifier = Modifier, + names: List = listOf("World", "Kaushal") +) { + Column(modifier = modifier.padding(vertical = 4.dp)) { + for (name in names) { + Greeting(name) + } } } -/*** -Composable functions : +/** + * Composable functions : A composable function is a regular function annotated with @Composable. This enables your function to call other @Composable functions within it. You can see how the Greeting function is marked as @Composable. This function will produce a piece of UI hierarchy displaying the given input, String. Text is a composable function provided by the library. - ***/ + **/ + +/** + * 1. Column is Vertical linear layout of view system + * 2. Row is Horizontal linear layout of view system + * 3. Box is FrameLayout of view system + */ + +/** + * Button is a composable provided by the material3 package +which takes a composable as the last argument. +Since trailing lambdas can be moved outside of the parentheses, +you can add any content to the button as a child. For example, a Text + */ + @Composable fun Greeting(name: String) { - Surface(color = MaterialTheme.colorScheme.primary) { - Text(text = "Hello $name!") + Surface( + color = MaterialTheme.colorScheme.primary, + modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp) + ) { + Row(modifier = Modifier.padding(24.dp)) { + Column(modifier = Modifier.weight(1f)) { + Text(text = "Hello,") + Text(text = name) + } + ElevatedButton(onClick = { }) { + Text(text = "Show more") + } + } + } }