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

Douyu product function analysis

Douyu, which was launched in 2014, has been devel...

Ad creative writing secrets, take them!

In the process of bidding promotion , I believe t...

Complete tutorial for Kuaishou operation! (Personal account)

1 The predecessor of Kuaishou, called "GIF K...

Breaking down the planning logic of big promotion membership activities!

1. Case Study Xiao Ming has been signing in at a ...

New media operation marketing strategy skills!

Through new media operations, we can complete bra...

Liu Tong talks about survival in the workplace: 20 heartfelt answers to key questions

Course Catalog: 01 【Editorial】Resolve workplace d...

What does pua man mean in internet slang?

I believe everyone is familiar with " PUA &q...

In-depth analysis of Pinduoduo’s product operations in 2019!

Jobs said that consumers don’t know what they nee...

There are so many banks, why can't they merge into one?

Mixed knowledge, Specially designed to cure confu...

I have collected them all! 2021 Alipay Five Fortunes Super Detailed Guide

The annual Alipay Five Blessings Collection has f...