We Keep Coding

How to Show/Hide Action Bar on Swipe using Coordinator Layout?

I show/hide the bottom navigation bar on swiping with CoordinatorLayout but am unable to show/hide the action bar using CoordinatorLayout. What mistake I did in my layout?
On swiping, the bottom navigation bar in my layout is auto-hide and show but not on the top action bar?
This is My XML Layout:
<?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:orientation="vertical"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/noInternet_layout"
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/no_wifi_image"
android:visibility="gone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_wifi_off_24" />
<TextView
android:id="#+id/no_wifi_text"
android:visibility="gone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="#string/noWifi"
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="#+id/no_wifi_image"
app:layout_constraintStart_toStartOf="#+id/no_wifi_image"
app:layout_constraintTop_toBottomOf="#+id/no_wifi_image" />
<Button
android:id="#+id/no_wifi_button"
android:visibility="gone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="TRY AGAIN"
app:layout_constraintEnd_toEndOf="#+id/no_wifi_text"
app:layout_constraintStart_toStartOf="#+id/no_wifi_text"
app:layout_constraintTop_toBottomOf="#+id/no_wifi_text" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLyt"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar"
layout="#layout/main_toolbar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_scrollFlags="scroll|enterAlways" />
<androidx.fragment.app.FragmentContainerView
android:id="#+id/navHostFrag"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
app:defaultNavHost="true"
app:layout_constraintBottom_toBottomOf="#+id/constraintLyt"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/toolbar"
app:layout_constraintVertical_bias="1.0"
app:navGraph="#navigation/mobile_navigation" />
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/navView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
app:itemTextColor="#drawable/bottom_text_selector"
app:itemIconTint="#drawable/bottom_navigation_selector"
app:layout_behavior="#string/hide_bottom_view_on_scroll_behavior"
app:itemTextAppearanceActive="#color/white"
app:labelVisibilityMode="labeled"
app:itemRippleColor="#color/menucolor"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_gravity="bottom"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/bottom_nav_menu" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Please Help me to solve this issue?

