Custom RadioButton image not filling space

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 t开发者_如何学运维he 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?

did you try setting the drawable as android:background instead of button?

see here.

EDIT:

I'm not sure but I think it depends on 9-patch content area (bottom and right edges lines), Android sets padding based on that if the 9-patch is set as background. The content area stretches with the image.