When a child of a MaterialCardView fully overlays it, the shadow under it disappears. I have tried setting elevation to the view itself but to no effect.
Example layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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=".MainActivity">
<!-- Elevation of this card is large for demonstration purposes -->
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="90dp"
android:layout_margin="16dp"
app:cardElevation="24dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<View
android:layout_width="120dp"
android:layout_height="match_parent"
android:background="#color/purple_500"
android:elevation="24dp"
app:elevation="24dp" />
</com.google.android.material.card.MaterialCardView>
</androidx.constraintlayout.widget.ConstraintLayout>
Screenshot of the problem:
Here shadow is clearly visible under white background of the card, but not under purple view.
The app was tested on API 30 emulator, but I have observed similar behaviour on API 29 physical device.
Ok it turns out that it was just an optical illusion: if you overlay the purple control in Paint the shadow is consistent:
Now its up to me how to prevent the following illusion from impacting the visual experience of my app.
Related
I am using a MaterialCardView to display the following expected layout.
IOS screen shot, expected UI
But on Android side it looks like this. Android screenshot, shadow does not appear on all sides, mainly on the top
This is my code for this.
<com.google.android.material.card.MaterialCardView 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="wrap_content"
app:strokeWidth="#dimen/cds_dimen_1dp"
app:strokeColor="#D9D9D9"
android:layout_margin="#dimen/cds_dimen_4dp"
app:cardCornerRadius="#dimen/cds_dimen_8dp"
app:cardElevation="#dimen/cds_dimen_6dp">
[...]
</com.google.android.material.card.MaterialCardView>
What is that I need to do to achieve this?
this is an item_layout_row for a recyclerview
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerview_reason"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
app:layout_constraintTop_toBottomOf="#id/textView"
android:layout_marginTop="#dimen/cds_dimen_20dp"
android:paddingBottom="#dimen/cds_dimen_20dp"/>
Summary
I try to make Bottom Navigation View with Java and android studio.
However, it disappears the bar regardless of showing exact screen in the xml file.
Goal
I'd like to show BottomNavigationView like this video.
Goal screen is below picture.
Issue
I am coding the video, and done. The xml file is exact screen layout,
but when I build the screen, I saw different layout.
What I try
Compared to the code, almost all code isn't different.
Also turn off the fragment code, it works.
I guess the reason why it is disappear must be layout.
However, when I change the number of width or height, it shows same screen.
What's more, when I use layout construction such as Linerlayout, it shows same screen.
Code
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:background="#color/white"
tools:context=".home">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomnavi"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_menu"/>
<fragment
android:id="#+id/fragment2"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="409dp"
android:layout_height="673dp"
app:defaultNavHost="true"
app:layout_constraintBottom_toTopOf="#id/bottomnavi"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="#navigation/my_nav" />
</androidx.constraintlayout.widget.ConstraintLayout>
It is better if you set the layout_width and layout_height parameter of the fragment to 0dp unless you want it for some reason.
Change these parameters of the <fragment:
android:layout_width="0dp"
android:layout_height="0dp"
Change/Add these parameters of your <com.google.android.material.bottomnavigation.BottomNavigationView:
android:layout_width="0dp"
app:layout_constraintTop_toBottomOf="#+id/fragment2"
And see if the problem is fixed.
This question already has answers here:
White Space with CardView on pre-lollipop devices
(2 answers)
Closed 3 years ago.
When i run my code on api 28 i do not see this white border along the inner edges of the cardview. but on api 19 i get the following rendered:
My desire is for the color to entirely fill the cardview, and it should clip the corners so i keep the desired rounded effect. here is the simple demo code showing its not working:
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="300dp"
android:layout_height="170dp"
android:theme="#style/Theme.MaterialComponents.Light"
app:cardBackgroundColor="#android:color/white"
app:cardCornerRadius="8dp"
app:cardElevation="4dp"
app:rippleColor="#android:color/transparent"
app:strokeWidth="0dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_blue_dark" />
</com.google.android.material.card.MaterialCardView>
note: take a look at what it looks like when rendered on api 28, its exactly what i desire:
UPDATE: I ADJUSTED
using app:cardPreventCornerOverlap="false" , but makes it not rounded. when i put a border around it its not contained in the border now.
can someone suggest :
Just set app:cardPreventCornerOverlap="false" in your xml
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="300dp"
android:layout_height="170dp"
android:theme="#style/Theme.MaterialComponents.Light"
app:cardBackgroundColor="#android:color/white"
app:cardCornerRadius="8dp"
app:cardElevation="4dp"
app:rippleColor="#android:color/transparent"
app:strokeWidth="0dp"
app:cardPreventCornerOverlap="false" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_blue_dark" />
</com.google.android.material.card.MaterialCardView>
i ended up creating a white border that i use ..so i set the strokeColor to white if its below api 19. that seems to be the best i can do . and i do set app:cardPreventCornerOverlap="true" ...its not perfect but achieving elevation on lolipop is a dream come true with this materialCardView.
I'd like to add some padding to my recycler view so the status bar doesn't cover the first item. The problem is when I apply top padding, a solid white shows on top preventing the full screen experience.
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"
android:id="#+id/root_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/RecentVizzyView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="48dp" />
<ProgressBar
android:id="#+id/progressbar"
android:layout_width="65dp"
android:layout_height="65dp"
android:layout_gravity="center"
android:indeterminate="true"
android:indeterminateTint="#color/lightGreen"
android:indeterminateTintMode="src_atop" />
</android.support.design.widget.CoordinatorLayout>
and I'm setting no limits flag to my screen:
getActivity().getWindow().setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
Set android:clipToPadding="false" on your RecyclerView.
That will allow the paddingTop (and bottom, if you want), to be part of the scrollable part.
A better description is found here:
Android what does the clipToPadding Attribute do?
Here my layout xml:
<?xml version="1.0" encoding="utf-8"?>
<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:id="#+id/catalog_item_card_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
card_view:cardCornerRadius="5dp"
card_view:cardUseCompatPadding="true">
<android.support.constraint.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/imageViewPhoto"
android:layout_width="wrap_content"
android:layout_height="160dp"
android:src="#drawable/test_merchant_preview"
card_view:layout_constraintLeft_toLeftOf="parent"
card_view:layout_constraintRight_toRightOf="parent"
card_view:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
Here result on Andrdoid 5.0+
As you can see the ImageView success show with radius. OK.
Now I run app on Android 4.3.
And here result:
As you can see the ImageView show without radius.
Why?
ImageView in CardView not show radius on Android 4.3
CardView elevation only work on android 5.0 and above
CardView uses elevation property on Lollipop for shadows and falls back to a custom emulated shadow implementation on older platforms.
Due to expensive nature of rounded corner clipping, on platforms before Lollipop, CardView does not clip its children that intersect with rounded corners. Instead, it adds padding to avoid such intersection
more information read here