Android Collapsing Toolbar remove elevation and shadow - android

I am trying to make a layout that has a gradient into the collapsing app bar which is a solid color. This should be accomplishable through app:elevation="0dp" but that has not worked. However, when I run 'Instant Run' on my app, instead of running a full build, I get the desired result. Let me include pictures:
Here is the current look:
UI with the drop shadow, undesired result
Here is the desired look/what appears when I run instant run:
UI without drop shadow, desired result
Here is my layout file:
<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"
android:windowActionBar="false"
android:id="#+id/main_background">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme"
android:elevation="0dp"
app:elevation="0dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar"
android:elevation="0dp"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</recycler>
In case this is unclear, I am referring to the drop shadow underneath the app_bar that is labeled "Reee". In the first picture, there is a shadow, in the second picture there is not a shadow. I do not want to have the shadow. However, I can only achieve this look when I run instant run, then it goes away on next run / full compilation.
I'm still looking for a fix for this issues and am quite frustrated that I have not found anything yet. I have tried examples for setting stateListAnimator=#null to no avail.
Alright doing some further research, I have a SwipeRefreshLayout with a Recyclerview underneath this appbar. When I remove the RecyclerView, I get the intended affect. What could my RecyclerView be doing, and how can I fix it?

Just set
android:stateListAnimator="#null"
or
app:elevation="0dp"
NOTE: you should use app: namespace NOT android:
to your AppBarLayout

You can do this by setting a custom stateListAnimator:
create a new animator "appbar_not_elevated.xml" in animator under res.
<item app:state_collapsible="true" app:state_collapsed="true">
<objectAnimator android:propertyName="elevation"
android:valueTo="0"
android:valueType="floatType"
android:duration="1"/>
</item>
<item>
<objectAnimator android:propertyName="elevation"
android:valueTo="0"
android:valueType="floatType"
android:duration="1"/>
</item>
This will set the elevation of collapsed as well as expanded state elevation to zero.
Then set the stateListAnimator to AppBarLayout:
android:stateListAnimator="#animator/appbar_not_elevated"

Depending on the support library used, if you read the source code to set app bar elevation, you'll read:
/**
* #deprecated target elevation is now deprecated. AppBarLayout's elevation is now
* controlled via a {#link android.animation.StateListAnimator}. If a target
* elevation is set, either by this method or the {#code app:elevation} attribute,
* a new state list animator is created which uses the given {#code elevation} value.
*
* #attr ref android.support.design.R.styleable#AppBarLayout_elevation
*/
which tells you, either you use app:elevation or a state list animator. For the second option, add an xml selector into the folder animator-v21, and then set it to something like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<objectAnimator android:duration="1"
android:propertyName="elevation"
android:valueTo="0dp"
android:valueType="floatType"/>
</item>
then refer it from your app bar in xml:
android:stateListAnimator="#animator/my_appbar_state_list_animator"

I neglected to originally provide the RecyclerView that I have under my AppBar in the question, thinking that the problem was solely the AppBarLayout. But I have since fixed the issue. My RecyclerView looked like this:
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipeRefreshLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="0dp"
android:background="#drawable/gradient_blue_4"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="#+id/transactions"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:clipToPadding="false"
android:fadeScrollbars="true"
android:overScrollMode="always"
android:paddingBottom="48dp"
android:scrollbars="none"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="?selectableItemBackground" />
</android.support.v4.widget.SwipeRefreshLayout>
Underneath my AppBarLayout. Not exactly sure why this fixes the issue, but removing ?selectableItemBackground as the background for the RecyclerView fixes the issue and leaves me with the desired result.
Thanks to all provided answers, I was originally much more intrigued because I was getting my desired result by running instant run. Unfortunately, this insight provided no additional help.

