Develop Reference

How do I include this bottom action bar to my layout

How do I include a bottom action bar into my activity_main.xml layout. The bottom action bar comes with a floating action button and both views have to be under the coordinator layout– Here it is:
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottom_app_bar"
style="#style/Widget.MaterialComponents.BottomAppBar.Colored"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:fabCradleMargin="0dp"
app:fabCradleRoundedCornerRadius="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_app_bar_menu" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Layout for the activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" >
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"/>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/nav_header"
app:menu="#menu/menu_nav" />
</androidx.drawerlayout.widget.DrawerLayout>
The activity_main.xml layout above includes a tab layout and a viewpager for swiping.

I suggest to use the ConstraintLayout to organize your whole View. The BottomNavigationView or BottomAppBar need to be inserted below the Viewpager. Follow along my code to see the hierarchy:
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
tools:ignore="MissingConstraints">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"/>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/navigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/bottom_navigation"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/nav_header"
app:menu="#menu/menu_nav"/>
</androidx.drawerlayout.widget.DrawerLayout>
In the result you see the BottomNavigationView (I added the menu to make sure you see something, like Fragment 1, Fragment 2 etc..):

CoordinatorLayout is hiding half of the floating action button when CoordinatorLayout 's width is set to wrap_content

So I am trying to make a layout like this :
With a FramLayout to hold fragments and I want the frameLayout to be positioned below the topAppBar and above floatingActionButton but I couldn't make it works
I tried to make a relativeLayout and put the FrameLayout between the topApbar and the coordinatorAyout but it cuts the FAB and the rounded space under the fab disappeared as the image below
This is my activity_main.xml :
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/AppBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</com.google.android.material.appbar.AppBarLayout>
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/topToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary"
app:layout_anchor="#+id/AppBarLayout"
app:layout_anchorGravity="center"
app:menu="#menu/top_nav_menu"
app:title="Reading List">
</com.google.android.material.appbar.MaterialToolbar>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/topToolbar"
android:layout_above="#id/coordinatorLayout"
android:background="#color/purple_500"/>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/white"
tools:context=".MainActivity">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/secondary"
android:src="#drawable/ic_add"
app:layout_anchor="#id/bottomAppBar"
app:maxImageSize="55dp"
app:tint="#color/white" />
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:backgroundTint="#color/primary">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginEnd="16dp"
android:background="#android:color/transparent"
app:elevation="0dp"
app:itemIconSize="27dp"
app:itemIconTint="#color/white"
app:itemTextColor="#color/white"
app:menu="#menu/bottom_nav_menu">
</com.google.android.material.bottomnavigation.BottomNavigationView>
</com.google.android.material.bottomappbar.BottomAppBar>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</RelativeLayout>
<com.google.android.material.navigation.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:backgroundTint="#color/primary"
android:fitsSystemWindows="true"
app:headerLayout="#layout/sidebar_header"
app:menu="#menu/nav_drawer_menu"
></com.google.android.material.navigation.NavigationView>
</androidx.drawerlayout.widget.DrawerLayout>

Try this one (I moved all elements into CoordinatorLayout and added app:layout_behavior="#string/appbar_scrolling_view_behavior" to your FrameLayout):
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/AppBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/topToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary"
app:layout_anchor="#+id/AppBarLayout"
app:layout_anchorGravity="center"
app:menu="#menu/top_nav_menu"
app:title="Reading List" />
</com.google.android.material.appbar.AppBarLayout>
<FrameLayout
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/coordinatorLayout"
android:layout_below="#id/topToolbar"
android:background="#color/purple_500" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/secondary"
android:src="#drawable/ic_add"
app:layout_anchor="#id/bottomAppBar"
app:maxImageSize="55dp"
app:tint="#color/white" />
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:backgroundTint="#color/primary">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginEnd="16dp"
android:background="#android:color/transparent"
app:elevation="0dp"
app:itemIconSize="27dp"
app:itemIconTint="#color/white"
app:itemTextColor="#color/white"
app:menu="#menu/bottom_nav_menu">
</com.google.android.material.bottomnavigation.BottomNavigationView>
</com.google.android.material.bottomappbar.BottomAppBar>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.navigation.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:backgroundTint="#color/primary"
app:headerLayout="#layout/sidebar_header"
app:menu="#menu/nav_drawer_menu" />
</androidx.drawerlayout.widget.DrawerLayout>

Add a textview below recyclerview in drawer layout

