Positioning a badge bubble on the left upper side of a button

Question

I am trying to add a badge to one of my Activity's button. Right now I am trying to do the xml. The Button with the badge, should look like this:

I have already done the bubble and the text inside using a RelativeLayout:

<RelativeLayout android:layout_width="wrap_content" 
            android:layout_height="wrap_content">

            <ImageView android:layout_width="wrap_content" 
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:src="@drawable/badge"
                android:layout_centerInParent="true"/>

             <TextView android:layout_width="wrap_content" 
                       android:layout_height="wrap_content"
                       android:textStyle="bold"
                       android:text="2"
                       android:layout_centerInParent="true" />
         </RelativeLayout>

But I can't find a way to place it there and making it work on portrait and landscape with the same xml.

The Buttoms in the Activity are like this:

<Button android:id="@+id/new_releases_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_button_selector"
            android:text="@string/new_releases_title"
            android:textColor="#FFFFFF"
            android:textSize="20sp"
            android:gravity="center_vertical"
            android:paddingLeft="12dp"
            android:layout_marginTop="15dp"
            android:layout_below="@id/coming_soon_button"
            android:onClick="newReleaseClick"
            android:layout_centerHorizontal="true" />

        <Button android:id="@+id/top_sellers_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_button_selector"
            android:text="@string/top_sellers_title"
            android:textColor="#FFFFFF"
            android:textSize="20sp"
            android:gravity="center_vertical"
            android:paddingLeft="12dp"
            android:layout_marginTop="15dp"
            android:layout_below="@id/new_releases_button"
            android:onClick="topSellersClick"
            android:layout_centerHorizontal="true" />

and here are the two resources:

How should I do the xml?

EDIT: Best approach so far, but it still doesn't work:

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <Button android:id="@+id/discounts_button"
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content" 
                android:background="@drawable/ic_button_selector"
                android:text="@string/discounts_title"
                android:textColor="#FFFFFF"
                android:textSize="20sp"
                android:onClick="discountsClick"
                android:layout_marginTop="40dp"
                android:layout_marginLeft="20dp"/>

        <RelativeLayout android:layout_width="wrap_content" 
                android:layout_height="wrap_content"
                android:layout_gravity="top|left">

            <ImageView android:layout_width="wrap_content" 
                    android:layout_height="wrap_content"
                    android:adjustViewBounds="true"
                    android:src="@drawable/badge"
                    android:layout_centerInParent="true"/>

             <TextView android:layout_width="wrap_content" 
                           android:layout_height="wrap_content"
                           android:textStyle="bold"
                           android:text="20"
                           android:layout_centerInParent="true" />
         </RelativeLayout>
</FrameLayout>

Answer 1

Use a FrameLayout (instead of RelativeLayout) and put button and image into it.

Position the image (cirle with number) and button via

android:layout_gravity="top|left"
android:layout_marginTop="Xdp"
android:layout_marginLeft="Xdp"

to your likes.

Answer 2

I'd say that should be easy with FrameLayout:

<FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content"
     android:layout_centerHorizontal="true" android:layout_marginTop="15dp">
      <FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="15dip">
       <Button android:id="@+id/new_releases_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_button_selector"
        android:text="@string/new_releases_title"
        android:textColor="#FFFFFF"
        android:textSize="20sp"
        android:gravity="center_vertical"
        android:paddingLeft="12dp"
        android:layout_below="@id/coming_soon_button"
        android:onClick="newReleaseClick"/>
     </FrameLayout>
     <RelativeLayout android:layout_width="wrap_content" 
        android:layout_height="wrap_content">
        <ImageView android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:src="@drawable/badge"
            android:layout_centerInParent="true"/>
         <TextView android:layout_width="wrap_content" 
                   android:layout_height="wrap_content"
                   android:textStyle="bold"
                   android:text="2"
                   android:layout_centerInParent="true" />
     </RelativeLayout>
</FrameLayout>

Probably you will need to adjust margins.

EDIT:

Adding the android:layout_gravity="top|left" will look like this: