Edited at

デザインが出来ないエンジニアのAndroid-Bootstrap利用方法

More than 5 years have passed since last update.

Androidアプリ作成時、毎回、アイコンに苦悩しています。フリーのアイコン探しやライセンス確認、多機種に合わせたリサイズ作業に疲れ果てています。

もう悩みたくない。

アイコン探ししたくない。

PhotoShop使いたくない。

そんな自分が、Androidで Font Awesomeの約369個のアイコンを簡単に利用する事ができる Android-Bootstrap を導入した時のチップスです。


したいこと


  • Androidアプリで毎回使える汎用的なアイコンが欲しい(ランチャーアイコン以外で)

  • 全機種・解像度共通でアイコンを利用したい(画像リサイズ作業を極力避けたい)


最終的な目標


利用するライブラリ


Android-Bootstrap


Android-Bootstrapって?


  • TwitterBootstrapライクなボタン、アイコンが利用できるAndroidライブラリ。

  • AndroidでFontAwesomeの約369個のアイコンが利用できる(Bootstrap Button、Font Awesome Text)。

  • (Font Awesome Textの場合)実態がTextViewなので、アイコンサイズ、アイコンの色が自由に変更できる(機種別に画像を用意しなくても良い)。

  • アイコンの他に角丸ボタン、角丸サムネイル画像など、4種類のビューがサポートされている。


Font Awesomeって?


  • 約369個のアイコンを表示する事ができるWEBフォント。
    http://fortawesome.github.io/Font-Awesome/

  • 非デザイナーの自分がWEB開発でお世話になっているTwitterBootstrapでも利用されています。

  • Android-BootstrapのFontAwesomeTextでは、このWEBフォントがandroidで簡単に利用出来る。


Android-Bootstrapのダウンロード先


利用できる5つのビュー



  • Font Awesome Text (FontAwesomeアイコン、アニメーション)


  • Bootstrap Button (アイコン付きのボタン、角丸ボタン。アイコン色の変更は出来ない模様)


  • Bootstrap Edit Text (入力テキスト、角丸、枠色の変更)


  • Bootstrap Thumbnail (サムネイル画像、Drawableリソースのみ指定可能。Bitmap、Uri等の指定はできない模様)


  • Bootstrap CircleThumbnail (円形サムネイル画像、Drawableリソースのみ指定可能。Bitmap、Uri等の指定はできない模様)


5つのビューの表示例




  • Font Awesome Text

    qiita_2.png





  • Bootstrap Button

    qiita_1.png





  • Bootstrap Edit Text

    qiita_3.png





  • Bootstrap Thumbnail

    qiita_4.png





  • Bootstrap CircleThumbnail

    qiita_5.png




利用方法


Android-Bootstrapのインストール


  1. ライブラリをダウンロード https://github.com/Bearded-Hen/Android-Bootstrap

  2. メインのAndroidアプリから、ライブラリプロジェクトとして、ダウンロードしたAndroid-Bootstrapプロジェクトを参照。

  3. ダウンロードしたライブラリのルートに「fontawesome-webfont.ttf」があるので、これをメインプロジェクトのassetsフォルダにコピー。


レイアウトファイルでの宣言


  • ルート要素にAndroid-bootstrapのView宣言する


  • xmlns:android-bootstrap="http://schemas.android.com/apk/res-auto" を記述する。


  • android-bootstrapの箇所は自由。


例) レイアウトファイルでの宣言


activity_example.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"
xmlns:android-bootstrap="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>


Viewの設定


  • Viewの定義には以下の名前空間を使用する

ビュー
パッケージ名

Font Awesome Text
com.beardedhen.androidbootstrap.FontAwesomeText

Bootstrap Button
com.beardedhen.androidbootstrap.BootstrapButton

Bootstrap Edit Text
com.beardedhen.androidbootstrap.BootstrapEditText

Bootstrap Thumbnail
com.beardedhen.androidbootstrap.BootstrapThumbnail

Bootstrap CircleThumbnail
com.beardedhen.androidbootstrap.BootstrapCircleThumbnail


例) Bootstrap Buttonの場合


activity_example.xml

<com.beardedhen.androidbootstrap.BootstrapButton

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="アイコンボタン。角丸にも出来ます。"
app:bb_icon_left="fa-smile-o"
app:bb_type="default"
/>


よく使った属性


Font Awesome Text

属性名
説明

android:textColor
アイコン色の変更。Textviewと同様の属性。
android:textColor="#0094FF"

android:textSize
アイコンサイズの変更。フォントなので大きくしても汚くならない。Textviewと同様の属性。
android:textSize="20sp"

app:fa_icon
アイコンの指定。FontAwesomeのクラス名

app:fa_icon="fa-tags"


Bootstrap Button

属性名
説明

android:textSize
アイコンサイズの変更。フォントなので大きくしても汚くならない。Textviewと同様の属性。
android:textSize="20sp"

app:bb_roundedCorners
角丸にする場合はTrue。
app:bb_roundedCorners="true"

app:bb_icon_left
左にアイコンを表示する。FontAwesomeのクラス名を指定する。
app:bb_icon_left="fa-trash-o"

app:bb_icon_right
右にアイコンを表示する。FontAwesomeのクラス名を指定する
app:bb_icon_right="fa-trash-o"

app:bb_type
ボタンの外観。TwitterBootstrapのButtonのOptionsクラス名を指定する
app:bb_type="danger"

