pin buttons below toolbar while scrolling android - android

I need to show buttons below toolbar while scroll down like below video. Any samples? I have tried lot but confused.
https://www.youtube.com/watch?v=enWVNP3Gifg

You can use two toolbar one with search view and one with widgets.
You design be like below.
<FrameLayout 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/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"/>
<ImageButton
android:id="#+id/fabButton"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_gravity="bottom|right"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp"
android:background="#drawable/fab_background"
android:src="#drawable/ic_favorite_outline_white_24dp"
android:contentDescription="#null"/>
</FrameLayout>
then you can hide one on scroll like below
Complete Demo of hide toolbar on scroll.

You need to use CoordinatorLayout which you can find a good tutorial in here:
Tutorial
Simply put, you need to have a CoordinatorLayout which contains a AppBarLayout (which must be the first child) and the AppBarLayout must contain two chilren like this:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
.../>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
The line app:layout_scrollFlags="scroll|enterAlways" makes it like you want it.

Related

How to achieve overlapping in CoordinatorLayout?

I have used CoordinatorLayout for getting Appbar + RecyclerView scroll behavior. But I'm not able to achieve overlapping of Appbar over the RecyclerView within this CoordinatorLayout. I have tried using negative margins which works but I don't know if that is a good practice. Is there any other way to achieve this?
The following code is the original xml without negative margins:
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
...
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:elevation="0dp"
android:clipToPadding="false"
android:background="#color/transparent"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="match_parent"
...
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
[Edit] I tried encapsulating Appbar + RecyclerView within RelativeLayout before putting them in CoordinatorLayout (see Overlapping views in coordinatorlayout) but that just breaks the "hide appbar on scroll" behavior.
Here is I am using this Like this
XML:
<android.support.design.widget.CoordinatorLayout
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.v7.widget.Toolbar
android:layout_width="match_parent"
android:titleTextColor="#color/white"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways|snap"
android:background="?attr/colorPrimary"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
android:id="#+id/toolbar">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_height="match_parent"
>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/recycle"
android:layout_marginTop="5dp"
android:layout_gravity="center_horizontal|top" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
You are using layout_scrollFlags according to your requirements.
Please have to look this URL

How can I create an expanded toolbar with background image and a centered thumbnail?

I'm willing to create a custom toolbar for the main menu of an app I'm working on, like this:
https://i.stack.imgur.com/GJdjn.png.
It contains a background image and another centered image as thumbnail. It does not collapse and stays static until an item is selected inside one of the tabs.
I'm using Android Studio in the developing process, which can be a little rough to deal with layout, but I believe there's a solution that uses the material design features, but I couldn't find anything about that (besides the toolbar with a background image).
Thanks in advance.
You can customize the Toolbar widget to your needs. Use something like this:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_top"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#color/action_bar_bkgnd"
app:theme="#style/ToolBarTheme" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Toolbar Title"
android:layout_gravity="center"
android:id="#+id/toolbar_title" >
//...your code here
</RelativeLayout>
</android.support.v7.widget.Toolbar>
And then add this toolbar to the top of your UI.
Based on the example you used, it looks like they are using a CollapsingToolbarLayout with the collapsing effect turned off. The layout may look something like this:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="enterAlways">
<FrameLayout
android:id="#+id/header_frame"
android:layout_width="match_parent"
android:layout_height="#dimen/height_header"
app:layout_collapseMode="pin">
<ImageView
android:id="#+id/header_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"/>
<ImageView
android:id="#+id/square_image"
android:layout_width="#dimen/size_square_image"
android:layout_height="#dimen/size_square_image"
android:layout_gravity="center|bottom"
android:scaleType="centerCrop"/>
</FrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>

Can't fit appbar and the activity in the same screen

