androidでプログレスバーのカスタマイズ

画像を使用する

f:id:m_shige1979:20150120072220p:plain
f:id:m_shige1979:20150120072236p:plain

画像は以下より拝借

実装

画像をdrawableに配置

f:id:m_shige1979:20150120072440p:plain

drawable/progresspic.xmlを作成する

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <bitmap android:src="@drawable/background"/>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <bitmap android:src="@drawable/progress"/>
        </clip>
    </item>
</layer-list>

プログレスバーにprogresspicを追加

<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Start"
        android:id="@+id/btn1"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="42dp" />

    <ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/prog1"
        android:layout_below="@+id/prog1"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="40dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:indeterminate="false"
        android:progressDrawable="@drawable/progresspic"/>

</RelativeLayout>