Draw Circle in the background of Text View, over each image in Fragment

Question

I am new to Android and I am trying to show some notification to the user.
I.e.: how many pieces s/he has selected for a particular item.

Use Case :

1. I have six ImageViews in a Fragment.
2. The user can scroll to any of these ImageViews.
3. When the user clicks on any ImageView, we need to show how many times s/he has clicked on that ImageView
4. People suggest it can be solved by using TextViews with a drawable background.
   Each ImageView has a TextView attached to it, which is invisible when the uses has not clicked yet.

I am trying to put a TextView over each ImageView - something like this, and I am not sure if it's the best practice :

Note : android:text in TextView is just a placeholder, We will be setting text with Java code dynamically.

Here is my fragment xml:

<RelativeLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/scrollLayout">

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/offerimg1"
        android:src="@mipmap/zari"
        android:background="#00ffffff"
        android:padding="0dp" />
    <TextView
        android:id="@+id/textofferimg1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignLeft="@+id/offerimg1"
        android:layout_alignTop="@+id/offerimg1"
        android:layout_alignRight="@+id/offerimg1"
        android:layout_alignBottom="@+id/offerimg1"
        android:text="3"
        android:textColor="#ffffff"
        android:gravity="right"
        android:paddingRight="10dp"
        android:paddingBottom="20dp"
        android:paddingTop="100dp"
        android:textSize="10dp"
        android:minWidth="15dp"
        android:background="@drawable/bg_red"
        android:layout_alignParentStart="true" />


    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/offerimg2"
        android:src="@mipmap/zari"
        android:layout_below="@id/offerimg1"
        android:background="#00ffffff"
        android:layout_alignParentEnd="false" />
    <TextView
        android:id="@+id/textofferimg2"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignLeft="@+id/offerimg2"
        android:layout_alignTop="@+id/offerimg2"
        android:layout_alignRight="@+id/offerimg2"
        android:layout_alignBottom="@+id/offerimg2"
        android:text="20"
        android:textColor="#ffffff"
        android:gravity="right"
        android:paddingRight="10dp"
        android:paddingBottom="20dp"
        android:paddingTop="100dp"
        android:textSize="10dp"
        android:minWidth="15dp"
        android:background="@drawable/bg_red"
        android:layout_alignParentRight="false" />


    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/offerimg3"
        android:src="@mipmap/zari"
        android:layout_below="@id/offerimg2"
        android:background="#00ffffff" />
    <TextView
        android:id="@+id/textofferimg3"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignLeft="@+id/offerimg3"
        android:layout_alignTop="@+id/offerimg3"
        android:layout_alignRight="@+id/offerimg3"
        android:layout_alignBottom="@+id/offerimg3"
        android:text="32"
        android:textColor="#ffffff"
        android:gravity="right"
        android:paddingRight="10dp"
        android:paddingBottom="20dp"
        android:minWidth="15dp"
        android:textSize="10dp"
        android:background="@drawable/bg_red"
        android:paddingTop="100dp" />

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/offerimg4"
        android:src="@mipmap/zari"
        android:layout_below="@id/offerimg3"
        android:background="#00ffffff" />
    <TextView
        android:id="@+id/textofferimg4"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignLeft="@+id/offerimg4"
        android:layout_alignTop="@+id/offerimg4"
        android:layout_alignRight="@+id/offerimg4"
        android:layout_alignBottom="@+id/offerimg4"
        android:layout_margin="1dp"
        android:text="36"
        android:textColor="#ffffff"
        android:gravity="right"
        android:paddingRight="10dp"
        android:paddingBottom="20dp"
        android:textSize="10dp"
        android:minWidth="15dp"
        android:background="@drawable/bg_red"
        android:paddingTop="100dp"
        android:layout_alignParentStart="false" />

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/offerimg5"
        android:src="@mipmap/zari"
        android:layout_below="@id/offerimg4"
        android:background="#00ffffff" />
    <TextView
        android:id="@+id/textofferimg5"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignLeft="@+id/offerimg5"
        android:layout_alignTop="@+id/offerimg5"
        android:layout_alignRight="@+id/offerimg5"
        android:layout_alignBottom="@+id/offerimg5"
        android:layout_margin="1dp"
        android:text="37"
        android:textColor="#ffffff"
        android:gravity="right"
        android:paddingRight="10dp"
        android:paddingBottom="20dp"
        android:textSize="10dp"
        android:minWidth="15dp"
        android:background="@drawable/bg_red"
        android:paddingTop="100dp"
        android:layout_alignParentEnd="false" />

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/offerimg6"
        android:src="@mipmap/zari"
        android:layout_below="@id/offerimg5"
        android:background="#00ffffff" />
    <TextView
        android:id="@+id/textofferimg6"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignLeft="@+id/offerimg6"
        android:layout_alignTop="@+id/offerimg6"
        android:layout_alignRight="@+id/offerimg6"
        android:layout_alignBottom="@+id/offerimg6"
        android:layout_margin="1dp"
        android:text="83"
        android:textColor="#ffffff"
        android:gravity="right"
        android:textSize="10dp"
        android:paddingRight="10dp"
        android:paddingBottom="20dp"
        android:minWidth="15dp"
        android:background="@drawable/bg_red"
        android:paddingTop="100dp" />
</RelativeLayout>

And here is my drawable bd_red.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <item>
        <shape>
            <corners android:radius="3dp"/>
            <solid android:color="#F00"/>
        </shape>
    </item>
