Aligning controls to appear horizontally centered on screen

Question

I'm trying to align an image view so that it appears in the center of the screen, and then two buttons that appear centered below the image view.

However, I can't get it to work. I've tried many different ideas, but none of them work.

Is there a good way of doing this?

Thanks!

Here is a screenshot of what is going on:

And here is my xml layout:

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:background="?android:attr/colorForeground"
tools:context=".MainActivity">

<LinearLayout
    android:id="@+id/linearLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="64dp"
    android:orientation="vertical"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <ImageView
        android:id="@+id/imgSurf"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:maxHeight="500px"
        android:maxWidth="500px"
        android:minHeight="500px"
        android:minWidth="500px" />

    <LinearLayout
        android:id="@+id/LinearLayout02"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_gravity="center">

        <Button
            android:id="@+id/btnStart"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:gravity="center_vertical|center_horizontal"
            android:text="Start"
            android:textSize="12dp" />

        <Button
            android:id="@+id/btnStop"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:gravity="center_vertical|center_horizontal"
            android:text="Stop"
            android:textSize="12dp" />
    </LinearLayout>
</LinearLayout>


</android.support.constraint.ConstraintLayout>

Answer 1

Check this code, but you should work with ConstraintLayout directly, without nested layouts. Also you should use dp instead px.

   <?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"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:background="?android:attr/colorForeground"
        tools:context=".MainActivity">

        <LinearLayout
            android:id="@+id/linearLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <ImageView
                android:id="@+id/imgSurf"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:maxHeight="500px"
                android:maxWidth="500px"
                android:minHeight="500px"
                android:minWidth="500px" />

            <LinearLayout
                android:id="@+id/LinearLayout02"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_gravity="center"
                android:gravity="center">

                <Button
                    android:id="@+id/btnStart"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="left"
                    android:gravity="center_vertical|center_horizontal"
                    android:text="Start"
                    android:textSize="12dp" />

                <Button
                    android:id="@+id/btnStop"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="right"
                    android:gravity="center_vertical|center_horizontal"
                    android:text="Stop"
                    android:textSize="12dp" />
            </LinearLayout>
        </LinearLayout>


    </android.support.constraint.ConstraintLayout>

Check this video about ConstraintLayout