Kindly assume everything is only for target and minSDK vesion is lollipop only.
What I want
I am trying to implement an activity similar to the following screen from play store.
I am focusing on the Hero image here. As you see,
1. hero image is drawn behind status bar. (Completely transparent. No protection)
2. Rest of the content is drawn below status bar. (Eg., Toolbar/ActionBar)
3. While scrolling the status bar is colored.
What I have done
I have used ScrimInsetsFrameLayout from GoogleIO app. Wrapped my hero image around this layout. Added proper styling in my theme. This is what I get
Help I need
I am still confused about fitsSystemWindows tag. When I set this to "true" on the hero image layout, nothing happens. That is status bar is transparent but image is drawn below status bar. If set to "false", I get the above result. Is there a clear article that explains the usage and behind the scenes of this tag.
I set the "insetForeground" on ScrimInsetFrameLayout to transparent. Also in the theme I set the status bar color as transparent. But still there is a protection over the image. How to make the status bar completely transparent.
Kindly help me with a pointers or demo projects. Also let me know if i am not clear or need more info.
This works for me.
layout.xml
<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:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/detail_backdrop_height"
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="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/parallax_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/fragmentContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
and set statusBarColor attribute with transparent color at styles.xml v-21
Add the following line to the view where you don't want the toolbar to overlap:
app:layout_behavior="#string/appbar_scrolling_view_behavior"
Related
I am trying to use CoordinatorLayout for the first time. From reading the docs and searching for tutorials, I didn't really understand anything about it.
I tried playing around with the code. So what I need is something like the following:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="300dp"
app:title="#string/the_title"
app:expandedTitleMarginBottom="94dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:expandedTitleTextAppearance="#style/CollapsingTextAppearance.Inverse"
app:contentScrim="?colorPrimary"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:src="#drawable/london_flat"
android:scaleType="centerCrop"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/flexible.example.toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#null"
app:layout_collapseMode="pin"
style="#style/ToolBarWithNavigationBack"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
which I got from a tutorial and when scrolling up as the image moves out and the toolbar starts to get opaque the app:title="#string/the_title" is used to be moved up and be the actual text in the app bar once the image has moved out.
How can I modify this so that there is no text in app:title and as we scroll up either I set the actual text once the action bar becomes opaque or I use another TextView to move its copy there?
I'm using a custom AppBarLayout because I want a custom shape for my toolbar with an elevation shadow. The background is set on the AppBarLayout as a custom Drawable and I use the following code to to get the shadow to render on the toolbar.
setClipToOutline(true);
setOutlineProvider(ViewOutlineProvider.BACKGROUND);
All is good, the shadow renders. However, my CollapsingToolbarLayout also contains some tabs and when I collapse the toolbar I want my tabs to stay visible. Currently when I scroll the entire toolbar disappears including the tabs ands it's only when I set exitUntilCollapse on the CollapsingToolbarLayout that the tabs remain after scrolling. The catch is when I set this flag my elevation shadow stops rendering! Why could this be? Is there a way around it, is there another way to stop my tabs disappearing?
I've included some of my relevant layout code below:
<com.ss.views.CustomBackgroundAppBarLayout
android:id="#+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="350dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_behavior="com.ss.views.FlingBehaviour"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:expandedTitleMarginBottom="0dp"
app:expandedTitleMarginEnd="0dp"
app:expandedTitleMarginStart="0dp"
app:expandedTitleMarginTop="0dp"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
app:titleEnabled="false"
>
<include
android:id="#+id/tab_layout"
layout="#layout/include_tab_layout"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/main.toolbar"
android:minHeight="100dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
/>
<include
android:id="#+id/user_dash"
app:layout_collapseMode="parallax"
layout="#layout/include_toolbar_user_dash"/>
</android.support.design.widget.CollapsingToolbarLayout>
</com.ss.views.CustomBackgroundAppBarLayout>
I updated my dependencies to v24 but now my CollapsingToolbarLayout is broken. I used it to show an image(using setBackground) when the user didn't scroll yet, after that it would turn blue. Now it keeps showing the image and there's a white bar under it that covers my content, yet I haven't changed anything in my code. Here's an image(changed to red the background on purpose): http://imgur.com/a/lwl1Y.
See the toolbar has an image on it instead of being a solid color?also you can see the title gets cut off by a red-colored bar under the toolbar. Here are the layouts(which are simply edited layouts from the android studio template):
<android.support.design.widget.AppBarLayout
android:id="#+id/viewarticle_appbarlayout"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/article_collapsingtoolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<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_view_article" />
</android.support.design.widget.CoordinatorLayout>
content_view_article.xml
</android.support.v4.widget.NestedScrollView>
Edit: I was using v 24.0.3 of the support libraries, I updated everything to 24.2.1 and the invisible bar is gone. The background problem remains though
I want an invisible toolbar but I want the back arrow and title to be displayed.
For achieving this, I did the following:
<?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"
android:fitsSystemWindows="true"
tools:context="com.abc.xyz.AboutActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
android:background="#color/toolbarTransparent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/header_about"
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="#color/colorAccent"/>
<ImageView
android:id="#+id/a"
android:layout_width="match_parent"
android:layout_height="70dp"
android:src="#drawable/a"
app:layout_anchor="#id/header_about"
app:layout_anchorGravity="bottom|center"/>
<include layout="#layout/content_about"/>
</android.support.design.widget.CoordinatorLayout>
But, I'm getting the following result (Look how toolbar is still appearing to be there):
I want the toolbar to get invisible and only the title and back arrow to be shown.
Please let me know how can I achieve that.
Sorry for bad format of the question. I'm still a beginner here.
AppBarLayout has default elevation value and that is why you can see shadow. You can set AppBarLayout elevation to 0dp
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
app:elevation="0dp"
android:background="#color/toolbarTransparent">
or just remove AppBarLayout. Toolbar is transparent by default.
If you want to use AppBarLayout with transparent background on Android Lolipop version and greater - set outline provider to BACKGROUND like below:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
appBarLayout.setOutlineProvider(ViewOutlineProvider.BACKGROUND);
}
In this case when your background is transparent shadow will be not visible.
please check the android manifest file it should have AppTheme.NoActionBar then u will be able to hide it
Update
I was looking into this because when I changed the size of the spacer manually it caused stuttering and thought the CollapsingToolbarLayout will help fix it.
Reading https://stackoverflow.com/a/16103503/2482564 help me fix the stuttering by using ObjectAnimator and setting its duration to 0.
I'm keeping the question open in case someone has a solution with CollapsingToolbarLayout
Original question
I'm trying to achieve the following behavior with CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout, Toolbar and TabLayout - whichever is appropriate for the task...
I want my initial view to look like this mockup
and the behavior when scrolling up should be:
the area marked in yellow disappears 1st
the area marked in blue disappears 2nd - it's only an area with color, no text
the area marked in pink - the tabs area, remains on the screen and is located at the top of the screen
I tried to work with the cheesesquare example and modified include_list_viewpager with the code below, but I get the normal collapsing tabs behavior with the shrinking title
<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">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:minHeight="50dp"
android:background="#color/cardview_dark_background"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="50dp"
android:background="#color/cardview_shadow_start_color"
android:gravity="top"
android:orientation="vertical"
app:layout_collapseMode="pin">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/cardview_light_background"/>
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
any idea what should be changed to get the behavior I want? I tried other methods of changing the size of the spacer area manually, but it causes flickering on screen since I'm intruding in the middle of the scroll event
Remove the app:layout_scrollFlags="scroll|exitUntilCollapsed" from your CollapsingToolbarLayout