I'm currently trying to use coordinator layout in order to collapse an image - in a theme with transparent status bar -, however three issues are bothering me:
When Activity is started, image is not being displayed behind the status bar (if I remove the coordinatorlayout, it works);
When I scroll up, I would like to change the status bar to a solid color, but a piece of the image remains showing;
After adding AppBarLayout and CollapsingToolbarLayout the bottom of the image - with the same height of the status bar - get cut;
Image remains below status bar - even though it is set to be transparent in the theme
Status bar after collapsing - it should have a solid color
Code:
<?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"
android:background="#color/colorPrimary"
android:orientation="vertical">
<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="wrap_content"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
app:statusBarScrim="#color/colorPrimary"
app:contentScrim="#color/colorPrimaryDark">
<RelativeLayout
android:id="#+id/cover_wrapper"
android:layout_width="match_parent"
android:layout_height="#dimen/rsc_character_details_cover_height">
<ImageView
android:id="#+id/cover"
android:layout_width="match_parent" android:layout_height="#dimen/rsc_character_details_cover_height"/>
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/cover_wrapper"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="6">
...
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
This is how I'm setting the status bar transparency:
<item name="android:windowTranslucentStatus">true</item>
Any help will be very appreciated.
Thank you very much.
For the problems with the image not being displayed behind the status bar and being cut off, anything that should be displayed in the status bar area should have android:fitsSystemWindows="true". ie. your cover_wrapper and cover.
Related
This question already has answers here:
Toolbar overlapping below status bar
(10 answers)
Closed 1 year ago.
I have received an android project code and I need to add material toolbar in a fragment. Everything went well but I noticed the toolbar always goes under OS status bar in the top of the screen as shown in the following screenshot:
So why toolbar header goes under the OS status bar here? and how to make status bar pushed to start where the OS status bar ends?
here is the fragment xml code:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/wifi_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/orange_500" />
<com.google.android.material.tabs.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/watch" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/downloads_item" />
</com.google.android.material.tabs.TabLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/wifi_view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Add below link into your parent xml tag which is CoordinatorLayout in your case. Toolbar will appear below the status bar.
android:fitsSystemWindows="true"
Are you using getWindow() in your activity ?
Please remove it and test again .
Have upgraded app to use Material Design - Theme.AppCompat.Light.NoActionBar, Toolbar instead of ActionBar etc..
And have a problem.
Bottom content become to be hidden under soft NavigationBar (see picture below) on devices with APi >= 21
Have found solution to fix this:
in values-v21/styles.xml
<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<item name="colorPrimaryDark">#color/green</item>
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
</styles>
if option <item name="android:windowDrawsSystemBarBackgrounds">false</item> - bottom content is visible, but statusbar become completely black. I cant change color to colorPrimaryDark (green in my case)
if option <item name="android:windowDrawsSystemBarBackgrounds">true</item> - bottom content is invisible, and statusbar is green, as expected.
I want to have statusbar colored(green) and visible bottom content..
Probably, issue is with toolbar. Is it pushes content down?
Any suggestions?
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
UPDATE:
As suggested #azizbekian, I've replaced container for fragmets to CoordinatorLayout(before FrameLayout) and applied android:fitsSystemWindows="true"
In this case bottom panel is visible, but not at the bottom..
Goal is to keep buttons athe bottom...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical">
<include
layout="#layout/toolbar"/>
<!-- The main content view -->
<android.support.design.widget.CoordinatorLayout
android:id="#+id/content"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
layout of the screen:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<FocusableScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/order_editor_layout"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
android:layout_width="match_parent"
android:layout_height="match_parent"
layout="#layout/o_e_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"/>
</RelativeLayout>
</FocusableScrollView>
<include
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/oe_bottom_pane"/>
</LinearLayout>
Here is result:
UPDATE#2
Activity Layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/ActionBarTheme"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<!-- The main content view -->
<FrameLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.design.widget.CoordinatorLayout>
Replaced LinearLayour with CoordinatorLayout as root for activity.
As root element for content I've keep FrameLayout.
Applied android:fitsSystemWindows="true" to CoordinatorLayout.
This way, all content was slightly moved up and part of placed below the toolbar(you can see on image below - top elements are circle with + and - symbold. But on previous images there are text on the top.) Regarding bottom elements (buttons panel) - still placed below navigation bar but also slightly moved up. I've marked android:background="#color/red" to easier recognize position of this panel.
Seems, we are on the right way. All we need - to resolve problem - why content moved below the toolbar.. If tolbar will be top ui elemnt, buttons will be visible..
Apply android:fitsSystemWindows="true" to your root view.
See this post for detailed explanation.
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
I've added a CollapsingToorbar, kept android:foreground=#bd1212 . But when it collapses the status bar colour becomes the default colour.
Can someone please tell me how to change the colour of the status bar?
The property "contentScrim" is what you are looking for:
<android.support.design.widget.CoordinatorLayout
android:id="#+id/place_activity_coordinator"
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="#FFFF">
...
...
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/place_activity_collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#8000" <!-- This color is what you need to change -->
app:expandedTitleTextAppearance="#style/collapsing_toolbar_expanded"
app:collapsedTitleTextAppearance="#style/collapsing_toolbar_collapsed"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
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"