[null,null,["上次更新時間:2025-07-26 (世界標準時間)。"],[],[],null,["# Create shadows and clip views\n\nTry the Compose way \nJetpack Compose is the recommended UI toolkit for Android. Learn how to work with theming in Compose. \n[Modifier.shadow() →](/reference/kotlin/androidx/compose/ui/Modifier#(androidx.compose.ui.Modifier).shadow(androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Shape,kotlin.Boolean,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color)) \n\nMaterial Design introduces elevation for UI elements. Elevation helps users\nunderstand the relative importance of each element and focus their attention to\nthe current task.\n| **Note:** This page describes shadows obtained by elevation. `Material3` introduces an elevation approach based on surface color. For more information about maintanability and approaching the user experience, see [Material\n| Elevation](https://m3.material.io/styles/elevation/overview), and consider migrating your project to [Jetpack Compose](/jetpack/compose/interop).\n\nThe elevation of a view, represented by the *Z* property, determines the\nvisual appearance of its shadow. Views with higher *Z* values cast larger,\nsofter shadows, and they occlude views with lower *Z* values. However, the\n*Z* value of a view doesn't affect the view's size.\n**Figure 1.** Elevation on the *Z*-axis and the resulting shadow.\n\nShadows are drawn by the parent of the elevated view. They are subject to\nstandard view clipping and are clipped by the parent by default.\n\nElevation is also useful to create animations where widgets temporarily rise\nabove the view plane when performing actions.\n\nFor more information, see\n[Elevation in\nMaterial Design](https://material.io/design/environment/elevation.html).\n\nAssign elevation to your views\n------------------------------\n\nThe *Z* value for a view has two components:\n\n- Elevation: the static component\n- Translation: the dynamic component used for animations\n\n`Z = elevation + translationZ`\n\nThe *Z* values are measured in dp (density-independent pixels).\n**Figure 2.** Different shadows for different elevations in dp.\n\nTo set the default (resting) elevation of a view, use the\n`android:elevation` attribute in the XML layout. To set the elevation\nof a view in the code of an activity, use the\n[View.setElevation()](/reference/android/view/View#setElevation(float))\nmethod.\n\nTo set the translation of a view, use the\n[View.setTranslationZ()](/reference/android/view/View#setTranslationZ(float))\nmethod.\n\nThe\n[ViewPropertyAnimator.z()](/reference/android/view/ViewPropertyAnimator#z(float))\nand\n[ViewPropertyAnimator.translationZ()](/reference/android/view/ViewPropertyAnimator#translationZ(float))\nmethods let you animate the elevation of views. For more information, see the\nAPI reference for\n[ViewPropertyAnimator](/reference/android/view/ViewPropertyAnimator)\nand the [property\nanimation](/guide/topics/graphics/prop-animation) developer guide.\n\nYou can also use a\n[StateListAnimator](/reference/android/animation/StateListAnimator)\nto specify these animations in a declarative way. This is especially useful for\ncases where state changes trigger animations, like when the user taps a button.\nFor more information, see\n[Animate view\nstate changes using StateListAnimator](/develop/ui/views/animations/prop-animation#ViewState).\n\nCustomize view shadows and outlines\n-----------------------------------\n\nThe bounds of a view's background drawable determine the default shape of its\nshadow. *Outlines* represent the outer shape of a graphics object and\ndefine the ripple area for touch feedback.\n\nConsider the following view, which is defined with a background drawable: \n\n```xml\n\u003cTextView\n android:id=\"@+id/myview\"\n ...\n android:elevation=\"2dp\"\n android:background=\"@drawable/myrect\" /\u003e\n```\n\nThe background drawable is defined as a rectangle with rounded corners: \n\n```xml\n\u003c!-- res/drawable/myrect.xml --\u003e\n\u003cshape xmlns:android=\"http://schemas.android.com/apk/res/android\"\n android:shape=\"rectangle\"\u003e\n \u003csolid android:color=\"#42000000\" /\u003e\n \u003ccorners android:radius=\"5dp\" /\u003e\n\u003c/shape\u003e\n```\n\nThe view casts a shadow with rounded corners, since the background drawable\ndefines the view's outline. Providing a custom outline overrides the default\nshape of a view's shadow.\n\nTo define a custom outline for a view in your code, do the following:\n\n\n1. Extend the [ViewOutlineProvider](/reference/android/view/ViewOutlineProvider) class.\n2. Override the [getOutline()](/reference/android/view/ViewOutlineProvider#getOutline(android.view.View, android.graphics.Outline)) method.\n3. Assign the new outline provider to your view with the [View.setOutlineProvider()](/reference/android/view/View#setOutlineProvider(android.view.ViewOutlineProvider)) method.\n\nYou can create oval and rectangular outlines with rounded corners using the\nmethods in the\n[Outline](/reference/android/graphics/Outline)\nclass. The default outline provider for views obtains the outline from the\nview's background. To prevent a view from casting a shadow, set its\noutline provider to `null`.\n\nClip views\n----------\n\nClipping views lets you change the shape of a view. You can clip views for\nconsistency with other design elements or to change the shape of a view in\nresponse to user input. You can clip a view to its outline area using the\n[View.setClipToOutline()](/reference/android/view/View#setClipToOutline(boolean))\nmethod. Only outlines that are rectangles, circles, and round rectangles support\nclipping, as determined by the\n[Outline.canClip()](/reference/android/graphics/Outline#canClip())\nmethod.\n\nTo clip a view to the shape of a drawable, set the drawable as the\nbackground of the view---as shown in the preceding example---and call\nthe `View.setClipToOutline()` method.\n\nClipping views is an expensive operation, so don't animate the shape you use\nto clip a view. To achieve this effect, use the\n[reveal\nanimation](/develop/ui/views/animations/reveal-or-hide-view#Reveal)."]]