Place one layout inside another, but the one inside is a little outside visually. It would be to put a notification ball as superimposed on top of a layout
First create a drawable in /drawable
, for example called 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" />
<stroke
android:width="2dip"
android:color="#FFF" />
<padding
android:left="5dip"
android:right="5dip"
android:top="5dip"
android:bottom="5dip" />
</shape>
This image would be positioned by a RelativeLayout
in the upper left position.
As an example this layout, where you have a ImageView
to add the background image and the ImageView
of badge
, positioned in the upper left corner:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/myButton"
android:layout_width="65dip"
android:layout_height="65dip"
android:background="@drawable/imagen"/>
<TextView
android:id="@+id/textOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@id/myButton"
android:layout_alignLeft="@id/myButton"
android:text="10"
android:textColor="@android:color/white"
android:textSize="16sp"
android:textStyle="bold"
android:background="@drawable/badge_circle"/>
</RelativeLayout>
in this way you would get this result:
If you want to position the center of the badge in the upper left corner, another method is to add a android:layout_marginLeft
with negative value to the badge view, for example:
android:layout_marginLeft="-20dp"
However this may not look good on all devices! I'll leave it to your consideration.
If you want to position the center of the badge in the corner of the image, and you want to display correctly on all devices regardless of size or density, I recommend you use a ConstraintLayout
:
<ImageView
android:id="@+id/myButton"
android:layout_width="65dip"
android:layout_height="65dip"
android:background="@drawable/background_badge"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="270dp"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintHorizontal_bias="0.501"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp" />
<TextView
android:id="@+id/textOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@id/myButton"
android:layout_alignLeft="@id/myButton"
android:text="10"
android:textColor="@android:color/white"
android:textSize="16sp"
android:textStyle="bold"
android:background="@drawable/badge_circle"
android:layout_marginRight="50dp"
app:layout_constraintRight_toRightOf="@+id/myButton"
app:layout_constraintBottom_toBottomOf="@+id/myButton"
android:layout_marginBottom="50dp" />
you would have this result.