Develop Reference

How can I drop shadow background on Android?

I want to add a background behind the button. I want to create an opaque shape from white color for this background.. I did this with a gradient, but I couldn't. I want to create a soft shape.. I want a white shape like in the picture
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="270"
android:dither="false"
android:endColor="#FFFFFF"
android:startColor="#CCFFFFFF" />
<corners android:radius="5dp" />
</shape>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#drawable/drop_shadow" // here
android:paddingTop="16dp">
<TextView
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green"
android:gravity="center"
android:text="#string/next"
android:textColor="#color/white"
android:textSize="22sp"
android:textStyle="bold" />
</RelativeLayout>

You should use a FrameLayout as root layout, and use an ImageView anchored to the bottom of the screen:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/id_framelayout"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".YourActivity">
<TextView
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green"
android:gravity="center"
android:text="#string/next"
android:textColor="#color/white"
android:textSize="22sp"
android:textStyle="bold"
/>
<LinearLayout
android:orientation="vertical"
android:layout_gravity="bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatImageView
android:src="#drawable/shadow"
android:layout_width="match_parent"
android:layout_height="200dp"
/>
<FrameLayout
android:background="#color/white"
android:layout_width="match_parent"
android:layout_height="200dp">
< IF YOU WANT, YOU CAN INSERT HERE YOUR BUTTON >
</FrameLayout>
</LinearLayout>
</FrameLayout>
The shadow should be defined on res/drawable/shadow.xml as follows:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="-90"
android:endColor="#FFFFFF"
android:centerColor="#88FFFFFF"
android:startColor="#android:color/transparent"
android:type="linear">
</gradient>
</shape>

How to make a second color border with MaterialCardView?

I cannot find any questions online that have asked for this specifically
Screenshot of Square Border
How would I implement a red "second" border like in the image but on one side? I am using MaterialCardView for the main outside border. Would I just make a custom shape with red border on the left and use that as the background for the MaterialCardView?

This can be achieved easily with three nested MaterialCardViews by changing only the app:cardBackgroundColor, the app:cardCornerRadius and the android:layout_margin attributes for each card.
Below is the Xml Layout sample:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="10dp"
app:cardBackgroundColor="#81afdc"
app:cardCornerRadius="10dp">
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="4dp"
app:cardBackgroundColor="#a70e09"
app:cardCornerRadius="10dp">
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="6dp"
app:cardBackgroundColor="#ffffff"
app:cardCornerRadius="6dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Sample Text"/>
</com.google.android.material.card.MaterialCardView>
</com.google.android.material.card.MaterialCardView>
</com.google.android.material.card.MaterialCardView>
Result:

First, create two drawable resource file like below:
bg_cardView_inner_color.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/holo_red_dark"/>
<corners android:radius="7dp"/>
</shape>
bg_cardView_outline_color.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/white" />
<stroke android:color="#android:color/holo_blue_light"
android:width="5dp"/>
<corners android:radius="10dp"/>
</shape>
Then, in your XML file, Add those files as below:
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"
tools:context=".DemoActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:background="#drawable/bg_cardview_outline_color"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
app:cardCornerRadius="5dp"
app:cardElevation="2dp"
app:cardUseCompatPadding="true"
android:paddingBottom="5dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:background="#drawable/bg_cardview_inner_color">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:gravity="center_vertical|center"
android:layout_marginStart="10dp">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/your_image"
app:tint="#color/black"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="your text"
android:textSize="30sp"
android:gravity="center"
android:textStyle="bold"
/>
</LinearLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

How to set gradient color from complete transparency to dark in android?

I have an imageview and a cardview elevated on top of it. The cardview contains multiple views inside it.
I want to set a background color to cardview such that its startcolor should make the initial part of the imageview behind it to be visible at a transparency rate of 30% and the cardview should become darker and darker and black at the end.
This is what I have tried so far:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#80000000"
android:endColor="#FF000000"
android:angle="270"
android:dither="true"
/>
</shape>
This doesn't make my imageview visible.I have explored many SOF posts but wasn't able to reproduce what I want!
Any inputs are welcome and would be very helpful!!

Use this XML code
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#21293B"
android:centerColor="#21293B00"
android:endColor="#00000000"
android:angle="90"/>
</shape>
put it as a background to a View, put that View above your ImageView
<RelativeLayout
android:id="#+id/player_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/shasha_poster"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:minHeight="500dp"
android:scaleType="centerCrop"
android:src="#drawable/placeholder"
android:visibility="visible" />
<View
android:id="#+id/gradient"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_with_shadow2" />
</RelativeLayout>

