Develop Reference

How to set elevation for circle imageview?

Requirement : I need to set elevation shadow for circle imageview.
Problem: If I set elevation for imageview shadow applied for square image. (circle shadow not applied)
I used circleimageview from this library -> https://github.com/hdodenhof/CircleImageView
Too many google search & SO search not able to find solution. Anyone give hint to fix this issue.

Here is the solution, Use drawable background for rounded saddow
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/imgDrawerUser"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="#drawable/back_avtar"
android:src="#drawable/ic_profile" />
Create back_avtar.xml inside drawable folder
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<padding android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#00CCCCCC" />
<corners android:radius="3dp" />
</shape>
</item>
<item>
<shape android:shape="oval">
<padding android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#10CCCCCC" />
<corners android:radius="3dp" />
</shape>
</item>
<item>
<shape android:shape="oval">
<padding android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#20CCCCCC" />
<corners android:radius="3dp" />
</shape>
</item>
<item>
<shape android:shape="oval">
<padding android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#30CCCCCC" />
<corners android:radius="3dp" />
</shape>
</item>
<item>
<shape android:shape="oval">
<padding android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#50CCCCCC" />
<corners android:radius="3dp" />
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#color/colorPrimary" />
<corners android:radius="3dp" />
</shape>
</item>
</layer-list>
I hope this will works for you.

Finally I found the CircularImageView library for circle elevation.
Library link - https://github.com/lopspower/CircularImageView
They give the default shadow feature
app:civ_shadow_radius
Sample code
<com.mikhaellopez.circularimageview.CircularImageView
android:layout_width="250dp"
android:layout_height="250dp"
android:src="#drawable/image"
app:civ_border_color="#3f51b5"
app:civ_border_width="4dp"
app:civ_shadow="true"
app:civ_shadow_radius="10"
app:civ_shadow_color="#3f51b5"/>

Android: box shadow and border radius layout

I want box shadow and radius like below image, but in android box shadow not work
How can i use xml for this problem ?

for corner you have to use drawable like below:
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<!-- view border color and width -->
<stroke
android:width="1dip"
android:color="#a4a2a2" >
</stroke>
<corners android:radius="180px">
</corners>
<!-- Here is the corner radius -->
and about shadow
i think you mean android:elevation="8dp"
<Yourbox
android:width="match_parent"
android:height="match_parent"
....
android:elevation="8dp"
android:layout_gravity="center"
..
/>

You can set this shape as background of any views
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Drop Shadow Stack -->
<item>
<shape>
<corners android:radius="4dp" />
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#00CCCCCC" />
</shape>
</item>
<item>
<shape>
<corners android:radius="4dp" />
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#10CCCCCC" />
</shape>
</item>
<item>
<shape>
<corners android:radius="4dp" />
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#20d5d5d5" />
</shape>
</item>
<item>
<shape>
<corners android:radius="6dp" />
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#30cbcbcb" />
</shape>
</item>
<item>
<shape>
<corners android:radius="4dp" />
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="#50bababa" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="#color/gray_100" />
<corners android:radius="4dp" />
</shape>
</item>
</layer-list>

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="270dp"
android:layout_height="130dp"
android:layout_margin="15dp"
android:translationZ="4dp"
app:cardCornerRadius="6dp"
app:cardElevation="0dp">
.....
</androidx.cardview.widget.CardView>
just use translationZ

CardView's background which will respond to android:state_selected and android:state_pressed

