How to Center the Elements in Constraintlayout

How to center the elements in ConstraintLayout

Update:

Chain

You can now use the chain feature in packed mode as describe in Eugene's answer.

Guideline

You can use a horizontal guideline at 50% position and add bottom and top (8dp) constraints to edittext and button:

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/client_id_input_layout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent">

        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/login_client_id"
            android:inputType="textEmailAddress"/>

    </android.support.design.widget.TextInputLayout>

    <android.support.v7.widget.AppCompatButton
        android:id="@+id/authenticate"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/login_auth"
        app:layout_constraintTop_toTopOf="@+id/guideline"
        android:layout_marginTop="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"/>

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5"/>

</android.support.constraint.ConstraintLayout>

Layout Editor

how to centre elements in a constraint layout android

To center both TextViews vertically, you need to add mutual vertical constraints, and constrain both of them to the nearest parent's vertical edge. By:

  • Transferring app:layout_constraintBottom_toBottomOf="parent" from tvTapToWake into the bottom TextView
  • Adding app:layout_constraintBottom_toTopOf="@+id/bottomTV" to the tvTapToWake

And you already added the other two constraints.

But this will make the bottom TextView intersect with the RHS switch. You probably fix this by modifying the bottom TextView constraints from app:layout_constraintEnd_toEndOf="@+id/tapToAwakeSwitch" to app:layout_constraintEnd_toStartOf="@+id/tapToAwakeSwitch"

Applying this:

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView android:id="@+id/cvTapToWake"
    style="@style/Tile"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:visibility="visible"
    android:layout_marginHorizontal="24dp"
    android:clipChildren="false"
    android:clipToPadding="false"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/cvLockCharger"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/tapToWake"
        style="@style/Tile"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white_screen_bg"
        android:clipChildren="false"
        android:clipToPadding="false"

        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/lockChargerButtons"
        app:layout_goneMarginTop="32dp">

        <ImageView
            android:id="@+id/ivTapToAwake"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:layout_marginVertical="26dp"
            android:layout_marginStart="24dp"
            android:src="@drawable/ic_wake"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/tvTapToWake"
            style="@style/Text.Medium.Bold"
            android:layout_width="wrap_content"
            app:layout_constraintBottom_toTopOf="@+id/bottomTV"
            android:layout_height="match_parent"
            android:layout_marginStart="@dimen/text_margin"
            android:text="@string/tap_to_wake"
            app:layout_constraintStart_toEndOf="@+id/ivTapToAwake"
            app:layout_constraintTop_toTopOf="parent" />

        <androidx.appcompat.widget.SwitchCompat
            android:id="@+id/tapToAwakeSwitch"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_marginEnd="16dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:theme="@style/SwitchCompatTheme"
            app:layout_constraintEnd_toEndOf="parent"
            tools:checked="true" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:id="@+id/bottomTV"
            android:paddingBottom="16dp"
            android:text="@string/turn_off_screen"
            app:layout_constraintEnd_toStartOf="@+id/tapToAwakeSwitch"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="@+id/tvTapToWake"
            app:layout_constraintEnd_toEndOf="@+id/tapToAwakeSwitch"
            app:layout_constraintTop_toBottomOf="@+id/tvTapToWake" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

