Custom Cart icon with count for android

Question

I have to show a cart icon with count which is customized image

I worked with normal images for the cart, but didn't have idea about the customized images

I have this image

I have to show this cart icon with count like this

Do I have to make separate images like second one OR can I go with the one that I have

Please help me in this

Thanks in advance.

Answer 1

You can simple use one and show a TextView over it containing the number of items

Use can use this as a background for your TextView

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

    <corners android:radius="5dp"/>
    <stroke android:color="#3CA9C1" android:width="3dp"/>
    <solid android:color="#FFFFFF"/>

</shape>

You can simply draw the text over the image like this, but it's not positioned well, you will have to figure that out by yourself.

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#252525">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/cart"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/textview_background"
        android:padding="5dp"
        android:text="10"/>

</RelativeLayout>