m_shige1979のときどきITブログ

プログラムの勉強をしながら学習したことや経験したことをぼそぼそと書いていきます

Github(変なおっさんの顔でるので気をつけてね)

https://github.com/mshige1979

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>

※「android:progressDrawable="@drawable/progresspic"」を追加します

実行結果

f:id:m_shige1979:20150120065325g:plain
※ソースは前回と同じでもおk

所感

画像を使用したことで時間の経過を焦らせるような表現を再現できるのでこれは使えそう。
脳トレ系のアプリとかを考えるときの表現として考えておこう