How to set shadows through View

How to set shadows through View

Starting from Android 5.0 (API level 21), View provides an attribute called "elevation" to set the size of the shadow. This attribute can be set through XML or code. Note that the size of the shadow is related to the Z value (elevation) and translationZ attribute of the View. The Z value is determined by elevation and translationZ. Usually elevation is used for static shadows, while translationZ is used for animations.

XML settings:

 <View android:layout_width="wrap_content" android:layout_height="wrap_content" android:elevation="10dp" />

Code settings:

 view.setElevation(20); //或view.setTranslationZ(20);

In the Material Design specification, there are two light sources, one is point light source, the other is ambient light. The two light sources work together to form the shadow effect of the View. By default, the shadow is black, but many times we want the shadow color to be consistent with the color of the View itself to achieve a better visual effect. Android considerately considers this and provides us with the API: setOutlineAmbientShadowColor and setOutlineSpotShadowColor. Developers can change the color of the shadow through XML or code.

"setOutlineAmbientShadowColor"

  • When the view's Z value or elevation value is positive, set the ambient shadow color
  • The default shadow is black and opaque, so the intensity of the shadow is consistent between different views of different colors.
  • The final ambient shadow opacity is a function of the shadow caster height, the alpha channel of the outlineAmbientShadowColor (usually opaque), and the R.attr.ambientShadowAlpha theme attribute.

XML settings:

 android:outlineAmbientShadowColor="#FFAAAA"

Code settings:

 view.setOutlineAmbientShadowColor(mContext.getResources().getColor(R.color.ambient_shadow_color));

"setOutlineSpotShadowColor"

  • When the view's Z value or elevation value is positive, set the point shadow color
  • The default shadow is black and opaque, so the intensity of the shadow is consistent between different views of different colors.
  • The opacity of the final point shadow is a function of the shadow caster height, the alpha channel of the outlineAmbientShadowColor (usually opaque), and the R.attr.ambientShadowAlpha theme attribute.

XML settings:

 android:outlineSpotShadowColor="#BAFDCE"

Code settings:

 view.setOutlineSpotShadowColor(mContext.getResources().getColor(R.color.spot_shadow_color));

Other options for setting shadows:

  • Use custom views and draw methods: If you want to create more complex shadow effects, you can do so by extending the View class and overriding the onDraw method. In this method, you can use Canvas's drawRect, drawPath, and other methods to draw the shadow.
 public class ShadowView extends View { private Paint paint; private int shadowColor = Color.BLACK; private float shadowRadius = 2f; private float shadowOffset = -1f; private float shadowOpacity = 0.9f; public ShadowView(Context context) { super(context); init(); } private void init() { paint = new Paint(); paint.setAntiAlias(true); paint.setStyle(Paint.Style.FILL); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); paint.setColor(shadowColor); canvas.drawRect(getPaddingLeft(), getHeight() - shadowOffset, getWidth() - getPaddingRight(), getHeight(), paint); } }
  • Use third-party libraries: Some third-party libraries can help you add shadow effects to View more easily, such as CardView and Material Design libraries. These libraries usually provide richer shadow options, such as color, size, and blur radius.
  • Use 9-PatchDrawable: Create a 9-PatchDrawable resource containing the shadow and use it as the background of the View. This method is suitable for fixed-size shadows, such as adding shadows to buttons or cards.

<<:  Hongmeng's rise is a victory for long-termists

>>:  iOS 17.3 battery life test for various devices, a retirement version!

Recommend

What problems has Apple’s core business encountered in the past year?

The common perception is that Apple products are ...

International Left-Handers Day | Are left-handed people really smarter?

August 13 is International Left-Handers Day, and ...

New ASO optimization trends you must know for APP promotion in 2017!

In the final analysis, ASO is essentially about sa...

A guide to creating a short video matrix for “Reading Books in Your Palm”!

I believe everyone is familiar with ZhanDuShu , w...

Have people in Northeast China ever eaten cranberries? | Bolan Daily

Have people from Northeast China ever eaten cranb...

What fields are good for short videos? How to do it?

If you want to shoot short videos, choosing a goo...

Review: How to effectively build a user incentive system!

A product will go through four stages: seed stage...

Do you really know how to leverage brand marketing?

Many brands are accustomed to using the marketing...

How to build an internet celebrity brand?

Here, I would like to talk further about how to b...