From 89eef70ade9b4eb6efc24cb8b05502d7ee5d0dee Mon Sep 17 00:00:00 2001 From: lets_finish_the_app Date: Sun, 3 Mar 2024 19:37:46 +0530 Subject: [PATCH 1/3] Added interaction source. --- .../ui/screens/InteractionScreen.kt | 51 +++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 app/src/main/java/com/demo/composeapplication/ui/screens/InteractionScreen.kt diff --git a/app/src/main/java/com/demo/composeapplication/ui/screens/InteractionScreen.kt b/app/src/main/java/com/demo/composeapplication/ui/screens/InteractionScreen.kt new file mode 100644 index 0000000..42cc404 --- /dev/null +++ b/app/src/main/java/com/demo/composeapplication/ui/screens/InteractionScreen.kt @@ -0,0 +1,51 @@ +package com.demo.composeapplication.ui.screens + +import androidx.compose.foundation.background +import androidx.compose.foundation.border +import androidx.compose.foundation.clickable +import androidx.compose.foundation.focusable +import androidx.compose.foundation.hoverable +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.interaction.collectIsFocusedAsState +import androidx.compose.foundation.interaction.collectIsPressedAsState +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.padding +import androidx.compose.material.ripple.rememberRipple +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.remember +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp + + +@Composable +fun InteractionContent() { + val interactionSource = remember { + MutableInteractionSource() + } + val focusState = interactionSource.collectIsFocusedAsState() + val pressState = interactionSource.collectIsPressedAsState() + + Row(modifier = Modifier + .background(color = if(pressState.value) Color.Red else Color.Transparent) + .border( + width = if (focusState.value) 1.dp else 0.dp, + color = if (focusState.value) Color.Blue else Color.Transparent + ) + .clickable(interactionSource = interactionSource, indication = rememberRipple(), onClick = { + + }) + .focusable(interactionSource = interactionSource) + .hoverable(interactionSource) + ) { + Text(text = "Click Me", modifier = Modifier.padding(16.dp)) + } +} + +@Preview +@Composable +fun PreviewInteractionContent() { + InteractionContent() +} \ No newline at end of file From c5d6f72f58bae3b7c8932d0afa8d0be06b874517 Mon Sep 17 00:00:00 2001 From: lets_finish_the_app Date: Mon, 24 Jun 2024 03:03:16 +0530 Subject: [PATCH 2/3] usage of constraint layout. --- app/build.gradle.kts | 31 ++++---- .../ui/screens/CommonElementsInCompose.kt | 15 ---- .../ui/screens/ConstraintDemo.kt | 76 +++++++++++++++++++ 3 files changed, 92 insertions(+), 30 deletions(-) create mode 100644 app/src/main/java/com/demo/composeapplication/ui/screens/ConstraintDemo.kt diff --git a/app/build.gradle.kts b/app/build.gradle.kts index 39c7632..7a1628b 100644 --- a/app/build.gradle.kts +++ b/app/build.gradle.kts @@ -51,29 +51,30 @@ android { } dependencies { - - implementation("androidx.core:core-ktx:1.12.0") - implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.6.2") - implementation("androidx.activity:activity-compose:1.8.2") - implementation(platform("androidx.compose:compose-bom:2023.08.00")) + val lifecycleVersion = "2.8.2" implementation("androidx.compose.ui:ui") implementation("androidx.compose.ui:ui-graphics") implementation("androidx.compose.ui:ui-tooling-preview") implementation("androidx.compose.material3:material3") + implementation("androidx.constraintlayout:constraintlayout-compose:1.0.1") + // ViewModel + implementation("androidx.lifecycle:lifecycle-viewmodel-compose:$lifecycleVersion") + // LiveData + implementation("androidx.lifecycle:lifecycle-livedata-ktx:$lifecycleVersion") + // Lifecycle utilities for Compose + implementation("androidx.lifecycle:lifecycle-runtime-compose:$lifecycleVersion") + implementation("androidx.compose.runtime:runtime-livedata:1.6.8") + + implementation("androidx.core:core-ktx:1.13.1") + implementation("androidx.lifecycle:lifecycle-runtime-ktx:$lifecycleVersion") + implementation("androidx.activity:activity-compose:1.9.0") + implementation(platform("androidx.compose:compose-bom:2024.06.00")) + testImplementation("junit:junit:4.13.2") androidTestImplementation("androidx.test.ext:junit:1.1.5") androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1") - androidTestImplementation(platform("androidx.compose:compose-bom:2023.08.00")) + androidTestImplementation(platform("androidx.compose:compose-bom:2024.06.00")) androidTestImplementation("androidx.compose.ui:ui-test-junit4") debugImplementation("androidx.compose.ui:ui-tooling") debugImplementation("androidx.compose.ui:ui-test-manifest") - - val lifecycle_version = "2.6.2" - // ViewModel - implementation("androidx.lifecycle:lifecycle-viewmodel-compose:$lifecycle_version") - // LiveData - implementation("androidx.lifecycle:lifecycle-livedata-ktx:$lifecycle_version") - // Lifecycle utilities for Compose - implementation("androidx.lifecycle:lifecycle-runtime-compose:$lifecycle_version") - implementation("androidx.compose.runtime:runtime-livedata:1.5.4") } \ No newline at end of file diff --git a/app/src/main/java/com/demo/composeapplication/ui/screens/CommonElementsInCompose.kt b/app/src/main/java/com/demo/composeapplication/ui/screens/CommonElementsInCompose.kt index f4983b1..5f11a94 100644 --- a/app/src/main/java/com/demo/composeapplication/ui/screens/CommonElementsInCompose.kt +++ b/app/src/main/java/com/demo/composeapplication/ui/screens/CommonElementsInCompose.kt @@ -1,11 +1,6 @@ package com.demo.composeapplication.ui.screens -import android.provider.CalendarContract.Colors -import android.text.Spannable -import android.text.style.BackgroundColorSpan import androidx.compose.foundation.background -import androidx.compose.foundation.interaction.MutableInteractionSource -import androidx.compose.foundation.interaction.collectIsPressedAsState import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxWidth @@ -13,7 +8,6 @@ import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.shape.CutCornerShape import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.foundation.text.ClickableText import androidx.compose.material.icons.Icons import androidx.compose.material.icons.outlined.AccountBox import androidx.compose.material3.AssistChip @@ -22,34 +16,25 @@ import androidx.compose.material3.Card import androidx.compose.material3.CardDefaults import androidx.compose.material3.ElevatedButton import androidx.compose.material3.ElevatedCard -import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.FilledTonalButton import androidx.compose.material3.FilterChip import androidx.compose.material3.Icon import androidx.compose.material3.InputChip import androidx.compose.material3.OutlinedButton import androidx.compose.material3.OutlinedCard -import androidx.compose.material3.ShapeDefaults import androidx.compose.material3.SuggestionChip import androidx.compose.material3.Text import androidx.compose.material3.TextButton import androidx.compose.runtime.Composable -import androidx.compose.runtime.getValue -import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color -import androidx.compose.ui.graphics.drawscope.DrawStyle -import androidx.compose.ui.graphics.drawscope.Stroke import androidx.compose.ui.text.SpanStyle import androidx.compose.ui.text.buildAnnotatedString import androidx.compose.ui.text.withStyle import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp -import androidx.core.text.buildSpannedString -import androidx.core.text.toSpannable -@OptIn(ExperimentalMaterial3Api::class) @Composable fun DisplayCommonContents() { Column(modifier = Modifier.background(Color.LightGray)) { diff --git a/app/src/main/java/com/demo/composeapplication/ui/screens/ConstraintDemo.kt b/app/src/main/java/com/demo/composeapplication/ui/screens/ConstraintDemo.kt new file mode 100644 index 0000000..aa14bf0 --- /dev/null +++ b/app/src/main/java/com/demo/composeapplication/ui/screens/ConstraintDemo.kt @@ -0,0 +1,76 @@ +package com.demo.composeapplication.ui.screens + +import android.content.res.Configuration +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.layout.layoutId +import androidx.compose.ui.platform.LocalConfiguration +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp +import androidx.constraintlayout.compose.ChainStyle +import androidx.constraintlayout.compose.ConstraintLayout +import androidx.constraintlayout.compose.ConstraintSet + +@Composable +fun ComposeDemo() { + val margin = if(LocalConfiguration.current.orientation == Configuration.ORIENTATION_LANDSCAPE) 32.dp else 16.dp + ConstraintLayout(getConstraintSet(margin)) { + + Text(text = "First View", modifier = Modifier.layoutId("text1")) + Text(text = "Second View", modifier = Modifier.layoutId("text2")) + Text(text = "Third View", modifier = Modifier.layoutId("text3")) + Text(text = "Fourth View", modifier = Modifier.layoutId("text4")) + } +} + + +fun getConstraintSet(margin: Dp): ConstraintSet { + return ConstraintSet { + val text1Ref = createRefFor("text1") + val text2Ref = createRefFor("text2") + val text3Ref = createRefFor("text3") + val text4Ref = createRefFor("text4") + + val guidelineStart = createGuidelineFromStart(8.dp) + val guidelineEnd = createGuidelineFromEnd(0.1f) + val barrierBottom = createBottomBarrier(text1Ref, text2Ref, text3Ref) + + val horizontalChain = createHorizontalChain(text1Ref, text2Ref, text3Ref, chainStyle = ChainStyle.Packed) + //val verticalChain = createVerticalChain(text1Ref, text2Ref, text3Ref, chainStyle = ChainStyle.Packed) + + constrain(horizontalChain) { + start.linkTo(guidelineStart, margin) + end.linkTo(guidelineEnd) + } + /*constrain(verticalChain) { + }*/ + + /* constrain(text2Ref) { + top.linkTo(parent.top) + start.linkTo(text1Ref.end) + } + + constrain(text3Ref) { + top.linkTo(parent.top) + start.linkTo(text2Ref.end) + }*/ + + constrain(text4Ref) { + top.linkTo(barrierBottom) + start.linkTo(text1Ref.start) + } + } +} + +@Preview +@Composable +fun PreviewComposeDemo() { + ComposeDemo() +} +@Preview(device = "spec:parent=pixel_5,orientation=landscape") +@Composable +fun PreviewComposeDemoLandscape() { + ComposeDemo() +} \ No newline at end of file From 398e3b7779fee49cdc465b6001265e1b0ec8cfaf Mon Sep 17 00:00:00 2001 From: lets_finish_the_app Date: Mon, 24 Jun 2024 03:04:09 +0530 Subject: [PATCH 3/3] Update gitignore --- app/.gitignore | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/.gitignore b/app/.gitignore index 42afabf..3f8400c 100644 --- a/app/.gitignore +++ b/app/.gitignore @@ -1 +1,2 @@ -/build \ No newline at end of file +/build +src/main/assets \ No newline at end of file