Android Bootstrap 2.xでUI改善

#AndroidアプリのUIを改善したい
以前、初めてのAndroidアプリとして、AWSの請求金額を取得するAndroidアプリを作りました。自分しか使わないのでデザインはどうでもいいのですが、さすがに見た目がこれ

ではどうかと思ったので、Android Bootstrapを利用してUIを改善します。

#Android Bootstrapを導入する

##Android Bootstrapライブラリを取得する
「build.gradle」のdependenciesに以下を追記します。利用するAndroid Bootstrapは2.xです。1.xの場合、以降で記述する導入、利用方法が異なるようなのでご注意ください。

build.gradle

dependencies {
    compile 'com.beardedhen:androidbootstrap:2.+'
}

##Applicationクラスを拡張する
Applicationクラスを継承した新規クラスを作成し、onCreateメソッドを拡張して、FontAwesomeのWebフォントをアイコンとして使えるようにします。

BillingInfoBootstrap.java

import android.app.Application;
import com.beardedhen.androidbootstrap.TypefaceProvider;

public class BillingInfoBootstrap extends Application {
    @Override public void onCreate() {
        super.onCreate();
        TypefaceProvider.registerDefaultIconSets();
    }
}

##マニフェストファイルを修正する
マニフェストファイルに上記で作成したクラスを追記します。

AndroidManifest.xml

<application
    android:name="BillingInfoBootstrap"
>
    ･･･
</application>

##レイアウトファイルを修正する
レイアウトファイルでBootsotrapの名前空間が利用できるように以下を追記します。

activity_main.xml

<RelativeLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
>

#UIを改善する
Android Bootstrapを利用する環境が整ったので、実際にUIを改善します。
##ラベルを修正する
appで始まる要素がBootstrap独自の要素です。

activity_main.xml

    <com.beardedhen.androidbootstrap.BootstrapLabel
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="請求金額"
        android:id="@+id/view"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true"
        app:bootstrapBrand="primary"
        app:bootstrapHeading="h4"
/>

##テキストを修正する

activity_main.xml

    <com.beardedhen.androidbootstrap.AwesomeTextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="$0.00"
        android:id="@+id/billingCost"
        android:textSize="100dp"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/view" 
        app:bootstrapBrand="primary"/>

##ボタンを修正する
bootstrapTextでFontAwesomeのWebフォントを利用しています。
http://fontawesome.io/cheatsheet/から、利用したいフォントを探して、そのクラス名を記述します。また、app:roundedCornersにtrueを指定すると、ボタンの角が丸くなります。

activity_main.xml

    <com.beardedhen.androidbootstrap.BootstrapButton
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/update"
        android:height="50dp"
        android:textStyle="bold"
        android:layout_below="@+id/billingCost"
        android:layout_alignParentStart="true"
        android:layout_marginTop="20dp" 
        app:bootstrapText="{fa-rotate-right}  更新"
        app:bootstrapSize="lg"
        app:buttonMode="regular"
        app:bootstrapBrand="success"
        app:roundedCorners="true"/>

##MainActivityクラスを修正する
Android標準のUIクラスを、上記で指定したBootstrap独自のクラスに置き換えます。
前回、作成したソースから修正した箇所だけ抜粋します。

MainActivity.java(修正前)

Button updateBtn = (Button) findViewById(R.id.update);

TextView billingTextView = (TextView) findViewById(R.id.billingCost);
try {
    billingTextView.setText(billingInfoFuture.get());

MainActivity.java(修正後)

BootstrapButton updateBtn = (BootstrapButton) findViewById(R.id.update);

BootstrapTextView billingTextView = (BootstrapTextView) findViewById(R.id.billingCost);
try {
    billingTextView.setMarkdownText(billingInfoFuture.get());

#完了
上記に加えて、テキストに枠線を描写できるようにしたりしましたが、UI改善後のイメージは以下の通りです。