To draw a red circle with count on top corner of the app

Question

I am new to android and i need to display a count on the top right corner of my app.

The main page have a grid view. Here is the xml code of the page.

Can i show the circle from the code?

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
    android:id="@+id/lay_main"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#8c5630"
    android:orientation="vertical" >

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

        <GridView
            android:id="@+id/main_gridview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/adView"
            android:layout_margin="5dp"
            android:layout_marginTop="4dp"
            android:horizontalSpacing="10dp"
            android:numColumns="2"
            android:verticalSpacing="10dp" >
        </GridView>

        <com.google.ads.AdView
            android:id="@+id/adView"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_gravity="center"
            ads:adSize="BANNER"
            ads:adUnitId="@string/admob_id"
            ads:loadAdOnCreate="true"
            ads:testDevices="TEST_EMULATOR, TEST_DEVICE_ID" />
    </RelativeLayout>

</LinearLayout>

DoronK · Answer 1 · 2015-06-17T08:02:35.707

You can make a layout with a textview + shape like the following:

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


                <ImageView
                    android:id="@+id/family_hub_imageview"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:src="@drawable/family_hub_icon"/>


                <TextView
                    android:id="@+id/family_hub_tv_count"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/red_circle"
                    android:padding="3dp"
                    android:text="20"
                    android:textColor="@color/white"
                    android:textSize="11sp"
                    android:textStyle="bold"/>
            </RelativeLayout>

red_circle.xml:

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

    <solid android:color="@color/red"/>
    <stroke
    android:width="1dp"
    android:color="@color/white"/>
</shape>

score 2 · Accepted Answer · answered Oct 14 '14 at 10:51

Yes you can show it. take an ImageView where you want to draw a circle. Now in your java code put these line after initializing your ImageView.

    GradientDrawable gd = new GradientDrawable();
    gd.setShape(GradientDrawable.OVAL);
    gd.setColor(Color.rgb(134, 135, 255));
    gd.setCornerRadius(5);
    gd.setStroke(4, Color.rgb(255, 255, 255));
    yourImageView.setImageDrawable(gd);

To draw a red circle with count on top corner of the app

2 Answers2