Wednesday, September 16, 2015

Vector Drawable example

In Android 5.0 (API Level 21) and above, you can define vector drawables, which scale without losing definition.
(ref: http://developer.android.com/training/material/drawables.html#VectorDrawables)
Create vector image with the shape of a heart, drawable/heart.xml.
<!-- res/drawable/heart.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="256dp"
    android:width="56dp"
    android:viewportWidth="32"
    android:viewportHeight="32">

    <path android:fillColor="#8f00"
        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>

Use it on layout xml, layout/activity_main.xml.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/heart"
            android:background="#D0D0D0"/>

        <ImageView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:src="@drawable/heart"
            android:background="#B0B0B0"/>

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:src="@drawable/heart"
            android:background="#909090"/>

    </LinearLayout>

</LinearLayout>


next:
- Animate Vector Drawables (AnimatedVectorDrawable) example

No comments:

Post a Comment