Place one layout inside another, but the one inside is a little outside visually

3

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

    
asked by Daniel Piad Aldazabal 28.04.2017 в 21:22
source

1 answer

4

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.

    
answered by 28.04.2017 / 21:58
source