Develop Reference

How to use Coordinatorlayout with Linearlayout?

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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"
tools:context=".activities.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.appbar.MaterialToolbar
style="#style/Widget.MaterialComponents.Toolbar.Surface"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
app:title="#string/app_name" />
<androidx.fragment.app.FragmentContainerView
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:defaultNavHost="true" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:labelVisibilityMode="unlabeled"
app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
app:menu="#menu/menu_bottom_navigation" />
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
This attribute app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior" does not work inside LinearLayout, I tried to put BottomNavigationView outside LinearLayout, and the attribute above worked but I want to put FragmentContainerView above BottomNavigationView and at the same time make the attribute above work. How can I solve the problem?

Update your code like below:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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"
tools:context=".activities.MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/abl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<com.google.android.material.appbar.MaterialToolbar
style="#style/Widget.MaterialComponents.Toolbar.Surface"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
app:title="#string/app_name" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.fragment.app.FragmentContainerView
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:defaultNavHost="true" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:layout_gravity="bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:labelVisibilityMode="unlabeled"
app:layout_behavior="#string/hide_bottom_view_on_scroll_behavior"
app:menu="#menu/menu_bottom_navigation" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

I found a simple trick to solve the problem. Inside FragmentContainerView I'm showing a specific fragment and there is NestedScrollView inside the fragment.
I gave these attributes to the NestedScrollView
android:clipToPadding="false"
android:paddingBottom="Should be the same height of BottomNavigationView"
Now the content inside FragmentContainerView will be top of BottomNavigationView and never will touch BottomNavigationView.
The disadvantages of this way
It will leave extra space in the bottom but mostly
BottomNavigationView will cover it
If you give background color for NestedScrollView, The color will
touch BottomNavigationView
But at least it is working as I want.

windowSoftInputMode with AppBarLayout | CoordinatorLayout

android:windowSoftInputMode="adjustPan|adjustResize"
This attribute is not working with collapsingToolbar. Can anyone please give me a fix for this?
I tried searching some other posts but didn't found any relevant solution for this.
Thank you :)
activity_home.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
...
android:layout_height="150dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
....
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<include
android:id="#+id/contentHome"
layout="#layout/content_home" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
content_home.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/inputName"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
android:layout_width="match_parent"
android:layout_height="wrap_content"
....
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/inputNameEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
...
</com.google.android.material.textfield.TextInputEditText>
</com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>

Here are the needed fixes:
You only need to adjustResize: android:windowSoftInputMode="adjustResize"
Make sure to add the scrolling flags in the CollapsingToolbarLayout: app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlwaysCollapsed"
If the app:layout_behavior="#string/appbar_scrolling_view_behavior" didn't work with you try to use the material design one:
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"
Preview:

A ListView overlaps a SearchView in a CoordinatorLayout

I'm fixing an app after the AndroidX migration, and I had a very odd bug that my ListView was not being loaded on the onCreate/onStart/onResume events:
A ListView is not displaying any data on OnCreate/OnStart after AndroidX migration
By matter of chance, I decided to "simplify" my layout and removed a LinearLayout that contained the ListView. After this change, the data was loaded properly because it seems LinearLayout was somehow blocking the getView event. However, after this change, the SearchView is being overlapped by the ListView, and I don't know how to put them in the right order (first the SearchView followed by the ListView).
This is how it looks now:
This is my code:
other_ruins.xml
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/search_container" />
<ListView
android:id="#+id/lstOtherRuins"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:nestedScrollingEnabled="true"
android:layout_margin="8dp"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:choiceMode="singleChoice"
android:layout_below="#id/toolbar_container"
android:layout_gravity="left|start" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.gms.ads.AdView
android:id="#+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:adSize="SMART_BANNER"
app:adUnitId="#string/banner_ad_unit_id" />
</LinearLayout>
search_container.xml:
<?xml version="1.0" encoding="UTF-8" ?>
<FrameLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar_container"
android:theme="#style/AppTheme.AppBarOverlay"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
app:theme="#style/ToolBarStyle"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary" />
<com.miguelcatalan.materialsearchview.MaterialSearchView
android:id="#+id/search_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</FrameLayout>
Regarding, the search_container I tested also using the AppBarLayout and crashed the app; therefore, it's not a solution.
Any idea how can I fix it? And why is this happening? If you know how to fix the previous issue and somehow call the getView event on the onCreate/onStart/onResume events is another solution.

You need to replace the FrameLayout in the search_container.xml with AppBarLayout as the AppBarLayout should wrap the Toolbar when you're using the Toolbar within the CoordinatorLayout
<?xml version="1.0" encoding="UTF-8" ?>
<com.google.android.material.appbar.AppBarLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar_container"
android:theme="#style/AppTheme.AppBarOverlay"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
app:theme="#style/ToolBarStyle"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary" />
<com.miguelcatalan.materialsearchview.MaterialSearchView
android:id="#+id/search_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.appbar.AppBarLayout>

In my case, I needed to wrap my FrameLayout with a AppBarLayout make it work properly, when I didn´t do it, it duplicates the toolbar creating an strange shadow. This is the final change:
<?xml version="1.0" encoding="UTF-8" ?>
<com.google.android.material.appbar.AppBarLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar_container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
app:theme="#style/ToolBarStyle"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary" />
<com.miguelcatalan.materialsearchview.MaterialSearchView
android:id="#+id/search_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</FrameLayout>
</com.google.android.material.appbar.AppBarLayout>
Only one of them breaks the app.

