2014年01月16日

[Android]xmlで角丸ボタンを作る

Androidを担当しています、森脇です。
今回は画像を使わずに、xmlだけで角丸ボタンを作ってみようと思います。

ShapeDrawableを使ってボタン用のxmlファイルを作成
ShapeDrawableを利用してボタンのパーツを定義していきます。
http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- ボタンが押されてない時 -->
    <item android:state_pressed="false">
        <!-- ボタンの形状 -->
        <shape android:shape="rectangle">
            <!-- ボタンの色 -->
            <solid android:color="#ff4effa5"/>
            <!-- ボタンの枠線 -->
            <stroke android:width="1dp" android:color="#fffdfdfd"/>
            <!-- ボタンの角の半径 -->
            <corners android:radius="4dp"/>
            <!-- ボタン内の余白 -->
            <padding android:top="8dp" android:left="16dp" android:bottom="8dp" android:right="16dp"/>
        </shape>
    </item>
    <!-- ボタンが押された時 -->
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#ff409048"/>
            <stroke android:width="1dp" android:color="#fffdfdfd"/>
            <corners android:radius="4dp"/>
            <padding android:top="8dp" android:left="16dp" android:bottom="8dp" android:right="16dp"/>
        </shape>
    </item>
</selector>
<shape>タグではボタンの形状を指定します。
<solid>タグではボタンの色、<stroke>タグではボタンの枠線の太さ、色を指定します。
<corners>タグではボタンの角の半径を指定します。
最後に<padding>タグではボタン内の余白を指定しています。
今回はボタンが押されてない時と、ボタンが押された時それぞれでこれらを定義しています。

あとはできあがったxmlファイルをボタンの背景に設定するだけです。
今回は似たようなxmlファイルをあと2つ作成してみました。
button_default.png
押すと色が変わります。
button_pressed.png
こんなかんじで簡単なボタンなら開発者側だけで用意することができます。デザイナーの負担も減りますし、何より画像に比べて処理速度が速いのでオススメです。
他にも<gradient>タグでグラデーションをかけたり、LayerListを使えばもう少し複雑なボタンを描画することもできます。
http://developer.android.com/guide/topics/resources/drawable-resource.html#LayerList
感覚的にCSS3でいろいろ工夫するのに似てて楽しいので、ぜひいろいろ試してみてください。
posted by Seesaa京都スタッフ at 12:00| Comment(0) | Android | このブログの読者になる | 更新情報をチェックする

2013年12月25日

[Android]Genymotionを導入する

最近、洲崎西を聴き始めました。Androidを担当しています、森脇です。

今回は最近流行りの高速エミュレーター、Genymotionを導入してみました。
導入環境はMac OSX 10.9になります。

Genymotionをインストールする
http://www.genymotion.com/
Genymotion.png
まずGenymotionのサイトにユーザー登録後、Genymotionをダウンロード、インストールします。
今回はGenymotion 2.0.3をインストールしました。

Virtual Box環境がないと動かないので、Virtual Boxをインストールしてない方はそちらも合わせてインストールしておきましょう。今回はVirtual Box 4.3.6をインストールしました。
https://www.virtualbox.org/wiki/Downloads

Genymotionにデバイスを追加する
Genymotionを起動すると、このような画面が起動します。Addボタンからエミュレーターとして使用できる仮想デバイスを追加することができます。
Genymotion_for_personal_use.png

Addボタンを押すと追加する仮想デバイスを選ぶ画面に遷移します。初回起動時に仮想デバイスを追加する旨のダイアログも出ると思うので、そちらでYESを選んだ場合も同じ画面に遷移します。
しかし今は仮想デバイスが1つも表示されていません。右下のConnectを押すとダイアログが表示されるので、先程登録したGenymotionのユーザーID、パスワードでログインしましょう。
Virtual_device_creation_wizard.png

ログインが完了するとインストール可能なデバイス一覧が表示されます。好きな端末を選んだらNextを押します。端末の詳細情報が表示されるので問題なければそのままインストールしましょう。
Virtual_device_creation_wizard01.png

Genymotionでエミュレーターを起動する
端末のインストールが終わると先程の画面に端末が追加されてると思います。起動したい端末を選んでからPlayを押して端末を起動します。
Genymotion_for_personal_use02.png