I'm referring to the answer at https://stackoverflow.com/a/24475228/72437
The proposed answer is using drawable from Android : ?android:attr/selectableItemBackground
This is what happen when I tap on the card item. Note that, by using drawable from Android, android:state_selected="true" (when setSelected(true)) will not have any color change effect.
Hence, I would like to use my own defined drawable so that
It looks nicer.
Able to handle android:state_selected="true".
Here's my code
statelist_item_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/selected_background" />
<item android:state_selected="true" android:drawable="#drawable/selected_background" />
<item android:drawable="#android:color/transparent" />
</selector>
selected_background.xml
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffe1b3" />
<stroke
android:width="1px"
android:color="#fff76d3c" />
</shape>
card_row.xml
<!-- A CardView that contains a TextView -->
<android.support.v7.widget.CardView 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:id="#+id/card_view"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:clickable="true"
android:foreground="#drawable/statelist_item_background"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:padding="5dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/txt_label_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
tools:text="Item Number One" />
<TextView
android:id="#+id/txt_date_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
tools:text="Item Number One" />
</LinearLayout>
</android.support.v7.widget.CardView>
When I long press on the card item and perform childView.setSelected(true);, here's my outcome.
All my card content (TextViews) are blocked. How can I avoid such?
Some notes regarding using android:background
Note, when you use android:background="#drawable/statelist_item_background" with CardView itself, nothing will happen.
However, if you use android:background="#drawable/statelist_item_background" with CardView's LinearLayout, you will get the following imperfect outcome.
The highlighted color doesn't cover the entire card.
Update
Seem like this is limitation of CardView - https://code.google.com/p/android/issues/detail?id=78198 Using "foreground" as workaround is not an option as it covers card content.

After experimenting for quite some time, I can pretty much conclude that this is limitation of current CardView - https://code.google.com/p/android/issues/detail?id=78198
Don't use CardView's foreground workaround. Although it is widely being proposed, it just don't work!
My suggestion is, avoid using CardView if you need a customized selector. Replace it LayerDrawable. Here's what I had done.
card.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#ffededed" />
<corners android:radius="2dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<stroke
android:width="1dp"
android:color="#ffe8e8e8" />
<corners android:radius="2dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="0dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<stroke
android:width="1dp"
android:color="#ffe1e1e1" />
<corners android:radius="2dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="0dp" android:right="0dp" android:bottom="1dp" android:left="0dp" />
<stroke
android:width="1dp"
android:color="#ffdbdbdb" />
<corners android:radius="2dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="0dp" android:right="0dp" android:bottom="1dp" android:left="0dp" />
<stroke
android:width="1dp"
android:color="#ffd5d5d5" />
<corners android:radius="2dp" />
</shape>
</item>
<!--
<item>
<shape>
<padding android:top="0dp" android:right="0dp" android:bottom="1dp" android:left="0dp" />
<stroke
android:width="1dp"
android:color="#ffcfcfcf" />
<corners android:radius="2dp" />
</shape>
</item>
-->
<item>
<shape >
<solid android:color="#ffffffff" />
<corners android:radius="2dp" />
</shape>
</item>
</layer-list>
card_selected.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<stroke
android:width="1dp"
android:color="#ffededed" />
<corners android:radius="2dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<stroke
android:width="1dp"
android:color="#ffe8e8e8" />
<corners android:radius="2dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="0dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<stroke
android:width="1dp"
android:color="#ffe1e1e1" />
<corners android:radius="2dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="0dp" android:right="0dp" android:bottom="1dp" android:left="0dp" />
<stroke
android:width="1dp"
android:color="#ffdbdbdb" />
<corners android:radius="2dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="0dp" android:right="0dp" android:bottom="1dp" android:left="0dp" />
<stroke
android:width="1dp"
android:color="#ffd5d5d5" />
<corners android:radius="2dp" />
</shape>
</item>
<!--
<item>
<shape>
<padding android:top="0dp" android:right="0dp" android:bottom="1dp" android:left="0dp" />
<stroke
android:width="1dp"
android:color="#ffcfcfcf" />
<corners android:radius="2dp" />
</shape>
</item>
-->
<item>
<shape>
<solid android:color="#ffffe1b3" />
<stroke
android:width="1px"
android:color="#fff76d3c" />
<corners android:radius="2dp" />
</shape>
</item>
</layer-list>
statelist_item_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="#android:integer/config_mediumAnimTime">
<item android:state_pressed="true" android:drawable="#drawable/card_selected" /> <!-- pressed -->
<item android:state_selected="true" android:drawable="#drawable/card_selected" /> <!-- pressed -->
<item android:drawable="#drawable/card" />
</selector>
layout.xml
<!-- A CardView that contains a TextView -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:padding="10dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#drawable/statelist_item_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true" >
<TextView
android:id="#+id/txt_label_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
tools:text="Item Number One" />
<TextView
android:id="#+id/txt_date_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
tools:text="Item Number One" />
</LinearLayout>
You will get the pretty nice outcome.

