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

Why do some people get tanned when exposed to the sun, while others get red?

Reviewer of this article: Zhou Xiaobo, Doctor of ...

Information flow advertising: characteristics and trends!

Feed ads are ads that are inserted into the updat...

3 popular short video title formats

Are you envious of other people’s popular videos?...

Kuaishou beauty industry advertising research report!

Paying for beauty has become a daily routine for ...

A complete set of APP operation plan templates!

What should a complete APP operation plan look li...

Wilson: New Energy Vehicle Industry Monthly Report in June 2019

1. Overall performance of the new energy passenge...

Can the dog that has completed the experiment be happy if it is adopted?

Recently, a celebrity couple adopted a beagle and...

Why do I feel so tired even though I just sit all day at work?

Everyone has probably experienced this moment at ...