起動できました!超速いですこれ。
Galaxy_Nexus.png

ちなみに昔はAndroid SDKのパスを設定しないと起動しなかったんですが、どうやらGenymotion内のSDKを利用できるようになったようです。もちろん改めてパスを設定することもできます。
Settings.png

Android StudioにGenymotionプラグインをインストールする
ついでなのでAndroid Studioから直接エミュレーターを起動できるようにします。
Preferencesを開いてPluginsのBrowse repositoriesを押します。
Preferences.png

プラグインの一覧が表示されるのでGenymotionを選んでインストールします。
Browse_Repositories.png

インストールが完了するとツールバーにアイコンが追加されます。アイコンをクリックすると、このアイコンから直接エミュレーターを起動することができるようになります。初回のみGenymotionのアプリケーションの場所を聞かれるのでパスを設定しましょう。
Android_Studio.png

以上でGenymotionの導入は終了です。
噂には聞いてましたが超速いです。あと思ってたよりもインストールして起動するまでがスムーズで簡単でした。ちなみにSeesaa Vietnamのスタッフの中にもすでに導入してる方がいました。世界的に流行ってるんですね。
Androidのエミュレーターが遅くて悩んでる方はぜひ使ってみてください。
posted by Seesaa京都スタッフ at 12:00| Comment(0) | Android | このブログの読者になる | 更新情報をチェックする

2013年11月01日

[Android]Bluetoothを使ってチャットをしてみる

こんにちは、Android担当の外山です。
Android4.4が公開されてもうすぐ1ヵ月がたちそうですね
Android4.4では新たにBluetoothのHOGPやMAPがサポートされたそうです。
サポートされるプロファイルも増えてAndroidでBluetoothを使う機会が増えるかもしれないですね。

今回は、BluetoothのSPP(Serial Port Profile)を使ったチャット機能と、
android.intent.action.SENDのIntentから起動をした場合にURLなどの送信が
できる機能を持ったアプリに書こうと思います。

アプリはAndroidSDKのサンプルコードであるBluetoothChatを元に作成しました。
(ソースコードの場所: AndroidSDKディレクトリ/samples/android-xx/BluetoothChat/ )

サンプルコードではSecureモードとInSecureモードを使っているのですが今回はSecureモードのみ
使うのでInSecureに関連する変数・処理は取り除いておきます。


主に変更した箇所を書いていきます。
SPPを使う時のUUIDは以下のように設定します。
    // SPPのUUID
    private static final UUID MY_UUID_SECURE =
    		UUID.fromString("00001101-0000-1000-8000-00805F9B34FB");

次に他のアプリからIntentで呼び出された場合にメッセージを保存する処理を
BluetoothChat#onCreateに追加します。
        // ACTION_SENDで呼び出された時は送信された文字列を記憶しておく 
        Intent intent = getIntent();
        String action = intent.getAction();
        if (Intent.ACTION_SEND.equals(action)) {
          Bundle extras = intent.getExtras();
          if (extras != null) {
            CharSequence ext = extras.getCharSequence(Intent.EXTRA_TEXT);
              if (ext != null) {
            	intentMessage = ext.toString();
                Log.d("DEBUG", ext.toString());
              }
          }
        }

次に保存したメッセージを送信する処理を追加しますが、アプリを起動した時点では
誰に送信をすればいいかわからないので送信する相手が決まってから送るようにします。
そのためにBluetoothChat内のmHandler#handleMessage内での処理を変更します。
                  case BluetoothChatService.STATE_CONNECTED:
                    setStatus(getString(R.string.title_connected_to, mConnectedDeviceName));
                    mMessageArrayAdapter.clear();
                    
                    // intentで受け取ったメッセージがまだ送られていないなら送信しておく
                    if(intentMessage!=null)
                    	sendMessage(intentMessage);
                    intentMessage=null;
                    break;

後は表示の部分に時刻や送信元の情報を付け加えるようにして完成です。


実行してみると...自分の端末から相手の端末へURLを送ることができました!
また、相手からの返事の受信にも成功。URLの文字列をタップすることで
ブラウザで開けるようにもしましたー
Screenshot_2013-11-01-19-01-45.png
posted by Seesaa京都スタッフ at 17:58| Comment(0) | Android | このブログの読者になる | 更新情報をチェックする