Android CheckBoxの画像を変更する（BackGround) その２

前回「Android CheckBoxの画像を変更する　その１」でコチラ「Android GridView CheckBox付きの画像を表示」で作成したチェックボックスの画像を変更してみました。
CheckBoxを画像の右上に配置したいのですが、これ以上動きません。

実はCheckBox画像の右横にもう一つ画像があるのです。
CheckBoxのbackgroundに設定されている@android:drawable/btn_check_label_background は透明の画像で
チェック画像とテキストの間隔を調整しているようです。

ということでbackgroundに@nullを設定してみました。
一つ目のCheckBoxはデフォルトの状態です。
二つ目のCheckBoxはtextに値を設定し、backgroundに@nullを設定しています。
三つ目のCheckBoxはtextに値を設定せず、backgroundに@nullを設定していますが、表示されません。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <CheckBox
        android:id="@+id/checkBox1"
        style="@style/CustomCheckBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="CheckBox" />
    
    <CheckBox
        android:id="@+id/CheckBox02"
        style="@style/CustomCheckBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="CheckBox" 
        android:background="@null" />   

    <CheckBox
        android:id="@+id/CheckBox03"
        style="@style/CustomCheckBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
         android:text=""
        android:background="@null" />

</LinearLayout>

btn_check_label_backgroundに替わる画像を作ってあげればよさそうですが、
検索すると「Y.A.M の 雑記帳」さんの Android RadioButton の画像とテキストの間隔を広げる でshapeを使った方法が紹介されていました。

バックグランドに設定するShapeを定義する

res/drawableに「custom_checkbox_background.xml」を作成します。

<?xml version="1.0" encoding="utf-8"?>
<shape  xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
     <solid android:color="#A9A9A9" />
     <padding        
         android:left="22dip"        
         android:top="0dip"        
         android:right="0dip"        
         android:bottom="0dip" />
</shape>

styleを定義する

res/values/styles.xmlを編集し、CheckBoxに設定するスタイルを追記します。

<resources>

 <style name="CustomCheckBox" parent="android:Widget.CompoundButton.CheckBox">
  <item name="android:button">@drawable/custom_checkbox</item>
  <item name="android:background">@drawable/custom_checkbox_background</item>
 </style>
    
</resources>

CheckBoxにStyleを設定する

res/layout/activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <CheckBox
        android:id="@+id/checkBox1"
        style="@style/CustomCheckBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="CheckBox" />
    
    <CheckBox
        android:id="@+id/CheckBox02"
        style="@style/CustomCheckBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="" />   

</LinearLayout>

実行してみた

GridViewのCheckBoxにも適用してみました。
右上に配置できています。

shapeの角を丸くして背景色をグラデーションにすればいい感じじゃないでしょうか。