I am making a simple app. I use CoordinatorLayout and AppbarLayout, AppbarLayout contains two Toolbar.
<?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_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar1"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
>
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hi"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:visibility="gone"
app:layout_collapseMode="pin"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="sign"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hil"
/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="call"/>
</android.support.v4.widget.NestedScrollView>
public void call(View view) {
Toolbar toolbar=(Toolbar)findViewById(R.id.toolbar1);
Toolbar toolbar2=(Toolbar)findViewById(R.id.toolbar2);
toolbar.setVisibility(View.GONE);
toolbar2.setVisibility(View.VISIBLE);
}
In normal, the First toolbar will scroll, but When I click on the button in NestedScrollView. The second toolbar should show, toolbar must pin at the top don't want to scroll.
What to do?
As #kris Larson said.
The Toolbar, being a child of the AppBarLayout, gets its LayoutParams from the AppBarLayout. These layout params have the scroll flags that are set in the XML.
So, you get the AppBarLayout.LayoutParams from the Toolbar, and call setScrollFlags() to change the flags to the value you want.
Toolbar toolbar = findViewById(R.id.toolbar); // or however you need to do it for your code
AppBarLayout.LayoutParams params = (AppBarLayout.LayoutParams) toolbar.getLayoutParams();
params.setScrollFlags(0); // clear all scroll flags
Related
I am using CollapsingToolbarLayout in my Fragment. It contains A RelativeLayout consisting of a ViewPager and an EditText aligned in top of ViewPager. When the user scrolls down the toolbar collapses. What i want is when it collapses I want to make only the ViewPager collapse but Edit Text remain un collapsed.
This is my XML file:
<?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/main_content"
android:orientation="vertical"
android:layout_marginBottom="10dp"
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:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
app:contentScrim="#color/colorPrimaryDark"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="180dp">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="180dp"
android:layout_gravity="top"
android:scaleType="centerCrop"
android:background="#drawable/loading_image"
android:fitsSystemWindows="true"
app:layout_collapseMode="pin" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/user"
android:text=""
android:gravity="center"
android:layout_centerInParent="true"
android:textSize="16sp"
android:textColor="#ff0000"/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:layout_below="#+id/user"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp">
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="Search here"
android:padding="10dp"
android:id="#+id/srch"
android:textColor="#000"
android:maxLines="1"
android:background="#drawable/search_border_grey"/>
<ImageButton
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/search_24"
android:layout_centerVertical="true"
android:background="#fff"
android:layout_margin="5dp"
android:text="Button"/>
</RelativeLayout>
<LinearLayout
android:id="#+id/layoutDots"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="10dp"
android:layout_marginTop="5dp"
android:gravity="center"
android:orientation="horizontal"></LinearLayout>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/collapsing_toolbar2"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:id="#+id/root_layout"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<GridView
android:id="#+id/customgrid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:paddingBottom="10dp"
android:gravity="center"
android:horizontalSpacing="10dp"
android:numColumns="2"
android:verticalSpacing="3dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
I have tried adding a new layout below AppBarLayout and making it visible on collapsing of Toolbar, but its having a bad user experience since it causes the ui flicker. Is there solution for my requirement. All your responses are appreciated.
When the user scrolls down the toolbar collapses. What i want is when
it collapses I want to make only the ViewPager collapse but Edit Text
remain un collapsed.
You have added "scroll|exitUntilCollapsed" in the CollapsingToolbarLayout which means, it will close-exit the view when it collapsed.
In order to make EditText (Search) stay in there, I'd suggest adding the EditText inside the CoordinatorLayout as it's child then, anchoring it to the AppBarLayout. Just like when we anchor a Fab inside CoordinatorLayout.
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|center" // change it for your own porpuse
The other way I'd suggest (Not tested), would be adding :
app:layout_collapseMode="pin"
To your View (EditText or Container of that) or, changing the flags to:
app:layout_scrollFlags="scroll|snap"
In the CollapsingToolbarLayout.
It can however be done by handling AppBarLayout behavior to detect when it is collapsed or expended:
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int offset)
{
if (offset == 0)
{
// Fully expanded
// make your view visible or not collapsible here maybe?
}
else
{
// Not fully expanded or collapsed
}
}
Check: How can i determine that CollapsingToolbar is collapsed?
I have problem with CoordinatorLayout and behavior of Toolbar.
As usual I want to hide/show toolbar by scroll.And it is work fine.But if I fling on Toolbar itself it will hide independently of recyclerView or everything else.
How to prevent Toolbar hide/show behavior by touching toolbar itself.
Here is video that explain my issue.
https://youtu.be/3bFcy2SF3Nk
For additional info here is snippet from my layout file
<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="#color/white">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/action_bar_height"
android:background="#color/white"
app:contentInsetStart="0dp"
app:layout_scrollFlags="scroll|enterAlways|snap">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/padding"
android:src="#drawable/logo_dark" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
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/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</FrameLayout>
okey i see your video and i have same problem in past
The answer is this :
When you click on icon in bottom bar to new fragment load do this :
For Disable :
Toolbar toolbar = findViewById(R.id.toolbar); // or however you need to do it for your code
AppBarLayout.LayoutParams params = (AppBarLayout.LayoutParams) toolbar.getLayoutParams();
params.setScrollFlags(0); // clear all scroll flags
And when click on home botton in bottom bar do it to enable Scroll toolbar:
For Enable :
params.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL
| AppBarLayout.LayoutParams.SCROLL_FLAG_ENTER_ALWAYS);
<ScrollView 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="fill_parent"
android:layout_height="fill_parent"
android:fitsSystemWindows="true"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/action_bar_height"
android:background="#color/white"
app:contentInsetStart="0dp"
app:layout_scrollFlags="scroll|enterAlways|snap">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/padding"
android:src="#drawable/logo_dark" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
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/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</FrameLayout>
</ScrollView>
I'm trying to disable the shadow below a transparent AppBarLayout/Toolbar. Here's the layout:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#000">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:background="#android:color/transparent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/imagePreviewToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_image_preview" />
</android.support.design.widget.CoordinatorLayout>
I already tried with
app:elevation="0dp"
and
getSupportActionBar().setElevation(0);
but that makes the UP arrow invisible. I also tried to remove the AppBarLayout and use only the Toolbar, but the problem persists.
Anyone has a solution?
EDIT:
Replacing the AppBarLayout + Toolbar combo with this code:
<android.support.v7.widget.Toolbar
android:id="#+id/imagePreviewToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:elevation="0dp"/>
partially fixed the problem. Now the Toolbar becomes invisible only when the device is in landscape mode! The Android Studio Layout Editor shows me the Toolbar in both orientations just fine, so I don't really know what the problem could be..
after some tries i did find that ToolBar should be the last view in this case else if it will be first then the view coming after it will overlap it as it has height set to match_parent so try this way in layout.
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"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/imagePreviewToolbar" >
<ImageView
android:id="#+id/image_preview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/galacticos"
android:contentDescription="abc"
android:scaleType="fitCenter" />
<LinearLayout
android:id="#+id/actionBtns"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:padding="16dp" >
<ImageButton
android:id="#+id/setBackgroundBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#null"
android:contentDescription="abc"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/downloadBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?selectableItemBackgroundBorderless"
android:clickable="true"
android:contentDescription="abc"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/imagePreviewToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
And don't forget to initialize this all and set your title to false to only show the toolBar back button:
Activity Code
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.test);
Toolbar mToolBar = (Toolbar) findViewById(R.id.imagePreviewToolbar);
setSupportActionBar(mToolBar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowTitleEnabled(false);
getSupportActionBar().setHomeButtonEnabled(true);
}
Pics
Hope i helped you.
Make toolbar like this:
<android.support.design.widget.AppBarLayout
android:id="#+id/myAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp"...>
</android.support.design.widget.AppBarLayout>
And after that in your Activity;
findViewById(R.id.myAppBar).bringToFront();
I want to create a layout like the below image:
A CoordinatorLayout which contain :
CollapsingToolbarLayout( contain ImageView & Toolbar)
RecyclerView
TabLayout
ViewPager( that each fragment of it contain a RecyclerView)
I wanna responding to scroll events in this way:
CollapsingToolbarLayout expand and collapse by scrolling
Toolbar sticks to the top until TabLayout reach to the top
After that toolbar scroll up and TabLayout stick to the top
I'm having trouble with the RecyclerView between CollapsingToolbarLayout and TabLayout. I can implement this layout without that RecyclerView( I put CollapsingToolbarLayout and TabLayout inside the AppBarLayout and the ViewPager outside it, inside the CoordinatorLayout).
My Question:
Where should I put that RecyclerView?
Which & where layout_scrollFlags and layout_behavior should I set for each layouts?
It seems that AppBarLayout have a limited height. When I put the RecyclerView inside AppBarLayout, only a portion part of the RecyclerView is visible and also TabLayout disappear.
I read lots of tutorials like this one and lots of questions like this one and this one, but non of them help me.
use this as a main layout
activity_main
<?xml version="1.0" encoding="utf-8"?>
<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:id="#+id/swipe_refresh_layout_profile"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:ignore="RtlHardcoded">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/co_profile_activity_root_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:visibility="visible">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_profile"
android:layout_width="match_parent"
android:layout_height="#dimen/profile_img_placeholder_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar_profile"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<RelativeLayout
android:id="#+id/rel_top"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop">
<ImageView
android:id="#+id/img_bg_placeholder_profile"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:tint="#11000000"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.9" />
<LinearLayout
android:id="#+id/lin_top_inner"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#BF473e6b"
android:orientation="vertical"
android:scaleType="centerCrop">
</LinearLayout>
</RelativeLayout>
<FrameLayout
android:id="#+id/frame_detail_profile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center|center_horizontal"
android:orientation="vertical"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.3">
<android.support.v7.widget.RecyclerView
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</android.support.v7.widget.RecyclerView>
</FrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_profile"
android:layout_width="match_parent"
android:layout_height="#dimen/profile_toolbar_height"
android:gravity="top|center"
app:layout_anchor="#id/frame_detail_profile"
app:layout_collapseMode="pin"
app:theme="#style/ThemeOverlay.AppCompat.Dark"
app:title="">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/tv_toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/profile_toolbar_title_left_margin"
android:gravity="center_vertical|center"
android:ellipsize="end"
android:singleLine="true"
android:layout_gravity="center"
android:textColor="#android:color/white"
android:textSize="20sp" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout_profile"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:layout_marginTop="#dimen/profile_tab_layout_top_margin"
android:background="#color/white"
app:tabIndicatorColor="#color/colorPrimary"
app:tabSelectedTextColor="#color/colorPrimary"
app:tabTextColor="#color/charcoal_grey" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager_profile"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
</android.support.v4.widget.SwipeRefreshLayout>
and for grid layout of tabs use adapter classes.
Start with AppBarLayout under which you add CollapsingToolbarLayout with scrollFlags="scroll|exitUntilCollapsed",
add LinearLayout with vertical orientation to CollapsingToolbarLayout and add the
FrameLayout with ImageView + Toolbar
RecyclerView
TabLayout
Two things to be done:-
When the search button is clicked, set the visibility of recycler view to VISIBLE
When the back button is pressed, set the visibility of recycler view to GONE
Following are the implementations:
1. Setting the visibility of recycler view to VISIBLE:
public boolean onOptionsItemSelected(MenuItem item) {
if (item.getItemId() == R.id.searchView) {
rView.setVisibility(VISIBLE);
}
return true;
}
2. Setting the visibility of recycle adapter to GONE
MenuItem searchMenuItem = menu.findItem(R.id.searchView);
MenuItemCompat.setOnActionExpandListener(searchMenuItem, new MenuItemCompat.OnActionExpandListener() {
#Override
public boolean onMenuItemActionExpand(MenuItem item) {
return true;
}
#Override
public boolean onMenuItemActionCollapse(MenuItem item) {
recyclerView.setVisibility(GONE);
return true;
}
});
NOTE: Do not forget to keep the visibilty as GONE initially when the activity is started
I know I might be late to this answer but I have also been trying to implement this for a while. The solution I have feels a bit hacky but it is an option for trying to get the tabs to stick. In a simpler solution lets say we wanted the following:
A Collapsing toolbar layout
Which links to a scroll view.
In that scroll view we want the following:
A recyclerview that say scrolls horizontally
Below the recycler view a tab layout
Below the tab layout we want a view pager that will load dynamic fragments within a fixed space.
activity_scrolling.xml the outer parent xml file may look something like this
<?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"
android:fitsSystemWindows="true"
tools:context=".temp.ScrollingActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_marginBottom="5dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_scrolling" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
app:srcCompat="#android:drawable/ic_dialog_email" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Then the inner content_scrolling.xml may look something like this
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".temp.ScrollingActivity"
tools:showIn="#layout/activity_scrolling">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:gravity="center"
android:text="A Heading"
android:textSize="#dimen/text_xl"
android:textStyle="bold" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/title" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/recycler_view"
android:layout_gravity="center"
android:minHeight="60dp"
app:tabGravity="fill"
app:tabIndicatorColor="#color/colorAccent"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/colorPrimaryDark" />
<androidx.viewpager.widget.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="680dp"
android:layout_below="#+id/tabs" />
</RelativeLayout>
</androidx.core.widget.NestedScrollView>
This will allow you to forcefully place the tab layout in a location of your choosing (even if its after a recyler view).
The hacky part which i dont like is this specific line android:layout_height="680dp" which forces the viewpager height to be something specific. I am not sure why wrap_content or match_parent do not work. But this is the best thing to a solution I can provide for the issue of placing TabLayout and ViewPager in specific places.
With the new Toolbar API in Android Lollipop and AppCompat-v7, they are removing a lot of the automatic features to make Toolbar/ActionBar more robust. One of those things is the progress bar. Since Toolbar is simply a ViewGroup, I assumed adding a ProgressBar would be simple. However, I cannot seem to get it to work properly.
I have done the following (using the SmoothProgressBar library):
// I instantiate the toolbar and set it as the actionbar
mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
// I create a ProgressBar and set the drawable to the SmoothProgressBar drawable
ProgressBar progressBar = new ProgressBar(this);
progressBar.setIndeterminateDrawable(new SmoothProgressDrawable.Builder(this).color(Color.BLUE).interpolator
(new DecelerateInterpolator()).sectionsCount(4).separatorLength(8).speed(2f).mirrorMode(true).build());
// I add the progressbar to the view with what I thought were the proper LayoutParams.
Toolbar.LayoutParams params = new Toolbar.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 20);
params.gravity = Gravity.BOTTOM;
mToolbar.addView(progressBar, params);
progressBar.setIndeterminate(true);
I had figured this would work as I'm simply adding a ProgressBar to the bottom of the ViewGroup. However, it is not showing at all and is removing the Title. Below you can see a before and after. Does anyone know how to go about fixing this? My goal is to have a ProgressBar underneath the actionbar.
Before
After
The easiest way is to the to add the ProgressBar directly in the XML-Layout files.
1. One time Solution
Using a RelativeLayout as root and use android:layout_below to keep the ProgressBar and the main content below the toolbar.
<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.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimaryDark"/>
<fr.castorflex.android.smoothprogressbar.SmoothProgressBar
android:id="#+id/loadProgressBar"
style="#style/LoadProgressBar"
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_below="#+id/toolbar"
android:indeterminate="true"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:orientation="vertical">
<!-- Your Content here -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Content Text"/>
</LinearLayout>
</RelativeLayout>
Now you can access the Toolbar and the ProgressBar in the Activitiy onCreate method
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
progressBar = (SmoothProgressBar) findViewById(R.id.loadProgressBar);
if (toolbar != null) {
setSupportActionBar(toolbar);
}
}
2. General solution using include
A more general approach is to put the Toolbar and the ProgressBar in a separate XML-Layout file and include this in the activity layout.
toolbar.xml
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimaryDark"/>
<fr.castorflex.android.smoothprogressbar.SmoothProgressBar
android:id="#+id/loadProgressBar"
style="#style/LoadProgressBar"
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_below="#+id/toolbar"
android:indeterminate="true"/>
</merge>
activity_main.xml
<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">
<include
layout="#layout/toolbar"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:orientation="vertical">
<!-- Your Content here -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Content Text"/>
</LinearLayout>
</RelativeLayout>
This will show the horizontal toolbar below the toolbar:
<RelativeLayout 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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<me.zhanghai.android.materialprogressbar.MaterialProgressBar
android:layout_width="match_parent"
android:layout_height="4dp"
android:indeterminate="true"
app:mpb_progressStyle="horizontal"
app:mpb_useIntrinsicPadding="false"
android:layout_alignParentBottom="true"
style="#style/Widget.MaterialProgressBar.ProgressBar.Horizontal" />
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
You can visit my github for more information Horizontal Progressbar below toolbar or watch this youtube tutorial Toolbar with Horizontal Progressbar
Try this, will show under statusBar
<androidx.coordinatorlayout.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">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
app:elevation="0dp"
android:elevation="0dp">
<ProgressBar
android:id="#+id/progressbar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="true"
android:max="100"
android:layout_marginTop="-7dp"
android:layout_marginBottom="-7dp"
android:visibility="visible" />
<androidx.appcompat.widget.Toolbar