Develop Reference

RecyclerView does not enter under tabLayout and toolbar

I made the Toolbar and TabLayout transparent. In TabLayout, I have two fragments with RecyclerView.
When I scroll, the contents of the recyclerView do not go under the tolbar. Please tell me how to fix.
I use the behaviour but it seems not working
app_bar_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.MainActivity"
android:id="#+id/coordinator">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="112dp"
android:background="#color/transparent" />
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/transparent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#color/transparent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView ..... />
<TextView ..... />
</LinearLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_height="?android:attr/actionBarSize"
android:layout_width="match_parent">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton ..../>
</android.support.design.widget.CoordinatorLayout>
fragment.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"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".fragment.PoemFragment">
<android.support.v7.widget.RecyclerView
android:id="#+id/rvPoem"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:clipToPadding="false"
android:paddingBottom="88dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</RelativeLayout>

You should use this behavior in root of that view that want to place below of AppBarLayout, not in child of views (Fragments)
just add this behavior to ViewPager
just change :
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="112dp"
android:background="#color/transparent" />
to :
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="112dp"
android:background="#color/transparent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />

Nested Coordinator layout and Appbar Layout

Trying to build layout in which the activity has Coordinator layout and Appbar layout. The appbar layout has tab layout, which is connected to a view pager. In the view pager, the first fragment has another coordinator layout and an appbar layout. When the scroll happens in appbar layout, I want the Activity's appbar layout also to scroll.
Activity's 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"
android:id="#+id/coord"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_layout"
android:layout_width="match_parent"
android:layout_height="200dp"
app:layout_scrollFlags="scroll|snap|enterAlwaysCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/material_flat"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
style="#style/ToolBarWithNavigationBack"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:layout_collapseMode="pin"></android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<LinearLayout
android:id="#+id/tab_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#android:color/white"
android:clipToPadding="true"
android:gravity="center"
android:orientation="vertical"
android:paddingTop="10dp"
app:layout_scrollFlags="scroll|enterAlways|snap">
<android.support.design.widget.TabLayout
android:layout_width="fill_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:tabIndicatorColor="#BDBDBD"
app:tabIndicatorHeight="4dp"
app:tabSelectedTextColor="?android:attr/textColorPrimaryInverse"
app:tabTextAppearance="#android:style/TextAppearance.Widget.TabWidget" />
</LinearLayout>
</android.support.design.widget.AppBarLayout>
​
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
The fragment's xml
<?xml version="1.0" encoding="utf-8"?>
<NestedCoordinatorLayout
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="#android:color/background_light">
<android.support.design.widget.AppBarLayout
android:id="#+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
app:theme="#style/ThemeOverlay.AppCompat.Dark">
<LinearLayout
android:id="#+id/home"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#e3e6e8"
android:gravity="center"
android:orientation="vertical"
android:padding="20dp"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed|snap">
<android.support.v7.widget.CardView
card_view:cardCornerRadius="4dp"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_margin="24dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/shade_gradient" />
</android.support.v7.widget.CardView>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="15dp" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/simple.viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</NestedCoordinatorLayout>
When the appbar scrolls in the fragment, I want the activity's appbar to scroll also.
I have used the NestedCoordinatorLayout as suggested in CoordinatorLayout inside another CoordinatorLayout
Please let me know how to achieve that
Thanks!

Recycler view scrolls without collapsing toobar