Another option to fix this is to align the switch base line to the top TextView by adding app:layout_constraintBaseline_toBaselineOf="@+id/tvTapToWake" to the tvTapToWake, and removing the vertical constraints from the switch:

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView android:id="@+id/cvTapToWake"
    style="@style/Tile"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:visibility="visible"
    android:layout_marginHorizontal="24dp"
    android:clipChildren="false"
    android:clipToPadding="false"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/cvLockCharger"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/tapToWake"
        style="@style/Tile"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white_screen_bg"
        android:clipChildren="false"
        android:clipToPadding="false"

        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/lockChargerButtons"
        app:layout_goneMarginTop="32dp">

        <ImageView
            android:id="@+id/ivTapToAwake"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:layout_marginVertical="26dp"
            android:layout_marginStart="24dp"
            android:src="@drawable/ic_wake"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/tvTapToWake"
            style="@style/Text.Medium.Bold"
            android:layout_width="wrap_content"
            app:layout_constraintBottom_toTopOf="@+id/bottomTV"
            android:layout_height="match_parent"
            android:layout_marginStart="@dimen/text_margin"
            android:text="@string/tap_to_wake"
            app:layout_constraintStart_toEndOf="@+id/ivTapToAwake"
            app:layout_constraintTop_toTopOf="parent" />

        <androidx.appcompat.widget.SwitchCompat
            android:id="@+id/tapToAwakeSwitch"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBaseline_toBaselineOf="@+id/tvTapToWake"
            android:layout_alignParentEnd="true"
            android:layout_marginEnd="16dp"
            android:theme="@style/SwitchCompatTheme"
            app:layout_constraintEnd_toEndOf="parent"
            tools:checked="true" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:id="@+id/bottomTV"
            android:paddingBottom="16dp"
            android:text="@string/turn_off_screen"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="@+id/tvTapToWake"
            app:layout_constraintEnd_toEndOf="@+id/tapToAwakeSwitch"
            app:layout_constraintTop_toBottomOf="@+id/tvTapToWake" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

How to place two views center horizontal in ConstraintLayout?

Your approach is good, but there's an error in how you specify the constraints. You can only set one start and one end constraint for each View, so you need to remove

app:layout_constraintEnd_toEndOf="parent"

from the first TextView and

app:layout_constraintStart_toStartOf="parent"

from the second because they are causing the chain to be invalid.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:padding="10dp">

    <TextView
        android:id="@+id/view_a"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_orange_dark"
        android:gravity="center"
        android:text="View A"
        app:layout_constraintEnd_toStartOf="@id/view_b"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/view_b"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_red_light"
        android:gravity="center"
        android:text="View B"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/view_a"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Constraint Layout Vertical Align Center

It's possible to set the center aligned view as an anchor for other views. In the example below "@+id/stat_2" centered horizontally in parent and it serves as an anchor for other views in this layout.

<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">

    <TextView
        android:id="@+id/stat_1"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:gravity="center"
        android:maxLines="1"
        android:text="10"
        android:textColor="#777"
        android:textSize="22sp"
        app:layout_constraintTop_toTopOf="@+id/stat_2"
        app:layout_constraintEnd_toStartOf="@+id/divider_1" />

    <TextView
        android:id="@+id/stat_detail_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Streak"
        android:textColor="#777"
        android:textSize="12sp"
        app:layout_constraintTop_toBottomOf="@+id/stat_1"
        app:layout_constraintStart_toStartOf="@+id/stat_1"
        app:layout_constraintEnd_toEndOf="@+id/stat_1" />

    <View
        android:id="@+id/divider_1"
        android:layout_width="1dp"
        android:layout_height="0dp"
        android:layout_marginEnd="16dp"
        android:background="#ccc"
        app:layout_constraintTop_toTopOf="@+id/stat_2"
        app:layout_constraintEnd_toStartOf="@+id/stat_2"
        app:layout_constraintBottom_toBottomOf="@+id/stat_detail_2" />

    <TextView
        android:id="@+id/stat_2"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:maxLines="1"
        android:text="243"
        android:textColor="#777"
        android:textSize="22sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <TextView
        android:id="@+id/stat_detail_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxLines="1"
        android:text="Calories Burned"
        android:textColor="#777"
        android:textSize="12sp"
        app:layout_constraintTop_toBottomOf="@+id/stat_2"
        app:layout_constraintStart_toStartOf="@+id/stat_2"
        app:layout_constraintEnd_toEndOf="@+id/stat_2" />

    <View
        android:id="@+id/divider_2"
        android:layout_width="1dp"
        android:layout_height="0dp"
        android:layout_marginStart="16dp"
        android:background="#ccc"
        app:layout_constraintBottom_toBottomOf="@+id/stat_detail_2"
        app:layout_constraintStart_toEndOf="@+id/stat_2"
        app:layout_constraintTop_toTopOf="@+id/stat_2" />

    <TextView
        android:id="@+id/stat_3"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:gravity="center"
        android:maxLines="1"
        android:text="3200"
        android:textColor="#777"
        android:textSize="22sp"
        app:layout_constraintTop_toTopOf="@+id/stat_2"
        app:layout_constraintStart_toEndOf="@+id/divider_2" />

    <TextView
        android:id="@+id/stat_detail_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxLines="1"
        android:text="Steps"
        android:textColor="#777"
        android:textSize="12sp"
        app:layout_constraintTop_toBottomOf="@+id/stat_3"
        app:layout_constraintStart_toStartOf="@+id/stat_3"
        app:layout_constraintEnd_toEndOf="@+id/stat_3" />

