We Keep Coding

No Ripple Effect in RecyclerView

I am using RecyclerView to display quote list Fragment. I am trying to use Ripple effect in list item but its not working. My RecyclerView is like below
<android.support.v7.widget.RecyclerView
android:id="#+id/listQuoteView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/BackColor"
android:layout_above="#+id/startAppBanner"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
And List Item XML is like below
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="4dp"
app:cardCornerRadius="6dp"
app:cardElevation="4dp">
<LinearLayout
android:id="#+id/quoteActionView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/TextColor"
android:clickable="true"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageAuthorView"
android:layout_width="#dimen/imageAuthorView"
android:layout_height="#dimen/imageAuthorView"
android:visibility="visible" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/textQuote"
android:ellipsize="end"
android:layout_width="match_parent"
android:layout_height="0dp"
android:paddingRight="#dimen/list_text_margin"
android:paddingLeft="#dimen/list_text_margin"
android:gravity="center_vertical"
android:layout_weight="2"
android:maxLines="2"
android:layout_margin="2dp"
android:lineSpacingExtra="#dimen/linespace"
android:textColor="?attr/MainTextColor"
android:text="Hello there two line text for show here which I am typing for a test"
android:scrollHorizontally="true"
android:textSize="#dimen/textDetailQuote"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:background="?attr/dark_color"
android:orientation="horizontal">
<ImageView
android:layout_width="#dimen/likeIcon"
android:layout_height="#dimen/likeIcon"
android:layout_weight="1"
android:tint="?attr/List_Text"
android:src="#drawable/time_new_ic" />
<TextView
android:id="#+id/lblTimeCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="00:00"
android:textStyle="bold"
android:textColor="?attr/List_Text"
android:textSize="#dimen/lblTime" />
<ImageView
android:layout_width="#dimen/likeIcon"
android:layout_height="#dimen/likeIcon"
android:layout_weight="1"
android:tint="?attr/List_Text"
android:src="#drawable/fav_new_ic" />
<TextView
android:id="#+id/lblLikeCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="200"
android:textStyle="bold"
android:textColor="?attr/List_Text"
android:textSize="#dimen/lblTime" />
<ImageView
android:layout_width="#dimen/likeIcon"
android:layout_height="#dimen/likeIcon"
android:layout_weight="1"
android:tint="?attr/List_Text"
android:src="#drawable/share_new_ic" />
<TextView
android:id="#+id/lblShareCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textStyle="bold"
android:text="100"
android:textColor="?attr/List_Text"
android:textSize="#dimen/lblTime" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
I have tried many solutions listed in stackoverflow but not worked any. If I remove CardView from List Item.... Ripple Effect shows itself behind LinearLayout but I want to use CardView also. Let me know if someone can help me to solve this issue. Thanks.
Note : I have solved it using this solution. Thanks

Set the ripple as a foreground drawable on the CardView:
android:foreground="?attr/selectableItemBackground"
This will allow the ripple to show up above the content inside the CardView, which is usually what you want for a CardView

Create ripple drawable and set it as foreground of your layout
ripple.xml
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#color/your_color"
tools:targetApi="lollipop">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#color/your_color" />
</shape>
</item>
</ripple>
Change your code like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:clickable="true"
android:foreground="#drawable/ripple"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="4dp"
app:cardCornerRadius="6dp"
app:cardElevation="4dp">

Use android:background="?android:attr/selectableItemBackground"

How to Divide screen into 4 equal part using Grid layout in android?

I have try to divide the screen into 4 equal parts but got problem.
<GridLayout
android:rowCount="2"
android:columnCount="2"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:background="#drawable/rectangle"
android:layout_column="0"
android:layout_row="0"
/>
<View
android:background="#drawable/rectangle"
android:layout_column="1"
android:layout_row="0"
/>
<View
android:background="#drawable/rectangle"
android:layout_column="0"
android:layout_row="1"
/>
<View
android:background="#drawable/rectangle"
android:layout_column="1"
android:layout_row="1"
/>
and the the rectangle.xml file is
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:id="#+id/listview_background_shape">
<stroke android:width="2dp" android:color="#ff207d94" />
<padding android:left="2dp"
android:top="2dp"
android:right="2dp"
android:bottom="2dp" />
<corners android:radius="20dp" />
<solid android:color="#ffffffff" />
</shape>
Right now rectangle are going outside of screen and first column filling the whole screen.

Starting API 21 you can use weights in GridLayout:
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="2"
android:rowCount="2">
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:background="#drawable/rectangle"/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:background="#drawable/rectangle"/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:background="#drawable/rectangle" />
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:background="#drawable/rectangle" />
</GridLayout>
Use android.support.v7.widget.GridLayout if you need to support previous apis

You can do it with LinearLayout.Below is a example of 4 buttons.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:layout_weight="1.0"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_green_light"
android:layout_weight="1.0"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:orientation="horizontal" >
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_blue_light"
android:layout_weight="1.0"
android:text="Button" />
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_red_light"
android:layout_weight="1.0"
android:text="Button" />
</LinearLayout>
</LinearLayout>

If you are trying to get GridLayout Dynamically i.e. from web-services. it doesn't work fine. You should try GridView using Getter Setter, it would work fine. Don't try without getter setter. Otherwise there would be some issues regarding to item's position.

ImageButton over another image

