Open In App

ConstraintLayout in Android using Jetpack Compose

Improve
Improve
Like Article
Like
Save
Share
Report

ConstraintLayout is the view system in a ViewGroup to place widgets relative to the position of other widgets on the screen. In jetpack compose, almost every layout can be created using Rows and Columns but if you want to create larger complicated Layouts you can also use Constraint Layout as an alternative to Rows and Columns. In this article, we are gonna create a simple Layout that demonstrates the use of ConstraintLayout in Jetpack Compose. First, grab the image from here or use any Image of your choice. We will be creating this layout. Let’s look at the step-by-step guide.

Prerequisites:

Step by Step Implementation

Step 1: Create a New Project (Or use it in the existing Compose project)

To create a new project in the Android Studio Canary version, refer to the article How to Create a new Project in the Android Studio Canary Version with Jetpack Compose.

Step 2: Adding Dependencies

Open build.gradle(app) and add the following dependency.

   implementation “androidx.constraintlayout:constraintlayout-compose:1.0.0-alpha08”

Step 3: Working with the Composable

Create a Composable function named ConstraintLayoutExample. In Jetpack Compose we have Composable named ConstraintLayout in which we can put our other composable to position it relative to others. In Compose we use createRefs() function to create references, similar to Id in View System. Inside ConstaintLayoutExample function, put a ConstraintLayout Composable and create three references we will need, for the top bar, logo, and bottom text. 

Kotlin




ConstraintLayout(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White)
    ) {
  
// Creating references
val (logo, topBar, companyName) = createRefs()
          
}


Then Create a topbar inside ConstraintLayout, refer to the comment below in code for a better understanding of how to put constraints.

Kotlin




// TopAppBar Composable
TopAppBar(
          modifier = Modifier
                .constrainAs(topBar) {
                      
                    // top of TopAppBar constraints
                    // to top of parent
                    top.linkTo(parent.top)
                      
                    // start of TopAppBar constraints
                    // to start of parent
                    start.linkTo(parent.start)
                      
                    // end of TopAppBar constraints 
                    // to end of parent
                    end.linkTo(parent.end)
                },
               
            backgroundColor = Green
  ) {
  
// Contents for topAppBar
Text(
     text = "Geeks for Geeks | Constraint Layout", color = Color.White
    )
}


Similarly, Create the Image and Text Composable and constraints.

Kotlin




// Image Composable
Image(
       // Setting the image saved in drawable
       painter = painterResource(id = R.drawable.gfg),
       contentDescription = "company logo",
       modifier = Modifier
                .size(70.dp)
  
                // Pass the reference
                .constrainAs(logo) {
  
                    // constraint top to bottom of topAppBar
                    top.linkTo(topBar.bottom)
  
                    // constraint start to parent start
                    start.linkTo(parent.start)
  
                    // constraint end to parent end
                    end.linkTo(parent.end)
  
                    // Constraint bottom to top of bottom text 
                    // as it will be in bottom most
                    bottom.linkTo(companyName.top)
                })
  
// Text Composable
Text(
      text = "Geeks for geeks",
      color = Color.Black,
      modifier = Modifier.
           // Passing the reference
           constrainAs(companyName) {
                      
           // constraint start to parent start
           start.linkTo(parent.start)
  
           // constraint end to parent end
           end.linkTo(parent.end)
  
           // constraint bottom to parent bottom
           bottom.linkTo(parent.bottom)
    })


And we are done, now call the composable from setContent in MainActivity Class

Kotlin




class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Surface(color = MaterialTheme.colors.background) {
                ConstraintLayoutExample()
            }
  
        }
    }
}


Run the app and see how Composables are constrained according to the code. Below is the complete code for the MainActivity.kt file.

Kotlin




import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintLayout
  
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Surface(color = MaterialTheme.colors.background) {
                ConstraintLayoutExample()
            }
        }
    }
}
  
  
@Preview
@Composable
fun ConstraintLayoutExample() {
    ConstraintLayout(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White)
    ) {
  
        val (logo, topBar, companyName) = createRefs()
  
        // TopAppBar Composable
        TopAppBar(
            modifier = Modifier
            
                .constrainAs(topBar) {
  
                    // top of TopAppBar constraints
                    // to top of parent
                    top.linkTo(parent.top)
  
                    // start of TopAppBar constraints
                    // to start of parent
                    start.linkTo(parent.start)
  
                    // end of TopAppBar constraints
                    // to end of parent
                    end.linkTo(parent.end)
                },
  
            backgroundColor = Color.Green
        ) {
  
            // Contents for topAppBar
            Text(
                text = "Geeks for Geeks | Constraint Layout", color = Color.White
            )
        }
  
        // Image Composable
        Image(
            // Setting the image saved in drawable
            painter = painterResource(id = R.drawable.gfg),
            contentDescription = "company logo",
            modifier = Modifier
                .size(70.dp)
  
                 // Pass the reference
                .constrainAs(logo) {
  
                    // constraint top to bottom of topAppBar
                    top.linkTo(topBar.bottom)
  
                    // constraint start to parent start
                    start.linkTo(parent.start)
  
                    // constraint end to parent end
                    end.linkTo(parent.end)
  
                    // Constraint bottom to top of bottom 
                    // text as it will be in bottom most
                    bottom.linkTo(companyName.top)
                })
  
        // Text Composable
        Text(
            text = "Geeks for geeks",
            color = Color.Black,
            modifier = Modifier.
                // Passing the reference
                constrainAs(companyName) {
  
                    // constraint start to parent start
                    start.linkTo(parent.start)
  
                    // constraint end to parent end
                    end.linkTo(parent.end)
  
                    // constraint bottom to parent bottom
                    bottom.linkTo(parent.bottom)
          })
    }
}


Output:

If having any issue, refer to the Github Project.



Last Updated : 28 Jul, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads