i don't know why, but seems that when the toolbar collapse, appears a second status bar.
I used android:fitsSystemWindows="true" in all components, because without this the toolbar came out from the status bar.
Here are some images to better explain:
Images
I have never seen such a thing, and I tried them all but I do not know how to solve it.
I could not find anything on the net.
Here the code:
Layout:
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:statusBarScrim="?attr/colorPrimaryDark"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed" >
<ImageView
android:id="#+id/photo_actor"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax"
android:fitsSystemWindows="true"
android:background="#drawable/background_protection" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</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"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp"
android:orientation="vertical">
<WebView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
android:id="#+id/webview_bio"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
Activity onCreate:
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
if(collapsingToolbarLayout!=null){
collapsingToolbarLayout.setTitle(advm.getName());
}
Styles: (the one I use in the current Activity is the second)
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:textColor">#color/text_color</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
It seems an extra-padding added by CollapsingToolbarLayout on its fitSystemWindows().
I think you have to enable <item name="android:windowTranslucentStatus">true</item> too at theme level (API19+), to get a stable layout as it was in fullscreen mode.
Whoever faces this issue, add this to parent elements:
android:fitsSystemWindows="true"
In above code I think it will be :
<android.support.design.widget.AppBarLayout
android:fitsSystemWindows="true"
...
>
...
</android.support.design.widget.AppBarLayout>
Good luck,'.
Related
I just want bring my navigation drawer under status bar every thing works fine but problem is my status bar is shadow .
How can i change it to transparent , like play store app .
Here is my app theme
<item name="colorPrimary">#color/colorPrimaryDark</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#android:color/white</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">?attr/colorControlHighlight</item>
and main activity xml
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- This LinearLayout represents the contents of the screen -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- The ActionBar displayed at the top -->
<include
layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:background="?attr/colorPrimary"
android:elevation="0dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="#id/tab_layout"/>
<!-- The main content view where fragments are loaded -->
<FrameLayout
android:id="#+id/flContent"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nvView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:headerLayout="#layout/nav_header"
android:fitsSystemWindows="false"
android:layout_gravity="start"
app:menu="#menu/drawer_view" />
</android.support.v4.widget.DrawerLayout>
You can simply change Android status bar color as transparent.
this will help you.
Window window = activity.getWindow();
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
/*----set color----*/
window.setStatusBarColor(activity.getResources().getColor(R.color.my_statusbar_color));
ok i fix it my self if you have similar problem remove all these lines from your theme
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
and just add
android:fitsSystemWindows="true"
to your main liniear layout
It is self Q&A post
I have transparent ActionBar which overlays layout. After migration to the latest support library I have been forced to get rid off the ActionBar in favor of the Toolbar. The old ways to make it transparent and overlay that layout doesn't work anymore.
<style name="CustomActionBarTheme" parent="#android:style/Theme.AppCompat">
<item name="android:windowActionBarOverlay">true</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:actionBarStyle">#style/TransparentActionBar</item>
</style>
<style name="TransparentActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#android:color/transparent</item>
</style>
Create your toolbar.xml file with background of AppBarLayout is #null
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:id="#+id/general_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Login"
android:textSize="20sp"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
and here is result:
All you need to is to define theme which hide action bar, define action bar style with transparent background and set this style to the toolbar widget. Please note that toolbar should be drawen as last view (over all view tree)
<style name="Theme.Custom" parent="#android:style/Theme.AppCompat">
<item name="windowActionBar">false</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:windowActionBarOverlay">true</item>
</style>
<style name="CustomActionBar" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:windowActionBarOverlay">true</item>
<!-- Support library compatibility -->
<item name="windowActionBarOverlay">true</item>
</style>
Layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Toolbar should be above content-->
<include layout="#layout/toolbar" />
</RelativeLayout>
Toolbar layout:
<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/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme="#style/CustomActionBar"/>
Checking Google's example Source Code I found out how to make the toolbar completely transparent. It was simpler than I thought. We just have to create a simple Shape drawable like this.
The name of the drawable is toolbar_bg
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="90"
android:startColor="#android:color/transparent"
android:endColor="#android:color/transparent"
android:type="linear" />
</shape>
And then in the fragment or activity.. Add the toolbar like this.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="#drawable/toolbar_bg"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
And here we will have a fully transparent toolbar.
Don't add the <android.support.design.widget.AppBarLayout > if you do, this won't work.
Note: If you need the AppBarLayout, set the elevation to 0 so it doesn't draw its shadow.
The Toolbar works like a View, so the answer it's very simple.
toolbar.getBackground().setAlpha(0);
Only this worked for me (AndroidX support library):
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
android:theme="#style/AppTheme.AppBarOverlay"
android:translationZ="0.1dp"
app:elevation="0dp">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#null"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>
This code removes background in all necessary views and also removes shadow from AppBarLayout (which was a problem)
Answer was found here: remove shadow below AppBarLayout widget android
Add the following line in style.xml
<style name="Base.Theme.AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppTheme" parent="Base.Theme.AppTheme">
</style>
Now add the following line in style-v21,
<style name="AppTheme" parent="Base.Theme.AppTheme">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
and set the theme as
android:theme="#style/AppTheme"
It will make the status bar transparent.
Just add android:background="#android:color/transparent" like below in your appbar layout
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>`
Just use the following xml code:
Code for the layout:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/def_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#color/toolbarTransparent"
android:layout_alignParentTop="true" />
And add the following code in the colors.xml:
<color name="toolbarTransparent">#00FFFFFF</color>
This will give you the desired output.
Perhaps you need to take a look at this post transparent Actionbar with AppCompat-v7 21
Points that the post suggest are
Just ensure that you use RelativeLayout to lay Toolbar and the body.
Put the Toolbar in the last.
Put transparent color for android:background attribute of the Toolbar
This should solve the problem without too much hassle.
The simplest way to put a Toolbar transparent is to define a opacity in #colors section, define a TransparentTheme in #styles section and then put these defines in your toolbar.
#colors.xml
<color name="actionbar_opacity">#33000000</color>
#styles.xml
<style name="TransparentToolbar" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:windowActionBarOverlay">true</item>
<item name="windowActionBarOverlay">true</item>
</style>
#activity_main.xml
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:background="#color/actionbar_opacity"
app:theme="#style/TransparentToolbar"
android:layout_height="?attr/actionBarSize"/>
That's the result:
Screenshot transparent toolbar
I implemented translucent Toolbar by creating two Theme.AppCompat.Light.NoActionBar themes and setting colorPrimary attribute to transparent color.
1) Create one theme for opaque Toolbar:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Toolbar background color -->
<item name="colorPrimary">#ff212cff</item>
</style>
Second theme for transparent/overlay Toolbar:
<style name="AppTheme.Overlay" parent="AppTheme">
<item name="colorPrimary">#color/transparent</item>
</style>
2) In your activity layout, put Toolbar behind content so it can be displayed in front of it:
<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:orientation="vertical">
<fragment
android:id="#+id/container"
android:name="com.test.CustomFragment"
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/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</RelativeLayout>
3)
Apply the transparent theme to your acivity in AndroidManifest.xml
<activity
android:name="com.test.TransparentActivity"
android:parentActivityName="com.test.HomeActivity"
android:theme="#style/AppTheme.Overlay" >
<meta-data
android:name="android.support.PARENT_ACTIVITY"
android:value="com.test.HomeActivity" />
</activity>
I know am late for the party. I've created a simple class to manage the Toolbar transparency.
import android.annotation.SuppressLint;
import android.graphics.drawable.ColorDrawable;
import android.support.v7.widget.Toolbar;
public class TransparentToolbarManager {
private Toolbar mToolbar;
private ColorDrawable colorDrawable;
public static final int MAX_ALPHA = 255, MIN_ALPHA = 0;
public TransparentToolbarManager(Toolbar mToolbar) {
this.mToolbar = mToolbar;
this.colorDrawable = new ColorDrawable(mToolbar.getContext().getResources().getColor(R.color.colorPrimary));
}
public TransparentToolbarManager(Toolbar mToolbar, ColorDrawable colorDrawable) {
this.mToolbar = mToolbar;
this.colorDrawable = colorDrawable;
}
//Fading toolbar
public void manageFadingToolbar(int scrollDistance) {
if (mToolbar != null && colorDrawable != null) {
//FadeinAndOut according to the horizontal scrollValue
if (scrollDistance <= MAX_ALPHA && scrollDistance >= MIN_ALPHA) {
setToolbarAlpha(scrollDistance);
} else if (scrollDistance > MAX_ALPHA) {
setToolbarAlpha(MAX_ALPHA);
}
}
}
#SuppressLint("NewApi")
public void setToolbarAlpha(int i) {
colorDrawable.setAlpha(i);
if (CommonHelper.isSupport(16)) {
mToolbar.setBackground(colorDrawable);
} else {
mToolbar.setBackgroundDrawable(colorDrawable);
}
}
}
and the CommonHelper.isSupport()
public static boolean isSupport(int apiLevel) {
return Build.VERSION.SDK_INT >= apiLevel;
}
Just Add android:background="#10000000" in your AppBarLayout tag It works
https://stackoverflow.com/a/37672153/2914140 helped me.
I made this layout for an activity:
<?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:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/transparent" <- Add transparent color in AppBarLayout.
android:theme="#style/AppTheme.AppBarOverlay"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:theme="#style/ToolbarTheme"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:theme="#style/ToolbarTheme"
/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
<- Remove app:layout_behavior=...
/>
</android.support.design.widget.CoordinatorLayout>
If this doesn't work, in onCreate() of the activity write (where toolbar is #+id/toolbar):
toolbar.background.alpha = 0
If you want to set a semi-transparent color (like #30ff00ff), then set toolbar.setBackgroundColor(color). Or even set a background color of AppBarLayout.
In my case styles of AppBarLayout and Toolbar didn't play role.
try below code
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.Transparent"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
style.xml
<style name="AppTheme.Transparent" parent="ThemeOverlay.AppCompat.Light">
<item name="colorPrimary">#android:color/transparent</item>
<item name="colorControlActivated">#color/colorWhite</item>
<item name="colorControlNormal">#color/colorWhite</item>
</style>
for Support Toolbar v7 android.support.v7.widget.Toolbar:
code
toolbar.setBackground(null);
// or
toolbar.setBackgroundColor(ContextCompat.getColor(getContext(), android.R.color.transparent));
xml (android:background="#null" or android:background="#android:color/transparent")
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#null"
android:minHeight="?attr/actionBarSize"
android:theme="#style/Theme.AppCompat.Light.DarkActionBar">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:ellipsize="start"
android:singleLine="true"
android:textAppearance="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"/>
</android.support.v7.widget.Toolbar>
if Title is invisible, set textColor
Add below code to styles.xml file
<style name="LayoutPageTheme" parent="#style/Theme.AppCompat.Light.NoActionBar">
<item name="android:windowActionBarOverlay">true</item>
<!-- Support library compatibility -->
<item name="windowActionBarOverlay">true</item>
<item name="android:actionBarStyle">#style/TransparentActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="TransparentActionBar"
parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#android:color/transparent</item>
</style>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:popupTheme="#style/AppTheme.PopupOverlay" />
Don't forget to write: android:background="#android:color/transparent"
Go to res package and open color.xml.
Set color primary to #00000000.
In my app, I currently have 2 activities. I'm able to get the toolbar to display in the second one, but on the main one it won't show up in earlier APIs. If I run it on a Marshmallow device, it works fine, but I've tried running it on an emulator with API16 (4.1) and the toolbar just isn't there. I can open my second activity, and the toolbar for that appears, but not in the main one even though I have them implemented exactly the same. In my activity xml I have:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true"
android:background="#fafafa"
tools:context=".Quotr">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/main_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_quoter" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/mainFab"
android:src="#drawable/ic_add_white_24dp"
android:layout_margin="#dimen/fab_margin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:layout_gravity="end|bottom"
/>
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Change colors"
android:id="#+id/button"
android:visibility="invisible"
android:layout_above="#+id/mainFab"
android:layout_centerHorizontal="true"
android:layout_gravity="bottom"
android:layout_marginBottom="50dp"/>
</android.support.design.widget.CoordinatorLayout>
Then in my onCreate I have
Toolbar toolbar = (Toolbar) findViewById(R.id.main_toolbar);
setSupportActionBar(toolbar);
This is my styles.xml:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="NoActionBarTransparentNav" parent="AppTheme.NoActionBar" >
<item name="android:windowTranslucentNavigation">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
If I'm forgetting to post anything, the full source is at:
https://github.com/Ashanmaril/Quotr
For some reason the toolbar will display on Marshmallow and whatnot, but not in Jellybean.
In .java use
public class MainActivity extends Activity
or
public class MainActivity extends ActionBarActivity??
And try to force
if (android.os.Build.VERSION.SDK_INT > 13) {
ActionBar bar = getSupportActionBar();
bar.setLogo(R.drawable.myicon);
bar.setDisplayUseLogoEnabled(true);
bar.setDisplayShowHomeEnabled(true);
}
Finally figured it out. I had to wrap my toolbar in a LinearLayout for it to work
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/main_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
app:popupTheme="#style/AppTheme.PopupOverlay">
And that fixed it.
I am using the CoordinatorLayout using the default templates in Android Studio.
However when I scroll down, the notification bar (status bar) is scrolling off screen. The effect can be seen in this video.
https://youtu.be/1oAqEpg7N4I
I have included the relevant parts, but the rest of the code is available here:
https://github.com/vidia/MaterialDiningCourts/blob/master/app/src/main/res/layout/activity_meal_view.xml
In the demo (cheesesquare) the behavior is what I expect, to leave the notification bar in place and the Toolbar scrolls out underneath it. I have scoured those layouts and made changes in my code to match them, but haven't been able to find the necessary change.
What is causing the notification bar to scroll off the page, and why does the sample in Android Studio have this incorrect behavior?
<?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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MealViewActivity">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<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.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"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<Spinner
android:id="#+id/meal_chooser_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTabLayout"
android:foregroundGravity="top"
app:tabIndicatorColor="#color/tabSelectedIndicatorColor"/>
</android.support.design.widget.AppBarLayout>
And styles.xml, though I have removed my custom themes from this file and it doesnt help the issue.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="#style/Theme.AppCompat.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<!-- Required from http://stackoverflow.com/a/29014475/2193387 -->
<item name="android:datePickerDialogTheme">#style/dateDialogTheme</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<style name="AppTabLayout" parent="Widget.Design.TabLayout">
<!--<item name="tabMaxWidth">#dimen/tab_max_width</item>-->
<item name="tabIndicatorColor">#color/tabIndicatorColor</item>
<item name="tabIndicatorHeight">4dp</item>
<!--<item name="tabPaddingStart">6dp</item>-->
<!--<item name="tabPaddingEnd">6dp</item>-->
<!--<item name="tabBackground">?attr/selectableItemBackground</item>-->
<item name="tabTextAppearance">#style/AppTabTextAppearance</item>
<item name="tabSelectedTextColor">#color/white</item>
</style>
<style name="AppTabTextAppearance" parent="TextAppearance.Design.Tab">
<item name="android:textSize">12sp</item>
<item name="android:textColor">#color/tabUnselectedTextColor</item>
<item name="textAllCaps">true</item>
</style>
<!-- TODO: Change to use AppCompat rather than Material -->
<style name="dateDialogTheme" parent="android:Theme.Material.Light.Dialog">
<!-- Required from http://stackoverflow.com/a/29014475/2193387 -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
The disappearing status bar effect is the result of these definitions in values-21/styles.xml:
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
With these definitions, the system no longer draws system bar background. What you see as status bar background is actually drawn by CoordinatingLayout, beyond the now-transparent system bar. Now, when you scroll, CoordinatedLayout scrolls AppBarLayout up, and its content is visible through the transparent system bar.
You have two options to fix this:
Make the status bar opaque
Additionally use CollapsingToolbarLayout, and set status bar scrim
I was also running into this issue and after some time I figured out, that I had to remove
android:fitsSystemWindows="true"
from CoordinatorLayout
I'm not quite sure why, but I think it is only required for the NavigationDrawer, because according to material design guidlines it overlays the status bar and there I needed to set this tag true.
Hope this is also working for you.
Add this to your CoordinatorLayout:
android:fitsSystemWindows="true"
or try with this:
<android.support.design.widget.CoordinatorLayout
...
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<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.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
...
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:foregroundGravity="top"
... />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
To solve it you have to remove this line:
android:fitsSystemWindows="true"
It solves the problem for me.
I managed to get rid of this behaviour by removing the line below in the toolbar inside CoordinatorLayout:
<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" << this one
app:popupTheme="#style/AppTheme.PopupOverlay">
It is self Q&A post
I have transparent ActionBar which overlays layout. After migration to the latest support library I have been forced to get rid off the ActionBar in favor of the Toolbar. The old ways to make it transparent and overlay that layout doesn't work anymore.
<style name="CustomActionBarTheme" parent="#android:style/Theme.AppCompat">
<item name="android:windowActionBarOverlay">true</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:actionBarStyle">#style/TransparentActionBar</item>
</style>
<style name="TransparentActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#android:color/transparent</item>
</style>
Create your toolbar.xml file with background of AppBarLayout is #null
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:id="#+id/general_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Login"
android:textSize="20sp"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
and here is result:
All you need to is to define theme which hide action bar, define action bar style with transparent background and set this style to the toolbar widget. Please note that toolbar should be drawen as last view (over all view tree)
<style name="Theme.Custom" parent="#android:style/Theme.AppCompat">
<item name="windowActionBar">false</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:windowActionBarOverlay">true</item>
</style>
<style name="CustomActionBar" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:windowActionBarOverlay">true</item>
<!-- Support library compatibility -->
<item name="windowActionBarOverlay">true</item>
</style>
Layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Toolbar should be above content-->
<include layout="#layout/toolbar" />
</RelativeLayout>
Toolbar layout:
<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/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme="#style/CustomActionBar"/>
Checking Google's example Source Code I found out how to make the toolbar completely transparent. It was simpler than I thought. We just have to create a simple Shape drawable like this.
The name of the drawable is toolbar_bg
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="90"
android:startColor="#android:color/transparent"
android:endColor="#android:color/transparent"
android:type="linear" />
</shape>
And then in the fragment or activity.. Add the toolbar like this.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="#drawable/toolbar_bg"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
And here we will have a fully transparent toolbar.
Don't add the <android.support.design.widget.AppBarLayout > if you do, this won't work.
Note: If you need the AppBarLayout, set the elevation to 0 so it doesn't draw its shadow.
The Toolbar works like a View, so the answer it's very simple.
toolbar.getBackground().setAlpha(0);
Only this worked for me (AndroidX support library):
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
android:theme="#style/AppTheme.AppBarOverlay"
android:translationZ="0.1dp"
app:elevation="0dp">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#null"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>
This code removes background in all necessary views and also removes shadow from AppBarLayout (which was a problem)
Answer was found here: remove shadow below AppBarLayout widget android
Add the following line in style.xml
<style name="Base.Theme.AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppTheme" parent="Base.Theme.AppTheme">
</style>
Now add the following line in style-v21,
<style name="AppTheme" parent="Base.Theme.AppTheme">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
and set the theme as
android:theme="#style/AppTheme"
It will make the status bar transparent.
Just add android:background="#android:color/transparent" like below in your appbar layout
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>`
Just use the following xml code:
Code for the layout:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/def_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#color/toolbarTransparent"
android:layout_alignParentTop="true" />
And add the following code in the colors.xml:
<color name="toolbarTransparent">#00FFFFFF</color>
This will give you the desired output.
Perhaps you need to take a look at this post transparent Actionbar with AppCompat-v7 21
Points that the post suggest are
Just ensure that you use RelativeLayout to lay Toolbar and the body.
Put the Toolbar in the last.
Put transparent color for android:background attribute of the Toolbar
This should solve the problem without too much hassle.
The simplest way to put a Toolbar transparent is to define a opacity in #colors section, define a TransparentTheme in #styles section and then put these defines in your toolbar.
#colors.xml
<color name="actionbar_opacity">#33000000</color>
#styles.xml
<style name="TransparentToolbar" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:windowActionBarOverlay">true</item>
<item name="windowActionBarOverlay">true</item>
</style>
#activity_main.xml
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:background="#color/actionbar_opacity"
app:theme="#style/TransparentToolbar"
android:layout_height="?attr/actionBarSize"/>
That's the result:
Screenshot transparent toolbar
I implemented translucent Toolbar by creating two Theme.AppCompat.Light.NoActionBar themes and setting colorPrimary attribute to transparent color.
1) Create one theme for opaque Toolbar:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Toolbar background color -->
<item name="colorPrimary">#ff212cff</item>
</style>
Second theme for transparent/overlay Toolbar:
<style name="AppTheme.Overlay" parent="AppTheme">
<item name="colorPrimary">#color/transparent</item>
</style>
2) In your activity layout, put Toolbar behind content so it can be displayed in front of it:
<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:orientation="vertical">
<fragment
android:id="#+id/container"
android:name="com.test.CustomFragment"
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/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</RelativeLayout>
3)
Apply the transparent theme to your acivity in AndroidManifest.xml
<activity
android:name="com.test.TransparentActivity"
android:parentActivityName="com.test.HomeActivity"
android:theme="#style/AppTheme.Overlay" >
<meta-data
android:name="android.support.PARENT_ACTIVITY"
android:value="com.test.HomeActivity" />
</activity>
I know am late for the party. I've created a simple class to manage the Toolbar transparency.
import android.annotation.SuppressLint;
import android.graphics.drawable.ColorDrawable;
import android.support.v7.widget.Toolbar;
public class TransparentToolbarManager {
private Toolbar mToolbar;
private ColorDrawable colorDrawable;
public static final int MAX_ALPHA = 255, MIN_ALPHA = 0;
public TransparentToolbarManager(Toolbar mToolbar) {
this.mToolbar = mToolbar;
this.colorDrawable = new ColorDrawable(mToolbar.getContext().getResources().getColor(R.color.colorPrimary));
}
public TransparentToolbarManager(Toolbar mToolbar, ColorDrawable colorDrawable) {
this.mToolbar = mToolbar;
this.colorDrawable = colorDrawable;
}
//Fading toolbar
public void manageFadingToolbar(int scrollDistance) {
if (mToolbar != null && colorDrawable != null) {
//FadeinAndOut according to the horizontal scrollValue
if (scrollDistance <= MAX_ALPHA && scrollDistance >= MIN_ALPHA) {
setToolbarAlpha(scrollDistance);
} else if (scrollDistance > MAX_ALPHA) {
setToolbarAlpha(MAX_ALPHA);
}
}
}
#SuppressLint("NewApi")
public void setToolbarAlpha(int i) {
colorDrawable.setAlpha(i);
if (CommonHelper.isSupport(16)) {
mToolbar.setBackground(colorDrawable);
} else {
mToolbar.setBackgroundDrawable(colorDrawable);
}
}
}
and the CommonHelper.isSupport()
public static boolean isSupport(int apiLevel) {
return Build.VERSION.SDK_INT >= apiLevel;
}
Just Add android:background="#10000000" in your AppBarLayout tag It works
https://stackoverflow.com/a/37672153/2914140 helped me.
I made this layout for an activity:
<?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:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/transparent" <- Add transparent color in AppBarLayout.
android:theme="#style/AppTheme.AppBarOverlay"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:theme="#style/ToolbarTheme"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:theme="#style/ToolbarTheme"
/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
<- Remove app:layout_behavior=...
/>
</android.support.design.widget.CoordinatorLayout>
If this doesn't work, in onCreate() of the activity write (where toolbar is #+id/toolbar):
toolbar.background.alpha = 0
If you want to set a semi-transparent color (like #30ff00ff), then set toolbar.setBackgroundColor(color). Or even set a background color of AppBarLayout.
In my case styles of AppBarLayout and Toolbar didn't play role.
try below code
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.Transparent"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
style.xml
<style name="AppTheme.Transparent" parent="ThemeOverlay.AppCompat.Light">
<item name="colorPrimary">#android:color/transparent</item>
<item name="colorControlActivated">#color/colorWhite</item>
<item name="colorControlNormal">#color/colorWhite</item>
</style>
for Support Toolbar v7 android.support.v7.widget.Toolbar:
code
toolbar.setBackground(null);
// or
toolbar.setBackgroundColor(ContextCompat.getColor(getContext(), android.R.color.transparent));
xml (android:background="#null" or android:background="#android:color/transparent")
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#null"
android:minHeight="?attr/actionBarSize"
android:theme="#style/Theme.AppCompat.Light.DarkActionBar">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:ellipsize="start"
android:singleLine="true"
android:textAppearance="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"/>
</android.support.v7.widget.Toolbar>
if Title is invisible, set textColor
Add below code to styles.xml file
<style name="LayoutPageTheme" parent="#style/Theme.AppCompat.Light.NoActionBar">
<item name="android:windowActionBarOverlay">true</item>
<!-- Support library compatibility -->
<item name="windowActionBarOverlay">true</item>
<item name="android:actionBarStyle">#style/TransparentActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="TransparentActionBar"
parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#android:color/transparent</item>
</style>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:popupTheme="#style/AppTheme.PopupOverlay" />
Don't forget to write: android:background="#android:color/transparent"
Go to res package and open color.xml.
Set color primary to #00000000.