2013年5月15日水曜日

Android テキストビューの背景をグラデーションにする

こんにちは!

今回はAndroidアプリのテキストビューにグラデーションをかける方法です。

私が作っているAndroidアプリ『検索の窓口』を使って記載していきます。

一番上の検索の窓口と書かれている緑色のテキストビューを作成します。

(横の顔文字は今回関係ありませんので無視してください。。)




~作成手順~

 1. グラデーション生成用XMLを作成
 2. テキストビューのbackgroundに1のXMLを設定



1. グラデーション生成用XMLを作成

名前は『design_top.xml』、保存場所は『layout』としておきます。


9行目のgradientでグラデーションの設定を行います。
10行目で開始色、11行目で終了色を設定します。
12行目のangleはグラデーションをかける方向を決めます。


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selector
  3.     xmlns:android="http://schemas.android.com/apk/res/android">
  4.     
  5.     <item>        
  6.        <shape
  7.             xmlns:android="http://schemas.android.com/apk/res/android"
  8.             android:shape="rectangle">
  9.             <gradient
  10.                 android:startColor="#00C200"
  11.                 android:endColor="#008000"
  12.                 android:angle="270" />
  13.         </shape>
  14.     </item>
  15. </selector>


10行目、11行目の色設定は、以下のアプリを使用すると凄く便利です。
 ・色見本 - Color Palette -
 https://play.google.com/store/apps/details?id=net.uzumaki.android.iromihon

また、このXMLを保存したときに7行目にエラーが発生する場合は、クリーン&再ビルドで改善されます。(私はそうやって回避しています。。)



2. テキストビューのbackgroundに1のXMLを設定
グラデーションにかかわる部分は8行目のみです。
中身を以下のようにします。

  1. <TextView
  2. android:id="@+id/title_text"
  3. android:layout_width="fill_parent"
  4. android:layout_height="wrap_content"
  5. android:textSize="18dip"
  6. android:padding="6dip"
  7. android:text="検索の窓口"
  8. android:background="@layout/design_top"
  9. android:textColor="#ffffff"
  10. android:textStyle="bold" />


完了!!!
これでグラデーションがかかります。
今回は1で作成したXMLにグラデーションの設定しかしていませんが、文字の大きさや色など別の設定をすることも可能です!


検索の窓口(アンドロイダー)
https://androider.jp/official/app/0f0d4638b01cfd49/

参考ページ
・shapeタグを使ってボタンの背景色をグラデーションにする
http://techbooster.org/android/ui/14993/

0 件のコメント:

コメントを投稿