Develop Reference

How to align elements properly in a CoordinatorLayout under a CollapsingLayout?

I want to achieve the hierarchy shown in the preview picture below, I have no prior knowledge of collapsible layout and coordinator layout but what I did caused the view pager to NOT to show it's content.
I am working in a main activity that has a Coordinator layout as a root layout, a collapsing toolbar, a viewpager, a bottom navigation bar and a hidden bottom sheet
PS: I am working with AndroidX support library.
This is my XML Layout activity_main.xml
<androidx.coordinatorlayout.widget.CoordinatorLayout
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"
android:id="#+id/parent"
android:fitsSystemWindows="true">
<!-- RETRACTABLE TOOLBAR -->
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/appbar_header_height"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="#dimen/activity_margin_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<ImageView
android:id="#+id/iv_banner_img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/banner"
android:tintMode="multiply"
app:layout_collapseMode="parallax" />
<View
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_gravity="top"
android:background="#drawable/scrim_topdown"
android:fitsSystemWindows="true"/>
<View
android:layout_width="match_parent"
android:layout_height="160dp"
android:layout_gravity="bottom"
android:background="#drawable/scrim"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_gravity="end">
<ImageView
android:src="#drawable/ic_user_placeholder"
android:id="#+id/iv_parent_profile_sm"
android:layout_width="32dp"
android:layout_height="32dp"/>
</LinearLayout>
<androidx.appcompat.widget.Toolbar
android:id="#+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<LinearLayout
android:gravity="center_vertical"
android:layout_gravity="bottom"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="12dp"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:gravity="center_vertical"
android:layout_gravity="bottom"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:padding="4dp"
android:layout_marginEnd="6dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:id="#+id/tv_name"
android:drawableStart="#drawable/ic_person"/>
<TextView
android:layout_marginEnd="6dp"
android:padding="4dp"
android:id="#+id/tv_birth"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:drawableStart="#drawable/ic_cake"/>
<ImageView
android:padding="8dp"
android:id="#+id/iv_gender"
android:layout_width="32dp"
android:layout_height="32dp" />
</LinearLayout>
</LinearLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<!-- VIEW PAGER -->
<androidx.viewpager.widget.ViewPager
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<!-- NAVIGATION BAR -->
<com.gauravk.bubblenavigation.BubbleNavigationLinearView
android:layout_alignParentBottom="true"
android:id="#+id/bottom_navigation_view_linear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorWhite"
android:elevation="12dp"
android:padding="6dp"
android:animateLayoutChanges="true"
android:layout_gravity="bottom">
<!-- bottom navigation bar elements -->
</com.gauravk.bubblenavigation.BubbleNavigationLinearView>
<!-- BOTTOM SHEETS -->
<include layout="#layout/details_sheet" />
<include layout="#layout/add_sheet"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
This is the desired result:

You can try gravity to align inside the CoordinatorLayout.
android:layout_gravity="end"
This worked for me.

I got what I needed by wrapping everything in a RelativeLayout then I kept tweaking android:layout_above and android:layout_below until I got right

to set element in the beginning add this android:layout_gravity="start"
and to set element in the end add this android:layout_gravity="end"
and to set it in bottom add this: android:layout_gravity="bottom"

only show toolbar when enterAlways in CollapsingToolbarLayout with other view

