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="tr开发者_JAVA百科ue" />
</RelativeLayout>
</FrameLayout>
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.
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:
精彩评论