I'm building a android app and im using the android material design app bar. I wanted to fit the activity in the screen with the appbar and I cant do it.
I have this line of code:
app:layout_behavior="#string/appbar_scrolling_view_behavior"
This line allow me to fit the activity in the screen but some content is below the screen. Both appbar and the content are different xml files (don't know if they are consider as fragments). Can someone help to fit the content in the screen without being on top of the appbar?
If I use this line:
And without it:
There is solutions to your problem.
case 1: if you does not want to scroll or collapse tabs and toolbar(i.e. your content is not scroll-able):
You should not use app:layout_behavior="#string/appbar_scrolling_view_behavior", instead of it set layout_marginTop to root view of content up-to height of(toolbar+tabs). If you are using standard heights then it is 48+48 = 96dp (you should check and verify these dimensions).
case 2:
If you have scroll able content or want to scroll able content, then just use NestedScrollView as a root viewGroup of content and stop worrying about behavior. It will work correct automatically.
try this way this worked me fine
<android.support.design.widget.CoordinatorLayout
android:id="#+id/root_coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways">
<ImageView
android:layout_width="match_parent"
android:layout_height="192dp"
android:scaleType="centerCrop"
android:src="#drawable/rsz_bg_cover"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
app:layout_collapseMode="pin"
app:tabIndicatorColor="#color/colorPrimary"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#EEE" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Hope this will helps you

CollapsingToolbarLayout won't collapse

I am having issues with the expected scroll behavior of a collapsing toolbar layout within an app. To ensure I kinda knew what I was doing I created a simple test project and was able to achieve the desired result, but a NestedScrollView was used in that example and the content that required scrolling was just a RelativeLayout containing a CardView with a lot of text. In the real app the scroll content is a RecyclerView, which I assume is the problem. It is as if the RecyclerView is handling the scrolling and the parent CollapsingToolbar is left out of the loop.
Notice that the app:layout_behavior="#string/appbar_scrolling_view_behavior" is not currently in the layout. I have tried adding it to various places without the desired result.
Attached is an image of the app after a small amount of scrolling has been performed with the collapsing toolbar above not reducing it's height.
<?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=".ui.ArticleListActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/toolbar_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/theme_primary"
app:contentScrim="#color/theme_primary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="#drawable/empty_detail"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/app_name"
android:src="#drawable/logo" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.SwipeRefreshLayout>
</android.support.design.widget.CoordinatorLayout>
According to your code what's missing is that you have to set the scrolling flag "scroll" to the imageview above the Toolbar.
I've done a similar thing and as you can see on the code below, all the views that are meant to react to the RecyclerView Scrolling have the scrolling flag and they are before the views that we don't want to scroll such asthe Toolbar:
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:id="#+id/collapsingToolbar"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
>
<include layout="#layout/movie_details_header_layout" android:id="#+id/headerLayout"
app:layout_scrollFlags="scroll"
/>
<android.support.v7.widget.Toolbar
android:layout_height="56dp"
android:layout_width="match_parent"
android:id="#+id/toolbar"
app:navigationIcon="#drawable/ic_arrow_back"
android:navigationContentDescription="Back"
app:layout_collapseParallaxMultiplier="0.7"
app:layout_collapseMode="pin"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
The project came using version 22.x of the compat libraries, updating to 23 seemed to fix everything.

CoordinatorLayout with Tabs in android?

I am new for CoordinatorLayout i want to use coordinatorLayout in my application but it cause some problem in display CollapsingToolbarLayout view.
i want to design view like whatsApp screen Tabs in Coordinatorlayout
My XML 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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/detail_backdrop_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fitsSystemWindows="false"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="32dp"
app:expandedTitleMarginStart="24dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
</LinearLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabanim_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/tabanim_viewpager"
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
// child view
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>`
I Found Solution for Tabs in CoordinatorLayout
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/tabanim_maincontent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/tabanim_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/tabanim_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.v7.widget.Toolbar>
/***
Here You can add custom layout
**/
<android.support.design.widget.TabLayout
android:id="#+id/tabanim_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/tabanim_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
CoordinatorLayout is delicate sometimes, I suggest you to follow the next example using it as a base and adding more complexity step by step if you need:
https://gist.github.com/RicardAparicio/f41523daaa0edbe0b4399549fff4da3f
Hope it helps.
"but it cause some problem in display" doesn't say what kind of problem You had, glad You found the solution though.
There is indeed problem in both 22.2.1 and 23.0.1 support libraries with TabLayout and ViewPager in CoordinatorLayout while using fitsSystemWindows="true". While using RecyclerView and scrolling it up TabLayout header goes into status bar while it's background color is not being pinned.
I might only imply that above was one of Your problems, if yes then removing fitsSystemWindows is not best solution as application will loose a lot of it's look in 5.0+ Android.
It is not good solution either but I managed to fix this issue by adding nested android.support.design.widget.CoordinatorLayout, but if You use DrawerLayout there, then nothing is needed as shown in this example: https://github.com/chrisbanes/cheesesquare

Categories

Resources