A simple problem, I used a CardView
to add elevation to a Button but when assigning cardElevation
, then the CardView
draws a box inside of itself, I tried switching the elevation and other attributes and I can minimize the effect of it by increasing the cardElevation
but that is not a solution.
Here is the CardView
from the XML.
<androidx.cardview.widget.CardView
android:layout_width="38sp"
android:layout_height="38sp"
app:cardElevation="5sp"
android:layout_gravity="end"
android:layout_marginTop="60sp"
android:layout_marginRight="12sp"
android:layout_marginEnd="12sp"
app:cardBackgroundColor="#97FFFFFF"></androidx.cardview.widget.CardView>
The CardView
in the app. (The box in the upper right corner)
The whole XML file, the last CardView
is the one on the image.
<?xml version="1.0" encoding="utf-8"?>
<com.flipboard.bottomsheet.BottomSheetLayout
android:id="@+id/bottomsheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.map.MapFragment">
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardElevation="20dp"
android:layout_gravity="end"
android:layout_marginTop="60dp"
android:layout_marginRight="12dp"
android:layout_marginEnd="12dp"
app:cardBackgroundColor="#97FFFFFF">
<ImageButton
android:layout_width="38dp"
android:layout_height="38dp"
android:padding="1dp"
android:src="@drawable/ic_baseline_refresh_24"
android:background="#00FFFFFF"
android:elevation="10dp"
android:id="@+id/btn_reset_map"/>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardElevation="20dp"
android:layout_gravity="end"
android:layout_marginTop="10dp"
android:layout_marginRight="12dp"
android:layout_marginEnd="12dp"
app:cardBackgroundColor="#97FFFFFF">
<ImageButton
android:layout_width="38dp"
android:layout_height="38dp"
android:padding="1dp"
android:src="@drawable/ic_baseline_layers_24"
android:background="#00FFFFFF"
android:elevation="10dp"
android:id="@+id/btn_layer_map"/>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="38dp"
android:layout_height="38dp"
app:cardElevation="5dp"
android:layout_gravity="end"
android:layout_marginTop="40dp"
android:layout_marginRight="12dp"
android:layout_marginEnd="12dp"
app:cardBackgroundColor="#97FFFFFF"></androidx.cardview.widget.CardView>
</LinearLayout>
</fragment>
</com.flipboard.bottomsheet.BottomSheetLayout>
You can set the CardView
background color programmatically to the same color as the color set with app:cardBackgroundColor
CardView cardview = findViewById(R.id.cardview);
cardview.setBackgroundColor(ContextCompat.getColor(this, R.color.cardview_color));
And create this color in colors.xml
<color name="cardview_color">#97FFFFFF</color>
And add this id to the xml:
<androidx.cardview.widget.CardView
android:id="@+id/cardview"
....
Note: For some reason android:background="#97FFFFFF"
doesn't work