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

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

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

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

アツい方法があるらしい

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

「今更かよ!」というツッコミもあると思います。
何番煎じになっているかはわかりませんが、ここではAndroid Studio 1.3の方法を記すことにします。

AndroidBootStrapの導入

スクリーンショット 2015-09-01 13.37.05
appを右クリックして「Open Module Settings」を選択

スクリーンショット 2015-09-01 13.37.39
appのDependenciesパネルを選択し、左下の「+」ボタンをクリック
1のLibrary dependencyを選択する

スクリーンショット 2015-09-01 13.38.36
androidbootstrapと入力して検索すると「com.beardedhen:androidbootstrap:1.2.3」(2015年9月時点)が出てくるので選択して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);
劇的BeforeAfter

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

before
Screenshot_2015-07-24-09-48-20

after
Screenshot_2015-09-01-13-26-57

before
Screenshot_2015-08-17-16-41-40

after
Screenshot_2015-09-01-14-19-50

before
Screenshot_2015-08-25-22-37-23

after
Screenshot_2015-09-01-13-22-00

before
Screenshot_2015-08-17-16-42-36

after
Screenshot_2015-09-01-13-21-51

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

やったね(^^)

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

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

(Androidのみ対応)
btn_googleplay_01chart

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です