I've just tried MaterialCardView and this works:
<com.google.android.material.card.MaterialCardView
android:id="#+id/material_card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/activity_vertical_margin"
app:cardCornerRadius="4dp"
app:cardBackgroundColor="#color/selector_background_color"
app:strokeWidth="2dp">
selector_background_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#android:color/white" android:state_activated="true"/>
<item android:color="#android:color/darker_gray" android:state_activated="false"/>
In the Activity/Fragment:
material_card_view.setOnClickListener {
it.isActivated = !it.isActivated
}
For the strokeColor though, you can't use a selector. You will have to do it programmatically if you want the stroke color to change as per selector state.
Example for state_activated:
val colorStateList: ColorStateList =
ResourcesCompat.getColorStateList(resources,
R.color.selector_stroke_color, null)!!
val colorForState =colorStateList.getColorForState(intArrayOf(android.R.attr.state_activated), colorStateList.defaultColor)
material_card_view.strokeColor = colorForState

All my card content (TextViews) are blocked. How can I avoid such?
Your blocked issue can easily be solved with some color theory knowledge. Instead of using the given peach color, you could use a variant of the peach shade with a higher transparency.
Color Code scheme in Android xxyyyyyy
xx is your transparency level, and y's are your color.
xx max value is : ff // this is fully visible
xx min value is : 00 // this is full invisible
So by playing around on the color wheel, you can get the right effect with the right amount of transparency needed for your view.

for the background not covering the entire card issue, it is due to the cornerRadius drawing limitation. There are two solutions for this:
Disable round corner for your card will resolve the problem. app:cardCornerRadius="0dp"
You can retain cardCornerRadius but you need to set app:cardPreventCornerOverlap="false"

MaterialCardView has ripple effect and doesn't need a custom background drawable as opposed to CardView.
That handled the android:state_selected and android:state_pressed for my use case.

I believe you are misunderstanding the question you referred to. The question is how to get the ripple effect:
Where I think you are just looking for click feedback?
If so, try setting the background drawable:
android:background="#drawable/statelist_item_background"
EDIT:
On you background color xml, you need to give it an alpha. It is being drawn in the front, so give it an alpha of .1f and see how that looks and go from there.
Try using color 50F76D3C Then use is it in the foreground like you were originally.

How to make shadow around LinearLayout?

