ConstraintLayout in Android using Jetpack Compose
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:
- Knowledge of Kotlin.
- Good knowledge of creating layouts in XML Android.
- Knowledge of Jetpack Compose.
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 = "Beginner for Beginner | 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 = "Beginner for Beginner" , 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 = "Beginner for Beginner | 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 = "Beginner for Beginner" , 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.
Contact Us