Help us understand the problem. What is going on with this article?

Android Bootstrap 2.xでUI改善

More than 3 years have passed since last update.

AndroidアプリのUIを改善したい

以前、初めてのAndroidアプリとして、AWSの請求金額を取得するAndroidアプリを作りました。自分しか使わないのでデザインはどうでもいいのですが、さすがに見た目がこれ
WS000011.JPG
ではどうかと思ったので、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改善後のイメージは以下の通りです。
WS000012.JPG

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away