CODEWITHSUNDEEP
androidandroid-layoutandroid-constraintlayoutconstraint-layout-chains
lhts
lhts

Reputation: 61

Center Vertically multiple view using Constraint Layout

I'm trying to make a ConstraintLayout to replace a regular layout with Relative and Linear layout but I'm having some troubles to center vertically two views inside a cardview.

The below layout file is my current layout that I want to replace.

enter image description here

    <?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginEnd="@dimen/main_button_side_margin"
    android:layout_marginStart="@dimen/main_button_side_margin"
    android:layout_marginTop="@dimen/main_button_top_margin"
    android:paddingBottom="2dp"
    android:paddingLeft="1dp"
    android:paddingRight="1dp"
    android:paddingTop="2dp">

    <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/select_language_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:foreground="?android:attr/selectableItemBackground"
        card_view:cardBackgroundColor="@android:color/transparent"
        card_view:cardCornerRadius="0dp"
        card_view:cardElevation="0dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/language_stroke"
            android:minHeight="80dp">

            <ImageView
                android:id="@+id/img_language"
                android:layout_width="@dimen/main_button_size"
                android:layout_height="@dimen/main_button_size"
                android:layout_centerVertical="true"
                android:layout_marginLeft="@dimen/main_button_icon_margin"
                android:layout_marginStart="@dimen/main_button_icon_margin"
                android:src="@drawable/ic_language_white_48dp"
                android:tint="@color/language_color" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginEnd="@dimen/menu_text_margin"
                android:layout_marginLeft="@dimen/menu_text_margin"
                android:layout_marginRight="@dimen/menu_text_margin"
                android:layout_marginStart="@dimen/menu_text_margin"
                android:layout_toEndOf="@id/img_language"
                android:layout_centerVertical="true"
                android:orientation="vertical">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="@dimen/main_button_text_title_margin"
                    android:text="Text" />

                <TextView
                    android:fontFamily="sec-roboto-light"
                    android:gravity="start"
                    android:id="@+id/language_desc"
                    android:text="description"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />
            </LinearLayout>
        </RelativeLayout>
    </android.support.v7.widget.CardView>
</FrameLayout>

My current result is below:

enter image description here

    <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <android.support.v7.widget.CardView
        android:id="@+id/select_language_button"
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:foreground="?android:attr/selectableItemBackground"
        app:cardBackgroundColor="@android:color/transparent"
        app:cardCornerRadius="0dp"
        app:cardElevation="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/language_stroke">

            <TextView
                android:id="@+id/textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="0dp"
                android:text="desc"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="@+id/textView1"
                app:layout_constraintTop_toBottomOf="@+id/textView1" />

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:text="Text"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toRightOf="@+id/img_language"
                app:layout_constraintTop_toTopOf="parent" />

            <ImageView
                android:id="@+id/img_language"
                android:layout_width="32dp"
                android:layout_height="32dp"
                android:layout_marginBottom="8dp"
                android:layout_marginLeft="12dp"
                android:layout_marginStart="12dp"
                android:layout_marginTop="8dp"
                android:src="@drawable/ic_language_white_48dp"
                android:tint="@color/language_color"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
        </android.support.constraint.ConstraintLayout>
    </android.support.v7.widget.CardView>

</android.support.constraint.ConstraintLayout>

The problem is to center textView + textView1 inside cardview. I'm only getting textView centered and textView1 below.

I already tried to "pack vertically" and then "center vertically" both but I'm not getting the result that a LinearLayout (holding the two textsview) achieve when it's android:layout_centerVertical="true" inside the cardview.

I would like to do it with the visual editor instead changing the xml.

I know that the way to achive it is using Chains but I'm not able to do it inside cardview, using layout edit.

Can someone help with some screenshots/screen recorder ?

Upvotes: 3

Views: 3292

Answers (1)

Eugene Brusov
Eugene Brusov

Reputation: 17846

Yep, you have to use vertical packed chain for your textView and textView1 to center them within your CardView.

To add chain in Layout Editor you should select both textView and textView1, right-click on them and select "Center Vertically"

Adding chain in Layout Editor

To change chain style to packed, you should tap on "chain" icon until packed style selected

Change chain style in Layout Editor

Build a Responsive UI with ConstraintLayout - Control linear groups with a chain contains a video showing how to add chain in Layout Editor and change its style.

XML layout for your particular case:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.CardView
        android:id="@+id/select_language_button"
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:foreground="?android:attr/selectableItemBackground"
        app:cardBackgroundColor="@android:color/transparent"
        app:cardCornerRadius="0dp"
        app:cardElevation="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/language_stroke">

            <TextView
                android:id="@+id/textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="0dp"
                android:text="desc"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="@+id/textView1"
                app:layout_constraintTop_toBottomOf="@+id/textView1" />

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:text="Text"
                app:layout_constraintBottom_toTopOf="@+id/textView"
                app:layout_constraintLeft_toRightOf="@+id/img_language"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_chainStyle="packed" />

            <ImageView
                android:id="@+id/img_language"
                android:layout_width="32dp"
                android:layout_height="32dp"
                android:layout_marginBottom="8dp"
                android:layout_marginLeft="12dp"
                android:layout_marginStart="12dp"
                android:layout_marginTop="8dp"
                android:src="@drawable/ic_language_white_48dp"
                android:tint="@color/language_color"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

        </android.support.constraint.ConstraintLayout>

    </android.support.v7.widget.CardView>

</android.support.constraint.ConstraintLayout>

Upvotes: 5

Related Questions