I tring to make shadow around linearLayout like on image below (on top):
I`m using layer-list with shape, but all bottom shadow owerlapping by white area (see image above). All this view looks like:
<?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:orientation="vertical"
android:background="#android:color/transparent" >
<LinearLayout
android:id="#+id/listView_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="45dp"
android:background="#color/text_white">
<!-- ListView to be shown on widget -->
<ListView
android:id="#+id/listViewWidget"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<!-- Empty view is show if list items are empty -->
<TextView
android:id="#+id/empty_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textColor="#ffffff"
android:textSize="20sp"
android:visibility="gone" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/widget_toolbar"
android:orientation="vertical"
android:background="#drawable/layout_card_view"/>
</FrameLayout>
How to make this?

You must use , this example has a shadow and item with background white, you can use and adjust to your preference.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Drop Shadow Stack -->
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#00CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#10CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#20CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#30CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#50CCCCCC" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="#FFF" />
<corners android:radius="3dp" />
</shape>
</item>
</layer-list>
You can add more drop shadow how you need. Check out the color in every one.

Shadow effect using drawable :
1) Create a shadow 9 patch image.
2) Set that 9 patch image as the layout background.
use this generator to create 9 patch shadow image.

Try this...
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#CABBBBBB"/>
<corners android:radius="2dp" />
</shape>
</item>
<item
android:left="0dp"
android:right="0dp"
android:top="0dp"
android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:radius="2dp" />
</shape>
</item>
</layer-list>

You can use this 1 st way
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item><layer-list>
<item android:right="7dp" android:top="3dp"><shape>
</shape></item>
<item ><shape>
<gradient android:angle="270" android:endColor="#FFFFFF" android:startColor="#BABABA" />
<padding android:bottom="2dp" android:left="2dp" android:right="2dp" android:top="2dp" />
</shape></item>
</layer-list></item>
</layer-list>
2nd way
You can use 9 Patch Image .

Add ll_shadow.xml file to res/drawable
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle">
<solid android:color="#android:color/darker_gray"/>
<corners android:radius="5dp"/>
</shape>
</item>
<item android:right="1dp" android:left="1dp" android:bottom="2dp">
<shape
android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:radius="5dp"/>
</shape>
</item>
</layer-list>
USE
<LinearLayout
android:background="#drawable/ll_shadow"/>

Use this code and create one shedow.xml file in drawable and then use as a background in your layout file to get desire output.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Bottom 2dp Shadow -->
<item>
<shape android:shape="rectangle">
<solid android:color="#your_shadow_color" />
<corners android:radius="7dp" />
</shape>
</item>
<!-- Green Top color -->
<item android:bottom="3px">
<shape android:shape="rectangle">
<solid android:color="#your_view_background_color" />
<corners android:radius="7dp" />
</shape>
</item>
</layer-list>

Android - Set padding to RadioButton pin

I'have tried lot of combination both with xml and programmatically but nothing to do yet.
This is the scenario (pay attention to the small red arrow):
I have some RadioButtons inside a radio group, in xml this scenario could be represented as:
<RadioGroup
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/radiobuttons"
android:paddingBottom="#dimen/activity_vertical_margin"
android:dividerPadding="30dp">
<RadioButton android:id="#+id/radio_blue"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="How to set the padding on the left of radio pin"
android:background="#drawable/container_dropshadow"/>
<!-- other radio buttons... -->
</RadioGroup>
My problem is that I didn't find a way to set the left padding of the circle pin neither in xml nor programmatically (I'm interested in both).
In fact each padding that I tried to modify in a RadioButton object seems to refer only to the text inside of it (i.e. java functions setPadding and setCompoundDrawablePadding, or xml android:paddingLeft and android:drawablePadding don't work).
My container_dropshadow.xml is:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Drop Shadow Stack -->
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#00CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#10CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#20CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#30CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#50CCCCCC" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="#android:color/white" />
<corners android:radius="3dp" />
</shape>
</item>
</layer-list>

I found a way, by using an inset drawable:
First, create a new inset drawable (e.g. radio_button_inset.xml) with your desired padding and a link to the theme radio button drawable like this:
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="?android:attr/listChoiceIndicatorSingle"
android:insetLeft="#dimen/your_padding_value"/>
Second, use this new drawable for your radio button:
<RadioButton android:id="#+id/radio_blue"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="How to set the padding on the left of radio pin"
android:background="#drawable/container_dropshadow"
android:button="#drawable/radio_button_inset"/>

Try using paddingStart on the RadioGroup. Since it's extends from a ViewGroup, LinearLayout, all of the child elements will be affected.
<RadioGroup
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/radiobuttons"
android:paddingBottom="#dimen/activity_vertical_margin"
android:dividerPadding="30dp"
android:paddingStart="8dp">
<RadioButton android:id="#+id/radio_blue"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="How to set the padding on the left of radio pin"
android:background="#drawable/container_dropshadow"/>
<!-- other radio buttons... -->
</RadioGroup>
Try this in your background resource.
<!-- Background -->
<item>
<shape>
<padding android:left="8dp" />
<solid android:color="#android:color/white" />
<corners android:radius="3dp" />
</shape>
</item>