Solving practical use-cases of Layout using Constraint layout features

Part 1:

Percents: In constraint layout 1.0 we can specify view space on-screen by defining two guidelines, but with constraint layout 2.0 it's more simplified we can define space by giving percentage width or height.

<Button
android:layout_width=”0dp”
android:layout_height=”wrap_content”
app:layout_constraintWidth_percent=”0.7" />

Aspect Ratio :

We can give dimension to a view in form of ratio width:height either in xml or programmatically

In XML:

set the attribute layout_constraintDimensionRatio

<Button
android:layout_width=”wrap_content”
android:layout_height=”0dp”
app:layout_constraintDimensionRatio=”1:1"/>

Programmatically :

Let's say we have a TextureView inside constraint layout whose aspect ratio is defined by the backend, provide aspect ratio programmatically using the constraint set, clone the current constraint of the view in ContraintSet() object update the aspect ratio of the texture view using the constraint set below

private val constraintSet = ConstraintSet()
constraintSet.clone(viewBinding.mConstraintlayout)
constraintSet.setDimensionRatio(viewBinding.textureView.id,
ratio.toSring())
constraintSet.applyTo(viewBinding.mConstraintlayout)

If you have ImageView inside recycler view whose aspect ratio is defined by backend we can achieve the same as I explained above, setting aspect ratio in OnBindViewHolder and applying the changed constraint from set object to the Constraint layout

class MoviePosterAdapter : RecyclerView.Adapter<MoviePosterAdapter.ViewHolder>() {

private val set = ConstraintSet()
 
override fun onBindViewHolder(holder: ViewHolder, position: Int)         {
    val poster = mMoviePosters[position]
    
    holder.mMovieName.text = poster.name
    
    Glide.with(holder.itemView.context)
                .setDefaultRequestOptions(requestOptions)
                .load(poster.imageUrl)
                .into(holder.mImgPoster)   
    set.clone(holder.mConstraintLayout)
    val ratio = poster.width.toFloat()/poster.height.toFloat() 
    set.setDimensionRatio(holder.mImgPoster.id, poster.ratio.toStr)
    set.applyTo(holder.mConstraintLayout)
}

Chains:

It lets you position views along a single axis (horizontal or vertical), So if u have views that need to be aligned use chain

app:layout_constraintVertical_chainStyle or app:layout_constraintHorizontal_chainStyle

The above properties are available on child view inside constraint layout in the chain. You can set it to either spread, spread_inside, or packed.

a)spread evenly distributes all the views in the chain
b)spread_inside positions the first and last element on the edge, and evenly distribute the rest of the elements
c)packed pack the elements together at the center of the chain

Weighted Chain: A weighted chain is one having a chain style set as spread or spread_inside with at least one widget set to 0dp, now add weight attribute for each view as : layout_constraintHorizontal_weight or layout_constraintVertical_weight

Below the button is a weighted chain having chain style spread with 0dp width so that buttons will take an equal amount of space

The first button has a weight of 2 while the rest have a weight of 1.

4. Gone Margins:

Keep margins when the referenced view is gone in ConstraintLayout using the following constraints

• layout_goneMarginStart
• layout_goneMarginEnd
• layout_goneMarginLeft
• layout_goneMarginTop
• layout_goneMarginRight
• layout_goneMarginBottom

fig a) All views are visible.

fig b) View B is gone and View C sticks to the bottom of A

Add goneMarginTop to View C as B is on top of it whose visibility can be gone, so adding goneMarginTop to View C 16dp margin will be maintained

app:layout_goneMarginTop="16dp" is given to View C

5. Horizontal and Vertical Bias:

Vertical Bias:

• This allows us to position a view along the vertical axis using a bias value, this will be relative to its constrained position.

app:layout_constraintVertical_bias=”0.5"

Now the View will be placed on center of the screen

Horizontal Bias:

• This allows us to position a view along the horizontal axis using a bias value, this will be relative to its constrained position.

app:layout_constraintHorizontal_bias=”0.5"

app:layout_constraintHorizontal_bias=”0.7"