Align LinearLayout inside of LinearLayout with additional items

Question

Right now I have an AppBarLayout like this

<com.google.android.material.appbar.AppBarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            app:elevation="0dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <LinearLayout
                android:orientation="horizontal"
                android:gravity="center_vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="wrap_content"
                    android:layout_height="?android:attr/actionBarSize"
                    android:theme="@style/ActionBarTheme_Dark"
                    app:contentInsetStart="@dimen/dimen_medium_margin"
                    app:layout_collapseMode="pin" />

                <LinearLayout
                    android:id="@+id/pagination_bubble_container"
                    android:gravity="center"
                    android:orientation="horizontal"
                    android:layout_width="match_parent"
                    android:layout_height="6dp">
                </LinearLayout>

            </LinearLayout>

        </com.google.android.material.appbar.AppBarLayout>

I want the pagination_bubble_container to be ABSOLUTE center of the screen, and completely ignore the toolbar object. I want it to be vertically centered AND horizonallty centered. Right now, the pagination container is just slightly to the right of center due to the toolbar object.

Answer 1

A linear layout stacks views in a row, either horizontally or vertically. Using a constraint Layout or Relative Layout can fix this.

Then you can set the constraints to place the pagination_bubble_container and toolbar where you want them.

<com.google.android.material.appbar.AppBarLayout
        android:id="@+id/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        app:elevation="0dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <RelativeLayout
            android:orientation="horizontal"
            android:gravity="center_vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="wrap_content"
                android:layout_height="?android:attr/actionBarSize"
                android:theme="@style/ActionBarTheme_Dark"
                app:contentInsetStart="@dimen/dimen_medium_margin"
                app:layout_collapseMode="pin"
                android:layout_alignParentTop="true"
                android:layout_alignParentStart="true"
                android:layout_marginTop="0dp"
                android:layout_marginStart="0dp" />

            <LinearLayout
                android:id="@+id/pagination_bubble_container"
                android:gravity="center"
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="6dp"
                android:layout_alignParentTop="true"
                android:layout_alignParentBottom="true"
                android:layout_alignParentStart="true"
                android:layout_alignParentEnd="true"
                android:layout_marginTop="0dp"
                android:layout_marginBottom="0dp"
                android:layout_marginStart="0dp"
                android:layout_marginEnd="0dp">
            </LinearLayout>

        </RelativeLayout>

    </com.google.android.material.appbar.AppBarLayout>

Answer 2

If you use a RelativeLayout as below you can achieve it

<com.google.android.material.appbar.AppBarLayout
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:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
app:elevation="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">

<RelativeLayout
    android:orientation="horizontal"
    android:gravity="center_vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >


    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="wrap_content"
        android:layout_height="?android:attr/actionBarSize"
        android:theme="@style/ActionBarTheme_Dark"
        app:contentInsetStart="@dimen/dimen_medium_margin"
        app:layout_collapseMode="pin" />

    <LinearLayout
        android:id="@+id/pagination_bubble_container"
        android:layout_width="match_parent"
        android:layout_height="6dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:orientation="horizontal"></LinearLayout>

</RelativeLayout>
</com.google.android.material.appbar.AppBarLayout>

Answer 3

As you want pagination_bubble_container to be centered to the screen, you should get it out of the AppBarLayout , as the AppBarLayout height should be limited to its content, and obviously to the toolbar height.

Therefore here I wrapped both the AppBarLayout & the LinearLayout of the pagination_bubble_container into a ConstraintLayout , then you can add the four direction constraints to center the pagination_bubble_container to the screen.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        app:elevation="0dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:orientation="horizontal">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="wrap_content"
                android:layout_height="?android:attr/actionBarSize"
                android:theme="@style/ActionBarTheme_Dark"
                app:contentInsetStart="@dimen/dimen_medium_margin"
                app:layout_collapseMode="pin" />


        </LinearLayout>

    </com.google.android.material.appbar.AppBarLayout>


    <LinearLayout
        android:id="@+id/pagination_bubble_container"
        android:layout_width="match_parent"
        android:layout_height="6dp"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"></LinearLayout>


</androidx.constraintlayout.widget.ConstraintLayout>

Answer 4

Nesting LinearLayout s is never a good practice, because of all the redraws that end up happening to accommodate the changing constraints.

I recommend you utilize a ConstraintLayout at the very least as the outer container layout, which should also give you a lot more freedom into arranging the insides of it. Eg

<com.google.android.material.appbar.AppBarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            app:elevation="0dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <ConstarintLayout
                android:gravity="center_vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="wrap_content"
                    android:layout_height="?android:attr/actionBarSize"
                    android:theme="@style/ActionBarTheme_Dark"
                    app:contentInsetStart="@dimen/dimen_medium_margin"
                    app:layout_collapseMode="pin" />

                <LinearLayout
                    android:id="@+id/pagination_bubble_container"
                    android:gravity="center"
                    android:orientation="horizontal"
                    android:layout_width="wrap_content"
                    android:layout_height="6dp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent">
                </LinearLayout>

            </ConstraintLayout>
...