set your AppBarLayout`s elevation and translationZ to zero
appBarLayout.translationZ = 0f
appBarLayout.elevation = 0f

In your java file ..
Set A Variable for your app bar and pass in the set id using findViewById(R.id.whatever)
and then use
void setShadowEnabled (boolean enabled)
to disable the shadow.
Hope this helps...

Related

How to put pagertitlestrip in the center top

I am trying to update my app and wanted to make the toolbar look like the black player. As of now i am able to set the search and navigation but how to put the pager title strip in the middle as inside viewpager i cannot use gravity i tried the margin and padding not working at all.
this is my xml
<com.antonyt.infiniteviewpager.InfiniteViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<me.alexrs.fontpagertitlestrip.lib.FontPagerTitleStrip
android:id="#+id/titlestrip"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginEnd="50dp"
android:layout_marginStart="50dp"
android:background="#color/material_fragment_top"
app:fontFamily="#font/font"
app:theme="#style/AppTheme.PopupOverlay" />
</com.antonyt.infiniteviewpager.InfiniteViewPager>
<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="50dp"
app:theme="#style/CustomActionBar" />
how i can put the pagertitlestrip in the middle
So I want to put the padding but not able to do it at all
Seems like you want to change StatusBarColor.
try setStatusBarColor(int)and set colour of your toolbar or you can make it transparent
All you need to do is set these properties in your theme:
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
Your activity / container layout you wish to have a transparent status bar needs this property set:
android:fitsSystemWindows="true"
but since you never specified API you're using I refer you to different question, you should find the answer.
How to change the status bar color in android
Android Completely transparent Status Bar?

Translucent/Transparent status bar + CoordinatorLayout + Toolbar + Fragment

I have following setup:
I'm using AppCompat
MainActivity, that holds a fragment and has a toolbar, that's hiding when scrolling down
Fragment with RecyclerView
all views that should fit the screen have the according android:fitsSystemWindows="true" in the xml layout
The problem is, I can't get the statusbar transparent in this case. What I do is following:
Create the activity and call setContent
Then I try to adjust the activity to programmatically get a translucent toolbar like following:
#TargetApi(Build.VERSION_CODES.LOLLIPOP)
public void themeNavAndStatusBar(Activity activity)
{
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP)
return;
Window w = activity.getWindow();
w.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
w.setFlags(
WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION,
WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
w.setFlags(
WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
w.setNavigationBarColor(activity.getResources().getColor(android.R.color.transparent));
w.setStatusBarColor(activity.getResources().getColor(android.R.color.transparent));
}
Replace the placeholder in the activity (#+id/frame_container) with the fragment
The statusbar is solid colored in this case, and the views are not drawn underneath it... Why?
What I want
I want a toolbar, that is scrolled of the screen and hiding completely while the content underneath this toolbar should fitScreen and be drawn behind the transparent nav bar.
Layouts
Here's my main activity:
<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/clMain"
android:fitsSystemWindows="true"
android:background="?attr/main_background_color"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:fitsSystemWindows="true"
android:background="#null"
app:elevation="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="?actionBarThemeStyle"
app:popupTheme="?actionBarPopupThemeStyle"
app:layout_scrollFlags="scroll|enterAlways">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/ivToolbarDataSource"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:layout_width="24dp"
android:layout_height="24dp" />
<TextView
android:id="#+id/tvToolbarTitle"
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:theme="?actionBarThemeStyle"
android:layout_gravity="center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<TextView
android:id="#+id/tvToolbarSubTitle"
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle"
android:theme="?actionBarThemeStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
<!-- BUG: http://stackoverflow.com/questions/30541409/coordinatorlayoutappbarlayout-does-not-draw-toolbar-properly -->
<View
android:layout_width="fill_parent"
android:layout_height="1dp"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/frame_container"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="32dp"
android:src="#drawable/ic_local_offer_white_24dp"
app:backgroundTint="?attr/colorPrimary"
app:borderWidth="0dp"
app:fabSize="normal"
app:rippleColor="?attr/colorPrimaryDark"
app:layout_anchorGravity="bottom|right|end"
app:layout_behavior="com.test.classes.ScrollAwareFABBehavior"/>
</android.support.design.widget.CoordinatorLayout>
And here is my fragment, that will be placed in the main activity:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/srlImages"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/rvImages"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.SwipeRefreshLayout>
<TextView
android:id="#+id/tvEmpty"
android:gravity="center"
android:layout_centerInParent="true"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
EDIT - Screenshots
I use a light/dark base theme and theme everything by hand (because the user can select any color as primary/accent color), so don't mind that the toolbar is white (it's the default's theme background color and primary color). I added a black border as well so that you see where the activity ends...
First Screenshot: Shows the toolbar, nothing is scrolled
Second Screenshot: I just started scrolling => the toolbar now should scroll away
Third Screenshot: the main content should now scroll underneath the nav bar...
In the end, I'll of course make the toolbar and navbar semi transparent for a better visual effect...
tl;dr Set android:fitsSystemWindows="false" at least to the root CoordinatorLayout and to the inner fragment container, #frame_container.
This might not be the final solution (i.e. there might be other fitsSystemWindows to change) so tell me if you have any problems.
why
When it comes to status bar, I think of fitsSystemWindows like so:
fitsSystemWindows="false" : draws the view normally, under the status bar because of the window flags you have set.
fitsSystemWindows="true" : draws the view normally, under the status bar because of the window flags you have set, but adds a top padding so that content is drawn below the status bar and they don't overlap.
In fact, in my opinion, the white you see is not the status bar color, but rather your CoordinatorLayout background. That is due to fitsSystemWindows="true" on the coordinator: it draws the background to the whole window, but adds top padding to the content so inner views are not covered by status bar.
This is not what you want. Your inner content must be covered by the status bar, and so you have to set fitsSystemWindows="false" to the coordinator (so it won't apply top padding) and probably to the content itself.
Once you get how it works, it is easy to debug and achieve the effect you are looking for. Actually, it is not. Years pass, but I still spend hours trying to figure out the right fitsSystemWindows combination, because most Views (in the support libraries at least) override the default behavior that I stated above, in ways that are mostly not intuitive. See this post for a small guide on how to use it.
Edit your styles.xml (v21) , add the following style
<style name="AppTheme.Home" parent="AppTheme.Base">
<!-- Customize your theme here. -->
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>
You can change parent theme as per your liking, but now declare this theme in your AndroidManifest.xml file for a particular activity like this :
<activity
android:theme="#style/AppTheme.Home"
android:name=".HomeActivity"
android:launchMode="singleTop"
android:screenOrientation="portrait" />
This will let your content visible under the transparent actionbar.
Now use the following to align your toolbar below the StatusBar properly, call this in your oncreate:
toolbar.setPadding(0, getStatusBarHeight(), 0, 0);
Get statusbar height using following :
public int getStatusBarHeight() {
int result = 0;
int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
if (resourceId > 0) {
result = getResources().getDimensionPixelSize(resourceId);
}
return result;
}
Remove the following from your coordinator layout tags :
android:fitsSystemWindows="true"
Now in order to collapse your toolbar or hide it you may refer to this tutorial
Make sure you are using following version of design support library, as it is bug free :
compile 'com.android.support:design:23.1.0'
After reading your descriptions about your question, I thought styles of Google Photos matches your requirement.
OK, there are just some tips for your question. After my test, it works.
If you want to show content behind status bar, you need add <item name="android:windowTranslucentStatus">true</item> into your
style when Android version level is larger than 19(namely KitKat)
If you want to show content behind navigation bar, you need add
<item name="android:windowTranslucentNavigation">true</item> into your
style when Android version level is larger than 19(namely KitKat)
If you want to hide Toolbar smoothly when content is scrolled up
and to show Toolbar smoothly when content is scrolled down, you
need to add app:layout_collapseMode="parallax" into your
Toolbar's attributes based on your current codes.Of course, you
need coordinate Toolbar with CollapsingToolbarLayout
CoordinatorLayout and AppBarLayout.
as some users said, by setting android:fitsSystemWindows="false", the layout overlapped below statusbar.
I solved it by setting android:fitsSystemWindows="true" and in CoordinatorLayout tag setting app:statusBarBackground="#android:color/transparent".
For me, the reason was not that it did not work per se, but that I use the material drawer library from Mike Penz and this library does use fullscreen + offset + custom background behind the toolbar so I had to solve the problem respecting that special setup...
I'll reward the points to the in my opinion most informative answer though...
I had the same issue and my solution was add android:fitsSystemWindows="true" to the DrawerLayout
<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">
....
</android.support.v4.widget.DrawerLayout>
I had relevant issues depend on android:fitsSystemWindows setting.
Once false:
Snacks was drawn under the Navigation bar
Once true:
Status bar had none transparent background
Solution was really simple...
Just to add android:layout_marginBottom="48dp". to CoordinatorLayout like that:
just to add <android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:map="http://schemas.android.com/apk/res-auto"
tools:context=".MapsActivity"
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false"
android:layout_marginBottom="48dp">
Theoretically Navigation bar should have fixed size "48dp", but in future releases potentially it may change (like Status bar got slimmer by 1dp in Marshmallow), so I wouldn't rely on fixed size.
Better additionally get it and apply on run time.
If You are using Google Map like me You may want to know ActionBar/Toolbar size and the navigation bar in run time:
in onCreate use this code:
final TypedArray styledAttributes = MapsActivity.this.getTheme().obtainStyledAttributes(
new int[]{android.R.attr.actionBarSize});
mToolbarHeight = (int) styledAttributes.getDimension(0, 0);
styledAttributes.recycle();
// translucent bars code. Will not fire below Lollipop
// Ask NavigationBar Height
ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.coordinatorLayout),
new OnApplyWindowInsetsListener() { // setContentView() must be fired already
#Override
public WindowInsetsCompat onApplyWindowInsets(View v, WindowInsetsCompat insets) {
statusBar = insets.getSystemWindowInsetTop(); // You may also need this value
mNavBarHeight = insets.getSystemWindowInsetBottom();
if (mMap != null)
mMap.setPadding(0, mToolbarHeight, 0, mNavBarHeight);
// else will be set in onMapReady()
SharedPreferences.Editor editor = mSharedPref.edit();
editor
.putInt(NAVBAR_HEIGHT_KEY, mNavBarHeight)
.commit(); // Save the results in flash memory and run the code just once on app first run instead of doing it every run
return insets;
}
}
);
And what's important. If You got some additional layers like drawer etc put them encapsulating the CoordinatorLayout inside rather than outside as otherwise it will make other views inside shorter by the marginBottom
Here's what I did to have the toolbar have the same color as the status bar, by getting the status bar transparent:
build.gradle
...
implementation 'androidx.core:core-ktx:1.2.0'
implementation 'androidx.appcompat:appcompat:1.1.0'
implementation 'com.google.android.material:material:1.1.0'
**ScrollingActivity.kt**
```kt
class ScrollingActivity : AppCompatActivity(R.layout.activity_scrolling) {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setSupportActionBar(toolbar)
}
}
activity_scrolling.xml
<androidx.coordinatorlayout.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=".ScrollingActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar" android:layout_width="match_parent" android:layout_height="wrap_content"
android:background="#f00" android:fitsSystemWindows="true" android:theme="#style/AppTheme.AppBarOverlay">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent" android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_margin="#dimen/text_margin" android:text="#string/large_text" />
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
styles.xml
<resources>
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<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>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
manifest
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.lb.myapplication">
<application
android:allowBackup="true" android:icon="#mipmap/ic_launcher" android:label="#string/app_name"
android:roundIcon="#mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="#style/AppTheme">
<activity
android:name=".ScrollingActivity" android:label="#string/app_name"
android:theme="#style/AppTheme.NoActionBar">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
You should add the following code to your theme, this code will make the status bar transparent:
<item name="android:windowTranslucentStatus" tools:targetApi="kitkat">true</item>
Additionally, add scroll behavior to your top app bar. The following example shows the top app bar disappearing upon scrolling up, and appearing upon scrolling down:
<androidx.coordinatorlayout.widget.CoordinatorLayout
...>
<com.google.android.material.appbar.AppBarLayout
...>
<com.google.android.material.appbar.MaterialToolbar
...
app:layout_scrollFlags="scroll|enterAlways|snap"
/>
</com.google.android.material.appbar.AppBarLayout>
...
</androidx.coordinatorlayout.widget.CoordinatorLayout>
First add this code to AppBarLayout:
app:liftOnScroll="true"
Then update your "app:layout_scrollFlags" in your toolbar:
app:layout_scrollFlags="scroll|enterAlways|snap"
This will work, I am pretty sure.

