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">
Related
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.
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
Using the CoordinatorLayout to hide my toolbar when scrolling down.
The toolbar thinks it's hidden - But it's not.
Does anyone understand why this is happening?
Note: I have the status bar set to translucent to have proper material drawers. Making the status bar a solid color is not the solution I'm looking for - Unless of course that is how this was intended to be used.
I try to set statusbar color as the primarydark, then statusbar can not be transparent when drawer is opened otherwise toolbar comes out again.
After two days work, I found that if I remove the android:fitsSystemWindows="true" in my CoordinatorLayout, it solved.
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<-- CoordinatorLayout is root of #layout/app_bar_home-->
<include
layout="#layout/app_bar_home"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_home"
app:menu="#menu/activity_home_drawer" />
Not exactly sure what I was doing wrong but I was able to resolve this by following these examples:
https://github.com/chrisbanes/cheesesquare/blob/master/app/src/main/res/layout/activity_detail.xml
https://github.com/chrisbanes/cheesesquare/blob/f9eb39d29ea057b56e270263fa26f76e0bf3e77a/app/src/main/res/layout/include_list_viewpager.xml
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"
In my app I've got a theme without an action bar, but for one of my activities I need an action bar with white title. So, here is it's code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:background="#color/color_primary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:title="Title"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<fragment android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/toolbar"
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"/>
</RelativeLayout>
As you see, this activity also contains Google Maps Fragment.
Result:
As you see, title color is not white. Why? I wonder.
After #Raghunandan: Just add this string to you AppBaseTheme in styles.xml:
<item name="android:textColorPrimary">#android:color/white</item>
Try this
toolbar.setTitleTextColor(Color.WHITE);
Hope this helps
if(Build.VERSION.SDK_INT>=11){
android.app.ActionBar ab=getActionBar();
ab.setBackgroundDrawable(new ColorDrawable(0xff3b3f54));//3b3f54 is html color code for purple, you can put any desired color code like ffffff for white
ab.setDisplayHomeAsUpEnabled(true);
}