My app has a fragment with tablayout and it shows a shadow with elevation:
<android.support.design.widget.TabLayout
android:id="#+id/my_music_tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/tab_bg"
android:elevation="4dp"
app:tabSelectedTextColor="?attr/color_tab_text_selected"
app:tabTextColor="?attr/color_tab_text"
app:tabIndicatorColor="?attr/color_tab_text_selected"
app:tabIndicatorHeight="4dp" />
But when I switch to another fragment that doesn't have a TabLayout, the shadow doesn't appear:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay"
app:expanded="true" >
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false" >
<include
layout="#layout/imageview_appbar"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
android:elevation="4dp"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
What am I doing wrong?
I got it to work by adding the following codes to my MainActivity class:
AppBarLayout layout = (AppBarLayout) findViewById(R.id.appbar);
layout.setStateListAnimator(null);
ViewCompat.setElevation(layout, 8);
Appbarlayout doesn't display shadow if it contains a scrollable collapsing toolbar, it is hardcoded to act so, probably because of performance concerns.
Try workarounds such as adding a plain view to bottom of appbar and setting its background to a shadow drawable ( manually coded gray gradient )
Related
How to make Toolbar and TabLayout still visible even when CollapsingToolbarLayout is collapsed?
For example, i have a CollapsingToolbarLayout with app:contentScrim animation that contains a Toolbar, ImageView and TabLayout but i want to hide the ImageView when scrolling, but still show the Toolbar and TabLayout inside the CollapsingToolbarLayout even when i swipe up and collapse the view.
I want the Toolbar and TabLayout background to animate into a transparent color when expanding the CollapsingToolbarLayout, and should animate into a solid color as specified by app:contentScrim when collapsing the view.
I'm trying to achieve such in the image:
Image Credits: CollapsingToolBarLayout with TabLayout and ViewPager
I think i found a solution:
<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/htab_maincontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/htab_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/htab_collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:titleEnabled="false">
<ImageView
android:id="#+id/htab_header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/header"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0.3"
android:background="#android:color/black"
android:fitsSystemWindows="true"/>
<android.support.v7.widget.Toolbar
android:id="#+id/htab_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
android:layout_marginBottom="48dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<android.support.design.widget.TabLayout
android:id="#+id/htab_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:tabIndicatorColor="#android:color/white"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#color/white_70"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/htab_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/></android.support.design.widget.CoordinatorLayout>
Credits: https://blog.iamsuleiman.com/parallax-scrolling-tabs-design-support-library/comment-page-3/#comment-52129
i am using collapsing toolbar with toolbar only here my purpose
is to use default parallex feature for toolbar,but the problem i am facing that back arrow and title in expanded form overlapping each other i tried to set expandedtitlegravity to bottom didn't work either
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="140dp"
android:background="#color/white"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:fitsSystemWindows="true"
app:collapsedTitleTextAppearance="#style/SavedCollapsedAppBar"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="20dp"
app:expandedTitleMarginStart="20dp"
app:expandedTitleTextAppearance="#style/SavedExpandedAppBar"
app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlways">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/white"
android:fontFamily="sans-serif-medium"
android:theme="#style/SavedToolbarColoredBackArrow"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme"
app:titleTextAppearance="#style/SavedCollapsedAppBar"
app:titleTextColor="#color/black" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
It's seems like, the problem is with the Toolbar.
set app:contentInsetStart in Toolbar i.e.
<android.support.v7.widget.Toolbar
...
app:contentInsetStart="72dp"
It may solve the problem.
I use CollapsingToolbarLayout in my app but when it was collapsed, there is a marginLeft and marginRight in toolbar like picture below.
When I set the toolbar background not transparent ,such as red,it look as normal.
So how should I remove the margin？
I want it be this below but background to be transparent
my xml code is
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/transparent">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:collapsedTitleGravity="center_horizontal"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:expandedTitleGravity="center_horizontal"
app:statusBarScrim="#color/transparent"
app:contentScrim="#color/transparent"
app:expandedTitleTextAppearance="#style/CollapsingToolbarLayoutExpandedText"
app:collapsedTitleTextAppearance="#style/CollapsingToolbarLayoutCollapsedText"
app:expandedTitleMarginTop="0dp"
app:expandedTitleMarginBottom="20dp">
<View
android:id="#+id/venueImage"
android:layout_width="match_parent"
android:layout_height="100dp"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/transparent"
android:layout_marginTop="#dimen/status_bar_height"
app:layout_collapseMode="pin"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Adding app:elevation="0dp" to the AppBarLayout widget fixed this for me.
Also in my layout I have AppBarLayout nested inside CoordinatorLayout whereas your's is the reverse.
You can also set android:stateListAnimator null in your AppBarLayout; something like
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stateListAnimator="#null"> // This works
I have a layout with Toolbar and TablLayout with some nice collapsing effect seen below with the help of a CollapsingToolbarLayout:
The first picture is OK. This is the behavior I want.
But the collapsed state have the toolbar in wrong place:
As you can see the Toolbar is below its default place regardless I set it's gravity to top.
Here is the full layout:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="215dp"
app:expandedTitleMarginBottom="56dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/big_header"
android:fitsSystemWindows="true"
android:scaleType="centerInside"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="104dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="13dp"
/>
<android.support.design.widget.TabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
style="#style/CustomTabLayout"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom" />
</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:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>
I would like to place the toolbar to its place, next to the "back" button in the non-collapsed state. Please help if you can.
This is a known problem which I too have faced. You need to "hack it" a bit.
If you don't need your title to animate from big to small, just put collapsingToolbar.titleEnabled = false, and use your Toolbar title instead.
If you want your title to animate from big to small in the Collapsing Toolbar, you can hack it like this:
Add an appBarLayout OffsetChanged listener and put in it this code:
if (Math.Abs(e.verticalOffset) >= appBarLayout.totalScrollRange - 35) //Play with the number, and you should probably use dp instead of a hardcoded pixel number.
{
collapsingToolbar.titleEnabled = false;
SupportActionBar.title = "YourTitle";
}
else
{
collapsingToolbar.titleEnabled = true;
SupportActionBar.title = "";
}
It flips between the two titles...
I found a simpler solution without any hacking and in pure xml:
use expandedTitleMarginBottom in CollapsingToolbarLayout to avoid expanded title overlapping TabLayout
set layout_height to TabLayout as constant value
add layout_marginBottom to Toolbar with same value as TabLayout layout_height
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="215dp"
app:expandedTitleMarginBottom="78dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/big_header"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="?attr/actionBarSize"
app:layout_collapseMode="pin" />
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
trying to build an Android app with a collapsingtoolbarlayout and a view element that always sticks directly below the bottom of the toolbar.
I think I'm just messing up my organization within the whole appbarlayout, but I can't seem to figure out the right ordering.
Any help would be great!
Thanks-
Here's my Activity xml
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="244dp"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:collapsedTitleTextAppearance="#style/CollapsedTheme"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleGravity="center|bottom"
app:expandedTitleMarginBottom="20dp"
app:expandedTitleMarginEnd="20dp"
app:expandedTitleMarginStart="20dp"
app:expandedTitleTextAppearance="#style/ExpandedTheme"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:theme="#style/ToolbarColoredBackArrow">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="180dp"
android:orientation="vertical">
</LinearLayout>
<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/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_product" />
And I'm trying to add in
<RelativeLayout
android:layout_below="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="20dp"
android:background="#color/blue"/>
So that it always stays below the toolbar, but when the collapsingtoolbarlayout scrolls to the top of the screen, it stays sticking below it.
An AppBarLayout extends LinearLayout - just add your RelativeLayout below your CollapsingToolbarLayout and don't include any layout_scrollFlags.
<AppBarLayout>
<CollapsingToolbarLayout />
<RelativeLayout />
</AppBarLayout>