Finally I found.
This is very simple to get swipeable (Show-Hide) both side of bottom Navigation and Top ActionBar without any backend code.
Follow Below code
<!--This is your parent layout-->
<?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=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
app:elevation="0dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"
android:layout_height="?attr/actionBarSize">
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<!--Move your main layout of the screen to a different layout and call it with include. Without including that, you cannot hide one of them Top or Bottom. So move that layout and include it here. (example- #layout/content_main)-->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/content_main"/>
</FrameLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_view"
android:layout_width="match_parent"
android:layout_height="#dimen/custom_bottomBar_size"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
style="#style/Widget.Custom.BottomNavigationView"
app:itemRippleColor="?android:attr/windowBackground"
app:itemTextAppearanceActive="#color/white"
app:labelVisibilityMode="labeled"
app:menu="#menu/bottom_navigation" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
By using ablow proper method, you'll easily swipe up-down both BottomNavigation and Top ActionBar
Output is like below
Hope It'll help someone.

Having issues with trying to display items on my toolbar

I've been working on a weather app for a while now and I happened to have worked on other sections of the app before realizing I needed to use a left navigation drawer bar. On trying to create the new nav bar following samples from tutorials, I realized it needed to be displayed on a toolbar to function well and I earlier didn't use a toolbar(i initially placed all my items directly on the activity's layout). Now
that I have created a new toolbar, it displays on my items and obstructs them from displaying on the app.
i.e. I want it to be displayed like this https://i.stack.imgur.com/NTKaY.png only that the toolbar
should be displayed behind, not on them.
But here's how it displays currently https://i.stack.imgur.com/rBkf1.png obstructing the items from displaying.
The items it obstructs are my edittexts, textview, and imageview(as shown on the first image).
I've tried to correct it by placing the item views directly below the toolbar's code in the layout, but it still displays the same way. Please can anyone help/suggestions on how I can correct this issue?
Here's my activity's layout code:
<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:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/drawer_layout"
android:fitsSystemWindows="true"
tools:context=".Activity.HomeActivity"
tools:openDrawer="start">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/layout"
android:background="#drawable/dubai">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_constraintTop_toTopOf="parent"
app:popuptheme="#style/ThemeOverlay.AppCompat.Light" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FFFFFF"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_menu" />
<androidx.fragment.app.FragmentContainerView
android:id="#+id/fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="409dp"
android:layout_height="599dp"
app:defaultNavHost="true"
app:layout_constraintBottom_toTopOf="#+id/bottomNavigationView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:navGraph="#navigation/my_nav" />
<EditText
android:id="#+id/textfield"
android:layout_width="250dp"
android:layout_height="35dp"
android:autofillHints="#string/change_city"
android:background="#color/colorPrimary"
android:hint="#string/search_city"
android:inputType="text"
android:labelFor="#id/imageView4"
android:padding="8dp"
android:textColor="#color/colorAccent"
android:textSize="16sp"
app:layout_constraintEnd_toStartOf="#+id/imageView4"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="50dp"
android:layout_height="35dp"
android:layout_marginEnd="1dp"
android:contentDescription="#string/searchbtn"
android:src="#drawable/look"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/time_field"
android:visibility="gone"
android:textColor="#FFFFFF"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textfield" />
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.navigation.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:id="#+id/nav_view"
app:headerLayout="#layout/nav_header"
app:menu="#menu/drawer_menu"/>
</androidx.drawerlayout.widget.DrawerLayout>

So, there are a couple of things that need to be adjusted:
In your desired layout the ToolBar looks transparent
The Toolbar obstructs the EditText & ImageView.
For the first point, I'd suggest to change the background of the ToolBar to transparent color. And to remove the the elevation that could block out those items; so the toolBar would be:
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_constraintTop_toTopOf="parent"
app:popuptheme="#style/ThemeOverlay.AppCompat.Light" />

How to make such collapsing card view in collapsing toolbar layout?

Before Scrolling the Activity
After Scrolling the Activity
I am trying to make a card view which can collapse on scrolling as i have shown in pictures. But In my view cardview is collapsing but its height doesn't change. I have made collapsing toolbar and image but could not make card view collapse with its height changing as per figure shoen.
This is my code for Activity:
<?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">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="180dp"
android:background="#color/white"
android:theme="#style/Theme.Mynew.AppBarOverlay"
app:liftOnScroll="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:titleEnabled="false">
<androidx.cardview.widget.CardView
android:id="#+id/card"
android:layout_width="350dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:isScrollContainer="true"
app:layout_collapseMode="pin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_weight="1"
app:srcCompat="#drawable/ic_baseline_home_24" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_weight="1"
app:srcCompat="#drawable/ic_baseline_grid_on_24/>
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_weight="1"
app:srcCompat="#drawable/trips" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<ImageView
android:id="#+id/imageView3"
android:layout_width="match_parent"
android:layout_height="150dp"
android:fitsSystemWindows="true"
android:scaleType="fitXY"
app:layout_collapseMode="parallax"
app:srcCompat="#drawable/var2" />
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_marginTop="35dp"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
android:minHeight="65dp"
app:contentInsetStart="25dp"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:maxButtonHeight="70dp"
app:navigationIcon="#drawable/dropmenu"
app:navigationIconTint="#color/white"
app:popupTheme="#style/Theme.Mynew.PopupOverlay" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

How to set gravity for Toolbar inside CollapsingToolbarLayout?

I have a Toolbar wanting it to set gravity to bottom inside CollapsingToolbarLayout like how Samsung Notes did it.
I have tried setting layout gravity to bottom but upon doing so it makes the CollapsingToolbarLayout to not display.
without android:layout_gravity="bottom"
https://imgur.com/a/jMO5ndg
with android:layout_gravity="bottom"
It hides the CollapsingToolbarLayout
https://imgur.com/a/vIh7WM3
My layout
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="240dp"
android:backgroundTint="#color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#color/white"
app:expandedTitleGravity="center"
app:layout_scrollFlags="exitUntilCollapsed|scroll"
app:title="Personal Tasks">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
style="#style/LightActionBarTheme"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:layout_collapseMode="pin"
app:titleTextColor="#color/colorPrimary" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
I wanted the options menu along with home action button of the toolbar to have the gravity below without hiding the CollapsingToolbarLayout.
Expected Output like Samsung Notes:
https://imgur.com/a/Cq15WsQ

try to put your element of CollapsingToolbarLayout in a RelativeLayout:
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.appbar.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="240dp"
android:backgroundTint="#color/cardview_light_background"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="exitUntilCollapsed|scroll"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="pin"
>
<TextView
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Personal Tasks"/>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
style="#style/LightActionBarTheme"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentBottom="true"
app:titleTextColor="#color/colorPrimary" />
</RelativeLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>

Little blank space between toolbar and settings bar

I have a strange issue that i cannot solve, i have a little spacing between my settings bar and the toolbar, watch here
my xml for the toolbar:
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
on activity i call it like this:
Toolbar myToolbar = (Toolbar) findViewById(R.id.my_toolbar);
setSupportActionBar(myToolbar);
All Acitivity XML (put all my code in external file and include it)
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:fitsSystemWindows="true"
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="com.example.afcosta.inesctec.pt.android.FamilyLibrary"
android:paddingTop="6dp">
<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"
app:srcCompat="#android:drawable/ic_menu_camera"
app:backgroundTint="#f1c40f"
tools:layout_constraintRight_creator="1"
tools:layout_constraintBottom_creator="1"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginEnd="37dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginBottom="33dp" />
<android.support.v7.widget.RecyclerView
android:id="#+id/gallery"
android:layout_width="0dp"
android:layout_height="562dp"
tools:layout_constraintTop_creator="1"
tools:layout_constraintRight_creator="1"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="97dp"
tools:layout_constraintLeft_creator="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<include
layout="#layout/custom_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="#+id/toolbar"/>
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Familias"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
tools:layout_constraintBottom_creator="1"
app:layout_constraintBottom_toTopOf="#+id/gallery"
android:layout_marginStart="8dp"
tools:layout_constraintLeft_creator="1"
android:layout_marginBottom="15dp"
app:layout_constraintLeft_toLeftOf="parent"
android:textSize="24dp"/>
</android.support.constraint.ConstraintLayout>
it appears, but that strange white space is annoying :/

You have to remove padding from ConstraintLayout:
android:paddingTop="6dp"