Layout structure.
<android.support.v4.widget.DrawerLayout .... >
<android.support.design.widget.CoordinatorLayout .... >
<android.support.design.widget.AppBarLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fresco="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_height"
android:background="#color/appbar"
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
app:layout_collapseMode="parallax">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imv_back"
android:layout_width="#dimen/toolbar_height"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:padding="#dimen/toolbar_icon_padding"
android:src="#drawable/icons8_back" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/toolbar_height"
android:background="#color/background"
android:orientation="vertical"
app:layout_collapseMode="parallax">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.facebook.drawee.view.SimpleDraweeView
android:id="#+id/imv_tour_cover"
android:layout_width="match_parent"
android:layout_height="#dimen/cover_height"
fresco:actualImageScaleType="centerCrop" />
<TextView
android:id="#+id/txv_tour_area"
android:layout_width="wrap_content"
android:layout_height="#dimen/cover_height"
android:layout_centerHorizontal="true"
android:layout_marginTop="-14dp"
android:gravity="center"
android:text="Test string."
android:textColor="#000000"
android:textSize="28sp" />
</RelativeLayout>
<TextView
android:id="#+id/txv_tour_title"
style="#style/row_marginHorizontal_12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="-34dp"
android:text="Test string."
android:textColor="#color/text_primary"
android:textSize="#dimen/text_size_6" />
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tbl_tour"
android:layout_width="match_parent"
android:layout_height="#dimen/tablayout_height"
android:background="#color/tab">
<android.support.design.widget.TabItem
android:id="#+id/tbi_tour_stroke"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text string." />
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView .... />
<android.support.design.widget.BottomNavigationView .... />
</android.support.design.widget.CoordinatorLayout>
</android.support.v4.widget.DrawerLayout>
First look like this.
When scroll down...TabLayout will set on top.
Then scroll up a little, will expand part of CollapsingToolbarLayout (should be the toolbar's height).
Continue scrolling to the top, finally just like the first image.
My purpose is to show only Toolbar but not whole CollapsingToolbarLayout when enterAlways, the LinearLayout's content is still hide until top when scroll, is it possible?

android - navigation drawer icon causing the custom toolbar text out from the center [duplicate]

When using ActionBarDrawerToggle with my custom Toolbar, the TextViews in the Toolbar are no longer centered.
main_layout.xml
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/toolbar" />
<FrameLayout
android:id="#+id/flContent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
android:fitsSystemWindows="true" />
</RelativeLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nvView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#android:color/white"
app:headerLayout="#layout/nav_header"
app:menu="#menu/drawer_view" />
</android.support.v4.widget.DrawerLayout>
toolbar.xml
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimaryDark"
android:elevation="5dp"
android:minHeight="?attr/actionBarSize"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_horizontal|center_vertical"
android:orientation="vertical">
<TextView
android:id="#+id/tvNavTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorBackgroundBlack"
android:gravity="center"
android:textColor="#color/colorWhite"
android:textSize="#dimen/text_size_large" />
<TextView
android:id="#+id/tvNavDate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorBackgroundBlack"
android:gravity="center"
android:textColor="#color/colorWhite"
android:textSize="#dimen/text_size_small" />
</LinearLayout>
<ImageView
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#mipmap/ic_launcher" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
I tried setting the contentInsetStart and other attributes on the Toolbar, but nothing changed.

The problem here is that ActionBarDrawerToggle's icon is set as the navigation button on the Toolbar. This button is a special child of Toolbar that will take precedence in the layout. Any other child Views added to the Toolbar will be allotted only the space remaining after that ImageButton is placed. This is pushing the left side of your RelativeLayout to the right, so the TextViews you have centered in that will not be centered with respect to the Toolbar itself.
Fortunately, Toolbar's LayoutParams has a gravity property that we can utilize to center the LinearLayout and its TextViews directly in the Toolbar, without having to wrap them in another ViewGroup. We can also set the gravity appropriately on your ImageView to similarly align that to the right side.
In this example, we apply that center gravity by setting the LinearLayout's layout_gravity to center. Be sure to also change the layout_width values to wrap_content, or you'll be in the same boat as before. The ImageView here has its layout_gravity set to right|center_vertical, replacing those layout_* attributes specific to RelativeLayout.
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimaryDark"
android:elevation="5dp"
android:minHeight="?attr/actionBarSize"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/tvNavTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/colorWhite"
android:textSize="#dimen/text_size_large" />
<TextView
android:id="#+id/tvNavDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/colorWhite"
android:textSize="#dimen/text_size_small" />
</LinearLayout>
<ImageView
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_gravity="right|center_vertical"
android:src="#mipmap/ic_launcher" />
</android.support.v7.widget.Toolbar>

I had the same issue and I fixed with the android:contentInset
Try with this code:
<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:contentInsetEnd="50dp"
android:contentInsetLeft="50dp"
android:contentInsetRight="50dp"
android:contentInsetStart="50dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentInsetEnd="50dp"
app:contentInsetLeft="50dp"
app:contentInsetRight="50dp"
app:contentInsetStart="50dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_centerInParent="true"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="5dp"
android:text="#string/app_name_short"
android:textColor="#fff"
android:textSize="20dp" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/main_fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/app_bar_layout" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

Back arrow button not placed in center in toolbar in android

I have displayed a back button (up button) in the action bar but it is not getting displayed in the center of the bar.
As can be seen in this image
I have set a minimum height for the toolbar and I cannot change that.
My xml code is as follows :
<android.support.design.widget.CoordinatorLayout 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"
android:fitsSystemWindows="true">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/offence_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:background="?attr/colorPrimary"
android:minHeight="150dip"
android:paddingBottom="15dp"
android:paddingTop="15dp"
android:theme="?attr/actionBarTheme"
android:paddingRight="15dp">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:maxLines="3"
android:textColor="#FFF"
android:textSize="25sp" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<TextView
android:id="#+id/fine_bold"
style="?android:attr/textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/app_bar"
android:padding="16dp"
android:textIsSelectable="true"
android:textSize="25sp"
android:textStyle="bold" />
<TextView
android:id="#+id/offence_details"
style="?android:attr/textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/fine_bold"
android:padding="16dp"
android:textIsSelectable="true" />
</LinearLayout>
</ScrollView>
</RelativeLayout>

Remove padding top from your android.support.v7.widget.Toolbar
Like:
<android.support.v7.widget.Toolbar
android:id="#+id/offence_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:background="?attr/colorPrimary"
android:minHeight="150dip"
android:paddingBottom="15dp"
android:paddingTop="15dp" //remove this line from your xml
android:theme="?attr/actionBarTheme"
android:paddingRight="15dp">

You should set the android:layout_width to your custom height and android:minHeight to ?attr/actionBarSize. This ensures that fixed elements are displayed along the top (centered within the minHeight) while the entire height is still expanded to your larger height.
<android.support.v7.widget.Toolbar
android:id="#+id/offence_title"
android:layout_width="match_parent"
android:layout_height="150dip"
android:layout_gravity="center"
android:gravity="center"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:paddingBottom="15dp"
android:paddingTop="15dp"
android:theme="?attr/actionBarTheme"
android:paddingRight="15dp">

Coordinator layout shifts content at the height of a AppbarLayout

After including Coordinator layout in my project I have a problem. I'll post my layout.
Here is my main_layout.xml:
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:id="#+id/frame_content_keeper"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Top Text"/>
</LinearLayout>
<LinearLayout
android:id="#+id/login_buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bottom text"/>
</LinearLayout>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
I don't see textview with 'Bottom text'. Looks like it under screen. I think it is a defect.

It's normal because you should remove this line
app:layout_scrollFlags="scroll|enterAlways"
from your
android.support.v7.widget.Toolbar
This attribute is for when you have a list and when you will scroll down the action bar will hiding