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

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

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

GooglePlayに出している[TwitMorse](https://play.google.com/store/apps/details?id=jp.sub.takelab.twitmorus)というアプリがあるのですが、デザインは手付かずでAndroidのデフォルトのボタンなんかを配置しておりました。

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

**アツい方法があるらしい**

[AndroidのボタンデザインにはBootStrapを使おう！(使い方)](http://android.tecc0.com/?p=127)

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

##AndroidBootStrapの導入
![image1](http://i1.wp.com/takelab.sub.jp/wp-content/uploads/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2015-09-01-13.37.05.png)

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

![image2](http://i1.wp.com/takelab.sub.jp/wp-content/uploads/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2015-09-01-13.37.39.png?w=823)

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

![image3](http://i1.wp.com/takelab.sub.jp/wp-content/uploads/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88-2015-09-01-13.38.36.png?w=600)

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

##レイアウトファイルに記述
ここでは[TwitMorse](https://play.google.com/store/apps/details?id=jp.sub.takelab.twitmorus)の発信ボタンを例に記す。

```xml
<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)](http://getbootstrap.com/css/#buttons-options)

- `bootstrap:bb_icon_right=”fa-twitter”`
 ボタンの右側にアイコンがつけられる。アイコンは[FontAwesome](http://fortawesome.github.io/Font-Awesome/cheatsheet/)のものが使える（対応してないものもあった）

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

などなど、詳しくは[デザインが出来ないエンジニアのAndroid-Bootstrap利用方法](http://qiita.com/Trashfeed/items/70627d792bf44de76590#2-11)に載ってた。

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

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

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

認証画面

**before**
![image4](http://i0.wp.com/takelab.sub.jp/wp-content/uploads/Screenshot_2015-07-24-09-48-20.png?resize=169%2C300)

**after**
![image5](http://i0.wp.com/takelab.sub.jp/wp-content/uploads/Screenshot_2015-09-01-13-26-57.png?resize=576%2C1024)

投稿画面

**before**
![image6](http://i2.wp.com/takelab.sub.jp/wp-content/uploads/Screenshot_2015-08-17-16-41-40.png?resize=169%2C300)

**after**
![image7](http://i2.wp.com/takelab.sub.jp/wp-content/uploads/Screenshot_2015-09-01-14-19-50.png?resize=576%2C1024)

ユーザー詳細画面

**before**
![image8](http://i1.wp.com/takelab.sub.jp/wp-content/uploads/Screenshot_2015-08-25-22-37-23.png?resize=169%2C300)

**after**
![image9](http://i0.wp.com/takelab.sub.jp/wp-content/uploads/Screenshot_2015-09-01-13-22-00.png?resize=576%2C1024)

つぶやき詳細画面

**before**
![image10](http://i1.wp.com/takelab.sub.jp/wp-content/uploads/Screenshot_2015-08-17-16-42-36.png?resize=169%2C300)

**after**
![image11](http://i1.wp.com/takelab.sub.jp/wp-content/uploads/Screenshot_2015-09-01-13-21-51.png?resize=576%2C1024)


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

やったね(^^)

#参考
[AndroidのボタンデザインにはBootStrapを使おう！(使い方)](http://android.tecc0.com/?p=127)
[デザインが出来ないエンジニアのAndroid-Bootstrap利用方法](http://qiita.com/Trashfeed/items/70627d792bf44de76590#2-11)

公式
[Android Bootstrap](http://www.androidbootstrap.com/)

#ダウンロードお願いします！
(Androidのみ対応)
**[TwitMorse](https://play.google.com/store/apps/details?id=jp.sub.takelab.twitmorus)**
![image12](http://i1.wp.com/takelab.sub.jp/wp-content/uploads/chart1.png?w=200)