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

Question

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 ?

Well as i mentioned a solution using xml and 3 views in the question, i suppose you would be smart enough to infer that "better way" means "less code" than 3 lines of xml. I supposed wrong and will improve my next question on so. ty for trying to answer. — Softlion, Aug 15 '17 at 06:40

score 52 · Accepted Answer · answered Aug 14 '17 at 14:48

With the beta release you can use percentage widths. If you cannot use the beta release, you can employ two vertical guidelines: one at 25% of the screen width and one at 75% of the width. The view with a width of 0dp would be constrained between these two guidelines. This setup will give you a view that is 1/2 of the screen width and also centered.

The following XML demonstrates both ways; one using the ConstraintLayout beta release and the second using features available in the current production release.

XML Layout

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


    <View
        android:id="@+id/viewTop"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_marginTop="16dp"
        android:background="@android:color/darker_gray"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent="0.5" />


    <android.support.constraint.Guideline
        android:id="@+id/guidelineLeft"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.25" />

    <View
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_marginTop="16dp"
        android:background="@android:color/darker_gray"
        app:layout_constraintEnd_toStartOf="@id/guidelineRight"
        app:layout_constraintStart_toEndOf="@id/guidelineLeft"
        app:layout_constraintTop_toBottomOf="@id/viewTop" />

    <android.support.constraint.Guideline
        android:id="@+id/guidelineRight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.75" />

</android.support.constraint.ConstraintLayout>

Do you know why they do not implement a full constraint layout like Apple did on iOS and Mac ? It should not be that hard... — Softlion, Aug 15 '17 at 06:42
First, it’s not easy, so don’t say things like “It shouldn’t be too hard” unless you are willing to implement it yourself; go work for Google and do it. Second, if you have AutoLayout experience, you should know how difficult it has been (and continues to be) for users; even experienced users took a chunk of time to fully understand it (if ever) and more importantly, in a day to day practice, AutoLayout can be very difficult to debug, especially if the layouts are complicated. CL does some things better than AL, and vice verse. — Martin Marconcini, Feb 09 '18 at 17:50
@MartinMarconcini I would be happy to implement this as it is easy. Cl does nothing better than AL lol, or maybe only the speed to compute the layout. It's a simple list of equations which transforms into a matrix which can be easily resolved. — Softlion, May 12 '18 at 06:38

score 38 · Answer 2 · edited Mar 31 '20 at 02:04

38

As of** ConstraintLayout1.1.0-beta1**, you can use percent to define widths & heights.

android:layout_width="0dp"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent=".4"

This will define the width to be 40% of the width of the screen. A combination of this and guidelines in percent allow you to create any percent based layout you want.

edited Mar 31 '20 at 02:04

Rahul

2,374
2
22
36

answered Aug 12 '17 at 16:16

shahid17june

1,129
1
8
14

ty, but the question is about having the width of the view to be exactly half the width of the screen. Btw you can use "parent" instead of "@+id/activity_main" in your example. – Softlion Aug 12 '17 at 16:21
Ok, but what if i can not use a beta component ? – Softlion Aug 12 '17 at 16:39
Thanks! As written in https://developer.android.com/reference/android/support/constraint/ConstraintLayout, "`layout_constraintWidth_percent` and `layout_constraintHeight_percent` will set the size of this dimension as a percentage of the parent". So, you should wrap your layout in a parent `ConstraintLayout`. If you wish to have a layout that will occupy part of a screen, it won't help. – CoolMind Jan 29 '20 at 10:32
Nice solution. Thank you so much. – KSR Jul 28 '20 at 12:53

score 8 · Answer 3 · answered Jun 25 '18 at 11:08

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>

live-love · Answer 4 · 2018-10-31T17:11:44.037

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'
}

Lalit Fauzdar · Answer 5 · 2017-08-12T17:58:22.957

Result

What you have to do is:
Just add this in your XML

    <View
        android:id="@+id/viewV1"
        android:layout_height="match_parent"
        android:background="#ff0000"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_width="match_parent"
        />

And this in your java.
First import these.

    import android.graphics.Point;
    import android.support.constraint.ConstraintLayout;
    import android.view.Display;
    import android.view.View;

Then add these lines in onCreate function of your java file.

    Display display = getWindowManager().getDefaultDisplay();
    Point size = new Point();
    display.getSize(size);
    int width1 = size.x;
    //int height = size.y;
    View v =  findViewById(R.id.viewV1);        
    ConstraintLayout.MarginLayoutParams params = (ConstraintLayout.MarginLayoutParams) v.getLayoutParams();
    params.width = width1/2; params.leftMargin = width1/4; params.rightMargin = width1/4;
    v.setLayoutParams(params);

You can also set the Height using this method. And Yes, this View uses half the screen width whatever the screen size is.

As you don't want to do it via java. Add this to your XML.

<android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline5"
        app:layout_constraintGuide_begin="411dp"
        android:orientation="vertical"
         />

By selecting this, move this guideline to end of the screen and note this value app:layout_constraintGuide_begin="411dp". Now whatever the value is this is your screen's width.

Add marginStart and marginEnd to your view as 411/4 dp. (calculate this value, XML is not going to do that).
This will make your view in center with half width as parent.

Remember not every screen with is 411dp. This will not work for every phone's screen size out there.

Ty, but it does not answer the question "view size must be half the screen size". It have to be the exact half screen width. The view is not a text view. — Softlion, Aug 12 '17 at 16:19
Try using your solution with ``: does this view uses half the screen width ? No :) — Softlion, Aug 12 '17 at 16:28
I don't want to use java as it won't work when changing the device orientation. — Softlion, Aug 12 '17 at 17:47
I've found out this by combining many answers and solutions and my own brain power and 20 minutes of my time for searching this stuff. Please vote if works which it does by the way. Also, the JAVA code I've shared is also working exactly the way you want it when changing the orientation. — Lalit Fauzdar, Aug 12 '17 at 18:10
Well the question asks for a solution that is simpler than the one exposed. Yours is more complicated. — Softlion, Aug 12 '17 at 18:14
Doing what you want is simpler this way than being messed up with margins in XML which won't work for every screen size. No problem at all. It can be helpful for others. — Lalit Fauzdar, Aug 12 '17 at 18:16

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

5 Answers5

Linked