Develop Reference

Put a view on top of AppBarLayout

I am working on a UI that utilizes the CoordinatorLayout/AppBarLayout combo as normally seen in most examples but there is this requirement of mine: I want to overlay the AppBarLayout with a View at all times. So, whatever scrolling behavior that happens, should happen under this view. Currently, this is what I am seeing:
Here, the blue bar that you see is the one that I want on top of everything. As you can see, it is hidden initially and only gets exposed when we have scrolled AppBarLayout off the screen. For your reference, here is the code for this layout and its id is android:id="#+id/linearLayout":
<?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="com.example.snapsboardmainpage.MainActivity"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="match_parent"
android:layout_height="40dp"
app:layout_scrollFlags="scroll|snap"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="112dp"
android:orientation="vertical"
app:layout_scrollFlags="scroll|snap"
android:background="#android:color/holo_green_light">
</LinearLayout>
<android.support.design.widget.TabLayout
android:id="#+id/id_tab_photosvideos_albums"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|snap">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nested_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="#+id/id_viewpager_photosvideos_albums"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</android.support.v4.widget.NestedScrollView>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="40dp"
android:orientation="vertical"
android:layout_gravity="top"
app:layout_behavior="com.example.snapsboardmainpage.TopActionBarBehavior"
android:background="#android:color/holo_blue_light">
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="56dp"
android:orientation="vertical"
android:layout_gravity="bottom"
android:background="#android:color/holo_orange_light">
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
How can I achieve this overlay behavior?(it would be preferable if this blue bar could remain as a direct child of CoordinatorLayout)

Although the question seems to be difficult, the solution turned out to be amazingly simple:
android:elevation="8dp"
Yes, that was it. Just set it on the the view that had to overlay the AppBarLayout.

android:elevation="8dp" work on API level 21.
So You can put your view in side a new AppBarLayout.
In my case , i put my xml code in to new AppBarLayout like below
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/black"
android:fitsSystemWindows="true"
android:orientation="vertical">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<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"
app:title="#string/app_name" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.appbar.AppBarLayout>
<!--i want below view on the top of app bar layout of id(android:id="#+id/app_bar")
so i put my all view inside the new app bar layout of id(
android:id="#+id/longClickItem")-->
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/longClickItem"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
android:visibility="gone">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:paddingTop="#dimen/_5sdp"
android:paddingBottom="#dimen/_5sdp">
<ImageView
android:id="#+id/longItemBack"
android:layout_width="#dimen/_25sdp"
android:layout_height="#dimen/_25sdp"
android:layout_centerVertical="true"
android:layout_marginStart="#dimen/_15sdp"
android:layout_marginEnd="#dimen/_15sdp"
android:src="#drawable/back_arrow" />
<TextView
android:id="#+id/longItemCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#id/longItemBack"
android:text="0"
android:textColor="#android:color/white"
android:textSize="#dimen/_18sdp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true">
<ImageView
android:id="#+id/longItemDelete"
style="#style/long_press_image_view"
android:src="#drawable/item_long_delete" />
</LinearLayout>
</RelativeLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />

Touch event is not working for the ParentActivity

I've added appbarLayout and coordinatorLayout to both parent activity and it's child i.e fragment. At first, the touch event was hiding and showing toolbar of parent activity efficiently but when I used appbarlayout for the child fragment as well then the toolbar of a parent is not hiding while scrolling.
Can anyone suggest how to activate touch event for both simultaneously?
ParentActivity code:
<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"
android:background="#fff"
android:focusable="true"
android:focusableInTouchMode="true"
android:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00ffffff"
>
<android.support.v7.widget.Toolbar
android:id="#+id/search_bar_settings_container"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_marginStart="-15dp"
app:layout_scrollFlags="scroll|enterAlways"
>
<EditText
android:id="#+id/search_bar"
android:layout_marginTop="5dp"
android:layout_width="305sp"
android:layout_height="35dp"
android:hint=" Search Here..."
android:imeOptions="actionSearch"
android:singleLine="true"
android:paddingLeft="9dp"
android:paddingStart="9dp"
android:background="#drawable/society_style"/>
<ImageView
android:id="#+id/search_icon"
android:layout_width="35dp"
android:layout_height="38dp"
android:layout_marginTop="2dp"
android:src="#drawable/search"
/>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#001919"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabIndicatorColor="#ffffff" />
</android.support.design.widget.AppBarLayout>
<!-- View pager to swipe views -->
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
Fragment Class's code:
<android.support.design.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="layout.Society_Show"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00ffffff"
android:layout_marginStart="-13dp"
>
<android.support.v7.widget.Toolbar
android:id="#+id/society_show_container"
android:layout_width="match_parent"
android:layout_height="55dp"
app:layout_scrollFlags="scroll|enterAlways"
>
<LinearLayout
android:id="#+id/selected_society_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/selected_society"
android:layout_marginTop="2sp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<shivam.developer.featuredrecyclerview.FeaturedRecyclerView
android:id="#+id/featured_recycler_view_society"
android:layout_below="#+id/selected_society_layout"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_marginTop="2sp"
app:defaultItemHeight="270dp"
app:featuredItemHeight="400dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<ImageView
android:id="#+id/plus"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="end|bottom"
android:src="#drawable/new_add_one"
android:layout_marginRight="5dp"
android:layout_marginEnd="5dp"
android:layout_marginBottom="65dp"
/>

