CODEWITHSUNDEEP
androidandroid-layoutandroid-constraintlayout
Ravi
Ravi

Reputation: 940

Android Constraint Layout by orientation

I am trying to build a layout with constraint layout that has 2 views. In the portrait view, I want the veiws to be vertically stacked and in the landscape view I want the views to be next to each other in same row. Can this be achieved using constraint layout and single layout file without using layout-land. Any help is appreciated. Thanks in advance.

Portrait Layout

Landscape layout

Upvotes: 0

Views: 67

Answers (1)

Chirag Desai
Chirag Desai

Reputation: 93

If you are having a recycler view inside the ConstraintLayout then you just need to change the Layout orientation based on current device orientation

val orientation = this.resources.configuration.orientation
    if (orientation == Configuration.ORIENTATION_PORTRAIT) {
        val linearLayoutManager =
            LinearLayoutManager(this)
        linearLayoutManager.orientation = LinearLayoutManager.VERTICAL
        mBinding.recyclerView.layoutManager = linearLayoutManager
    } else {
        val linearLayoutManager =
            LinearLayoutManager(this)
        linearLayoutManager.orientation = LinearLayoutManager.HORIZONTAL
        mBinding.recyclerView.layoutManager = linearLayoutManager
    }
    mBinding.recyclerView.adapter =
        RecyclerViewAdapter(param1, param2, param3)

If you are have individual child layouts then you can provide constraints at the time of orientation change.

val orientation = this.resources.configuration.orientation
    if (orientation == Configuration.ORIENTATION_LANDSCAPE) {
        val layoutParams =
            ConstraintLayout.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.WRAP_CONTENT
            )

        val constraintSet = ConstraintSet()
        constraintSet.clone(mBinding.clParent)

        setLayoutOneConstraint(constraintSet)

        setLayoutTwoConstraint(constraintSet)

        mBinding.clParent.layoutParams = layoutParams
        constraintSet.applyTo(mBinding.clParent)
    }

The constraintSet for child layouts are given below. You can refer them.

Constraint changes for Top Child

private fun setLayoutOneConstraint(constraintSet: ConstraintSet) {
    constraintSet.connect(
        mBinding.topLayout.id,
        ConstraintSet.TOP,
        mBinding.clParent.id,
        ConstraintSet.TOP,
        0
    )
    constraintSet.connect(
        mBinding.topLayout.id,
        ConstraintSet.START,
        mBinding.clParent.id,
        ConstraintSet.START,
        10
    )
    constraintSet.connect(
        mBinding.topLayout.id,
        ConstraintSet.END,
        mBinding.bottomLayout.id,
        ConstraintSet.START,
        10
    )
    constraintSet.connect(
        mBinding.topLayout.id,
        ConstraintSet.BOTTOM,
        mBinding.clParent.id,
        ConstraintSet.BOTTOM,
        0
    )
}

Constraint changes for Bottom Child

private fun setLayoutTwoConstraint(constraintSet: ConstraintSet) {
    constraintSet.connect(
        mBinding.bottomLayout.id,
        ConstraintSet.TOP,
        mBinding.topLayout.id,
        ConstraintSet.TOP,
        0
    )
    constraintSet.connect(
        mBinding.bottomLayout.id,
        ConstraintSet.START,
        mBinding.topLayout.id,
        ConstraintSet.END,
        10
    )
    constraintSet.connect(
        mBinding.bottomLayout.id,
        ConstraintSet.END,
        mBinding.clParent.id,
        ConstraintSet.END,
        10
    )
    constraintSet.connect(
        mBinding.bottomLayout.id,
        ConstraintSet.BOTTOM,
        mBinding.topLayout.id,
        ConstraintSet.BOTTOM,
        0
    )
}

However, you will need to handle the constraints for the Next button also in the similar way if required. I hope this helps you in solving your problem.

Upvotes: 0

Related Questions