Hiding the toolbar after collapsing on Android

Hiding the toolbar after collapsing on Android - android

I would like to have something like instagram because it's very cool! They have toolbars in their cardviews or views in the listview of them. And if one collapsed with another the upper toolbar goes away and the lower toolbar take the place of the toolbar.
I have these codes for MainActivity and a Fragment in it.
My MainActivity has this xml file:
<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.support.design.widget.CoordinatorLayout
android:id="#+id/rootLayout"
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">
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
</android.support.v4.widget.DrawerLayout>
In my fragment is a listview and the listview contains cardview. The cardview has the following:
<?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:id="#+id/dddd"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/colorPrimary"
android:orientation="vertical">
<LinearLayout
android:id="#+id/fullCardItem"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/bg_parent_rounded_corner">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<android.support.v7.widget.Toolbar
android:id="#+id/card_toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/feed_item_profile_pic"
android:background="#android:color/white"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/timestamp"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
</LinearLayout>
</LinearLayout>
How can i hide that toolbar after collapsing ?

Put what ever you want to disappeard after collapsing on AppBarLayout.
Like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
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.support.design.widget.AppBarLayout
android:id="#+id/appbar"
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/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<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/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_done"/>
</android.support.design.widget.CoordinatorLayout>
Live example: https://github.com/xuyisheng/DesignSupportLibraryDemo
And of course, take a look at this:
app:layout_scrollFlags="scroll|enterAlways"

Related

CoordinatorLayout Makes views Unpositioned

Sorry for my bad English.
I was trying to make scrolling Toolbar with recyclerview using Coordinatorlayout. The scrolling works fine but the views gets under the toolbar,like swipe refresh layout Show in .
Activity_main.xml
Im implementing a fragment in FrameLayout mobile_container
<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:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.naveed.youtubepro.activity.MainActivity">
<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/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:title="#string/app_name">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/mobile_container"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
<me.majiajie.pagerbottomtabstrip.PageNavigationView
android:id="#+id/navigation"
android:elevation="8dp"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_alignParentBottom="true"
android:background="#FFF"
app:menu="#menu/bottom_navigation_items"/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout >
The fragment layout
<android.support.v4.widget.SwipeRefreshLayout
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/mainandroid.support.v4.widget.SwipeRefreshLayout">
<com.github.ksoichiro.android.observablescrollview.ObservableRecyclerView
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/recyclerViee"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.v4.widget.SwipeRefreshLayout>

Do Like This .Hope this works.
<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/main_content"
android:fitsSystemWindows="true"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/txt_forget_password"
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/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:title="#string/app_name">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/mobile_container"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp">
</FrameLayout>
<me.majiajie.pagerbottomtabstrip.PageNavigationView
android:id="#+id/navigation"
android:elevation="8dp"
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#FFF"
app:menu="#menu/bottom_navigation_items"/>
</LinearLayout>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout >

