I want to make the same toolbar. Everything is perfect but can not get the shadow as the picture shows. I design the whole things but can not get the shadow. Can anyone plz guide me. I m posting my code below and attaching the image below:
layout design image
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.cardview.widget.CardView
android:id="#+id/cvToolbar"
style="#style/materialCardView"
android:layout_width="match_parent"
android:layout_height="#dimen/dp_56"
android:layout_marginStart="#dimen/dp_8"
android:layout_marginTop="#dimen/dp_8"
android:layout_marginEnd="#dimen/dp_8"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/ivToolbarBack"
android:layout_width="#dimen/dp_0"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/dp_23"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_arrow_back" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tvToolbarTitle"
style="#style/pinVerificationToolbarTextStyle"
android:layout_width="#dimen/dp_0"
android:layout_height="#dimen/dp_40"
android:layout_marginStart="#dimen/dp_24"
android:layout_marginTop="#dimen/dp_11"
android:layout_marginEnd="#dimen/dp_8"
android:layout_marginBottom="#dimen/dp_5"
android:gravity="top"
android:text="#string/pos_system"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/ivToolbarBack"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
<style name="pinVerificationToolbarTextStyle">
<item name="android:textAppearance">#style/TextAppearance.Text.Regular</item>
<item name="android:textColor">#color/colorBlack</item>
<item name="android:textSize">22sp</item>
<item name="android:letterSpacing">-0.01</item>
<item name="android:textStyle">bold</item>
<item name="fontFamily">#font/martel_sans</item>
</style>
<style name="materialCardView">
<item name="cardBackgroundColor">#color/colorWhite</item>
<item name="cardCornerRadius">26dp</item>
<item name="cardElevation">1dp</item>
<item name="elevation">1dp</item>
<item name="android:translationZ">3dp</item>
</style>
can somebody please help me to resolve.
you can use android:background="#android:drawable/dialog_holo_light_frame" to get shadow also you can make a background drawable using any drawing software like photoshop ,xd etc
you can see this as a reference Android View shadow
Just add android:elevation=“6dp” in your toolbar
In your onCreate method of your activity code add the following code:
kotlin code:
supportActionBar?.elevation = 8F
java code:
getSupportActionBar().setElevation(8);
------------------------OR-----------------
kotlin code:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
actionBar?.elevation = 8F
}
java code:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
getActionBar().setElevation(8);
}
to achieve 8dp of elevation in your app bar. (adding elevation is going to add shadow)
You can change the numeric value to achieve the desired elevation(shadow)
Related
I am trying to set cursor/hint/icon color of my SearchView in white. Defined the style for it but SearchView is not updating it is showing in black. Kindly suggest what is missing in my code.
styles.xml
<style name="SearchViewStyle" parent="Widget.AppCompat.SearchView.ActionBar" >
<item name="android:textColorPrimary">#color/color_white</item>
<item name="android:textColorHint">#color/color_white</item>
<item name="android:tint">#color/color_white</item>
<item name="queryHint">#string/search_hint</item>
</style>
colors.xml
<color name="color_white">#FFFFFF</color>
SearchView defined in a layout:
<androidx.constraintlayout.widget.ConstraintLayout
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="?attr/actionBarSize"
android:background="#color/colorPrimary">
<-- other views code -->
<SearchView
style="#style/SearchViewStyle"
android:id="#+id/header_search_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/app_name"
android:layoutDirection="rtl"
android:iconifiedByDefault="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:scaleType="centerInside"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
UI on phone screen:
Use androidx.appcompat.widget.SearchView and not SearchView.
SearchView doesn't know what "Widget.AppCompat.SearchView.ActionBar" means.
As the title says I nedd an activity with black transparent background and a SearchView on top of it with white background and gray/custom text/icon colors.
This is what I have so far:
activity_search_input.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"
tools:context=".SearchInput">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="58dp"
android:layout_height="60dp"
android:background="#FFFFFF"
app:layout_constraintEnd_toStartOf="#+id/searchInput"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_back" />
</androidx.constraintlayout.widget.ConstraintLayout>
<SearchView
android:id="#+id/searchInput"
android:layout_width="0dp"
android:layout_height="60dp"
android:background="#FFFFFF"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/constraintLayout"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Even though the background is set to #FFFFFF it is gray!
in manifest:
<activity
android:name=".SearchInput"
android:theme="#style/Theme.AppCompat.Translucent">
</activity>
in styles.xml:
<style name="Theme.AppCompat.Translucent" parent="Theme.AppCompat.NoActionBar">
<item name="android:background">#66000000</item> <!-- Or any transparency or color you need -->
<item name="android:windowNoTitle">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:colorBackgroundCacheHint">#null</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowAnimationStyle">#android:style/Animation</item>
</style>
How can I do that? I'm already searching since couple hours for a solution for such a minor thing! Android is absolutely horrendous!
True testing this out was indeed a horrendous experience unless there's an easy method I'm unaware of. Here's a workaround I found for your case.
The main issue is this line <item name="android:background">#66000000</item> in your Translucent style, that messes up the colors which the searchView uses behind the scenes. Remove that and the background you set for searchView should be working now.
But you'll notice all the icons and textcolor remain white you will have to either individually set these with custom icons (for some reason the textColor still wouldn't change) or simply use parent="Theme.AppCompat.Light.NoActionBar" as the parent for your translucent theme.
So now your custom Translucent theme should look like below:
<style name="Theme.AppCompat.Translucent" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowNoTitle">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:colorBackgroundCacheHint">#null</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowAnimationStyle">#android:style/Animation</item>
</style>
Now since you have removed the window background from theme you will need to set a background to the root layout using android:background="#66000000"
So your activity_search_input.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="#66000000"
tools:context=".SearchInput">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="58dp"
android:layout_height="60dp"
android:background="#FFFFFF"
app:layout_constraintEnd_toStartOf="#+id/searchInput"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_back" />
</androidx.constraintlayout.widget.ConstraintLayout>
<SearchView
android:id="#+id/searchInput"
android:layout_width="0dp"
android:layout_height="60dp"
android:background="#FFFFFF"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/constraintLayout"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
The result was this
Tried different ways but this felt the easiest, check if this helps you out, or maybe someone will come up with a better method.
I have a bottomnavigation view that sets an icon depending on the state if it's checked or not.
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/icon_tree"
android:title="Tree"
android:icon="#drawable/bottomnav_icon_home">
</item>
</menu>
bottomnav_icon_home:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/icon_home_black" android:state_checked="false"/>
<item android:drawable="#drawable/icon_home_green" android:state_checked="true"/>
</selector>
How ever bottomnavigation is automatically highlighting the icon when android:state_checked is true.
How do I completely disable bottomnavigation's icon selection highlight?
I've tried setting app:itemIconTint="#drawable/bottom_navigation_selector" to #null however that doesn't work
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:menu="#menu/bottom_navigation_menu"
android:background="#color/colorWhite"
app:itemTextColor="#drawable/bottom_navigation_selector"
app:itemIconSize="28dp"
app:itemIconTint="#drawable/bottom_navigation_selector"
app:labelVisibilityMode="labeled"/>
bottom_navigation_selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:color="#color/forestGreen" />
<item android:color="#color/colorBlack" />
</selector>
If i understood you right, android by default sets a tint on your bottom navigation icons on selection and you would like it to be removed right.
I know how to do that in your java class not xml though.
You'll need to set setItemIconTintList method of your BottomNavigationView to null. So in wherever you set the layout write code as :
BottomNavigationView btmNav = findViewById(R.id.bottom_navigation);
btmNav.setItemIconTintList(null);
Let us know if this works for you.
try to add this line in the dimens.xml
<dimen name="design_bottom_navigation_active_text_size" tools:override="true">#dimen/design_bottom_navigation_text_size</dimen>
You can create custom style.
There are two steps.
1- Create custom bottom_navigation_bar_icon_color.xml in drawable folder. This is the selector showed the icon highlighted or default. So you can highlight all icons or show them as default. Choose one of the following when creating your bottom_navigation_bar_icon_color.xml
Icons highlighted: <item android:alpha="1.0" android:color="?attr/colorOnPrimary" android:state_checked="true"/>
Icons default: <item android:alpha="0.6" android:color="?attr/colorOnPrimary"/>
bottom_navigation_bar_icon_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.6" android:color="?attr/colorOnPrimary"/>
</selector>
2- Add following custom style to themes.xml or styles.xml. bottom_navigation_bar_icon_color used in itemIconTint and itemTextColor
<style name="BottomNavigationThemeCustom">
<item name="enforceTextAppearance">true</item>
<item name="enforceMaterialTheme">true</item>
<item name="android:background">?attr/colorPrimary</item>
<item name="itemIconTint">#drawable/bottom_navigation_bar_icon_color</item>
<item name="itemRippleColor">#color/mtrl_navigation_bar_colored_ripple_color</item>
<item name="itemTextAppearanceInactive">?attr/textAppearanceCaption</item>
<item name="itemTextAppearanceActive">?attr/textAppearanceCaption</item>
<item name="itemTextColor">#drawable/bottom_navigation_bar_icon_color</item>
</style>
3- Use your new style for bottomNavigationBar
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigation"
style="#style/BottomNavigationThemeCustom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
app:labelVisibilityMode="unlabeled"
app:menu="#menu/bottom_menu" />
4- If you want to hide the bottomNavigationBar on Scroll add following attribute to bottomNavigationBar
app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
You consider create your own implementation of bottomNavigation?
When I implement the Google BottomNavigationView, I got a lot of issues, so I create a new one like this:
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentBottom="true">
<View android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/grayBottomNavigationDelimiter"/>
<RadioGroup android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorNavigationBar"
android:orientation="horizontal">
<android.support.v7.widget.AppCompatRadioButton
android:id="#+id/homeButton"
android:drawableTop="#drawable/ic_home_black_24dp"
android:text="#string/navigation_home_text"
style="#style/RadioButtonStyle"/>
...
So, can see this is easier than imagine, did you?
To add it through XML: For the attribute IconItemTint and ItemTextColor, simply use the same color that you've used for icons by default. In that case, the highlight color and default color will be the same. Will give you the required ripple effect on selecting but highlight wont be visible.
For my black color icon, I've used this:
app:itemIconTint="#color/black"
app:itemTextColor="#000000"
My entire bottom nav looks like this:
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
app:itemIconTint="#color/black"
app:itemTextColor="#000000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_nav_more_options_menu" />
I have a window in an Android app which does not size correctly. The goal is to make the window wrap it's content (the TextView-s and the two Button-s), so it's a window in the middle of the screen, but it's height remains the whole screen despite my every attempt.
Image:
As you can see from the code, blue is the background of the included layout, black is the background of the main layout (for debug purposes).
Code/layout:
XML of the activity:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
android:id="#+id/NotificationLayout"
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="wrap_content"
android:background="#000FF0"
tools:context="com.tenderportkft.sped_ex.DialogActivity">
<include
android:id="#+id/NotificationDetails"
layout="#layout/auction_listitem_layout"
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toTopOf="#id/NotificationNoButton"
tools:layout_editor_absoluteX="8dp"/>
<Button
android:id="#+id/NotificationNoButton"
android:onClick="OkButtonClicked"
android:text="#string/AuctionPopup_NotInterestedText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/NotificationDetails"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>
<Button
android:id="#+id/NotificationYesButton"
android:onClick="OkButtonClicked"
android:text="#string/AuctionPopup_OpenAuctionText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/NotificationNoButton"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>
</android.support.constraint.ConstraintLayout>
XML of the included layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="wrap_content"
>
<TextView
android:id="#+id/TopRowText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="18sp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintHorizontal_bias="0.0"/>
<TextView
android:id="#+id/BottomRowText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="14sp"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintHorizontal_bias="0.0"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/TopRowText"/>
</android.support.constraint.ConstraintLayout>
XML of the style of the window:
<style name="DialogActivityTheme"
parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">#android:color/black</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsFloating">true</item>
<item name="android:backgroundDimEnabled">false</item>
</style>
Research: Researching this problem proved to be very hard as every single search result was either about problems with RelativeLayout-s or cases where the content is bigger than the window, not the other way. So my research mostly consisted of after not findig anything on google and here, randomly modifying height-settings of the layouts (and the style), so most combinations that seem logical are tried out and tested.
Platform: Android 6.0.1, API 23
EDIT: I know that floating windows are a discouraged way of displaying content, but I'm not responsible for the design, only the implementation.
EDIT2: Got closer to locating the problem - the included layout is the cause, and the solution is to replicate the contents that layout in my floating window instead of simply including the whole layout. Whether it's because of the fact of including or the specifics of the included layout is unclear.
try this
<style name="Transparent" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">#color/black_20</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsFloating">false</item>
<item name="android:backgroundDimEnabled">true</item>
</style>
<RelativeLayout 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:layout_margin="#dimen/_100dp"
android:background="#android:color/white"
tools:ignore="MissingPrefix">
// place components here
</RelativeLayout>
try this,
Window window = dialog.getWindow();
window.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
window.setLayout(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
window.setGravity(Gravity.CENTER);
I am using 'com.android.support:cardview-v7:23.4.0' and I see the shadow but is not a dark grey shadow, and I would like to get a darker elevation shadow, but I do not see any attribute to get it, any ideas?
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginRight="8dp"
android:layout_marginLeft="8dp"
android:layout_marginBottom="8dp"
app:cardElevation="8dp"
app:cardPreventCornerOverlap="false"
app:cardCornerRadius="1dp"
app:cardUseCompatPadding="false">
<include layout="#layout/any_layout"/>
</android.support.v7.widget.CardView>
I believe that the shadow intensity is defined by the underlying theme that the app uses. So for API level more than 21, you can override the intensity of shadows. In your styles.xml add these two extra lines of ambientShadowAlpha and spotShadowAlpha. Please note that these values range from 0 to 1, with 0 being completely transparent and 1 being completely opaque(almost black) :
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:fontFamily">#font/barlow_family</item>
<item name="android:ambientShadowAlpha">1</item>
<item name="android:spotShadowAlpha">1</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:statusBarColor">#android:color/background_light</item>
</style>
<androidx.cardview.widget.CardView app:cardCornerRadius="10dp"
app:cardUseCompatPadding="true"
android:elevation="10dp"
android:outlineSpotShadowColor="#color/black"
android:outlineAmbientShadowColor="#color/grey"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
app:cardUseCompatPadding="true"
try this
You can't change cardView shadow color but to make it darker you can use app:cardElevation="15dp" like
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_margin="10dp"
app:cardElevation="15dp"
> </android.support.v7.widget.CardView>
there is no way to change color of official CardView elevation, look at this Carbon
Try using this solution. Wrap your cardview in a RelativeLayout and give a background to it.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#FFE7E2E4">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardElevation="5dp"
app:cardUseCompatPadding="true"/>
</RelativeLayout>