Since upgrading to SDK 21 I've been trying to use the elevation property but it never seems to work.
I want to elevate a frame above others so I'm setting the following
android:elevation="4dp"
but there's no sign of shadow. I've tried buttons and framelayouts but not got any elevation
So here's the full tag
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/panel_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:elevation="4dp"
>
Am I missing something else I need to add
Make sure that the background for the container holding the FrameLayout is not transparent.
According to this Z = Elevation + TranslationZ
so try this:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/panel_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:elevation="4dp"
android:translationZ="4dp">
You need to add a background to it something like:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/panel_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="4dp"
android:background="#drawable/dialog_background">
Instead of using white color. Otherwise the shadows won't work. Also, is it not necessary to use android:translationZ attribute since that just adds to the elevation, but is not required if you don't want animation.
Related
In short, I don't want the empty space below the icons of bottom navigation view. Here is how it looks.
Screenshot with layout bounds enabled in developer options
Screenshot without layout bounds enabled in developer options
This is what I have done in MainActivity layout file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:theme="#style/Theme.Breathe"
tools:context=".MainActivity"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="0.1">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/mainFrag" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="0.9"
android:gravity="center">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/_50sdp"
android:layout_marginRight="#dimen/_50sdp"
android:elevation="8dp"
app:itemIconTint="#drawable/bottom_navigation_color"
app:labelVisibilityMode="unlabeled"
app:menu="#menu/bottom_navigation_menu" />
</LinearLayout>
This is what I have done on the Java side:
switch (getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK) {
case Configuration.UI_MODE_NIGHT_YES:
Log.d("Dark Mode","Dark mode");
shape = new GradientDrawable();
shape.setCornerRadius( 40 );
shape.setColor(Color.DKGRAY);
bottomNavigationView.setBackground(shape);
break;
case Configuration.UI_MODE_NIGHT_NO:
Log.d("Light Mode","Light mode");
shape = new GradientDrawable();
shape.setCornerRadius( 40);
shape.setColor(Color.WHITE);
bottomNavigationView.setBackground(shape);
break;
}
I have used java to set the shape drawable so as to implement light/dark theme based on system settings.
I have tried padding, it works but then the layout of the icons messes up on smaller display sizes. I am hoping there's another way to do it.
The issue was with the bottom navigation view conflicting somehow with the sticky immersive mode. Changing the way how I achieved full screen solved the problem.
Even though it's an old question.
For those that still encounter this. The problem is that on older phones with system built-in bottom navigation bar
like this
the system does NOT render correctly BottomNavigationView if the system navigation bar is transparent.
So quick fix: If your system navigation bar is transparent (from the Themes.xml or programtically) change it to solid and it should fix it.
In my application I use the android.support.v7.widget.Toolbar for the toolbar.
Here is my 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.todo.app.MainActivity"
style="#style/MainActivityBg">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
<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="#style/AppTheme.AppBarOverlay"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
style="#style/AppTheme.ActionBar"/>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main"/>
and
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main"
tools:context="com.todo.app.MainActivity"
android:layout_marginTop="5dp"> <!-- for adding some space between the toolbar and the rest, and this is the cause of the problem! -->
<android.support.v7.widget.RecyclerView
android:id="#+id/task_list"
android:layout_width="match_parent"
android:layout_height="match_parent" />
I try to add some space between the toolbar and the rest of the view. To do that I added 5dp in marginTop to the layout which is right under the view. And this causes this problem:
While I scrolling the view there is some space remaining under the toolbar.
In my style files xml, there is no style for margin or padding.
How I can adding some space between toolbar and the rest without trigger this problem (when I scrolling the view)?
Reason
Based on the xml files, it seems to me that:
<android.support.constraint.ConstraintLayout
...
android:layout_marginTop="5dp">
is the reason for cropping RecyclerView content.
When you set the layout_marginTop between the AppBarLayout and the upper edge of ConstraintLayout appears a 5dp high empty space.
You can confirm that by turning on one of the Android options for developers: Show Layout Bounds.
Solution
For the effect which you want to achieve try to remove android:layout_marginTop and set android:paddingTop for the RecyclerView but also set android:clipToPadding to false.
Check the gif in this SO answer.
<android.support.v7.widget.RecyclerView
android:id="#+id/task_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="5dp"
android:clipToPadding="false" />
This will allow you to add the desired space at the beginning of scrollable content but prevent cropping the items.
If the 5dp top margin isn't the problem, it may be the toolbar elevation, try to change 4dp to something much higher and check if changes your problem. Can you try same with margin top? Also a negetive margin sometimes work. Put a negetive margin on button of the toolbar and check.
I am trying to design a transparent glass type bar like this -
I am poor in designing. How can I achieve it. Is there any property?
Thanks in Advance
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 is an example of a working code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:orientation="vertical">
<fragment
android:id="#+id/fragment_editor"
android:name="ichsan.myapp.HelloFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout="#layout/fragment_editor" />
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#10000000"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</RelativeLayout>
Source : transparent Actionbar with AppCompat-v7 21
The glass style background is a bit more complex than just simple transparency. You might wanna use intrinsic blur. So the way to do this would be take a simple white image, perform intrinsic blur -> set the blurred output bitmap as the background for your toolbar. Now set alpha to somewhere around 0.6f and you will have something similar. It won't exactly be exactly like the image you provided, but might be the easiest way to get a similar effect.
I'm building an app for Android using a viewPager, and things work just fine on a phone, but on a tablet there is a gray background on both sides of the tabs, the need is to change this background color to white.
On a phone it Looks just fine, sorry for ugly censoring
On a tablet the gray background appears
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:id="#+id/pager"
android:layout_width="match_parent" android:layout_height="match_parent"
tools:context=".MainActivity"
android:background="#color/white" />
The styles I've tried to override are the ones below, I've tried to set most properties that contain the word "color" to white, but nothing has worked.
android:actionBarStyle
android:actionBarTabStyle
android:actionBarTabBarStyle
I base my theme on Theme.AppCompat.Light
I've also tried setting the background of the viewPager and actionBar in code, but it did nothing, I'm guessing it's a subview I need to get to. I've been googling my heart out but I can't find anything about this specific styling.
You can do something like this.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:background="#android:color/white" >
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white" />
</RelativeLayout>
Am using the cardview in my android app. However the shadow is not showing. Here is the xml layout
The default optionsmenu shadow also not showing.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ECEDF0"
android:orientation="vertical" >
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:clipChildren="false"
card_view:cardBackgroundColor="#color/white"
card_view:cardCornerRadius="4dp"
card_view:cardElevation="14dp"
card_view:cardUseCompatPadding="true" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="Google Play" />
</android.support.v7.widget.CardView>
</LinearLayout>
After going through the docs again, I finally found the solution.
Just add card_view:cardUseCompatPadding="true" to your CardView and shadows will appear on Lollipop devices.
What happens is, the content area in a CardView take different sizes on pre-lollipop and lollipop devices. So in lollipop devices the shadow is actually covered by the card so its not visible. By adding this attribute the content area remains the same across all devices and the shadow becomes visible.
My xml code is like :
<android.support.v7.widget.CardView
android:id="#+id/media_card_view"
android:layout_width="match_parent"
android:layout_height="130dp"
card_view:cardBackgroundColor="#android:color/white"
card_view:cardElevation="2sp"
card_view:cardUseCompatPadding="true"
>
...
</android.support.v7.widget.CardView>
As mentioned there CardView not showing Shadow in Android L
make sure that you are drawing your view using hardwareAccelerated = true
hardwareAccelerated = true
hardwareAccelerated = false
See Android Hardware Acceleration for details
For Lollipop and higher you should add some margins to the card:
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
/>
Since the shadow lies outside of the actual view
for someone ,
one other thing that you should be aware of, shadows will not show if you have this line in the manifest:
android:hardwareAccelerated="false"
I tried all of the suggested stuff but it only worked for me when i removed the line, the reason i had the line was because my app works with a number of bitmap images and they were causing the app to crash.
Please try to put android:hardwareAccelerated="false" androidManifest file may solve your issue because i also faced same issue and solved by adding 1 line only in manifest.
Hey friends I got the solution of above problem.Just add this code in your xml.
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_margin="8dp"
android:id="#+id/griditem"
android:layout_height="match_parent"
card_view:cardUseCompatPadding="true"
card_view:cardElevation="4dp"
card_view:cardCornerRadius="3dp">`
I hope it will helpful for you...