Develop Reference

Stick TabLayout on top of screen

I have a layout that contains a tree of views like below:
- ConstraintLayout
-- TextView
- WebView
- TabLayout (1) (3 tabs)
- ViewPager (1)
- TabLayout (2) (4 tabs)
- ViewPager (2)
When user scrolls to ViewPager (1), TabLayout (1) will stick at top and able to interact like below GIF in Huobi app. And if user scrolls more to ViewPager (2), it will push TabLayout (1) out and TabLayout (2) will be sticked on top.
I tried some articles like (https://stackoverflow.com/a/44327350 -- It creates fake view and not able to interact header) and libs like (https://github.com/emilsjolander/StickyScrollViewItems -- quite too long no update) but i don't feel it good.
Any good practice on this? I see many apps used it but not sure will Google supports it natively and not sure what I missed.
Any help would be appreciated. Thanks.
Update 13/12/2021
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background_color">
// Header
<include
android:id="#+id/layout_header"
layout="#layout/layout_header" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<WebView
android:id="#+id/wvChart"
android:layout_width="match_parent"
android:layout_height="#dimen/webview_height" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tl1"
android:layout_width="match_parent"
android:layout_height="#dimen/tablayout_height"
style="#style/TabLayoutStyle"
app:layout_constraintTop_toBottomOf="#id/wvChart"
app:tabTextAppearance="#style/TabLayoutTextStyle"/>
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/vpg1"
android:minHeight="#dimen/viewpager_market_info"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/background_color"
app:layout_constraintTop_toBottomOf="#id/tl1"/>
<com.google.android.material.tabs.TabLayout
android:id="#+id/tl2"
android:layout_width="match_parent"
android:layout_height="#dimen/tablayout_height"
style="#style/TabLayoutStyle"
app:layout_constraintTop_toBottomOf="#id/vpg1"
app:tabTextAppearance="#style/TabLayoutTextStyle"/>
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/vpg2"
android:minHeight="#dimen/viewpager_market_info"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/background_color"
app:layout_constraintTop_toBottomOf="#id/tl2"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</layout>
I am currently using this lib StickyScrollView, it works as expected but contains minor bugs. I still want to find other stable way. Thanks.

As I had no source code from you, I just started to make an own little project to achieve that. First of all you need to take a CoordinatorLayout as base frame. In that you use an AppBarLayout that is the parent of a CollapsingToolbarLayout and in that you can put your content (here e.g. TextView). The second Toolbar in it needs to be pinned (app:layout_collapseMode="pin")
Below that you will continue with the NestedScrollView to have no glitches etc., for a smooth UX.
There you go with your activity_main.xml:
<?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/appbar"
android:layout_width="match_parent"
android:layout_height="150dp"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#6200EA"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
app:title="Collapsing Toolbar">
<TextView
android:layout_width="250dp"
android:layout_height="40dp"
android:layout_gravity="center|end"
android:layout_marginBottom="15dp"
android:scaleType="centerCrop"
android:text="Trade your Bitcoins here:"
android:textSize="18sp"
android:textStyle="bold"
app:layout_collapseMode="parallax" />
<Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Collapsed Toolbar:
Extended Toolbar:
I think now you should have a good inspiration how to design further. It's the same principal. In terms of time I just made a ruff version. In your shown GIF it's just an additional Toolbar at the top, that's normally known as "DarkActionbar" in themes.xml. And the RecyclerView (in your example "Order Book") will be added as a child in NestedScrollView. Cheers!

Can I Use The INCLUDE LAYOUT To ScrollView In My Activity?

Good day, I'm having a problem with my xml layout. I create an another xml file share_app_scroll(ScrollView Layout) and included it in my ShareApp.xml .
The Problem is, my toolbar/action bar don't appear. All I can see, is my scrollview layout that I created. Is this possible to include the scrollView layout?. Here's my Code.
<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"
android:fitsSystemWindows="true"
tools:context=".activities.ShareAppActivity">
<!--Include ActionBar/Toolbar-->
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/toolbar"
android:elevation="8dp"
android:minHeight="?attr/actionBarSize"
android:background="#color/colorPrimary">
</android.support.v7.widget.Toolbar>
<include
android:id="#+id/share_scrollview"
layout="#layout/share_extend_scrollview"
android:layout_height="match_parent"
android:layout_width="match_parent"/>
Sorry for the blurred picture.
Thank you in advanced.

You are using relative layout as your parent layout therefore you have to align your include layout below toolbar.Like this
<include
android:id="#+id/share_scrollview"
layout="#layout/share_extend_scrollview"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_below="#+id/toolbar"/>

The problem will be in the manifest file.
Check if the java file for your xml has a android:theme="#style/AppTheme.NoActionBar" in the manifest. remove the no action bar and it will appear. if you are talking about during the design view. next to the api level there is app theme. change that to any except .NoactionBar

Android Custom TabLayout: Icon overlays content

I'm looking for a custom TabLayout. The icon of the Tab in the middle needs a margin to overlay the content. Please check out the image below.
What I've tried so far
Tab.setCustomView() with a margin. That doesn't overlay the content though.
Looked for TabLayout libraries that give such flexibility. Didn't find anything that fits my need.
Re-invent the wheel?
Since I don't need any complicated scrolling functionality, I could develop my own TabLayout with a couple ViewGroups,TextView and ImageView. Before I have to do that:
Do you know of any library that would do that?
How would you approach it?
Any help would be greatly appreciated!

I achieved that by the combination of a custom library and the floating action button.
The library: MagicIndicator on GitHub
I set the icon of the middle fragment to an empty icon and positioned the floating action button in the middle to overlay the TabLayout. It looks like this:
My activity layout:
<?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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:layout_marginBottom="50dp"
app:layout_behavior="#string/appbar_scrolling_behavior" />
<net.lucode.hackware.magicindicator.MagicIndicator
android:id="#+id/magic_indicator"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/light_gray"
android:layout_gravity="bottom" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|bottom"
android:layout_margin="10dp"
app:srcCompat="#drawable/add_icon"
app:backgroundTint="#color/colorPrimary"/>
</android.support.design.widget.CoordinatorLayout>

Overlaying content above AppBarLayout using new Material Design

I want to achieve something like that. (not the FAB or the Snackbar). How can i create a layout, overlaying the AppBarLayout? Like this! (For Example)
Like Play Store:
My AppBarLayout with CoordinatorLayout and NestedScrollView with RelativeLayout as content looks like this:
<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/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="#dimen/_118sdp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#color/mpc_pink"
app:expandedTitleMarginStart="#dimen/_40sdp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<de.mypostcardstore.widgets.ItemImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#color/mpc_pink"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<android.support.v7.widget.Toolbar
android:id="#+id/article_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:contentScrim="#color/mpc_pink"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?android:colorBackground"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent".....>
It would be awesome if someone could help me out. I can not find anything on the internet...
Thanks in advance!

Just add something like
app:behavior_overlapTop="64dp"
to your NestedScrollView and it will be placed above the expanded toolbar.
In addition, you should add something like
app:expandedTitleMarginBottom="70dp"
to your CollapsingToolbarLayout so the title does not appear under your overlaid scroll content.

It's quite simple, really. You could achieve that by using a combination of ToolBar, FrameLayout, and your content view (could be a ListView like your first example, or anything).
The idea is to make your FrameLayout possess the same color as your ToolBar, giving the illusion of ToolBar being much larger than it is. Then all that is left to do is to make your content view be the last (or in API 21 and above: possess the highest elevation attribute) so that it would appear as if it floats above the aforementioned FrameLayout.
See my illustration below:
Now that you got the big idea, below is some real live XML snippet for doing such thing. (I actually use this layout in one of my apps) :
<!-- Somewhere in your layout.xml -->
....
<android.support.v7.widget.Toolbar
android:id="#+id/tb_toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:contentInsetStart="72dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<!-- This is the 'faux' ToolBar I've been telling you about. This is the part that will be overlaid by the content view below. -->
<FrameLayout
android:id="#+id/v_toolbar_extension"
android:layout_width="match_parent"
android:layout_height="64dp"
android:layout_below="#+id/tb_toolbar"
android:background="?attr/colorPrimary"
android:elevation="2dp"/>
<!-- Normally, I use this FrameLayout as a base for inflating my fragments. You could just use put your content view here. -->
<FrameLayout
android:id="#+id/ly_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/tb_toolbar"
android:elevation="3dp"/>
....
Note that my ly_content has higher elevation value than that of v_toolbar_extension. This is what will give you that desired 'overlaid toolbar' effect.
Last but not least, you would want to add this line somewhere in your activity's onCreate() :
/* Assuming mToolbar exists as a reference to your ToolBar in XML. */
setSupportActionBar(mTbToolbar);
getSupportActionBar().setElevation(0);
What that codes woud do is to set your ToolBar elevation to zero; removing preset shadows that were given as a default to ToolBars. If you don't do this, said shadow will create a "seam" between your ToolBar and your FrameLayout, thus breaking the illusion of those two being the same.
p.s., It is also important to give your content view a padding on each side. Doing so, your content view will not cover the entire width of the screen (which would render this effect useless).
Note: I see some good answers here that mentioned the absence of FrameLayout and instead making the ToolBar taller. While in theory it might work as well as my proposed solution, you might have problems when trying to manipulate scrolling; by doing that, you won't be able to separate ToolBar and its extension. You'll be forced to either make the Toolbar static or scroll all of the ToolBar altogether (makes scrolling a bit weird).
Add to that, the fact that you can't easily assign a custom drawable into a Toolbar. Hence makes it hard to follow the Google Play example you've given above. While if you're using my solution, all you'd need to do is just make your Toolbar transparent and assign the drawable to the FrameLayout instead.

I had a similar requirement and I achieved it as below.
Your activity theme should extend Theme.AppCompat.Light.NoActionBar.
I created a Layout XML File as:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="#dimen/action_bar_size_x2"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="#dimen/action_bar_size"
android:orientation="vertical" >
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="#string/app_name"
android:textSize="24sp" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
And the Activity should be something like this:
public class MainActivity extends ActionBarActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar maintoolbar = (Toolbar) findViewById(R.id.toolbar_main);
setSupportActionBar(maintoolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
}
I got a view like this :

I did try to implement effects like you referred which is called Card Toolbar in Android, and it did work as expected. Here is my layout, Take a look at it:
<FrameLayout 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/background_material_light" >
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_double_height"
android:background="?attr/colorPrimary" />
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="#dimen/cardview_toolbar_spacer"
android:layout_marginRight="#dimen/cardview_toolbar_spacer"
android:layout_marginTop="?attr/actionBarSize"
app:cardBackgroundColor="#android:color/white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:alpha="0.12"
android:background="#android:color/black" />
</LinearLayout>
</android.support.v7.widget.CardView>
</FrameLayout>
Hope you'll be inspired.

AppCompat Snackbar not centered on tablet

I'm trying to show a snackbar (via appcompat) to display a message to the user. It works perfectly fine on phones, however on tablets I'm getting
and
The code I'm using to generate the snackbar is
Snackbar.make(mHomeContainer, R.string.rate_snackbar, Snackbar.LENGTH_LONG)
.setAction("Rate", ...)
.show();
Any guidance on how to make this snackbar centered would be greatly appreciated
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:id="#+id/status_bar"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#color/main"
android:elevation="8dp"/>
<include layout="#layout/toolbar" />
<RelativeLayout
android:id="#+id/home_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true" />
<ListView
android:id="#+id/home_search_list"
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#88000000"/>
</RelativeLayout>
</LinearLayout>
<include layout="#layout/navigation_list" />
</android.support.v4.widget.DrawerLayout>

You need to use the CoordinatorLayout in order to make this happen. Here is an article that describes how to do that. Additionally you will likely need to now provide layout files that you want to use for non-tablets vs. tablets so that you can retain full-width for your phones. This is also the layout component that you need to use if you use a combination of FAB, app bar and Snackbar.

In v22.2.0 of Design Support Library, Snackbar's default gravity was just Gravity.BOTTOM.
In v22.2.1 this issue was fixed: https://code.google.com/p/android/issues/detail?id=176383