Recycler view scrolls without collapsing toobar. This is my Main layout.
<CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/collapp_bar"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<View
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="220dp"
app:layout_collapseMode="parallax"
android:background="#android:color/transparent"
/>
<include layout="#layout/custom_toolbar" />
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
android:layout_gravity="bottom"
android:id="#+id/nestedScrollView"
android:layout_marginBottom="10dp"
>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:id="#+id/recyclerView"
android:layout_height="wrap_content"
android:orientation="horizontal" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f4f4f4"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="fill_parent"
android:layout_height="50dp"
app:tabMode="fixed"
app:tabGravity="fill"
app:tabTextColor="#color/gray"
app:tabSelectedTextColor="#color/selected_text_color"
app:tabIndicatorColor="#color/more_comment_color"
android:background="#android:color/background_light"
android:layout_gravity="bottom"
/>
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
app:layout_anchor="#id/tab_layout"
app:layout_anchorGravity="bottom|center"
android:layout_marginTop="-20dp"
/>
</CoordinatorLayout>
This is the layout which I am setting in View Pager
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/container"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white">
<android.support.v4.widget.SwipeRefreshLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/swipe"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.v7.widget.RecyclerView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/recyler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/bg_listview" /></android.support.v4.widget.SwipeRefreshLayout>
</RelativeLayout>
My Recycler view scrolls,even without collapsing toolbar sometimes.Alsothe scrolling is not smooth.In recyClerView of view pager i have a header item and then the list of items.Sometimes it get stuck at Header at top and need to pull it down.

For every RecyclerView that is has a scrolling parent (such as ScrollView or NestedScrollView) you should disable nested scrolling like this:
yourRecyclerView.setNestedScrollingEnabled(false);
For your smoothing problem it seems that there is a bug with AppBarLayout and there are some libraries for fixing that. One that I know but I've never used is:
https://github.com/henrytao-me/smooth-app-bar-layout

CoordinatorLayout leaves empty bottom space

I'm developing and Android App using Xamarin. I'm using the ViewPager with TabLayout to make tab navigation, but my ViewPager, even with height="match_parent" does not fill the whole screen.
I believe it's some misconfiguration on CoordinatorLayout, but I can't find a way to fix it.
My layout XML:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="0dp"
android:background="#android:color/holo_blue_bright">
<ImageView
android:background="#drawable/background_aulas"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#android:color/transparent"
android:id="#+id/appbarlayout">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<android.support.design.widget.TabLayout
android:id="#+id/aulas_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="75px"
local:tabMode="scrollable" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/aulas_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
local:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_weight="1"
android:background="#FF0000"
android:layout_alignParentBottom="#id/appbarlayout" />
</android.support.design.widget.CoordinatorLayout>
And here is a screenshot of my screen: http://imgur.com/nVaHzKK

Try the following.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="0dp"
android:fitsSystemWindows="true"
android:background="#android:color/holo_blue_bright">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_height="wrap_content"
android:layout_width="match_parent" />
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#android:color/transparent"
android:id="#+id/appbarlayout">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<android.support.design.widget.TabLayout
android:id="#+id/aulas_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="75px"
local:tabMode="scrollable" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/aulas_viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
local:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_weight="1"
android:background="#FF0000"
android:layout_alignParentBottom="#id/appbarlayout" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>

Header layout above TabLayout

I'm trying to do something like this:
I currently have the above layout without the header implemented. All I need is to figure out how to add the header.
Here is the header layout I want to put above the tabs:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center_horizontal"
android:background="#color/green">
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/ic_image"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:layout_gravity="center_vertical" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hey!"
android:textColor="#color/white"
android:textSize="24sp"
android:layout_gravity="center_vertical" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
I use a RecyclerView for the content below the tabs. I use 3 different Fragments for the Activity.
Here is my Activity:
<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.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"
app:elevation="0dp">
<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_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="0dp"
android:background="#color/blue"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
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"
app:tabTextAppearance="#style/TabLayout"
app:tabSelectedTextColor="#color/white"
app:tabTextColor="#color/white"
/>
</android.support.design.widget.AppBarLayout>
<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"
/>
</android.support.design.widget.CoordinatorLayout>
And here is one of my Fragments:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</android.support.design.widget.CoordinatorLayout>
How can I add the header above the TabLayout and keep normal scrolling behaviors?

You just need a RecyclerView to do that.
Combine your header and tabLayout to a Header view, then add to your RecyclerView.
Check https://github.com/u3breeze/android-RecyclerView-WithHeaderAndFooter. I did a extension of RecyclerView.Adapter. Easy to add header and footer to RecyclerView.