I have the below xml , I want to place a text view above the recyclerview and below recyclerview, but its showing wrong
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerview1"
android:scrollbars="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_below="#+id/testv"
android:paddingTop="60dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Text"
android:id="#+id/textView3"
android:layout_below="#+id/recyclerview1"
android:background="#android:color/holo_green_light"
/>
<include
android:id="#+id/appbar"
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
update
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context="com.example.mohamadmouazen.lebgame.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<!--<include layout="#layout/content_main" /> -->
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />

I want to place a text view above the recycler view and below recycler
view
Try this layout:
use a Linearlayout with vertical orientation inside your DrawerLayout
<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"
android:clickable="true"
android:focusableInTouchMode="true">
<android.support.design.widget.CoordinatorLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/overview_coordinator_layout"
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:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimaryDark"
app:layout_scrollFlags="enterAlways|scroll" />
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
android:orientation="vertical">
<TextView
android:id="#+id/textViewAbove"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#android:color/holo_green_light"
android:text="New Text above" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerview1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical" />
<TextView
android:id="#+id/textViewBelow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/holo_green_light"
android:text="New Text Below" />
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/overview_floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="#mipmap/ic_launcher"
app:layout_anchor="#id/overview_coordinator_layout"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
<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/navigationdrawer_main" />
</android.support.v4.widget.DrawerLayout>

Android tab with navigation

Hi there can you guys help me with my problem with my listview with navigation. Ughh, Because I cant make my normal page with tabs add a navigation drawer, here is my messed up code thanks guys. This code is working but my fab buttons are missing in the layout.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.example.kun.carkila.OwnerTabs">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#990000"
app:popupTheme="#style/Theme.AppCompat.Light.DarkActionBar"/>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay"
android:background="#990000">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#drawable/plus"
app:layout_anchor="#+id/container"
app:layout_anchorGravity="bottom|right" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#drawable/car"
app:layout_anchor="#+id/container"
app:layout_anchorGravity="bottom|right" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/nav_menu"/>
</android.support.v4.widget.DrawerLayout>

You must use fab button as child of CoordinateLayout not the child of LinearLayout and should use toolbar as child of appbarlayout
note : AppbarLayout is custom linearlayout
CoordinateLayout is custom framelayout
use this layout
<?xml version="1.0" encoding="utf-8"?>
<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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.example.kun.carkila.OwnerTabs">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="8dp"
android:theme="#style/AppTheme.AppBarOverlay"
android:background="#990000">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#990000"
app:popupTheme="#style/Theme.AppCompat.Light.DarkActionBar"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:layout_margin="16dp"
app:srcCompat="#drawable/ic_create_black_24px"
app:layout_anchor="#+id/container"
app:layout_anchorGravity="bottom|right" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:layout_margin="16dp"
app:srcCompat="#drawable/ic_comment_white_24px"
app:layout_anchor="#+id/container"
app:layout_anchorGravity="bottom|right" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
/>

Using CoordinatorLayout in fragments with ActionBar in Activity

I have problem using Android Design Support Library. I would like to use CoordinatorLayout inside fragment for FAB and ActionBar animations while scroll, but I having ActionBar in activity layout and my CardGridStaggeredView and FAB in fragment.
activity layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
xmlns:app1="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
<FrameLayout <!--Here I display fragments-->
android:id="#+id/fragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/header"
app:menu="#menu/drawer"
app1:itemTextColor="#android:color/black"/>
</android.support.v4.widget.DrawerLayout>
fragment layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:card="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
style="#style/FragmentTheme"
tools:context="androidhive.info.materialdesign.activity.HomeFragment">
<FrameLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<it.gmariotti.cardslib.library.extra.staggeredgrid.view.CardGridStaggeredView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="2"
android:stretchMode="columnWidth"
android:verticalSpacing="2dp"
android:horizontalSpacing="2dp"
android:padding="1dp"
android:gravity="center"
card:list_card_layout_resourceID="#layout/carddemo_extras_base_staggered_card"
style="#style/main_layout_foreground"
android:id="#+id/cgvImages"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.v4.widget.SwipeRefreshLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_add"
android:layout_gravity="bottom|end"
app:elevation="6dp"
app:pressedTranslationZ="12dp"/>
</FrameLayout>
</RelativeLayout>
I tried to use CoordinatorLayout in Activity and Fragment, but it didn't work. Is any way to use CoordinatorLayout with ActionBar in Activity and other views in fragment?

