AndroidのいろいろなViewに背景色をつけたり、枠線をつけたりする方法をまとめておきます。
次の2つを設定することで、背景色などを設定することができます。
- リソースのdrawableで色や枠線を決めたxmlを作成
- layoutのandroid:backgroundにそのxmlを指定
|
■■■■layoutのbackgroundの設定■■■■
たとえば、下の画面は、４つの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>
|
にほんブログ村
