StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Make your badge a <code>TextView</code>, allowing you to set the numeric value to anything you like by calling <code>setText()</code>. Set the background of the <code>TextView</code> as an XML <code><shape></code> drawable, with which you can create a solid or gradient circle with a border. An XML drawable will scale to fit the view as it resizes with more or less text.</p> <p><strong>res/drawable/badge_circle.xml:</strong></p> <pre><code><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#F00" /> <stroke android:width="2dip" android:color="#FFF" /> <padding android:left="5dip" android:right="5dip" android:top="5dip" android:bottom="5dip" /> </shape> </code></pre> <p>You'll have to take a look at how the oval/circle scales with large 3-4 digit numbers, though. If this effect is undesirable, try a rounded rectangle approach like below. With small numbers, the rectangle will still look like a circle as the radii converge together.</p> <p><strong>res/drawable/badge_circle.xml:</strong></p> <pre><code><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <corners android:radius="10dip"/> <solid android:color="#F00" /> <stroke android:width="2dip" android:color="#FFF" /> <padding android:left="5dip" android:right="5dip" android:top="5dip" android:bottom="5dip" /> </shape> </code></pre> <p>With the scalable background created, you simply add it to the background of a <code>TextView</code>, like so:</p> <pre><code><TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="10" android:textColor="#FFF" android:textSize="16sp" android:textStyle="bold" android:background="@drawable/badge_circle"/> </code></pre> <p>Finally, these <code>TextView</code> badges can be placed in your layout on top of the appropriate buttons/tabs. I would probably do this by grouping each button with its badge in a <code>RelativeLayout</code> container, like so:</p> <pre><code><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content"> <Button android:id="@+id/myButton" android:layout_width="65dip" android:layout_height="65dip"/> <TextView android:id="@+id/textOne" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignTop="@id/myButton" android:layout_alignRight="@id/myButton" android:text="10" android:textColor="#FFF" android:textSize="16sp" android:textStyle="bold" android:background="@drawable/badge_circle"/> </RelativeLayout> </code></pre> <p>Hopefully that's enough information to at least get you pointed in the right direction!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload