ConstraintLayout: how to have a view be half the screen width and centered?
Solution 1:
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>
Solution 2:
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.
Solution 3:
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>
Solution 4:
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'
}