I'm trying to use an image as a button. The image is an oval/circle, so when I set it as the background there's basically a black box with the image on top of it. How can I fix this?

This is the fragment main xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.example1.MainActivity$PlaceholderFragment" >


    <ImageButton
        android:id="@+id/hardButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="@drawable/hard_button_clickable"
        android:onClick="hardButton"
        android:text="@string/button_hard"
        android:textColor="#ffff00"
        android:textSize="50sp" />


</RelativeLayout>

This is the hard button xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/hard_button_img" android:state_focused="true" android:state_pressed="false"/>
    <item android:drawable="@drawable/hard_button_img" android:state_focused="true" android:state_pressed="true"/>
    <item android:drawable="@drawable/hard_button_img"/>

</selector>

Here's the problem in the app: http://i.gyazo.com/a7f3b25341ebf4146d294df1f5660e99.png

I've tried setting background to null and setting src to my image file. Nothing changed.

Thanks.

e; Here's the actual PNG: http://tinypic.com/r/av3cli/8

e; Still looking for help with this!