Add constraintLayout to build Indian Flag

Author: KaushalVasava

app/build.gradle

@@ -60,4 +60,6 @@ dependencies {
     androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
     debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
     debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version"
+
+    implementation "androidx.constraintlayout:constraintlayout-compose:1.0.1"
 }

app/src/main/java/com/lahsuak/apps/jetpackcomposebasic/MainActivity.kt

@@ -3,13 +3,23 @@ package com.lahsuak.apps.jetpackcomposebasic
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.layoutId
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.constraintlayout.compose.ChainStyle
+import androidx.constraintlayout.compose.ConstraintLayout
+import androidx.constraintlayout.compose.ConstraintSet
+import androidx.constraintlayout.compose.Dimension
 import com.lahsuak.apps.jetpackcomposebasic.ui.theme.JetPackComposeBasicTheme
 
 class MainActivity : ComponentActivity() {
@@ -22,29 +32,70 @@ class MainActivity : ComponentActivity() {
                     modifier = Modifier.fillMaxSize(),
                     color = MaterialTheme.colorScheme.background
                 ) {
-                    Greeting("Android")
+                    IndianFlagScreen()
                 }
             }
         }
     }
 }
-/***
-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.
-***/
+
 @Composable
-fun Greeting(name: String) {
-    Text(text = "Hello $name!")
+fun IndianFlagScreen() {
+    val constraints = ConstraintSet {
+        val orangeBox = createRefFor("orangebox")
+        val greenBox = createRefFor("greenbox")
+        val circle = createRefFor("circle")
+
+        constrain(orangeBox) {
+            top.linkTo(parent.top)
+            start.linkTo(parent.start)
+            end.linkTo(parent.end)
+            bottom.linkTo(circle.top)
+            width = Dimension.fillToConstraints
+            height = Dimension.value(260.dp)
+        }
+        constrain(circle) {
+            top.linkTo(parent.top)
+            bottom.linkTo(parent.bottom)
+            start.linkTo(parent.start)
+            end.linkTo(parent.end)
+            width = Dimension.value(100.dp)
+            height = Dimension.value(100.dp)
+        }
+        constrain(greenBox) {
+            top.linkTo(circle.bottom)
+            bottom.linkTo(parent.bottom)
+            start.linkTo(parent.start)
+            end.linkTo(parent.end)
+            width = Dimension.fillToConstraints
+            height = Dimension.value(260.dp)
+        }
+        createVerticalChain(orangeBox, circle, greenBox, chainStyle = ChainStyle.SpreadInside)
+    }
+    ConstraintLayout(constraints, modifier = Modifier.background(Color.White).fillMaxSize()) {
+        Box(
+            modifier = Modifier
+                .background(Color(0xFFFB8C00))
+                .layoutId("orangebox")
+        )
+        Box(
+            modifier = Modifier
+                .clip(CircleShape)
+                .background(Color.Blue)
+                .layoutId("circle")
+        )
+        Box(
+            modifier = Modifier
+                .background(Color(0xFF2EB734))
+                .layoutId("greenbox")
+        )
+    }
 }
 
 @Preview(showBackground = true)
 @Composable
 fun DefaultPreview() {
     JetPackComposeBasicTheme {
-        Greeting("Android")
+        IndianFlagScreen()
     }
 }