XML Drawable onlyでドロイド君を描いてみた - ReDo

2011年12月 3日

XML Drawable onlyでドロイド君を描いてみた

以前のエントリ「XMLなDrawableを使ってみよう」でも取り上げましたが、AndroidのXMLで表現できるDrawableはそこそこ強力です。

そんなわけでXML onlyでドロイド君を描いてみました。

xmldroid.png

画像だけだと微妙にイケてないドロイド君にしか見えませんね(。x。)

ソースは続きからどうぞ、JavaコードやPNG等の画像ファイルは一切書いておりません。

直線描けなかったからツノが酷いことになったよ!さっさとSVGネイティブ対応しろし!

layout/main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@color/droid_background"
        android:padding="10dip" >
        <FrameLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" >
            <View
                android:layout_width="10dip"
                android:layout_height="10dip"
                android:layout_marginLeft="80dip"
                android:layout_marginTop="5dip"
                android:background="@drawable/green_oval" />
            <View
                android:layout_width="10dip"
                android:layout_height="10dip"
                android:layout_marginLeft="82dip"
                android:layout_marginTop="8dip"
                android:background="@drawable/green_oval" />
            <View
                android:layout_width="10dip"
                android:layout_height="10dip"
                android:layout_marginLeft="84dip"
                android:layout_marginTop="11dip"
                android:background="@drawable/green_oval" />
            <View
                android:layout_width="10dip"
                android:layout_height="10dip"
                android:layout_marginLeft="86dip"
                android:layout_marginTop="14dip"
                android:background="@drawable/green_oval" />
            <View
                android:layout_width="10dip"
                android:layout_height="10dip"
                android:layout_marginLeft="88dip"
                android:layout_marginTop="17dip"
                android:background="@drawable/green_oval" />
            <View
                android:layout_width="10dip"
                android:layout_height="10dip"
                android:layout_marginLeft="90dip"
                android:layout_marginTop="20dip"
                android:background="@drawable/green_oval" />
            <View
                android:layout_width="10dip"
                android:layout_height="10dip"
                android:layout_marginLeft="92dip"
                android:layout_marginTop="23dip"
                android:background="@drawable/green_oval" />
        </FrameLayout>
        <FrameLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" >
            <View
                android:layout_width="10dip"
                android:layout_height="10dip"
                android:layout_marginLeft="80dip"
                android:layout_marginTop="5dip"
                android:background="@drawable/green_oval" />
            <View
                android:layout_width="10dip"
                android:layout_height="10dip"
                android:layout_marginLeft="82dip"
                android:layout_marginTop="8dip"
                android:background="@drawable/green_oval" />
            <View
                android:layout_width="10dip"
                android:layout_height="10dip"
                android:layout_marginLeft="84dip"
                android:layout_marginTop="11dip"
                android:background="@drawable/green_oval" />
            <View
                android:layout_width="10dip"
                android:layout_height="10dip"
                android:layout_marginLeft="86dip"
                android:layout_marginTop="14dip"
                android:background="@drawable/green_oval" />
            <View
                android:layout_width="10dip"
                android:layout_height="10dip"
                android:layout_marginLeft="88dip"
                android:layout_marginTop="17dip"
                android:background="@drawable/green_oval" />
            <View
                android:layout_width="10dip"
                android:layout_height="10dip"
                android:layout_marginLeft="90dip"
                android:layout_marginTop="20dip"
                android:background="@drawable/green_oval" />
            <View
                android:layout_width="10dip"
                android:layout_height="10dip"
                android:layout_marginLeft="92dip"
                android:layout_marginTop="23dip"
                android:background="@drawable/green_oval" />
        </FrameLayout>
        <FrameLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" >
            <View
                android:layout_width="10dip"
                android:layout_height="10dip"
                android:layout_marginLeft="180dip"
                android:layout_marginTop="5dip"
                android:background="@drawable/green_oval" />
            <View
                android:layout_width="10dip"
                android:layout_height="10dip"
                android:layout_marginLeft="178dip"
                android:layout_marginTop="8dip"
                android:background="@drawable/green_oval" />
            <View
                android:layout_width="10dip"
                android:layout_height="10dip"
                android:layout_marginLeft="176dip"
                android:layout_marginTop="11dip"
                android:background="@drawable/green_oval" />
            <View
                android:layout_width="10dip"
                android:layout_height="10dip"
                android:layout_marginLeft="174dip"
                android:layout_marginTop="14dip"
                android:background="@drawable/green_oval" />
            <View
                android:layout_width="10dip"
                android:layout_height="10dip"
                android:layout_marginLeft="172dip"
                android:layout_marginTop="17dip"
                android:background="@drawable/green_oval" />
            <View
                android:layout_width="10dip"
                android:layout_height="10dip"
                android:layout_marginLeft="170dip"
                android:layout_marginTop="20dip"
                android:background="@drawable/green_oval" />
            <View
                android:layout_width="10dip"
                android:layout_height="10dip"
                android:layout_marginLeft="168dip"
                android:layout_marginTop="23dip"
                android:background="@drawable/green_oval" />
        </FrameLayout>
        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" >
            <View
                android:id="@+id/droid_head"
                android:layout_width="170dip"
                android:layout_height="160dip"
                android:layout_marginLeft="50dip"
                android:layout_marginTop="20dip"
                android:background="@drawable/green_oval_head" />
            <View
                android:id="@+id/droid_body_top"
                android:layout_width="170dip"
                android:layout_height="10dip"
                android:layout_alignBottom="@id/droid_head"
                android:layout_marginBottom="80dip"
                android:layout_marginLeft="50dip"
                android:background="@color/droid_background" />
            <View
                android:id="@+id/droid_eye_left"
                android:layout_width="12dip"
                android:layout_height="12dip"
                android:layout_marginLeft="90dip"
                android:layout_marginTop="55dip"
                android:background="@drawable/white_oval" />
            <View
                android:id="@+id/droid_eye_right"
                android:layout_width="12dip"
                android:layout_height="12dip"
                android:layout_marginLeft="167dip"
                android:layout_marginTop="55dip"
                android:background="@drawable/white_oval" />
        </RelativeLayout>
        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_marginLeft="5dip"
            android:layout_marginRight="5dip"
            android:layout_marginTop="95dip" >
            <View
                android:id="@+id/droid_arm_left"
                android:layout_width="40dip"
                android:layout_height="110dip"
                android:layout_marginRight="5dip"
                android:background="@drawable/green_round" />
            <View
                android:id="@+id/droid_body"
                android:layout_width="170dip"
                android:layout_height="140dip"
                android:layout_toRightOf="@id/droid_arm_left"
                android:background="@drawable/green_round_bottom" />
            <View
                android:id="@+id/droid_arm_right"
                android:layout_width="40dip"
                android:layout_height="110dip"
                android:layout_marginLeft="5dip"
                android:layout_toRightOf="@id/droid_body"
                android:background="@drawable/green_round" />
            <View
                android:id="@+id/droid_leg_left"
                android:layout_width="40dip"
                android:layout_height="40dip"
                android:layout_below="@id/droid_body"
                android:layout_marginLeft="80dip"
                android:background="@drawable/green_round_bottom" />
            <View
                android:id="@+id/droid_leg_right"
                android:layout_width="40dip"
                android:layout_height="40dip"
                android:layout_alignTop="@id/droid_leg_left"
                android:layout_marginLeft="25dip"
                android:layout_toRightOf="@id/droid_leg_left"
                android:background="@drawable/green_round_bottom" />
        </RelativeLayout>
    </FrameLayout>
