Hi guys,

I have a custom radiobutton with a 9-patch image as background. I use a Selector to determine the background. I also have some text i want to put over the background of the image, but the text is aligning next to the button.

This is the RadioGroup

<LinearLayout
    android:id="@+id/segmented"
    android:layout_width="fill_parent" 
    android:layout_height="50sp"
    android:gravity="center"
    android:layout_below="@+id/header">
    <RadioGroup android:layout_width="fill_parent"
        android:layout_height="wrap_content" 
        android:orientation="horizontal"
        android:id="@+id/group1"
        android:gravity="center">
        <RadioButton 
            android:checked="false"
            android:layout_width="90sp"
            android:id="@+id/rbVerzekeringen"
            android:text="Verzekeringen"
            android:textSize="10sp"
            android:button="@drawable/checkbox_theme" />
        <RadioButton 
            android:checked="false"
            android:layout_width="90sp"
            android:id="@+id/rbPersoonlijk"
            android:text="Persoonlijk"
            android:textSize="10sp"
            android:button="@drawable/checkbox_theme" />
        <RadioButton 
            android:checked="false"
            android:layout_width="90sp"
            android:id="@+id/rbNotities"
            android:text="Notities"
            android:textSize="10sp"
            android:button="@drawable/checkbox_theme" />
    </RadioGroup>
</LinearLayout>

This is the Selector:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:state_window_focused="false"
        android:drawable="@drawable/bt_filter_active" />
    <item android:state_checked="false" android:state_window_focused="false"
        android:drawable="@drawable/bt_filter" />
    <item android:state_checked="true" android:state_pressed="true"
        android:drawable="@drawable/bt_filter_active" />
    <item android:state_checked="false" android:state_pressed="true"
        android:drawable="@drawable/bt_filter" />
    <item android:state_checked="true" android:state_focused="true"
        android:drawable="@drawable/bt_filter_active" />
    <item android:state_checked="false" android:state_focused="true"
        android:drawable="@drawable/bt_filter" />
    <item android:state_checked="false" android:drawable="@drawable/bt_filter" />
    <item android:state_checked="true" android:drawable="@drawable/bt_filter_active" />
</selector>

And this is what it lookes like:

As you can figure out I want 3 large buttons with the text over it.

How can I do this?

EDIT:

I set the selector at background in stead of button and set the button to null.

The code looks like this now:

<LinearLayout
    android:id="@+id/segmented"
    android:layout_width="fill_parent" 
    android:layout_height="50sp"
    android:gravity="center"
    android:layout_below="@+id/header">
    <RadioGroup android:layout_width="fill_parent"
        android:layout_height="wrap_content" 
        android:orientation="horizontal"
        android:id="@+id/group1"
        android:gravity="center">
        <RadioButton 
            android:checked="false"
            android:layout_width="100sp"
            android:layout_height="40sp"
            android:id="@+id/rbVerzekeringen"
            android:text="Verzekeringen"
            android:textSize="13sp"
            android:orientation="vertical"
            android:background="@drawable/checkbox_theme"
            android:button="@null"
            android:gravity="center"/>
        <RadioButton 
            android:checked="false"
            android:layout_width="100sp"
            android:layout_height="35sp"
            android:id="@+id/rbPersoonlijk"
            android:text="Persoonlijk"
            android:textSize="35sp"
            android:background="@drawable/checkbox_theme"
            android:button="@null" 
            android:gravity="center"/>
        <RadioButton 
            android:checked="false"
            android:layout_width="100sp"
            android:layout_height="30sp"
            android:id="@+id/rbNotities"
            android:text="Notities"
            android:textSize="13sp"
            android:background="@drawable/checkbox_theme"
            android:button="@null" 
            android:gravity="center"/>
    </RadioGroup>
</LinearLayout>

But now when I make the buttons larger or smaller the text in it just disappears like this (height of the first image is 40sp, the second is 35sp and the last one is 30sp):

How can I make the background image smaller without cutting the text in it?