Well, I recently see whatsapp and tinder application. The "change profile picture" option is the same besides the button over. How we can do this? Is there any lib? or shape to do this ?

Use this code :
<FrameLayout
android:gravity="center"
android:layout_centerInParent="true"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:paddingBottom="24.0dip"
android:paddingLeft="0.5dip"
android:paddingRight="0.5dip"
android:paddingTop="35.0dip"
android:background="#ff26a69a"
xmlns:android="http://schemas.android.com/apk/res/android">
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/profile_image"
android:layout_width="178.0dip"
android:layout_height="178.0dip"
android:src="#drawable/ic_settings_profile"
app:civ_border_width="2dp"
app:civ_border_color="#FF000000"/>
<ProgressBar
style="?android:attr/progressBarStyleInverse"
android:id="#+id/change_photo_progress"
android:layout_gravity="center"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:visibility="gone" />
<ImageButton
style="#style/ActionBarButtonStyle"
android:background="#drawable/input_circle"
android:elevation="2.0dip"
android:id="#+id/change_photo_btn"
android:layout_gravity="bottom|center|right"
android:layout_height="52.0dip"
android:layout_marginBottom="2.0dip"
android:layout_width="52.0dip"
android:src="#drawable/ic_cam_white" />
</FrameLayout>
in drawable folder
input_circle.xml
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/input_circle_pressed" />
<item android:state_focused="true" android:state_enabled="true" android:drawable="#drawable/input_circle_pressed" />
<item android:drawable="#drawable/input_circle_normal" />
</selector>
Output :

add textview inside of imageview
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/linearImage"
android:layout_weight="1"
android:gravity="center"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:layout_marginTop="20dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imgtimer"
android:layout_gravity="center"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:scaleType="fitCenter"
android:src="#drawable/downcounter"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_gravity="center"
android:gravity="center"
android:paddingLeft="6dp"
android:paddingRight="6dp"
android:layout_marginTop="10dp"
android:layout_centerHorizontal="true">
<TextView
android:id="#+id/txthourr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLength="2"
android:text="00"
android:layout_marginRight="3dp"
android:textColor="#color/white"
android:paddingRight="2dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="48dp"
/>
<TextView
android:id="#+id/txtcolon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLength="1"
android:text=":"
android:textColor="#color/white"
android:textSize="40dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_marginBottom="2dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/txtminutee"
android:maxLength="2"
android:textSize="48dp"
android:layout_marginLeft="4dp"
android:textColor="#color/white"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="30"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/txtsecc"
android:maxLength="2"
android:layout_marginLeft="4dp"
android:textSize="26dp"
android:textColor="#color/white"
android:layout_marginTop="8dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="00"
/>
</LinearLayout>
</FrameLayout>

Try this,alignEnd , alignRight , alignBottom the small image to the big image,and adjust the margin dimensions as per your images.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_gravity="right|center_vertical">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/bigImage"
android:layout_centerHorizontal="true"
android:layout_marginTop="100dp"
android:layout_width="140dp"
android:layout_height="140dp"
android:background="#drawable/back_image"/>
<ImageButton
android:id="#+id/small_image"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignEnd="#+id/big_mage"
android:layout_alignRight="#+id/big_image"
android:layout_alignBottom="#+id/big_image"
android:background="#drawable/small_image"
android:text="" />
</RelativeLayout>

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

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.

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

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)

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));
}});

In order to use circle you can follow this
android:shape="oval"
within shape tag

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.

android how to make inner view circle shape as shown in Picture

i want to achieve the following shape with circle background, i have tried but my inner view is not getting in circle shape in Relative layout i will post my screen shot .
and I am getting the following Result with the layout i cerated
<RelativeLayout
android:id="#+id/circle_layout"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/whitecircle" >
<RelativeLayout
android:id="#+id/circle_layoutinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/rating_viewtv"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="#drawable/circletwo" >
<TextView
android:id="#+id/ratingcup_viewtv_fonts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Y"
android:textColor="#android:color/holo_purple" />
</RelativeLayout>
<TextView
android:id="#+id/rating_viewtv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="3dp"
android:text="4.5"
android:textColor="#android:color/holo_purple" />
</RelativeLayout>
</RelativeLayout>
my whitecircle.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thicknessRatio="2"
android:useLevel="false">
<solid android:color="#color/white" />
</shape>
my circletwo.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="ring"
android:thicknessRatio="2"
android:useLevel="false">
<solid android:color="#ff9546" />
</shape>

try this.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/circle_layout"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/circletwo" >
<RelativeLayout
android:id="#+id/circle_layoutinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/rating_viewtv"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" >
<TextView
android:id="#+id/ratingcup_viewtv_fonts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Y"
android:textColor="#ff0000" />
</RelativeLayout>
<TextView
android:id="#+id/rating_viewtv"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="#ffffff"
android:gravity="center"
android:text="4.5"
android:textColor="#ff0000" />
</RelativeLayout>
try this too using linear layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/circle_layout"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/circletwo"
android:orientation="vertical" >
<TextView
android:id="#+id/ratingcup_viewtv_fonts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2.2"
android:text="Y"
android:layout_gravity="center"
android:gravity="center_vertical"
android:textColor="#ff0000" />
<TextView
android:id="#+id/rating_viewtv"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.8"
android:background="#ffffff"
android:gravity="center"
android:text="4.5"
android:textColor="#ff0000" />
</LinearLayout>