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

debugcn Published at Dev

shank2111

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 :

I have six ImageViews in a Fragment.
The user can scroll to any of these ImageViews.
When the user clicks on any ImageView, we need to show how many times s/he has clicked on that ImageView
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.

This is my objective

This is what I am getting out of this code.

This is when I removed drawable background from the first image.

Phantômaxx

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:

enter image description here

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)

enter image description here

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-07-9

Comments

0 comments

From Dev

Related Related

Article

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

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

how to draw circle with text in middle and an image as a background of the circle?

Overlapping text over background image

Background Image Appearing Over Text

draw a circle over a image in html5 and javascript

Draw text inside a circle

Draw a text underneath a circle

GD Lib - Text with background over image

Bootstrap How to add text over image with background?

itextsharp add text over a circle image in a table cell

Opencv c++. Draw a circle on different pixel of image in a for loop, (the image should be open new at each loop run)

Image::Magick draw a blurred circle

How to draw a circle on an image in android

how to set background of an image and a text /image over it in android

how to draw a text on a circle in SWIFT

Put a image in a circle view

set image for each item in a list of items, during fragment on Create view

Use img tag inside a div as the divs background image with text over

How do I create background image and add text over it

How do I align text vertically over a background image?

Text over the top of a border-image: Using the border as an expandable background

How do I create background image and add text over it

Text over background image removes its hover state

R draw a circle arround each point in scatterplot

Draw a shape over existing view

Animating over a background image

setOnItemClickListener in a fragment and image view

Draw circle from main Activity or change view

Need to draw / animate a small square background image, then repeat it over x and y

How to make image and text responsive next to each other on a background?