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

更新日：2015年11月25日

Androidでアプリを作ってる人たちの半数は抱えてるであろう・・・

ボタンデザインだ！！

レイアウトがドラッグ＆ドロップで作れるのは嬉しいが、オリジナルがださいのであんまり作ってもテンションが上がらない。

そんなときにBootStrapだ！！！

Web系の人にはおなじみだが、Androidひとすじな人はあんま知らないかも。

公式はここ。

たとえばボクが作ったこのサイトなんかはBootstrapでできてる。

なんか自分でデザインしなくても、シンプルでかっこいいものを作ってくれるもの

だとおもってくれればいいと思う。

BootStrapをAndroidにも導入しよう！

使い方はカンタンだよー。

ちなみにソース元はGithubにあるよ

(https://github.com/Bearded-Hen/Android-Bootstrap)

これを落としてうんやらかんやらとかネットを調べると書いてあるけど

そんなことをしなくても導入できるし、そっちのやり方でやるとエラーになったりするよ！

(もちろんボクが経験済みだよ！はっはっは)

Android BootStrapの使い方

今回はAndroid Studioを使っている人前提だよ。

まだ、eclipseを使っている人はそろそろ入れ替えないと置いてかれると思うよ、うん。

まずは、導入したいプロジェクトを開いて、そのプロジェクトで右クリックして、下から2番目の『Open Module Settings』をクリックするよ。

下にある+マークを押して『1 Library dependency』をクリック。

ここで『androidbootstrap』と入力すると3つの候補が出てくるので、一番上の『com.beardedhen:androidbootstrap:1.2.1』にチェックを入れ、OKを押す！

これで準備完了！！

実際のレイアウトの書き方

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:bootstrap="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="普通のボタン"
        android:id="@+id/button1"
        android:layout_gravity="center_horizontal" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="普通のボタン"
        android:id="@+id/button2"
        android:layout_gravity="center_horizontal" />

    <com.beardedhen.androidbootstrap.BootstrapButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="かっこいいボタン"
        android:id="@+id/button3"
        bootstrap:bb_icon_right="fa-android"
        bootstrap:bb_type="success"
        android:layout_gravity="center_horizontal"
        />
    
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

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

xmlns:bootstrap="http://schemas.android.com/apk/res-auto"

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent">

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="普通のボタン"

android:id="@+id/button1"

android:layout_gravity="center_horizontal" />

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="普通のボタン"

android:id="@+id/button2"

android:layout_gravity="center_horizontal" />

<com.beardedhen.androidbootstrap.BootstrapButton

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="10dp"

android:text="かっこいいボタン"

android:id="@+id/button3"

bootstrap:bb_icon_right="fa-android"

bootstrap:bb_type="success"

android:layout_gravity="center_horizontal"

</LinearLayout>

上記のコードみたいに書いてやると...

おしゃれ〜〜〜

もちろんカンタンにカスタマイズもできるから

角丸ボタンや、font awesomeのアイコンなんかも使えるよ！

Androidのボタンデザインで困ったときは、ぜひぜひ活用してみよう！

Pocket

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

ボタン デザインだ！！

そんなときにBootStrapだ！！！

なんか自分でデザインしなくても、シンプルでかっこいいものを作ってくれるもの

BootStrapをAndroidにも導入しよう！

Android BootStrapの使い方

まずは、導入したいプロジェクトを開いて、そのプロジェクトで右クリックして、下から2番目の『Open Module Settings』をクリックするよ。

下にある+マークを押して『1 Library dependency』をクリック。

ここで『androidbootstrap』と入力すると3つの候補が出てくるので、一番上の『com.beardedhen:androidbootstrap:1.2.1』にチェックを入れ、OKを押す！

これで準備完了！！

実際のレイアウトの書き方

上記のコードみたいに書いてやると...

おしゃれ〜〜〜

Androidのボタンデザインで困ったときは、ぜひぜひ活用してみよう！

ボタンデザインだ！！