How can i replicate this View on android with xml?

Question

i'm trying to replicate a row of the linked ListView but on android.

this is my current row code:

<?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">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:id="@+id/venueImage"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:id="@+id/venueLogo"
        android:layout_alignLeft="@id/venueImage"
        android:layout_alignTop="@id/venueImage"
        android:layout_alignRight="@id/venueImage"
        android:layout_alignBottom="@id/venueImage"/>

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/venueName"
        android:layout_centerHorizontal="true"
        android:layout_alignLeft="@id/venueImage"
        android:layout_alignTop="@id/venueImage"
        android:layout_alignRight="@id/venueImage"
        android:layout_alignBottom="@id/venueImage"
        android:gravity="center"
        android:textColor="#ffffff"/>

</RelativeLayout>

and this is how i need it to look like.

How can i put an image over another one, set the title exactly in the middle of the imageView and make the other imageView round and positioned to the lower right corner? venueImage is the background (biggest image on the view). venueLogo is the circular little one.

Thanks for reading.

Answer 1

By Keeping them all inside a RelativeLayout then set the venueImage height and width to match_parent , create a TextView for the title and set it to Center : android:layout_centerInParent="true" and android:layout_alignParentBottom="true" and android:layout_alignParentRight="true" to your round Image.

Edit :

This should be inside of your RelativeLayout

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/palm"
    android:scaleType="centerCrop"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Title"
    android:textSize="40dp"
    android:textColor="@android:color/white"
    android:layout_centerInParent="true"/>

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@mipmap/ic_launcher"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_marginRight="30dp"
    android:layout_marginBottom="20dp"/>

it should look like this

figure 1

Answer 2

See this example below has 3 textviews displaying exactly as you want.

<?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">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:id="@+id/venueImage"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:background="#000000"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:id="@+id/venueLogo"
        android:text="venue logo"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:background="#FF0000"/>
    <TextView
        android:text="venue name"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/venueName"
        android:layout_centerHorizontal="true"
        android:layout_alignLeft="@id/venueImage"
        android:layout_alignStart="@id/venueImage"
        android:layout_alignTop="@id/venueImage"
        android:layout_alignRight="@id/venueImage"
        android:layout_alignEnd="@id/venueImage"
        android:layout_alignBottom="@id/venueImage"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:textColor="#ffffff"
        android:padding="20dp"/>
</RelativeLayout>

Hope this helps.

Answer 3

Have you tried using Frame Layout?? https://developer.android.com/reference/android/widget/FrameLayout.html