Remove shadow toolbar below actionbar in blank activity

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.

Appcompat v21 Toolbar elevation pre-lollipop

First off, I know that this question has been asked before, but it hasn't been answered before. I hope someone can give me an answer.
In my application, I use the Toolbar from Appcompat_v7 (API 21). This is my code:
<android.support.v7.widget.Toolbar
style="#style/DarkActionbarStyle"
android:id="#+id/toolBar"
android:layout_width="match_parent"
android:layout_height="#dimen/actionbar_height" />
And this is the ToolBar style I use:
<style name="DarkActionbarStyle" parent="#style/Widget.AppCompat.Toolbar">
<item name="android:background">?attr/colorPrimary</item>
<item name="titleTextAppearance">#style/ActionBarTitle</item>
<item name="android:elevation">2dp</item>
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
<item name="theme">#style/ThemeActionBarDark</item>
</style>
<style name="ThemeActionBarDark" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="actionBarItemBackground">#drawable/btn_dark_orange</item>
<item name="selectableItemBackground">#drawable/btn_dark_orange</item>
</style>
The problem is, that elevation doesn't work pre-lollipop. So my question is: Is it possible to have a shadow under the ToolBar on pre-lollipop devices?
This worked for me very well:
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary"
card_view:cardElevation="4dp"
card_view:cardCornerRadius="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary"
android:minHeight="?attr/actionBarSize" />
</android.support.v7.widget.CardView>
Using CardView container for toolbar is a bad idea.
CardView is heavy, especially for low end devices.
The best way is to put a gradient Shadow view below the toolbar. Shadow view must be a direct child to the coordinator layout. ie. The appbar which contains toolbar and shadow View must be siblings.
Add this view component to your layout.
<View
android:id="#+id/gradientShadow"
android:layout_width="match_parent"
android:layout_height="5dp"
android:background="#drawable/toolbar_shadow"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_collapseMode="pin"/>
The drawable toolbar_shadow.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="90"
android:endColor="#33333333"
android:startColor="#android:color/transparent"/>
</shape>
This will solve the problems in pre-lollipop devices. But we don't want this shadow in lollipop and above devices so make visibility to gone in devices with lollipop and above.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
findViewById(R.id.gradientShadow).setVisibility(View.GONE);
}
Done.
You can add the shadow (elevation) back by using a FrameLayout with foreground="?android:windowContentOverlay". The elevation attribute is not supported pre-Lollipop. So if you are using FrameLayout like fragment container just add foreground attribute to it.
As I've had issues with the CardView widget method, I've used the FrameLayout method as mentioned by #Sniper; it is working perfectly!
I just wanted to share the code snippet you'll have to use.
Just put this directly under the toolbar where your main content starts:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:foreground="?android:windowContentOverlay">
And don't forget to close with:
</FrameLayout>
It's possible to have real shadows - animated and generated. The method used by Lollipop is available since Froyo. Hardware acceleration used for shadow generation is available since Honeycomb I guess. Here's how it works:
draw your view to an off-screen bitmap with LightingColorFilter set to 0,0
blur the black shape (the off-screen bitmap) using the ScriptIntrinsicBlur class and elevation value as radius
draw the bitmap beneath the view
It requires adding custom elevation attributes, custom views capable of rendering shadows, and using render script and the compatibility library (for older devices). I'm not going to dive into the details, because there's a lot of them including issues with compilation and minor performance optimisations. But it's possible.
Why there's no shadows in the official support library?
it would require changes in the UI framework as it's impossible to freely draw outside view bounds
smooth animation requires a quite good GPU
See:
https://www.youtube.com/watch?v=jbU4SXblO5s
https://androidreclib.wordpress.com/2014/11/25/lollipops-shadows-on-gingerbread/
https://github.com/ZieIony/Carbon
I'm using this answer:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/orange"
android:titleTextAppearance="#color/White"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
<View
android:layout_width="match_parent"
android:layout_height="5dp"
android:background="#drawable/toolbar_shadow" />
</LinearLayout>
toolbar_shadow.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#3f3f3f"
android:endColor="#android:color/transparent"
android:angle="270" />
</shape>
You can't use the elevation attribute before API 21 (Android Lollipop).
You can however add the shadow programmatically, for example using a custom view placed below the Toolbar.
For example:
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:background="#drawable/shadow"/>
Where the shadow is a drawable with a black gradient.
To show shadow under your toolbar please use AppBarLayout available in Google Android Design Support Library. Here is an example of how it should be used.
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"/>
</android.support.design.widget.AppBarLayout>
To use Google Android Design Support Library enter following into your build.gradle file:
compile 'com.android.support:design:22.2.0'
The solution with a view to add a shadow manually would work as long as there are no action bar menus. If so, the shadow view would stop before the action bar icons.
i think it is easier to have a vertical linear layout with appbar on the top and a view for shadow below it as the next linear layout item or in my case, it is
<LinearLayout Vertical>
<v7 toolbar/>
<RelativeLayout>
<View for shadow with alignParent_top= true/>
....
</RelativeLayout>
</LinearLayout>
I really hope the near future appCompat would fix this.

