Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In Android, how do I position an image on top of another to look like a badge?

Please see below:

iPhone badges

I tried using Absolute layout, but that's deprecated. I appreciate your help, thanks.

like image 849
StackOverflowed Avatar asked Jun 18 '12 19:06

StackOverflowed


People also ask

How do I move one view to the top of another Android?

Just in case if you want to place a view on top of a ButtonView then use this; android:elevation="7dp" for the view which needs to be placed on top of the button. Thanks. It worked, but also worked with 1dp up for me.

What is Z index in Android?

Modifier. Modifier.zIndex(zIndex: Float) Creates a modifier that controls the drawing order for the children of the same layout parent.


2 Answers

RelativeLayout is a great option.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >

<ImageView
    android:id="@+id/icon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="5dp"
    android:scaleType="centerCrop"
    android:src="@drawable/iconImage" />

<ImageView
    android:id="@+id/badge"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignRight="@+id/icon"
    android:layout_alignTop="@+id/icon"
    android:src="@drawable/badge" />

If you actually want a badge with a dynamic number/text, then you can make the second ImageView a TextView (or a ViewGroup such as LinearLayout or RelativeLayout) and give it a background drawable and set the text to what you want.

like image 140
Sam Dozor Avatar answered Oct 08 '22 01:10

Sam Dozor


Have a look at the ViewBadger project on github(but keep in mind that you shouldn't try to copy other platforms UI elements in android apps).

like image 39
user Avatar answered Oct 08 '22 00:10

user