Appcompat v21 Panel Level Up Before Lellompom

Question

Firstly, I know that this question was asked before, but it has not yet been answered. 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 that 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 does not work before Lellipop. So my question is: is it possible to have a shadow under the ToolBar on devices with a preliminary Lellip?

Answer 1

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> 

Answer 2

Using the CardView container for a toolbar is a bad idea.

CardView is heavy, especially for low-maintenance devices.

The best way is to place a gradient view of the shadows under the toolbar under the tensor. The shadow view should be a direct child in the layout of the coordinator. i.e. An application bar containing a 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"/> 

Selectable 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 problems in devices with preliminary Lellipop. But we don’t want this shadow to be on candy and above, so you can see the visibility on devices with candy and above.

 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { findViewById(R.id.gradientShadow).setVisibility(View.GONE); } 

Done.

Answer 3

You can add shadow (elevation) back using FrameLayout with foreground="?android:windowContentOverlay" . Elevation is not supported by pre-Lollipop. Therefore, if you use FrameLayout as a fragment container, simply add a foreground attribute to it.

Answer 4

Since I was having problems with CardView widgets, I used the FrameLayout method, as @Sniper pointed out; it works great!

I just wanted to share a piece of code that you will need to use. Just put this right under the toolbar where the main content starts:

 <FrameLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:foreground="?android:windowContentOverlay"> 

And don't forget to close:

 </FrameLayout> 

Answer 5

It is possible to have real shadows - animated and generated. The method used by Lollipop has been available since Froyo. The hardware acceleration used for shadow generation is available as I think Honeycomb. Here's how it works:

• draw your view on an off-screen bitmap with LightingColorFilter set to 0.0
• blur the black shape (off-screen bitmap) using the ScriptIntrinsicBlur class and the height value as a radius
• draw a bitmap below the view

It requires the addition of custom elevation attributes, custom views capable of displaying shadows, and the use of a render script and compatibility library (for older devices). I will not go into details because there are a lot of them, including compilation problems and minor performance optimizations. But it is possible.

Why are there no shadows in the official support library?

• this will require changes to the user interface because it is not possible to freely draw the boundaries of the appearance.
• Smooth animations require a good GPU

Cm:

• https://www.youtube.com/watch?v=jbU4SXblO5s
• https://androidreclib.wordpress.com/2014/11/25/lollipops-shadows-on-gingerbread/
• https://github.com/ZieIony/Carbon

Answer 6

I am 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> 

Answer 7

To show the shadow under the toolbar, use the AppBarLayout, available in the Google Android Design Support Library. Here is an example of how to use it.

 <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 the Google Android Design Support Library, enter the following command in the build.gradle file:

  compile 'com.android.support:design:22.2.0' 

Answer 8

You cannot use the height attribute before API 21 (Android Lollipop). You can , but add the shadow programmatically, for example, using the custom view located 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 available for painting with a black gradient.

Answer 9

A solution to manually add a shadow will work until there is an action bar menu. If so, the shadow view will stop in front of the action bar icons.

I think it’s easier to have a vertical linear layout with the top panel of the application and the kind of shadow below it as the next element of the linear layout, or in my case it’s

 <LinearLayout Vertical> <v7 toolbar/> <RelativeLayout> <View for shadow with alignParent_top= true/> .... </RelativeLayout> </LinearLayout> 

I really hope that the upcoming appCompat application will fix this.

Answer 10

Another option is the following library, which provides 9patch shadows, such as iosched app, android-materialshadowninepatch

Answer 11

I think you can, I had a problem with CardView height using the support library. To make it work, I needed to set up my opinion as follows.

 <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:android.support.v7.cardview="http://schemas.android.com/apk/res-auto" xmlns:card_view="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="125dp" android:orientation="horizontal" android:layout_margin="5dp" card_view:cardCornerRadius="5dp" android.support.v7.cardview:cardElevation="10dp"> </android.support.v7.widget.CardView> 

So, I think you should try installing it like this in XML -

 android.support.v7.toolbar:elevation="10dp" 

Again, I have not tested this. But note that I had to use android.support.v7 to make it work.