Android/XML: RelativeLayout design

Question

basically, I don't understand how to use RelativeLayout. I don't know how to design it. I always use LinearLayout with Table inside of it. Now I use RelativeLayout for my design. I want to know, how to add text "Sorry, no list available" Below is my current code of XML

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/haha"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MyHistoryList">

<TextView
    android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="false"
    android:focusable="false"
    android:gravity="center"
    android:longClickable="false"
    android:maxLines="1"
    android:textColor="#FFFFFF"
    android:textSize="18sp"
    android:textStyle="bold" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp">

        <TextView
            android:id="@+id/tvSuggestion"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".80"
            android:gravity="start"
            android:text="Suggestion"
            android:textAllCaps="true"

android:textAppearance="@style/Base.TextAppearance.AppCompat.Medium"
            android:textColor="@color/colorAccent"
            android:textStyle="bold"
            app:fontFamily="@font/anaheim" />

        <TextView
            android:id="@+id/tvStatus"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".20"
            android:gravity="start"
            android:text="Status"
            android:textAllCaps="true"

android:textAppearance="@style/Base.TextAppearance.AppCompat.Medium"
            android:textColor="@color/colorAccent"
            android:textStyle="bold"
            app:fontFamily="@font/anaheim" />
    </TableRow>
</LinearLayout>

<RelativeLayout
    android:id="@+id/huhu"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recylcerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="10dp"
        android:visibility="gone" />

    <ImageView
        android:id="@+id/imgEmpty"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:src="@drawable/empty"/>

 </RelativeLayout>
</LinearLayout>

This is how it looks like

But, I want to add text "Sorry, no list available" below of the image (marginTop = 20dp). Can anyone help?

Answer 1

<TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_centerHorizontal="true"
     android:layout_marginTop="20dp"
     android:layout_below="@id/imgEmpty"
     android:text="Sorry, no list available"/>

Insert it below your ImageView of RelativeLayout!

Answer 2

Replace your Relative layout with this.

    <RelativeLayout
android:id="@+id/huhu"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.v7.widget.RecyclerView
    android:id="@+id/recylcerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="10dp"
    android:layout_marginTop="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginBottom="10dp"
    android:visibility="gone" />

<ImageView
    android:id="@+id/imgEmpty"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:src="@drawable/empty"/>

<TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_centerHorizontal="true"
     android:layout_marginTop="20dp"
     android:layout_below="@id/imgEmpty"
     android:text="Sorry, no list available"/>

Answer 3

Add this below imgEmpty . Use android:layout_below to place the text below image, android:layout_centerInParent="true" to move text to center.

 <TextView
            android:layout_marginTop="20dp"
            android:layout_centerInParent="true"
            android:text = "Sorry, no list available"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/imgEmpty"/>

Here the output

Answer 4

in relative layout you can use below/above to put view below/above its sibling



 <TextView
          android:id="@+id/textView"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_below="@+id/imgEmpty"
          android:layout_marginTop="20dp"
          android:gravity="center_horizontal"
          android:text="TextView"/>