2016年2月19日金曜日

Android View部品の背景色や枠線の設定

目次へ



AndroidのいろいろなViewに背景色をつけたり、枠線をつけたりする方法をまとめておきます。
次の2つを設定することで、背景色などを設定することができます。

  • リソースのdrawableで色や枠線を決めたxmlを作成
  • layoutのandroid:backgroundにそのxmlを指定


■■■■layoutのbackgroundの設定■■■■

たとえば、下の画面は、4つのEditTextとボタンを横にならべたものですが、枠線や背景色が異なっています。
枠線や背景色はlayoutのxml内のandroid:backgroundで指定しています。
最初のEditTextだけは、この指定が無いので、一般的な下線だけが引かれたものになっています。
この、android:backgroundで指定しているのは、drawableに保存したxmlファイルのファイル名の拡張子の無いものです。






res/layout/content_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="AB" />
    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/border"
        android:text="AB" />
    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/border1"
        android:text="AB" />
    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/gradient"
        android:text="AB" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ボタン"
        android:id="@+id/buttonEq"
        android:background="@drawable/pink_gradient" />
</LinearLayout>



■■■■drawableのxml■■■■

2番目のEditTextに指定されているres/drawable/border.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:width="20px" android:color="#CCCCFF" />
</shape>
ここでは、色と幅を指定した枠線をつけることが指定されています。



3番目のEditTextに指定されているres/drawable/border1.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:width="20px" android:color="#CCCCFF" />
    <padding android:left="50px" android:top="2px"
        android:right="2px" android:bottom="2px" />
    <corners android:radius="5dp" />
</shape>
ここでは、枠線内の余白が指定されています。
また、cornersを指定することにより、枠線の角が少し丸くなっています。



4番目のEditTextに指定されているres/drawable/gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="rectangle">
    <gradient
        android:startColor="#FFFFB7"
        android:endColor="#FF9900"
        android:angle="270" />
    <stroke
        android:color="#F95E00"
        android:width="2dp" />
    <corners android:radius="8dp" />
</shape>
ここでは、グラデーションの背景色が指定されています。
startColorからendColorまで徐々に色が変わっていきます。
android:angleは、グラデーションの方向を示します。
0にすると、左から右へのグラデーション。90にすると、下から上へのグラデーションになります。デフォルトは0です。



最後のボタンに指定されているres/drawable/pink_gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#FFAAAA"
        android:endColor="#FFEEEE"
        android:angle="0" />
    <stroke
        android:color="#F95E00"
        android:width="2dp" />
    <corners android:radius="8dp" />
</shape>
これも、背景色がグラデーションで左から右にFFAAAAの色からFFEEEEの色に変化していきます。



■■■■一般的なshape■■■■

Android Developers用の公式ページの shape drawableの説明ではshapeのSYNTAXの説明として以下のように記述されています。
<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape=["rectangle" | "oval" | "line" | "ring"] >
    <corners
        android:radius="integer"
        android:topLeftRadius="integer"
        android:topRightRadius="integer"
        android:bottomLeftRadius="integer"
        android:bottomRightRadius="integer" />
    <gradient
        android:angle="integer"
        android:centerX="integer"
        android:centerY="integer"
        android:centerColor="integer"
        android:endColor="color"
        android:gradientRadius="integer"
        android:startColor="color"
        android:type=["linear" | "radial" | "sweep"]
        android:useLevel=["true" | "false"] />
    <padding
        android:left="integer"
        android:top="integer"
        android:right="integer"
        android:bottom="integer" />
    <size
        android:width="integer"
        android:height="integer" />
    <solid
        android:color="color" />
    <stroke
        android:width="integer"
        android:color="color"
        android:dashWidth="integer"
        android:dashGap="integer" />
</shape>



にほんブログ村 IT技術ブログ IT技術メモへ
にほんブログ村