android vector drawable
TRANSCRIPT
Vector DrawableSVG
Tutorial (Android)
Mr. THANN Phearum,Associate Software Engineering
Outline
- Intro.- Icon Sizes- Implement- Demo- Ref.
Intro.
- SVG?● SVG stands for Scalable Vector Graphics● SVG is used to define vector-based graphics for the Web● SVG defines the graphics in XML format● SVG graphics do NOT lose any quality if they are zoomed or resized● Every element and every attribute in SVG files can be animated● SVG is a W3C recommendation● SVG integrates with other W3C standards such as the DOM and XSL
Source: http://www.w3schools.com/svg/
Into. (cont.)- Example
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
<path d="M38 16H10c-3.31 0-6 2.69-6 6v12h8v8h24v-8h8V22c0-3.31-2.69-6-6-6zm-6 22H16V28h16v10zm6-14c-1.11 0-2-.89-2-2s.89-2 2-2c1.11 0 2 .89 2 2s-.89 2-2 2zM36 6H12v8h24V6z"/>
</svg>
ic_printer.svg
NOTE: (width="48" and height="48") is baseline size to scale the image
Into. (cont.)
- Tools to create .svg Illustrator (WIndow, Mac)InkScape (Linux)
Icon SizesAndroid icons require five separate sizes for different screen pixel densities.
Icon Sizes (cont.)Android also classify the icon into four types
- Small ContextualSmall icons are used to surface actions and/or provide status for specific items. For example, in the Gmail app, each message has a star icon that marks the message as important.
- NotificationThese are used to represent application notifications in the status bar. They should be flat (no gradients), white and face-on perspective
- Actionbar, Dialog & TabThese icons are used in the action bar menu. The first number is the size of the icon area, and the second is file size.
- LauncherThree-dimensional, front view, with a slight perspective as if viewed from above, so that users perceive some depth.
Icon Sizes (cont.)
- Small Contextual - Notification16 × 16 (mdpi)
24 × 24 (hdpi)
32 × 32 (xhdpi)
48 × 48 (xxhdpi)
64 × 64 (xxxhdpi)
22 × 22 area in 24 × 24 (mdpi)
33 × 33 area in 36 × 36 (hdpi)
44 × 44 area in 48 × 48 (xhdpi)
66 × 66 area in 72 × 72 (xxhdpi)
88 × 88 area in 96 × 96 (xxxhdpi)
Icon Sizes (cont.)
- Actionbar - Launcher24 × 24 area in 32 × 32 (mdpi)
36 × 36 area in 48 × 48 (hdpi)
48 × 48 area in 64 × 64 (xhdpi)
72 × 72 area in 96 × 96 (xxhdpi)
96 × 96 area in 128 × 128 (xxxhdpi)
48 × 48 (mdpi)
72 × 72 (hdpi)
96 × 96 (xhdpi)
144 × 144 (xxhdpi)
192 × 192 (xxxhdpi)
Icon Sizes (cont.)
- ExampleActionbar, Dialog & Tab
24 × 24 area in 32 × 32 (mdpi)
Implement
- VictorAndroid plugin library to use .svg as resources. It supports from Android 2.x.
Source: https://github.com/trello/victor
Implement (cont.)
- Victor Installationbuildscript {
repositories {
jcenter()
}
dependencies {
classpath 'com.trello:victor:0.1.4'
}
}
apply plugin: 'com.android.application'
// Make sure to apply this plugin *after* the Android plugin
apply plugin: 'com.trello.victor'
Implement (cont.)
- Victor Known IssuesAndroid Studio doesn't recognize generated resources in XML.
<ImageView
android:id="@+id/img_mdpi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="@dimen/margin_small"
android:src="@drawable/ic_person" />
Implement (cont.)
- Victor Example CodeWe can set drawable to the ImageView in Java file.
@Bind(R.id.img_mdpi)
ImageView imgMdpi;
imgMdpi.setImageResource(R.drawable. ic_person);
DemoI have create a sample application to test with vector drawable. Please check.
https://github.com/THANNPhearum/GGVectorDrawable
Ref.- SVG def.
http://www.w3schools.com/svg/
- Android Icons Sizehttp://iconhandbook.co.uk/reference/chart/android/
- Victor Android Libraryhttps://github.com/trello/victor