Your LinearLayout holding the recycler view as android:layout_height="match_parent" so it will take all the height of the screen bacause the parent is the root layout.
You have to make this LinearLayout take all the height minus the header bar height
You can do this easily :
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1">
<!-- frame and bottom navigation -->
</LinearLayout>
============== UPDATE ==============
Actually you don't even need this LinearLayout
try this (as suggested by Rahul Kushwaha, wrap the whole thing in LinearLayout but you don't need the inner LinearLayout):
<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/main_content"
android:fitsSystemWindows="true"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/txt_forget_password"
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/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:title="#string/app_name">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/mobile_container"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp">
</FrameLayout>
<me.majiajie.pagerbottomtabstrip.PageNavigationView
android:id="#+id/navigation"
android:elevation="8dp"
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#FFF"
app:menu="#menu/bottom_navigation_items"/>
</LinearLayout>

Set your LinearLayout Property
android:layout_marginTop="?attr/actionBarSize"

Positioning views in Coordinator Layout

I am trying to create a screen with coordinator layout that includes:
Toolbar
Fragment, which will be replaced for every page using navigation API
Bottom App bar
However, I am struggling with positioning views in a way so the app's bottom bar doesn't overlap what in the fragment.
Any chance you could help me out with this, please? From what I can tell, the only way is to add a margin at the bottom but this may not be consistent across devices.
To illustrate, this list has a total of 25 items but the last two are overlapped by the app's bottom bar.
activity main
<?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/app_bar_layout"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay"
android:animateLayoutChanges="true"
android:layout_above="#id/include">
<androidx.appcompat.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"/>
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.tabs.TabItem
android:text="Test 1"
android:layout_height="match_parent"
android:layout_width="match_parent"/>
<com.google.android.material.tabs.TabItem
android:text="Test 2"
android:layout_height="match_parent"
android:layout_width="match_parent"/>
</com.google.android.material.tabs.TabLayout>
</com.google.android.material.appbar.AppBarLayout>
<include
layout="#layout/content_main"
android:id="#+id/include"/>
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bar"
android:layout_gravity="bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchorGravity="right|top"
app:layout_anchor="#+id/bar"
android:src="#drawable/ic_add_black_24dp"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
content main xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main"
tools:context=".MainActivity">
<fragment
android:layout_width="411dp"
android:layout_height="627dp"
android:name="com.example.fitnessfatality.startScreen.StartFragment"
android:id="#+id/fragment"
/>
</FrameLayout>

Use these 3 properties to position each other
android:layout_gravity=""
app:layout_anchorGravity=""
app:layout_anchor="#id/xxxx"
Also here is an complete xml that can help you
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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=".home.HomeFragment">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
android:id="#+id/app_barlayout"
android:theme="#style/AppTheme.AppBarOverlay">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collaps_toolabar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:expandedTitleTextAppearance="#style/CollapsingToolbarLayoutExpandedTextStyle">
<LinearLayout
android:id="#+id/layout_currentMatch_item"
android:layout_width="match_parent"
android:layout_height="160dp"
android:orientation="vertical">
</LinearLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:layout_anchorGravity="bottom"
app:layout_anchor="#id/app_barlayout"
android:orientation="horizontal" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

You can use LinearLayout inside CoordinatorLayout to arrange your views if it fits your needs or ConstraintLayout
I hope that the basis of the decision is clear. Take a look at this example:
<?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"
tools:context=".MainActivity">
<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"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
layout="#layout/content_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<LinearLayout
android:id="#+id/bar"
android:orientation="vertical"
android:layout_weight="0"
android:background="#color/colorAccent"
android:layout_width="match_parent"
android:layout_height="100dp"/>
</LinearLayout>
<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_dialog_email"/>
</android.support.design.widget.CoordinatorLayout>

Toolbar does not Hide/Shown on Scrolling in CoordinatorLayout

I'm trying to auto hide and show depends on scrolling of TextView implemented in ViewPager. But, Toolbar never hides on scrolling.
Main XML activity_data_display.xml
<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/activity_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.regio.developers.upasana.DataDisplayActivity">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/activity_data_display"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/data_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
</android.support.v4.widget.DrawerLayout>
Here's the layout that is inflated in ViewPager
data_swipe_layout.xml
<android.support.v4.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="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/dataviewpager_textview"
android:textColor="#FFF"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:paddingRight="35dp"
android:paddingLeft="35dp"
android:textSize="20sp"
android:gravity="center"/>
</android.support.v4.widget.NestedScrollView>
added
Toolbar Layout file
toolbar_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ToolBarStyle"
app:layout_scrollFlags="scroll|enterAlways"
>
</android.support.v7.widget.Toolbar>
Please solve my problem?
I've tried different ways to make it work like using NestedScrollView in Main XML file. But, it just does not help.
Please try implementing yourself then give me solution for this.
Remember I've used TextView which contains hundreds of of line of text.
Also, how to implement ScrollBar which can be drag-able manually for the TextView in ViewPager?

You are using the included layout of toolbar you should make this property app:layout_scrollFlags="scroll|enterAlways"
for the AppBarLayout or write that code of toolbar in AppBarLayout.
Hope this helps.

Check this.
it is working
<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/activity_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
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:id="#+id/coordinatorLayout"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarsdfs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.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="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/dataviewpager_textview"
android:textColor="#FFF"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:paddingRight="35dp"
android:paddingLeft="35dp"
android:textSize="20sp"
android:text=""
android:gravity="center"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
</android.support.v4.widget.DrawerLayout>

fragment from viewPager hidding behind on tab of action bar

Actually i am trying to build a listView/recyclerView . On scrolling of list the actionbar get hide where action bar is toolbar but the some part of listview is hiding behind the tab. Here i have used AppBarLayout and toolbar having app:layout_scrollFlags="scroll|enterAlways" and in my recylerview have app:layout_behavior="#string/appbar_scrolling_view_behavior" behaviour. I can use linear Layout but problem is for sliding of toolbar the AppBarLayout must be the child of CoordinatorLayout.
My activity having 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"
tools:context="ameyo.genie.activity.HomeActivity">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="50dp">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/Theme.AppCompat.Light.DarkActionBar"
app:theme="#style/Toolbar">
<android.support.v7.widget.Toolbar
android:id="#+id/action_bars"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
/>
<ameyo.genie.SlidingTabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#color/colorPrimary"
/>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/home_fab_dial"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/ic_dialpad_white"
app:layout_anchor="#id/pager"
app:layout_anchorGravity="bottom|center" />
</android.support.design.widget.CoordinatorLayout>
and my fragment having
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
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:background="#color/white">
<android.support.v7.widget.RecyclerView
android:id="#+id/recentcall_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
Am I doing something wrong in making the toolbar to slide on sliding the listview or there is another way of doing this without using any third library.

try this:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/Theme.AppCompat.Light.DarkActionBar"
app:theme="#style/Toolbar">
<android.support.v7.widget.Toolbar
android:id="#+id/action_bars"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
/>
<ameyo.genie.SlidingTabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#color/colorPrimary"
/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="50dp">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
</android.support.design.widget.AppBarLayout>
When you put your component, order them by the position, every component will be over the precedent, if there's no space !

Thanks to Daniel Nugent that I forgot to write android:layout_below="#+id/sliding_tabs" inside viewpager and also remove framelayout and height must be wrapcontent now my final code is this which is working
<?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"
tools:context="ameyo.genie.activity.HomeActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="6dp">
<android.support.v7.widget.Toolbar
android:id="#+id/action_bars"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/Theme.AppCompat.Light.DarkActionBar"
app:theme="#style/Toolbar"
app:elevation="0dp"
app:layout_scrollFlags="scroll|enterAlways"
/>
<ameyo.genie.SlidingTabLayout
android:id="#+id/sliding_tabs"
android:layout_below="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="?attr/colorPrimary"
app:elevation="0dp"
android:minHeight="?attr/actionBarSize"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_below="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/home_fab_dial"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/ic_dialpad_white"
app:layout_anchor="#id/pager"
app:layout_anchorGravity="bottom|center" />
</android.support.design.widget.CoordinatorLayout>

ViewPager and other viewGroup in CoordinatorLayout not working

I observed that adding appbar_scrolling_view_behavior to a ViewPager and that viewPager is not fullScreen (in my case contains some bottom buttons/tabs), then the viewPager has a bigger height (with the height of the toolbar I guess) and overlaps with the other layout(in my case those tabs)
See the images below (one is with the toolbar scrolled up)
This is the xml:
<?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:app="http://schemas.android.com/apk/res-auto"
tools:context=".AudioRecActivity"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottomLayout">
<android.support.design.widget.AppBarLayout android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
app:elevation="0dp">
<android.support.v7.widget.Toolbar android:id="#+id/acb_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/AppTheme.AppBarOverlay"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
<LinearLayout
android:id="#+id/bottomLayout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<audiorec.com.gui.views.SlidingTabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#color/secondary" >
</audiorec.com.gui.views.SlidingTabLayout>
<FrameLayout
android:id="#+id/adsContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/secondary" >
<TextView
android:id="#+id/loading_ad_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/advertisement_loading"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#ffffff" />
</FrameLayout>
</LinearLayout>
How the ViewPager/CoordinatorLayout content can be under that Linearlayout if I specified not to be?

I found an answer here:link and works for me as well
It appears it is a "problem" from android team....see here: issue on android

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Hiding the toolbar after collapsing on Android - android

Related

CoordinatorLayout Makes views Unpositioned

Positioning views in Coordinator Layout

Toolbar does not Hide/Shown on Scrolling in CoordinatorLayout

fragment from viewPager hidding behind on tab of action bar

ViewPager and other viewGroup in CoordinatorLayout not working

Categories

Resources