</layer-list>

The result of this really awkward, and the red background has covered my entire image.
I am also attaching my ultimate objective as attachment to this post.

Answer 1

Since its not an answer, I was not able to attach image in the comment, therefore I had to post it here. I need some clarification regarding margin_left and margin_top.

I was able to achieve my objective and I accepted the answer given by @der-gol-lum. Here is my end result.

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/offerimg1"
        android:src="@mipmap/zari"
        android:background="#00ffffff"
        android:padding="0dp"
        android:layout_alignParentEnd="false" />
    <TextView
        android:id="@+id/offer1"
        android:background="@drawable/badge_price"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:gravity="center"
        android:text="£ 10"
        android:textStyle="bold"
        android:textColor="#88f"
        android:textSize="20sp"
        android:minWidth="15dp"
        android:layout_marginLeft="270dp"
        android:layout_marginTop="85dp"
        />
    <TextView
        android:id="@+id/textofferimg1_count"
        android:background="@drawable/bg_red"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/offerimg1"
        android:layout_alignRight="@id/offerimg1"
        android:gravity="center"
        android:text="3"
        android:textStyle="bold"
        android:textColor="#fff"
        android:textSize="10sp"
        android:minWidth="15dp"
        android:layout_marginLeft="340dp"
        android:layout_marginTop="80dp"
        />

I need to keep these textviews at the bottom right of each Imageview they are attached with ( image attached ), Is it really feasible to use layout_marginLeft and layout_marginRight in order to keep them aligned right bottom. I am asking this just because, app might be used in different screen size which might effect its position on the image. Its just a thought, please give your suggestions.

Thanks, Shashank

[EDIT]

Let me make some optimizations.
Instead of giving humongous margins, I just played with the alignments.
And respective referrals.

<TextView
    android:id="@+id/offer1"
    android:background="@drawable/badge_price"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:layout_alignBottom="@id/offerimg1"
    android:layout_alignRight="@id/offerimg1"
    android:layout_margins="8dp"
    android:gravity="center"
    android:text="£ 10"
    android:textStyle="bold"
    android:textColor="#88f"
    android:textSize="20sp"
    android:minWidth="15dp"
/>
<TextView
    android:id="@+id/textofferimg1_count"
    android:background="@drawable/bg_red"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@id/offer1"
    android:layout_alignRight="@id/offer1"
    android:gravity="center"
    android:text="3"
    android:textStyle="bold"
    android:textColor="#fff"
    android:textSize="10sp"
    android:minWidth="15dp"
/>

Your friendly Gol...lum

Answer 2

Your first ImageView fills up your parent,

<ImageView
    android:layout_width="fill_parent"

while your second one just wraps it's content, I guess this is what you want? So apply it to all the ImageViews.

<ImageView
    android:layout_width="wrap_content"

You should also know that if you put a View on top of another View, covering it up, as you did here with your TextViews,

 android:layout_alignLeft="@+id/offerimg1"
 android:layout_alignTop="@+id/offerimg1"
 android:layout_alignRight="@+id/offerimg1"
 android:layout_alignBottom="@+id/offerimg1"

You will hide the first View (ImageView in this case) since you filled up the TextView with a red color.

Answer 3

Use setOnClickListener on ImageView and show the number of clicks on Textview.

image_view.setOnClickListener(new OnClickListener() {

 @Override
 public void onClick(View v) {
      count++;
     TextView.setText(String.valueOf(count));
 }});

Answer 4

In order to use circle you can follow this

android:shape="oval" 

within shape tag

Answer 5

I won't focus on how to make the badge visibility hiddeen or shown, since it's really a trivial task.

Let's talk about the design.

To reach your goal, I made several fixes (several, really) to your design.

This is the layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/scrollLayout"
    >
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/offerimg1"
        android:src="@drawable/ic_launcher"
        android:background="#0fff"
    />
    <TextView
        android:id="@+id/textofferimg1"
        android:background="@drawable/badge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/offerimg1"
        android:layout_alignRight="@id/offerimg1"
        android:gravity="center"
        android:text="3"
        android:textStyle="bold"
        android:textColor="#fff"
        android:textSize="10sp"
        android:minWidth="15dp"
    />

    <!-- Do the same for all the others -->

</RelativeLayout>

This is your shape (/res/drawable/badge.xml)

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

This is the result you are after:

I used the default launcher icon, since I don't have your images.
Also note that the mipmap folder should only be used for launcher icons, not for the application graphics.

---

My suggestion, though, is that you use another TextView, for the prices, instead of an ImageView.
So, you could easily update the prices.

---

This is the layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/scrollLayout"
    android:background="#000"
    >
    <TextView
        android:id="@+id/offerimg1"
        android:background="@drawable/badge_price"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:gravity="center"
        android:text="£ 10"
        android:textStyle="bold"
        android:textColor="#88f"
        android:textSize="20sp"
        android:minWidth="15dp"
    />
    <TextView
        android:id="@+id/textofferimg1_count"
        android:background="@drawable/badge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/offerimg1"
        android:layout_alignRight="@id/offerimg1"
        android:gravity="center"
        android:text="3"
        android:textStyle="bold"
        android:textColor="#fff"
        android:textSize="10sp"
        android:minWidth="15dp"
    />

    <!-- All the others -->

</RelativeLayout>

This is the additional shape (/res/drawable/badge_price.xml)

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

Only the color of the shape changes

This is the result (to better see it, I made a black backgroud)