how to align view at the bottom of the screen but also below other view in relative layout

Question

I want imageView to be at the bottom of the screen always but I also want it to be below the LinearLayou view so that, they don't overlap each other and the image can change its size as per screen.

here is what I'm doing

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
    android:background="@color/background_color"
    android:paddingTop="@dimen/main_padding"
    android:paddingRight="@dimen/main_padding"
    android:paddingLeft="@dimen/main_padding"
    android:layout_height="match_parent"
    tools:context=".welcomeActivity">

    <TextView
        android:id="@+id/textView_welcome"
        android:paddingTop="8dp"
        android:paddingBottom="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="20dp"
        android:fontFamily="@font/great_vibes"
        android:layout_marginRight="20dp"
        android:background="@drawable/actionbar_background"
        android:gravity="center"
        android:text="@string/who_am_i"
        android:textColor="@color/text_color_white"
        android:textSize="44sp" />

    <LinearLayout
        android:layout_marginTop="50dp"
        android:layout_width="wrap_content"
        android:orientation="vertical"
        android:id="@+id/lisearLayout_welcome"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/textView_welcome"
        android:layout_height="wrap_content">

        <androidx.cardview.widget.CardView
            style="@style/MyCardView"
            app:cardCornerRadius="40dp"
            android:layout_width="360dp"
            android:id="@+id/customerButton"
            android:layout_height="200dp">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_centerInParent="true"
                    android:text="@string/customer"
                    android:textSize="44sp"
                    android:fontFamily="@font/great_vibes"
                    android:textColor="@color/button_color_black1"
                    android:layout_height="wrap_content"/>
            </RelativeLayout>

        </androidx.cardview.widget.CardView>


        <androidx.cardview.widget.CardView
            style="@style/MyCardView"
            app:cardCornerRadius="40dp"
            android:layout_width="360dp"
            android:id="@+id/employButton"
            android:layout_height="200dp">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_centerInParent="true"
                    android:text="@string/employ"
                    android:fontFamily="@font/great_vibes"
                    android:textSize="44sp"
                    android:textColor="@color/button_color_black1"
                    android:layout_height="wrap_content"/>
            </RelativeLayout>

        </androidx.cardview.widget.CardView>

    </LinearLayout>

    <ImageView
        android:layout_marginTop="5dp"
        android:id="@+id/image_welcome"
        android:layout_width="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/lisearLayout_welcome"
        android:layout_alignParentBottom="true"
        android:src="@drawable/ic_french_fries"
        android:layout_height="wrap_content"/>


</RelativeLayout>

see this yellow gap between the bottom and the image, that's what I don't want.

Any suggestion will be appreciated

Answer 1

Remove android:layout_below="@+id/lisearLayout_welcome" in the ImageView and add android:layout_above="@id/image_welcome" to the LinearLayout.
In this way you are assigning the available space to the LinearLayout, instead in your code you are assigning the available space to the ImageView.

Use something like:

<RelativeLayout>
   <TextView/>
   <LinearLayout
        android:layout_above="@id/image_welcome"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/textView_welcome">

       <!-- ... -->

  </LinearLayout>

  <ImageView
        android:layout_marginTop="5dp"
        android:id="@+id/image_welcome"
        android:layout_width="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:src="@drawable/..."
        android:layout_height="wrap_content"/>

</RelativeLayout>

Apply different orientation in the LinearLayout using vertical in portrait mode, and horizontal in landscape mode.

Answer 2

I added in the top RelativeLayout the attribute alignPatentBottom="true" now your pommes frites should be on the bottom. :) In my emulator everything works fine. Glad to have some feedback if it works?

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
    android:background="@color/background_color"
    android:paddingTop="@dimen/main_padding"
    android:paddingRight="@dimen/main_padding"
    android:paddingLeft="@dimen/main_padding"
    android:layout_height="match_parent"
    tools:context=".welcomeActivity"
    android:layout_alignParentBottom="true">

    <TextView
        android:id="@+id/textView_welcome"
        android:paddingTop="8dp"
        android:paddingBottom="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="20dp"
        android:fontFamily="@font/great_vibes"
        android:layout_marginRight="20dp"
        android:background="@drawable/actionbar_background"
        android:gravity="center"
        android:text="@string/who_am_i"
        android:textColor="@color/text_color_white"
        android:textSize="44sp" />

    <LinearLayout
        android:layout_marginTop="50dp"
        android:layout_width="wrap_content"
        android:orientation="vertical"
        android:id="@+id/lisearLayout_welcome"
        android:layout_centerHorizontal="true"
        android:layout_below="@+id/textView_welcome"
        android:layout_height="wrap_content">

        <androidx.cardview.widget.CardView
            style="@style/MyCardView"
            app:cardCornerRadius="40dp"
            android:layout_width="360dp"
            android:id="@+id/customerButton"
            android:layout_height="200dp">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_centerInParent="true"
                    android:text="@string/customer"
                    android:textSize="44sp"
                    android:fontFamily="@font/great_vibes"
                    android:textColor="@color/button_color_black1"
                    android:layout_height="wrap_content"/>
            </RelativeLayout>

        </androidx.cardview.widget.CardView>


        <androidx.cardview.widget.CardView
            style="@style/MyCardView"
            app:cardCornerRadius="40dp"
            android:layout_width="360dp"
            android:id="@+id/employButton"
            android:layout_height="200dp">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_centerInParent="true"
                    android:text="@string/employ"
                    android:fontFamily="@font/great_vibes"
                    android:textSize="44sp"
                    android:textColor="@color/button_color_black1"
                    android:layout_height="wrap_content"/>
            </RelativeLayout>

        </androidx.cardview.widget.CardView>

    </LinearLayout>


    <ImageView
        android:id="@+id/image_welcome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/lisearLayout_welcome"
        android:layout_alignParentBottom="true"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="0dp"
        android:src="@drawable/ic_french_fries" />


</RelativeLayout>