You can do something like this
// this is your back image
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/xxxxx"
...
/>
// your cardview over the image
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="100dp"
app:cardBackgroundColor="#00000000" // make cardview transparent
...
>
// an image to make the new drawable background
<ImageView
android:background="#drawable/gradient" // the xml with your gradient
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
/>
</android.support.v7.widget.CardView>

I think this is what you looking for, I test this and work as you expected.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/your_image" />
<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_height="wrap_content"
android:fillViewport="true"
card_view:cardBackgroundColor="#color/transparent"
card_view:cardCornerRadius="5dp"
card_view:cardElevation="0dp"
card_view:cardMaxElevation="0dp"
card_view:cardPreventCornerOverlap="false"
card_view:cardUseCompatPadding="true"
card_view:contentPaddingTop="2dp">
<RelativeLayout
android:id="#+id/list_container_bg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/your_gradient"
android:gravity="center"
android:orientation="vertical">
<!--Add your cardview contents-->
</RelativeLayout>
</android.support.v7.widget.CardView>
</FrameLayout>
This is the gradient background file your_gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#80000000"
android:endColor="#FF000000"
android:angle="270"
android:dither="true"
/>
</shape>

RuntimeException when trying to shape corner of Cardview

I have a CardView and I wanted to shape the corners of the cardview, I found a xml code snippet here and added it to my cardview and get this error, please look at the comment in the test.xml layout
EDIT: When I change background of the cardview to "#ffffff" (white) it works. It only crashes when I use card_view:cardBackgroundColor="#drawable/ic_corner_color"
EDIT 2: I want the corners look like this in the picture in the question, click
java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.user.app/com.example.user.app.Test}: android.view.InflateException: Binary XML file line #14: Error inflating class android.support.v7.widget.CardView
This is my test.xml layout
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:tag="cards main container">
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_viewtest"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardBackgroundColor="#drawable/ic_corner_color" **// here is the error**
card_view:cardCornerRadius="10dp"
card_view:cardElevation="5dp"
card_view:cardUseCompatPadding="true"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:layout_weight="2"
android:orientation="vertical"
android:weightSum="1">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.96"
android:background="#ffffff"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme">
<ImageView
android:id="#+id/imageViewtest"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:src="#drawable/ic_drive_eta_black_24dp"
android:tag="image_tag" />
</android.support.v7.widget.Toolbar>
<TextView
android:id="#+id/textViewNametest"
android:layout_width="340dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:layout_weight="0.96"
android:text="some
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</ScrollView>
My ic_corner_color.xml, which is in the drawable folder, looks like this:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="#ffffff" />
<stroke android:width="1dip" android:color="#00ff00"/>
<corners android:radius="20dip"/>

I'm fairly sure cardBackgroundColor expects a color, not a drawable. Change it to #color/mycolor.

Android RelativeLayout Ripple effect

In my view, I would like a ripple effect to appear whenever a user touches an ImageView in the layout. I've tried wrapping the ImageView inside a RelativeLayout, but it hasn't worked. Here is the layout:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.sample.me.TapActivity" >
<RelativeLayout
android:id="#+id/tap_view_frame"
android:layout_width="#dimen/activity_tap_image_width"
android:layout_height="#dimen/activity_tap_image_height"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:clickable="true"
android:background="#drawable/ripple_view" >
<ImageView
android:id="#+id/tap_view"
android:src="#drawable/ram"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:clickable="true" />
</RelativeLayout>
<TextView
android:id="#+id/tap_name_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/white"
android:layout_marginLeft="#dimen/textview_horizontal_margin"
android:layout_alignParentLeft="true"
android:layout_above="#+id/tap_number_textView"/>
<TextView
android:id="#+id/tap_number_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/white"
android:layout_marginBottom="#dimen/textview_vertical_margin"
android:layout_alignLeft="#+id/tap_name_textView"
android:layout_alignBottom="#+id/tap_view_frame" />
<android.support.v7.widget.CardView
android:id="#+id/tap_card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/cardview_horizontal_margin"
android:layout_marginRight="#dimen/cardview_horizontal_margin"
android:layout_marginTop="#dimen/cardview_vertical_margin"
android:layout_below="#+id/tap_view_frame">
<android.support.v7.widget.RecyclerView
android:id="#+id/tap_options_recyclerview"
android:layout_width="match_parent"
android:layout_height="#dimen/cardview_tap_height" />
</android.support.v7.widget.CardView>
And here is the "ripple_view" drawable:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#ffa0a0a0">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#ffa0a0a0"/>
</shape>
</item>
</ripple>
I have also tried adding in the android:background="?android:attr/selectableItemBackground" tag, but that didn't seem to help. Can anyone explain why the ripple is not showing up? I used the same method to enable the effect in my custom buttons and RecyclerView rows, but it is not working for the RelativeLayout. Ideally, I would like to avoid using a third party library for something as simple as this.