Sebastian Delgado Sebastian Delgado - 5 months ago 12
Android Question

How can i replicate this View on android with xml?

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.

enter image description here

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

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.