ConstraintLayout: how to have a view be half the screen width and centered?

user_299674 0
Viewed 55863

TL;DR
The view width must be exactly half of the screen, and be centered. Using ConstraintLayout.

Note that the view does not have any inner width.

<View android:background="#ff0000" ... />

Original question
I would like to achieve a layout where a view size is half the screen size, and centered horizontally.

Something like this: |--view--|

I can't find any way using ConstraintLayout. The best i found is by using app:layout_constraintHorizontal_weight="1" on 2 fake views positioned at the full left and full right respectively, and app:layout_constraintHorizontal_weight="1.5" on my view.

Any better way ?

android-constraintlayout android
5 Answers

try this vertically divide

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.constraint.ConstraintLayout
            android:id="@+id/clPart1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="@color/white"
            android:visibility="visible"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_chainStyle="spread"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/clPart2">


        </android.support.constraint.ConstraintLayout>

        <android.support.constraint.ConstraintLayout
            android:id="@+id/clPart2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="@color/black"
            android:visibility="visible"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toRightOf="@+id/clPart1"
            app:layout_constraintRight_toRightOf="parent">


        </android.support.constraint.ConstraintLayout>
    </android.support.constraint.ConstraintLayout>
user_38619130

With ConstraintLayout, you can center a view in the screen like this:

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

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FF0000"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_percent=".5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent=".5"></LinearLayout>

</android.support.constraint.ConstraintLayout>

Update your gradle to the last version of ConstraintLayout:

dependencies {
...
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
}

enter image description here

user_4363410
Related