Hiding ActionBar left blank space on top

I want to hide the ActionBar in one of my fragments but when i call
((MainActivity) getActivity()).getActionBar().hide();
on the fragment I get something like this
how to remove that blank space and make it "fullscreen" - i want the notification bar to be shown
[EDIT:]
Minimum SDK is not 4.0 but when i started this app i set it to 2.3, an i have to use appcompant
MainActivity xml
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg"
tools:context="com.mariusz.myapp.MainActivity" >
<!--
As the main content view, the view below consumes the entire
space available using match_parent in both dimensions.
-->
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?android:attr/actionBarSize" />
<!--
android:layout_gravity="start" tells DrawerLayout to treat
this as a sliding drawer on the left side for left-to-right
languages and on the right side for right-to-left languages.
If you're not building against API 17 or higher, use
android:layout_gravity="left" instead.
-->
<!--
The drawer is given a fixed width in dp and extends the full height of
the container.
-->
<fragment
android:id="#+id/navigation_drawer"
android:name="com.mariusz.myapp.NavigationDrawerFragment"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
android:paddingTop="?android:attr/actionBarSize" />
</android.support.v4.widget.DrawerLayout>
gallery fragment xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="#+id/gallery_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</android.support.v4.view.ViewPager>
</LinearLayout>
[EDIT SOLUTION]
best solution for this was creating other activity to display images that have no actionbar
You should structure your activity so that it overlays the actionbar: here is an example of a theme you might use for it:
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="#android:style/Theme.Holo">
<item name="android:windowActionBarOverlay">true</item>
</style>
</resources>
More info about overlaying the Actionbar. also if you aren't planning to always hide the Actionbar, you might need to structure your layouts to account for it while it is visible. Please refer to this question on how to do that. You might also consider refactoring your fragment to be a separate activity and just starting it in the full screen mode right away, by using the "NoTitlebarTheme" with that activity.
I had the same problem, my problem was to include fitsSystemWindows tag in xml
In your activity on create method put the following line of code
requestWindowFeature(Window.FEATURE_NO_TITLE);
using this line only in that activity android:theme="#android:style/Theme.Black.NoTitleBar" in manifest file
add the getActionBar().hide(); in activity class where your fragments called and use some other fragments in getActionBar().show();.

Categories

Resources