</FrameLayout>

color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="white">#ffffff</color>
    <color name="droid">#A4C639</color>
    <color name="droid_light">#D4F689</color>
    <color name="droid_background">#000000</color>
</resources>

green_round.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <stroke
        android:width="0dip"
        android:color="@color/droid" />
    <gradient
        android:centerColor="@color/droid_light"
        android:endColor="@color/droid"
        android:startColor="@color/droid" />
    <corners android:radius="20dip" />
</shape>

green_round_bottom.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <stroke
        android:width="0dip"
        android:color="@color/droid" />
    <gradient
        android:centerColor="@color/droid_light"
        android:endColor="@color/droid"
        android:startColor="@color/droid" />
    <corners
        android:bottomLeftRadius="20dip"
        android:bottomRightRadius="20dip"
        android:topLeftRadius="0dip"
        android:topRightRadius="0dip" />
</shape>

green_oval_head.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >
    <gradient
        android:centerColor="@color/droid"
        android:centerX="0.3"
        android:centerY="0.1"
        android:endColor="@color/droid"
        android:gradientRadius="250.0"
        android:startColor="@color/droid_light"
        android:type="radial" />
</shape>

green_oval.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >
    <solid android:color="@color/droid" />
</shape>

white_oval.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >
    <solid android:color="@color/white" />
</shape>

コメントする