I have Activity with DrawerLayout and Fragments with CoordinatorLayout working just fine (pay attention where fitsSystemWindows attributes are set)
here is activity layout:
<?xml version="1.0" encoding="utf-8"?>
<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"
android:fitsSystemWindows="true">
<!-- Framelayout to display Fragments -->
<FrameLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#color/color_primary" />
<android.support.design.widget.NavigationView
android:id="#+id/menu_container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!-- Listview to display slider menu -->
<ListView
android:id="#+id/list_slidermenu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/bm_white"
android:choiceMode="singleChoice"
android:listSelector="#drawable/list_selector"
android:dividerHeight="0dp"
android:divider="#null" />
<!-- Картинки - fb, vk, twitter -->
</LinearLayout>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
and fragment's xml with coordinator, action button etc:
<?xml version="1.0" encoding="utf-8"?>
<!--NOT SET HERE: android:fitsSystemWindows="true"-->
<android.support.design.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">
<!-- NOT SET HERE: android:fitsSystemWindows="true" -->
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/detail_backdrop_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax">
<ImageView
android:id="#+id/backdrop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/pic_top_main" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</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_gravity="fill_vertical"
app:behavior_overlapTop="32dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:id="#+id/ll_main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- In code now… -->
<!--<include layout="#layout/fragment_start_nonfc"/>-->
<!--<include layout="#layout/fragment_start"/>-->
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="#dimen/fab_margin"
android:clickable="true"
android:onClick="onClickPurchase_Remote"
android:src="#drawable/btn_purchase"
app:borderWidth="0dp"
app:elevation="6dp"
app:fabSize="normal"
app:pressedTranslationZ="12dp" />
</android.support.design.widget.CoordinatorLayout>

here is my solution, the activity layout:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/content_area"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/main_bottom_layout">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/title_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.funvideo.videoinspector.photopick.ui.widget.TitleView
android:id="#+id/title_view"
android:layout_width="match_parent"
android:layout_height="#dimen/dimen_title_bar_height"
android:background="#color/simple_title_bg_default_color"
app:layout_scrollFlags="scroll|enterAlways" />
</com.google.android.material.appbar.AppBarLayout>
<FrameLayout
android:id="#+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<LinearLayout
android:id="#+id/main_bottom_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/dimen_title_bar_height"
android:background="#color/simple_title_bg_default_color"
android:orientation="horizontal"
android:visibility="gone"
tools:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent">
<TextView
android:id="#+id/txt_preview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="12dp"
android:text="预览"
android:textColor="#color/social_color_4"
android:textSize="16sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/album_list_root"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:layout_marginTop="#dimen/dimen_title_bar_height"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.funvideo.videoinspector.photopick.ui.widget.AlbumListView
android:id="#+id/album_list_view"
android:layout_width="match_parent"
android:layout_height="500dp"
android:background="#color/album_list_bg"
tools:visibility="visible"
android:visibility="gone" />
<View
android:id="#+id/album_outside"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#99000000"
android:visibility="gone" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
the main_container is the place where I append my fragment in my activity:
val fragment = YImageMainFragment.newInstance(album)
supportFragmentManager
.beginTransaction()
.replace(R.id.main_container, fragment, YImageMainFragment.TAG)
.commitAllowingStateLoss()
and the layout of fragment is:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/main_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<FrameLayout
android:id="#+id/lot_empty_resources"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:background="#drawable/tips_item_bg"
tools:visibility="visible"
android:visibility="gone"
android:layout_gravity="center"
android:padding="20dp">
<LinearLayout
android:id="#+id/lot_go_filechoose"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:gravity="center_horizontal"
android:orientation="vertical">
<TextView
android:id="#+id/txv_file_choose"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:text="还是无法解决？可尝试使用文件浏览方式选取照片或视频～"
android:textColor="#color/color_t1"
android:textSize="13sp" />
<Button
android:id="#+id/btn_go_file_choose"
android:layout_width="162dp"
android:layout_height="36dp"
android:layout_marginTop="16dp"
android:background="#drawable/yellow_button_selector"
style="#style/LegacyButton"
android:textColor="#color/tip_pop_txt_color"
android:textSize="13sp"
android:text="去选取"/>
</LinearLayout>
</FrameLayout>
</FrameLayout>
not extra code needed, it run as my expected, this could be the versions, below are mine:
appcompatVersion=1.3.1
recyclerviewVersion=1.2.1
com.google.android.material:material:1.4.0