Working with Drawables this lesson teaches
- Tint drawable Resources
- Extract prominent Colors from an Image
- Create Vector Drawables
You should also read
- Material Design Specification
- Material Design on Android
The following capabilities for Drawables help you implement material design in your apps:
- Drawable Tinting
- Prominent color extraction
- Vector Drawables
This lesson shows the these features in your app.
Tint drawable Resources
With Android 5.0 (API level) and above, you can tint bitmaps and nine-patches defined as alpha masks. You can tint them with the color resources or theme attributes that resolve to color resources (for example, ?android:attr/colorPrimary
). Usually, you create these assets only once and color them automatically to match your theme.
You can apply a tint to BitmapDrawable
or NinePatchDrawable
objects with the setTint()
method. You can also set the tint color and mode in your layouts with the android:tint
and android:tintMode
attributes.
Extract prominent Colors from an Image
The Android support Library R21 and above includes Palette
the class, which lets you extract prominent colors in an image. This class extracts the following prominent colors:
- Vibrant
- Vibrant Dark
- Vibrant light
- Muted
- Muted Dark
- Muted light
To extract these colors, pass an Bitmap
object to the Palette.generate()
static method in the background thread where you load your image S. If you can ' t use this thread, call the Palette.generateAsync()
method and provide a listener instead.
You can retrieve the prominent colors from the image using the getters methods Palette
in the class, such as Palette.getVibrantColor
.
Palette
to use the class in your project, add the following Gradle dependency to your app ' s module:
{
...
' com.android.support:palette-v7:21.0.+ '
}
For more information, see the API reference for the Palette
class.
Create Vector Drawables Video
Android Vector Graphics
In Android 5.0 (API level) and above, you can define vector drawables, which scale without losing definition. You need only one asset file for a vector image, as opposed to an asset file for each screen density in the case of bitmap Images. To create a vector image, you define the details of the shape inside a <vector>
XML element.
The following example defines a vector image with the shape of a heart:
<!--res/drawable/heart.xml --
<vector xmlns:android= "Http://schemas.android.com/apk/res/android"
<!--intrinsic size of drawable --
android:height= "256DP"
Android:width= "256DP"
<!--size of the virtual canvas ---
Android:viewportwidth= "32"
Android:viewportheight= ">"
<!--draw a path ---
<pathAndroid:fillcolor="#8fff"
Android:pathdata="m20.5,9.5
c-1.955,0,-3.83,1.268,-4.5,3
C-0.67,-1.732,-2.547,-3,-4.5,-3
c8.957,9.5,7,11.432,7,14
c0,3.53,3.793,6.257,9,11.5
c5.207,-5.242,9,-7.97,9,-11.5
c25,11.432,23.043,9.5,20.5,9.5z "/>
</vector>
Vector images is represented in Android as VectorDrawable
objects. For more information on pathData
the syntax, see the SVG Path reference. For more information on animating the properties of the vector drawables, see animating Vector drawables.
Material Design Series Fifth--working with Drawables