Align LinearLayout inside of LinearLayout with additional items

user_11918872 0
Viewed 100

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.

android
4 Answers

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>
user_142629450

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>
user_46282790

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>
user_98516080

Nesting LinearLayouts 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. E.g.

<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>
...
user_130214520
Related