Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Constraint Layout center two buttons horizontally with little margin, and center vertically

I would like to place my to white buttons in the center of screen with such constraints. 1. Horizontally center between parent edges, and potentially place some margin. 2. Vertically center between top parent and stick buttons. Now my layout looks like this on the image

enter image description here

Ok I think I could place this buttons in some FrameLayout and then constraint it, but this seems to be overwhelming to add another layout. I have added such for D-Pad and XAYB adding next FrameLayout or even RelativeLayout seems to be contradiction of using ConstraintLayout which aim is to prevent deep nesting of many Layout like Linear, Relative, Frame Layout.

like image 406
Michał Ziobro Avatar asked Jul 25 '17 09:07

Michał Ziobro


1 Answers

Ok, I resolved this issue by adding vertical guideline in the horizontal middle of the screen using (50% => 0.5). Then constraining buttons to this guidline with

 <Button
        android:id="@+id/gamepad_left_arrow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/gamepad_left_arrow"
        android:textSize="18sp"
        app:layout_constraintEnd_toStartOf="@+id/guideline_vertical_in_center"
        android:layout_marginEnd="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/gamepad_right_stick"
        android:theme="@style/AppTheme.ButtonLight"
        android:layout_alignParentTop="true" />

    <Button
        android:id="@+id/gamepad_right_arrow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/gamepad_right_arrow"
        android:textSize="20sp"
        app:layout_constraintStart_toStartOf="@+id/guideline_vertical_in_center"
        android:layout_marginStart="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/gamepad_left_stick"
        android:theme="@style/AppTheme.ButtonLight" />

and the guideline is defined as below:

<android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline_vertical_in_center"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />
like image 159
Michał Ziobro Avatar answered Sep 29 '22 17:09

Michał Ziobro