</android.support.constraint.ConstraintLayout>

Here's how it works on smallest smartphone (3.7 480x800 Nexus One) vs largest smartphone (5.5 1440x2560 Pixel XL)

Result view

How to align in center of a space using constraint layout

Easiest way would be to constrain the top and the bottom of the TextView to the respective edges of the LinearLayout so that it's centered vertically between them, even when the LinearLayout's height changes. The horizontal constraints are fine as they are right now. The constraints for the TextView would look like this:

app:layout_constraintBottom_toBottomOf="@id/vertical_layout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/vertical_layout"
app:layout_constraintTop_toTopOf="@id/vertical_layout"

Result:

Sample Image

Android Constraint Layout Center Aligning Horizontally With Textview and Imageview Not Working

If you want the ImageView in the right side of the parent remove this attribute:

app:layout_constraintLeft_toLeftOf="@+id/title1"

And if you want to align vertically the TextView add these attributes:

app:layout_constraintTop_toTopOf="@id/display_pic"
app:layout_constraintBottom_toBottomOf="@id/display_pic"

The xml with changes:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    android:id="@+id/cv2"
    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="wrap_content"
    android:layout_gravity="center"
    app:cardCornerRadius="4dp"
    app:layout_constraintTop_toBottomOf="@+id/cv1">

    <android.support.constraint.ConstraintLayout
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/title1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:paddingLeft="10dp"
            android:text="Hero"
            android:textColor="@color/colorPrimary"
            android:textSize="16dp"
            android:textStyle="bold"
            app:layout_constraintTop_toTopOf="@id/display_pic"
            app:layout_constraintBottom_toBottomOf="@id/display_pic"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/display_pic"/>


        <ImageView
            android:id="@+id/display_pic"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_alignParentEnd="true"
            android:adjustViewBounds="false"
            android:scaleType="centerCrop"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@android:color/holo_red_light"/>

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

Result:

Result


Related Topics

How to Set Space Between Listview Items in Android

How to Display an Image in Full Screen on Click in the Imageview

Remove Old Fragment from Fragment Manager

How to Remove the Unnecessary Top Padding of the Navigation View

String Resource New Line /N Not Possible

Download Manager Progress Not Visible in the Notification Area

Recyclerview Indicates That Reaches the Last Item

Getting Size of an Image(In Kb or Mb) Selected from Gallery Programatically

How to Know When My App Has Been Killed

Recyclerview Is Cutting Off the Last Item

React Native | Failed to Install the App. Please Accept All Necessary Sdk Licenses Using Sdk Manager

How to Close the Current Fragment by Using Button Like the Back Button

How to Make a Link Open an Instagram Page in an App Installed on Android

Onclick() to Change Button Border Color Rather Changing Button Color

App Restarts Rather Than Resumes

How to Set the Starting Position of a Scrollview

How to Reduce an Image File Size Before Uploading to a Server

How to Receive Fcm Push Notifications When App Is Killed


Leave a reply



Submit