A drawable defined in XML that clips another drawable based on this Drawable's current level. You can control how much the child drawable gets clipped in width and height based on the level, as well as a gravity to control where it is placed in its overall container. Most often used to implement things like progress bars.
res/drawable/filename.xml
The filename is used as the resource ID.
ClipDrawable
.
R.drawable.filename
In XML:
@[package:]drawable/filename
<?xml version="1.0" encoding="utf-8"?> <inset xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/drawable_resource" android:insetTop="dimension" android:insetRight="dimension" android:insetBottom="dimension" android:insetLeft="dimension" />
<clip>
attributes:
xmlns:android
"http://schemas.android.com/apk/res/android"
.
android:drawable
android:clipOrientation
Must be one of the following constant values:
horizontal |
Clip the drawable horizontally. |
vertical |
Clip the drawable vertically. |
android:gravity
Must be one or more (separated by '|') of the following constant values:
top |
Put the object at the top of its container, not changing its size. When the bottom of the drawable. |
bottom |
Put the object at the bottom of its container, not changing its size. When at the top of the drawable. |
left |
Put the object at the left edge of its container, not changing its size. This is the default. When clipping occurs at the right side of the drawable. This is the default. |
right |
Put the object at the right edge of its container, not changing its size. When clipping occurs at the left side of the drawable. |
center_vertical |
Place object in the vertical center of its container, not changing its size. Clipping behaves the same as when gravity is |
fill_vertical |
Grow the vertical size of the object if needed so it completely fills its container. When no clipping occurs because the drawable fills the vertical space (unless the drawable level is 0, in which case it's not visible). |
center_horizontal |
Place object in the horizontal center of its container, not changing its size. Clipping behaves the same as when gravity is |
fill_horizontal |
Grow the horizontal size of the object if needed so it completely fills its container. When no clipping occurs because the drawable fills the horizontal space (unless the drawable level is 0, in which case it's not visible). |
center |
Place the object in the center of its container in both the vertical and horizontal axis, not changing its size. When clipping occurs on the left and right. When |
fill |
Grow the horizontal and vertical size of the object if needed so it completely fills its container. No clipping occurs because the drawable fills the horizontal and vertical space (unless the drawable level is 0, in which case it's not visible). |
clip_vertical |
Additional option that can be set to have the top and/or bottom edges of the child clipped to its container's bounds. The clip is based on the vertical gravity: a top gravity clips the bottom edge, a bottom gravity clips the top edge, and neither clips both edges. |
clip_horizontal |
Additional option that can be set to have the left and/or right edges of the child clipped to its container's bounds. The clip is based on the horizontal gravity: a left gravity clips the right edge, a right gravity clips the left edge, and neither clips both edges. |
res/drawable/clip.xml
:
<?xml version="1.0" encoding="utf-8"?> <clip xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/android" android:clipOrientation="horizontal" android:gravity="left" />
The following layout XML applies the clip drawable to a View:
<ImageView android:id="@+id/image" android:background="@drawable/clip" android:layout_height="wrap_content" android:layout_width="wrap_content" />
The following code gets the drawable and increases the amount of clipping in order to progressively reveal the image:
ImageView imageview = (ImageView) findViewById(R.id.image); ClipDrawable drawable = (ClipDrawable) imageview.getDrawable(); drawable.setLevel(drawable.getLevel() + 1000);
Increasing the level reduces the amount of clipping and slowly reveals the image. Here it is at a level of 7000:
Note: The default level is 0, which is fully clipped so the image is not visible. When the level is 10,000, the image is not clipped and completely visible.