Toolbar in the wrong location on BottomNavigationView

I'm building an app and when I load the view with the BottomNavigationView, I have odd issues all the time, sometimes, I have an extra space and other times, the toolbar is wrongly located, for example:
With bottom navigation:
Without bottom navigation:
This is my code for the 1st image:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#android:color/white"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
layout="#menu/toolbar_recipe" />
<FrameLayout
android:id="#+id/content_frame"
android:layout_height="0dp"
android:layout_weight="1"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:menu="#menu/bottom_nav_menu"
app:labelVisibilityMode="unlabeled"
app:itemBackground="#color/colorPrimary"
app:itemIconTint="#color/bottom_nav_color"
app:itemTextColor="#color/bottom_nav_color" />
</LinearLayout>
</RelativeLayout>
Toolbar:
<?xml version="1.0" encoding="UTF-8" ?>
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar_recipe"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme="#style/ToolBarStyle"
android:minHeight="?android:attr/actionBarSize"
android:background="#color/colorPrimary"/>
And this is how it behaves with the CoordinatorLayout, after I set the paddingTop as ?attr/actionBarSize the FrameLayout moved some space, but it's still wrongly located.
With CoordinatorLayout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#android:color/white"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:layout_above="#+id/bottom_navigation">
<include
layout="#menu/toolbar_recipe" />
<FrameLayout
android:id="#+id/content_frame"
android:paddingTop="?attr/actionBarSize"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:menu="#menu/bottom_nav_menu"
app:labelVisibilityMode="unlabeled"
app:itemBackground="#color/colorPrimary"
app:itemIconTint="#color/bottom_nav_color"
app:itemTextColor="#color/bottom_nav_color" />
</RelativeLayout>
Without that addition, it just stays behind. I'm working in Android 8+, but I don't think it's the issue and I'm out of ideas how to coordinate that situation. Has anyone experienced it?
Thanks for any comment, especially of why it's happening since I cannot understand it.

I found the answer based on this line:
android:fitsSystemWindows="true"
I needed to add it to the root element more or less like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#android:color/white"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="match_parent">
And here is a description of the property:
System windows are the parts of the screen where the system is drawing
either non-interactive (in the case of the status bar) or interactive
(in the case of the navigation bar) content.
Most of the time, your app won’t need to draw under the status bar or
the navigation bar, but if you do: you need to make sure interactive
elements (like buttons) aren’t hidden underneath them. That’s what the
default behavior of the android:fitsSystemWindows="true" attribute
gives you: it sets the padding of the View to ensure the contents
don’t overlay the system windows.
I found it here:
Why would I want to fitsSystemWindows?

View covering action toolbar?

I am trying to create a tool bar associated with an EditText on my scren. Below are the contents of my xml file that I am trying to create:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tool="http://schemas.android.com/tools"
tool:context=".CreatePost"
android:id="#+id/create_post">
<include layout="#layout/app_bar" android:layout_width="match_parent" android:layout_height="wrap_content"
android:id="#+id/create_post_toolbar"/>
<!-- Edit text for typing status. Light gray placeholder. -->
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColorHint="#d3d3d3"
android:layout_below="#id/create_post_toolbar"
android:hint="Update your friends!"
android:padding="10dp"
android:gravity="top"
android:background="#android:color/transparent"
android:inputType="textMultiLine"
android:id="#+id/type_status"/>
</RelativeLayout>
app_bar.xml:
<?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=".CreatePost">
<android.support.design.widget.AppBarLayout android:layout_height="wrap_content"
android:layout_width="match_parent" android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar android:id="#+id/toolbar_universal"
android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
However, when I do this, my EditText covers my toolbar. Here is an image to show what happens:
I don't really understand why this is happening, is there anyway to align my EditText so it doesn't cover the toolbar? Thanks!
UPDATE: after adding in Arya's code into mine, my image looks like so, which makes the ActionBar too high. Any ideas on how to fix it?

Your layout, in its current definition, does not make much sense. I think the problem here is that the CoordinatorLayout has been assigned fitsSystemWindows=true. This makes it report its bottom from the very top of the status-bar. On the other hand, the RelativeLayout expects the bottom value from the bottom of the status-bar. This makes your EditText overlap the Toolbar by 25dp - the standard height of a status-bar. You can kind of confirm this by assigning android:fitsSystemWindows="true" to your RelativeLayout with id create_post. In this case, the bottom for CoordinatorLayout will be reported correctly, and the EditText will not overlap the Toolbar.
Usually, the CoordinatorLayout is set to be the parent, and the content (in your case the RelativeLayout) resides as a child of the CoordinatorLayout:
<?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=".CreatePost">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_universal"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/create_post">
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColorHint="#d3d3d3"
android:hint="Update your friends!"
android:padding="10dp"
android:gravity="top"
android:background="#android:color/transparent"
android:inputType="textMultiLine"
android:id="#+id/type_status"/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
If you have a specific reason for placing the CoordinatorLayout inside a RelativeLayout, please do share.

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/htab_maincontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/tabheader"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/htab_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/htab_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.AppBarLayout>

<android.support.design.widget.AppBarLayout
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">