app:bb_size
ボタンの大きさ。TwitterBootstrapのButtonのSizesクラス名を指定する
app:bb_size="large"


Bootstrap Edit Text

属性名
説明

app:be_roundedCorners
角丸にする場合はTrue。
app:be_roundedCorners="true"

app:be_state
入力エリアの外観。TwitterBootstrapのクラス名を指定する
app:be_state="success"


BootstrapThumbnail

属性名
説明

app:bt_image
DrawableリソースID
app:bt_image="@drawable/cat"

app:bt_roundedCorners
角丸にする場合はTrue。
app:bt_roundedCorners="true"

app:bt_height
画像の高さ。
app:bt_height="148sp"

app:bt_width
画像の幅。
app:bt_width="148sp"

app:bt_inside_padding
ボーダーの幅
app:bt_inside_padding="8sp"


BootstrapCircleThumbnail

属性名
説明

app:bct_image
DrawableリソースID
app:bt_image="@drawable/cat"

app:bct_size
サムネイルの大きさ。small medium large xlargeから指定する
app:bct_size="xlarge"

app:bct_minimal
ボーダーを表示しない場合はtrue


Bootstrap Buttonの使用例


  • Bootstrap Buttonを代表としてひと通り設定してみる


activity_example.xml

<com.beardedhen.androidbootstrap.BootstrapButton

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="アイコンとボタン"
bootstrapbutton:bb_icon_left="fa-smile-o"
bootstrapbutton:bb_type="default"
/>


アイコンの位置



  • bootstrapbutton:bb_icon_leftにFontAwesomeのクラス名http://fortawesome.github.io/Font-Awesome/cheatsheet/を指定する。

  • アイコンを左に表示するにはbootstrapbutton:bb_icon_left、右に表示するにはbootstrapbutton:bb_icon_rightにアイコンを指定。左右両方に指定する事もできる。

qiita20.png


ボタンの外観

qiita21.png


  • ボタンの文字色を変更する事は出来ない。実態はtextviewなのでライブラリ側のプロジェクトを自分で修正して外部に公開するなどごちょごちょする事が必要。


ボタンのサイズ


  • ボタンのサイズもTwitterBootstrap同様でbootstrapbutton:bb_sizeに、large, default, small, xsmall等を指定する。

    qiita22.png


  • 文字色と同じく文字サイズの設定は出来ない。



角丸ボタン



  • bb_roundedCornerstrueを指定する事で角丸ボタンとなる。

qiita23.png


雑感


Font Awesome Text(アイコン)は自由にアイコンサイズが変更できて便利

-Font Awesomeのアイコンを表示できる「Font Awesome Text」は実態がTextViewの為、android:textSize="32sp" 等と設定するだけで大きさを変更できます。しかも大きくしてもギザギザしてません。また、アイコンの色を変更するのも android:textColor=#ddd" といった感じです。

# 一方、Bootstrap Button(ボタン)はアイコン色の変更ができないのが少し残念。


多機種のリソースを用意する必要がない。

Font Awesome Text(アイコン)やBootstrap Button(ボタン)に表示されるアイコンは只のフォントなので、多機種のリソースを用意する必要がありません。多機種の解像度に合わせたアイコン画像などを用意する手間がなく非常に簡単です。


スタイルが利用できない


  • 例えばBootstrap Buttonの共通プロパティとしてbb_roundedCornersをスタイルで設定したい場合、以下のような <item name="bootstrapbutton:bb_roundedCorners">true</item> という名前空間 bootstrapbutton: を含めた記述ではなく・・・、


style.xml

<resources xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:bootstrapbutton="http://schemas.android.com/apk/res-auto">
<style name="BootstrapButton">
<item name="bootstrapbutton:bb_roundedCorners">true</item>
</style>
</resources>


  • 以下のように <item name="bb_roundedCorners">true</item> name属性を指定します。


style.xml

<resources xmlns:android="http://schemas.android.com/apk/res/android">

<style name="BootstrapButton">
<item name="bb_roundedCorners">true</item>
</style>
</resources>


Bootstrap Button(ボタン)でアイコン色が指定できない


  • 「Font Awesome Text(アイコンビュー)」は自由にアイコン色・アイコンサイズの変更はできるが、「Bootstrap Button(ボタンビュー)」は変更できません。bb_typeで外観は変更できてもアイコン色は自動で設定されるようです。アイコン色色を変更する属性は公開されていません。ライブラリ側のソースをなんだかんだする必要があります。


Bootstrap Thumbnail(サムネイル画像)でBitmapが指定できない


  • 「Bootstrap Thumbnail(サムネイル画像)」にはDrawableのリソースIDしか指定できません。ネット上の画像やユーザーのギャラリー画像などを表示する為には、Bootstrap Button同様にハックする必要がありそうです。


(Eclipse)Graphic Layout で見た目が分からない


  • 当然、通常のボタンのようにグラフィカルレイアウトでは表示できません。エラーログはisInEditModeで対応したとしても、ボタンの見た目は実機等で確認する必要があります。


実装イメージとリリースアプリ

上記を踏まえ、Android-Bootstrapを利用したアプリ「EveryEver(エブリー・エバー) 圏外でも快適なEvernoteライフを。」をリリースしました。


実装イメージ

qiita06.png

qiita05.png

qiita08.png