I am using the new Android Design Library based on this example chrisbanes/cheesesquare in github and here
I have run the example and I am having problems with Toolbar inside CheeseDetailActivity. The toolbar isnt shown as it should. Have a look at the images below:
At first image you can see the toolbar isn't shown correctly.
At the second image you can see that the toolbar is shown correctly but the notification bar is white. This happens because I removed from actiivty_detail.xml android:fitsSystemWindows="true" from android.support.design.widget.CoordinatorLayout
I think that fitsSystemWindows should be true and the problem is related with android.support.design.widget.AppBarLayout but I don't have any idea how I can fix this problem. I tried with marginTop with the same height as notificationBar but it didn't work.
Any suggestion is appreciated :)
This is a part of the activity_detail.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:id="#+id/main_content"
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:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Change your Design Library with New Version build.gradle file in app folder like:
compile 'com.android.support:design:22.2.1'
As Updated in +AndroidDevelopers
I got output like:
It will helps you.
Thanks :)
Looks like this is a bug in com.android.support:design:22.2.0.
It will be fixed, it's marked as future release. So lets hope it will be soon.
Links with issues:
https://code.google.com/p/android/issues/detail?id=175240
and https://code.google.com/p/android/issues/detail?id=175069
had the same problem put in style with windowActionBar and windowNoTitle and decided my problem.
<style name="AppTheme.base" parent="Base.Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
Here is some working workaround for API 21:
if (Build.VERSION.SDK_INT == Build.VERSION_CODES.LOLLIPOP) {
marginResult = 0;
int resourceId = getResources().getIdentifier(getString(R.string.identifier_status_bar_height), getString(R.string.identifier_dimen), getString(R.string.identifier_android));
if (resourceId > 0) {
marginResult = getResources().getDimensionPixelSize(resourceId)*2;
}
CollapsingToolbarLayout.LayoutParams params = (CollapsingToolbarLayout.LayoutParams) mToolbar.getLayoutParams();
params.topMargin -= marginResult;
mToolbar.setLayoutParams(params);}
I had same problem, my toolbar was displaying wrong on API level greater than 21. I was using android.support.v7.widget.Toolbar as supportActionBar() and below content is in fragment, see pictures:
on aplication start, toolbar is displaying wrong
and when i colapse android.support.design.widget.CollapsingToolbarLayout, the picture is not hidden completely
I resolved this when i added android:fitsSystemWindows="true" attribute to the root element of view where Toolbar is located.
Now:
toolbar is displaying normal and
picture is hidden completely
Related
I'd like to integrate something like this:
And I've done it like this, but I can't seem to put the imageview below the toolbar. Without the toolbar, I can make it under the status bar, but combining these two are impossible.
Here's my layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fitsSystemWindows="true"
tools:context="com.project.android.PhotoActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/photo_tl"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#59000000"
tools:ignore="UnusedAttribute" />
<ImageView
android:id="#+id/photo_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitStart" />
</LinearLayout>
In my activity, I've done the following:
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
I've also declared an styles-v21.xml file:
<style name="Project.Photo" parent="Project.Light">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#59000000</item>
</style>
And set it as default style for PhotoActivity.
I've already tried putting the toolbar in a FrameLayout, but doing that my toolbar simply hides, like this:
Thanks in advance.
Got that fixed, but toolbar is overlapping the status bar. Is there anyway to fix the padding? If I use android:fitsSystemWindows="true", status bar isn't translucent anymore.
I would remove the Toolbar from your layout and use an implementation of an ActionBar from the AppCompat.Theme:
<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>
</style>
Then, I would create a new style for the semi-transparent ActionBar (in values/styles.xml:
<style name="AppTheme.Transparent" parent="AppTheme">
<item name="windowActionBarOverlay">true</item>
</style>
And in v21/styles.xml:
<style name="AppTheme.Transparent" parent="AppTheme">
<item name="windowActionBarOverlay">true</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
I assume, that your Activity extends AppCompatActivity so then in onCreate() you can call:
For enabling a back button:
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
For setting your translucent color:
getSupportActionBar().setBackgroundDrawable(new ColorDrawable(ContextCompat.getColor(this, R.color.yourTranslucentColor)));
For removing your ActionBar title:
getSupportActionBar().setDisplayShowTitleEnabled(false);
What is more, I would change your root LinearLayout to CoordinatorLayout as it gives you more control over your layouts (it's a more powerful FrameLayout).
The color which I used is:
<color name="yourTranslucentColor">#29000000</color>
Of course you should remember to apply this theme to your Activity in the AndroidManifest.xml:
<activity
android:name=".ui.activity.YourActivity"
android:theme="#style/AppTheme.Transparent">
</activity>
By doing all these steps you should get something like this:
Please let me know, if it works for you.
As you said,
"I've already tried putting the toolbar in a FrameLayout, but doing that my toolbar simply hides, like this:".
The problem with this is the order of adding childView in FrameLayout, you added Toolbar as first child and after that you added ImageView. this is why image hides the toolbar. Instead, the order of views inside FameLayout should be like this
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.project.android.PhotoActivity">
<ImageView
android:id="#+id/photo_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitStart" />
<android.support.v7.widget.Toolbar
android:id="#+id/photo_tl"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#59000000"
tools:ignore="UnusedAttribute" />
</FrameLayout>
Also for API level >=19 ,you can add this attribute in style.xml file to make statusBar transparent
<item name="android:windowTranslucentStatus">true</item>
For making content behind statusBar use this link
https://developer.android.com/training/system-ui/status.html#behind
Use code below
<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/coordinator_layout"
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="300dp"
android:fitsSystemWindows="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="#color/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:expandedTitleTextAppearance="#style/AppTheme.CollapsingToolbarLayoutExpandedTextStyle"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/iv_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/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:theme="#style/YourTheme"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!-- Rest of your view-->
</android.support.design.widget.CoordinatorLayout>
LinearLayout will automatically place the ImageView below the Toolbar.
Try using a RelativeLayout instead.
Dont treat status bar as something separate from your app. Image is coming below the toolbar because you have used LinearLayout. Had you used RelativeLayout, your image would be starting at the same height as toolbar.
Now for making the statusbar transparent and for everything to start from under the statusbar use the following.
<style name="AppTheme.TranslucentStatusBar" >
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
</style>
Use the above style for your activity and everything starts from under the statusbar. Now for the toolbar, you can increase the height of the toolbar by adding the height of the statusbar as padding to toolbar. This can be done as follows:
toolbarContainer.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
Rect frame = new Rect();
getWindow().getDecorView().getWindowVisibleDisplayFrame(frame);
toolbarContainer.setPadding(0, frame.top, 0, 0);
}
});
You can set a color to statusbar and use the same color with AlphaTransparency on Toolbar.
getWindow().setStatusBarColor(ContextCompat.getColor(this, android.R.color.transparent));
Now you control everything including the statusbar and the toolbar.
Got that fixed, but toolbar is overlapping the status bar. Is there anyway to fix the padding? If I use android:fitsSystemWindows="true", status bar isn't translucent anymore.
I've recently written a post about WindowInsets, you may check it out. I think it would resolve your issue.
Long story short - what you have to do is to pass window insets only to Toolbar via ViewCompat.setOnApplyWindowInsetListener API. But the parent of your Toolbar should pass the window insets. In your case that won't happen, because by default LinearLayout and family layouts won't do that, you have to subclass and override onApplyWindowInsets method.
I suggest you to read the article, where everything is described more precisely.
TLDR; You have to wrap the toolbar in a LinearLayout.
What I did to make it work was similar to #Akhilesh Kumar's approach but I wrapped the toolbar in a LinearLayout which fixed the toolbar overlapping. I also put the fitsSystemWindows to true in that LinearLayout.
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.project.android.PhotoActivity">
<ImageView
android:id="#+id/photo_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitStart"/>
<LinearLayout
android:id="#+id/content_card_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fitsSystemWindows="true"
>
<android.support.v7.widget.Toolbar
android:id="#+id/photo_tl"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#59000000"
tools:ignore="UnusedAttribute"/>
</LinearLayout>
</FrameLayout>
I hope it helps.
just change the toolbar height to wrap_content:
<android.support.v7.widget.Toolbar
android:id="#+id/photo_tl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#59000000"
tools:ignore="UnusedAttribute" />
I've recently bumped to problem with coordinator layout. When I try to create simple collapsing toolbar layout as in this example, toolbar apears to be under status bar as in screenshot below (on preLolipop devices everything works fine, because app don't draw under under statusbar).
Code snippet of my Activity layout:
<?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:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/imageCalculationDetail"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#drawable/ic_dummy_calculation"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
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="#color/transparent"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/container"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
My Styles (only v21) where BaseAppTheme parent is Theme.AppCompat.Light.NoActionBar:
<style name="AppTheme" parent="BaseAppTheme">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="android:colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="android:colorAccent">#color/colorPrimary</item>
<item name="android:colorButtonNormal">#color/button_state_list</item>
<item name="android:statusBarColor">#color/transparent</item>
</style>
Well I figure it out, problem was that I had
<item name="android:fitsSystemWindows">true</item>
in my toolbarStyle of BaseAppTheme (for other actvities, everything works well, for collapsing toolbar with translucent status bar not). After setting
android:fitsSystemWindows="false"
to my toolbar, everything works fine.
For me
Adding an Attribute fitSystemWindows="false" to Toolbar in XML worked.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:fitsSystemWindows="false"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_collapseMode="pin"/>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
By putting this in your styles you're telling Android that your app is responsible for drawing the stuff behind the system bar. That's why the "dirty hack" in the other answer is technically correct if this flag is set.
Unless you have an explicit reason for the flag to be true (I suspect not), set it to false so that the OS properly offsets your content for you. Your status bar should still be translucent.
Try by removing android:fitsSystemWindows="true" from ImageView..
<ImageView
android:id="#+id/imageCalculationDetail"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#drawable/ic_dummy_calculation"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"/>
Programmatically, you can change this behavior by clearing and adding relevant flags via Android's Window class methods. Write a custom function in the Activity concerned and pass it the color resource ID of your choice:
Kotlin:
fun setStatusBar(color: Int) {
val window = this.window
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
window.statusBarColor = ContextCompat.getColor(this, color)
}
Java:
public void setStatusBar(int color) {
Window window = this.getWindow();
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(ContextCompat.getColor(this, color));
}
Then, call the function from your Activity's overridden onCreate method right after the setContentView(R.layout.your_layout) line. For example:
Kotlin:
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.your_layout)
setStatusBar(R.color.colorPrimaryDark)
...
}
Java:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.your_layout);
setStatusBar(R.color.colorPrimaryDark);
...
}
Apply a breakpoint to include a marginTop to the toolbar for lollipop devices or above.
values/dimens.xml
<dimen name="toolbar_margin_top">0dp</dimen>
values-v21/dimens.xml
<dimen name="toolbar_margin_top">24dp</dimen>
an then in your layout:
<android.support.v7.widget.Toolbar
.....
android:layout_marginTop="#dimen/toolbar_margin_top"
NOTING WORKS FOR ME.
For me solution was simple :
add android:fitsSystemWindows="false" in Top CoordinatorLayout View
I'm using a template from Android Studio that used AppCompat Toolbar. Unfortunately, the toolbar casts shadow on the status bar so it doesn't look right.I also implement a NavigationDrawer so I can't simply set the color of the status bar.
This is how it looks:
This is how it should be:
activity_main.xml
<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">
<include
layout="#layout/app_bar_main"
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"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
app_bar_main.xml
<?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="hu.pe.thinhhoang.aaosync.MainActivity">
<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/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
styles.xml (v21)
<resources>>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
</resources>
Put a LinearLayout in like this:
<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=".ui.activities.MainScreenActivity">
<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/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main_screen" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
This shadow is part of windowContentOverlay on APIs below LOLLIPOP (on LOLLIPOP it's #null).
When you work with Toolbar widget the toolbar isn't part of window decor anymore so the shadow starts at the top of the window over the toolbar instead of below it (so you want the windowContentOverlay to be #null). Additionally you need to add an extra empty View below the toolbar pre-LOLLIPOP with its background set to a vertical shadow drawable (8dp tall gradient from #20000000 to #00000000 works best). On LOLLIPOP you can set 8dp elevation on the toolbar instead.
I tried all the other answers and none worked. What fixed it was adding this to the AppBarLayout:
app:elevation="0dp"
That's because of :
<item name="android:statusBarColor">#android:color/transparent</item>
i guess.
Got it, check this:
http://developer.android.com/training/material/theme.html#StatusBar
To set a custom color for the status bar, use the
android:statusBarColor attribute when you extend the material theme.
By default, android:statusBarColor inherits the value of
android:colorPrimaryDark.
And you've set it to transparent.this is not a good way for doing that since Google put this code for you:
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
And also, instead of:
<style name="AppTheme.NoActionBar">
Use this and add a parent and check:
<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
To get the correct behavior, you will need to remove
android:fitsSystemWindows="true"
From android.support.design.widget.CoordinatorLayout
In your styles.xml, color defined in colorPrimaryDarkwill be used for drawing the notification bar.
You will need to have styles.xml in your values-v21 folder with following item in your styles:
<item name="android:statusBarColor">#android:color/transparent</item>
Hope this helps.
I've created a new project with a new blank activity using Android Studio and I'm trying to remove the shadow below the toolbar in >=API21. I've tried many things.
This works for < API21
<item name="android:windowContentOverlay">#null</item>
This doesn't work for me in phone with >=API21:
getSupportActionBar().setElevation(0);
<item name="android:elevation">0dp</item>
I don't know what else I can try. Any help is appreciated.
EDIT: I've tried everything from other questions like this but nothing worked.
As #Vipul Asri said, I had to add app:elevation="0dp" but I was adding it to the wrong place. This works:
<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="android.teechart.steema.com.androiddemo.DashboardWebAnalytics">
<android.support.design.widget.AppBarLayout
app:elevation="0dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_dashboard_web_analytics" />
</android.support.design.widget.CoordinatorLayout>
I was adding it in android.support.v7.widget.Toolbar but the correct place was in android.support.design.widget.AppBarLayout.
This shadow is part of windowContentOverlay on APIs below LOLLIPOP (on LOLLIPOP it's #null).
When you work with Toolbar widget the toolbar isn't part of window decor anymore so the shadow starts at the top of the window over the toolbar instead of below it (so you want the windowContentOverlay to be #null). Additionally you need to add an extra empty View below the toolbar pre-LOLLIPOP with its background set to a vertical shadow drawable (8dp tall gradient from #20000000 to #00000000 works best). On LOLLIPOP you can set 8dp elevation on the toolbar instead.
I'm new to android development and I'm working on an app with ActionBar and Tabs. Recently I switched to the new support library Toolbar but the title of the toolbar (ActionBar) isn't vertically centred, while the action buttons are correctly placed.
Title image
The same problem occurs with the first MenuItem in the bar (it's moved up a little bit). Menu image
My activity extends the AppCompatActivty and the layout looks like this:
<?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:orientation="vertical"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/action_bar_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ActionBarTheme"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:tabGravity="fill"
app:tabMaxWidth="0dp"
app:tabMode="fixed"/>
<com.myApp.app.views.widgets.ViewPager
android:id="#+id/fragmentPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
and the style:
<style name="ActionBarTheme" parent="Widget.AppCompat.Toolbar">
<item name="android:textColorPrimary">#color/colorPrimaryDark</item>
<item name="colorControlNormal">#color/colorPrimaryDark</item>
<item name="android:background">#color/colorPrimary</item>
</style>
Could someone help me fix this issue? I've searched for a solution but found nothing.
P.S. They were correctly placed as I was using the default action bar
You should use android:theme rather than app:theme here:
android:theme="#style/ActionBarTheme"
Your style should derive from the action bar overlay:
<style name="ActionBarTheme" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
...
</style>
Consider just using the ActionBar theme directly to start to isolate the problem.