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.
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.
// 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.
// 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
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.
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.