AndroidBootstrapがアツい！と俺の中で話題に

Androidアプリのデザインって面倒

「アプリのデザイン、誰かやってくれないかなー」と思っている個人開発者は結構多いはず。
私も「デザインができる人と友達になりたい」などと他力本願な思考が頭の中を占めていました。

GooglePlayに出しているTwitMorseというアプリがあるのですが、デザインは手付かずでAndroidのデフォルトのボタンなんかを配置しておりました。

「あー、ダサいなー」と日頃から思っていたのです。せめてボタンだけでもなんとかならんか・・・と思ってググったところ、

アツい方法があるらしい

AndroidのボタンデザインにはBootStrapを使おう！(使い方)

「今更かよ！」というツッコミもあると思います。
何番煎じになっているかはわかりませんが、ここではAndroid StudioでAndroid BootStrapを導入する方法と、アプリへの適用方法を記す。

AndroidBootStrapの導入

1.appを右クリックして「Open Module Settings」を選択

2.appのDependenciesパネルを選択し、左下の「+」ボタンをクリック。1のLibrary dependencyを選択する。

3.androidbootstrapと入力して検索すると「com.beardedhen:androidbootstrap:1.2.3」(2015年9月時点)
「com.beardehen:androidbootstrap:2.3.1」(2017年3月時点)が出てくるので選択してOKと押す。
するとAndroidStudioがビルドを始めるのでしばらく待つ。
これで準備完了。

レイアウトファイルに記述

ここではTwitMorseの発信ボタンを例に記す。

<com.beardedhen.androidbootstrap.BootstrapButton 
android:id="@+id/action_tweet" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:layout_alignParentBottom="true" 
android:layout_centerHorizontal="true" 
android:text="発信" bootstrap:bb_type="primary" 
bootstrap:bb_icon_right="fa-twitter" 
bootstrap:bb_roundedCorners="true" 
android:layout_gravity="center_horizontal" />

• bootstrap:bb_type=”primary”
  ボタンのスタイル　bootstrapのものが使える (CSS – Bootstrap)

• bootstrap:bb_icon_right=”fa-twitter”
  ボタンの右側にアイコンがつけられる。アイコンはFontAwesomeのものが使える（対応してないものもあった）

• bootstrap:bb_roundedCorners=”true”
  ボタンに丸みをつけるか

などなど、詳しくはデザインが出来ないエンジニアのAndroid-Bootstrap利用方法に載ってた。

プログラム側で制御する場合は以下のようにボタンインスタンスを取得して制御できた。

BootstrapButton tweetButton = (BootstrapButton)findViewById(R.id.favButton);

劇的Before & After

あまりにも嬉しかったのでここでTwitMorseのAndroidBootstrapの使用前と使用後を載せる。

認証画面

before

after

投稿画面

before

after

ユーザー詳細画面

before

after

つぶやき詳細画面

before

after

こんな感じで、わりと簡単にオシャレな外観になりました。

やったね(^^)

参考

AndroidのボタンデザインにはBootStrapを使おう！(使い方)
デザインが出来ないエンジニアのAndroid-Bootstrap利用方法

公式
Android Bootstrap

ダウンロードお願いします！

(Androidのみ対応)
TwitMorse