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

Guide to building a TOB operation customer acquisition system!

“The two core elements of customer acquisition ar...

How to obtain user information and how to use it?

When you are doing marketing or projects, have yo...

Talk about the application of 23 design patterns in Android projects

Preface This article will discuss 23 design patte...

Relearn data structures and algorithms

Relearning Data Structure and Algorithm Resources...

Five major marketing tactics behind Alipay’s lucky draw, a must-read for SEM!

The screen was flooded with messages! I believe e...

More than 70% of flashers prefer the pure version of the system

The mobile phone flashing market, which has exist...

Elements and channels of online product promotion plan!

Viewpoint 1: The general promotion process is as ...