You should not define the AppBarLayout in your Fragment, but only in the Activity like this:
<android.support.design.widget.CoordinatorLayout
android:fitsSystemWindows="true"
android:id="#+id/coordinator_layout"
android:layout_height="match_parent"
android:layout_width="match_parent"
tools:context=".YourActivity">
<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:background="?colorPrimary"
android:id="#+id/toolbar"
android:layout_height="?actionBarSize"
android:layout_width="match_parent"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:theme="#style/ThemeOverlay.AppCompat.Dark" />
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:background="#color/colorBackgroundTint"
android:id="#+id/pager_container"
android:layout_height="match_parent"
android:layout_width="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_schedule">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_height="match_parent"
android:layout_width="match_parent" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
Because, you only need one AppBar, since Fragments are part of an Activity.
Your ViewPager will include the Fragment whose layout will look like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Your content e.g. RecyclerView -->
</RelativeLayout>
Android will capture your scrolling and hide the Toolbar.

Brilliant you're using appbarLayout in order to avoid the boilerplate code of adding one recycler view to another . It solved my tension of adding two recycler views together.
By the way I think you shouldn't use the appbarLayout for the parent activity try changing your design and add appbarLayout only to your fragment activity.

Android NestedScrollView scroll does not work

Title pretty much says it all.
I have an Activity with a FrameLayout and I add a fragment at runtime. Data from the fragment are being displayed ok but I cant scroll.
The Activity's layout is :
<RelativeLayout android:id="#+id/content_layout"
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.CoordinatorLayout
android:fitsSystemWindows="true"
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.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<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_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout android:id="#+id/fl_content" android:layout_below="#id/toolbar"
android:layout_width="match_parent" android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" >
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent" android:layout_height="match_parent"/>
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
and the fragment's layout is :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical"
android:layout_width="match_parent" android:layout_height="match_parent">
<ImageView android:id="#+id/iv_cover"
android:layout_width="100dp" android:layout_height="100dp" />
<TextView android:id="#+id/tv_release_artistname"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<TextView android:id="#+id/tv_release_albumname"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<TextView android:id="#+id/tv_release_year"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<TextView android:id="#+id/tv_release_label"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<TextView android:id="#+id/tv_release_style"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<TextView android:id="#+id/tv_release_notes"
android:layout_width="wrap_content" android:layout_height="wrap_content" />

You should make the NestedScrollView the parent of the FrameLayout and then add your Fragment on that FrameLayout.
Right now you're overwriting the contents of the FrameLayout, your NestedScrollView when you add your Fragment on top of it.
Also don't forget to add the behaviour on the NestedScrollView after switching.

ViewPager with Headerview and Collapsible Toolbar

I have to implement viewpager with headerview and Collapsible Toolbar. I have implemented that but currently scroll only works on viewpager view not on the headerview.
Please let me know the way to fix this issue.
Here is my layout.
<?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="fill_parent"
android:layout_height="fill_parent"
android:background="#color/white"
android:gravity="center">
<LinearLayout
android:id="#+id/lnrHeader"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical"
android:visibility="gone">
<include
layout="#layout/toolbarHeaderLayout" />
</LinearLayout>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.AppBarLayout
android:id="#+id/id_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/lnrCustomProfile"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--- Header Layout--->
<include
layout="#layout/customprofileshoplayout" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="#dimen/dividerline"
android:background="#color/colorGrayBorder"
android:layout_above="#+id/tabsProfile" />
<android.support.design.widget.TabLayout
android:id="#id/tabsProfile"
app:tabGravity="fill"
app:tabMode="fixed"
android:background="#color/white"
app:tabIndicatorColor="#color/black"
app:tabSelectedTextColor="#color/tabSelectColor"
app:tabTextColor="#color/tabColor"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/lnrCustomProfile" />
<View
android:layout_width="match_parent"
android:layout_height="#dimen/dividerline"
android:background="#color/colorGrayBorder"
android:layout_below="#id/tabsProfile" />
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<ViewPager
android:id="#+id/vwpagerProfileProducts"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

your TabLayout like headerview. try this sample. the sample implemented viewpager and tablayout & collapsingtoolbarlayout.

coordinate layout issue while loading in frameLayout

I am working on code that have FrameLayout and customview at bottom. I loaded a fragment inside FrameLayout, which is having CoordinatorLayout with ViewPager inside.
So problem is ViewPager takes full height of the phone and hide contents of list behind customview. Here is Code:
main_layout.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/root_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/playerView"
android:layout_alignParentTop="true" />
<TextView
android:id="#+id/playerView"
android:layout_width="match_parent"
android:layout_height="#dimen/player_size"
android:layout_alignParentBottom="true"
android:background="#D7D7D7"
android:gravity="center"
android:text="Player View"
android:textSize="20sp" />
</RelativeLayout>
fragment_view.xml
<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:layout_width="match_parent"
android:layout_height="wrap_content">
<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_view_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="pin"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/tabs_view_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
In above image you can see some content of list is hidden beside PlayerView.

Try to use LinearLayout with layout_weight instead of RelativeLayout inside main_layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="#+id/root_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<TextView
android:id="#+id/playerView"
android:layout_width="match_parent"
android:layout_height="#dimen/player_size"
android:background="#D7D7D7"
android:gravity="center"
android:text="Player View"
android:textSize="20sp" />
</LinearLayout>