Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Collapsing Toolbar title not centered

My app contains a collapsing toolbar with a title. The title is centerend when it is expanded and should stay centered when it is collapsing. With my layout which is below, my device doesn't center the title when it is collapsed, but moves it a little to the right. What do I have to change so it keeps being centered? If it's helpful I can add images as well of course.

My layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@android:color/white"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:expandedTitleGravity="center|bottom"
            app:title="Test"
            app:collapsedTitleGravity="center"
            app:expandedTitleMarginBottom="56dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:toolbarId="@+id/toolbar">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:layout_marginBottom="48dp"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:fillViewport="true"
        android:layout_gravity="fill_vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">>

    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

This is what it looks like expanded

As you see on this image, it's not centered, but a little moved to the right side

like image 801
user9155899 Avatar asked Aug 18 '18 15:08

user9155899


People also ask

How do I center my Toolbar title on Android?

suggest use android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" instead. To keep using default styles for the customised TextView, try something like style="@style/TextAppearance.

What is collapsing Toolbar layout?

CollapsingToolbarLayout is a wrapper for Toolbar which implements a collapsing app bar. It is designed to be used as a direct child of a AppBarLayout .


2 Answers

Its because of the the back back button at top right. Solution for this is to add marginEnd in your toolbar.

<com.google.android.material.appbar.CollapsingToolbarLayout
    android:id="@+id/htab_collapse_toolbar"
    android:layout_width="match_parent"
    android:layout_height="110dp"
    app:expandedTitleMargin="@dimen/margin_15"
    app:collapsedTitleTextAppearance="@style/test1"
    app:expandedTitleTextAppearance="@style/test"
    app:collapsedTitleGravity="center_horizontal"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"
    android:fitsSystemWindows="true"
    app:title="Send money">
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/htab_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_marginEnd="85dp"
        android:layout_gravity="top"
        app:layout_collapseMode="pin"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
like image 51
Sikander Bakht Avatar answered Nov 15 '22 01:11

Sikander Bakht


Setting content related properties to 0dp will help you. Here is my working Toolbar entry.

<androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    app:contentInsetLeft="0dp"
                    android:contentInsetLeft="0dp"
                    app:contentInsetStartWithNavigation="0dp"
                    app:contentInsetStart="0dp"
                    android:contentInsetStart="0dp"
                    app:theme="@style/YourTheme"
                    android:gravity="center_horizontal"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin"
                    app:titleMargin="0dp" />

Hope it will help :)

like image 40
Neo Avatar answered Nov 15 '22 01:11

Neo