ConstraintLayout: how to have a view be half the screen width and centered?
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.
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>