Search code examples
androidandroid-layoutandroid-relativelayout

Positioning of Views from bottom as well as top in RelativeLayout in Android


I have a very simple layout with two TextViews one below the other and below these TextViews I have three horizontally aligned ImageViews.

I am being able to relatively place these views when settings positions below each other and specifying the top margin. But for the three ImageViews, I want to be able to set margin from the bottom of the screen. Unfortunately, I've not been able to achieve this using the RelativeLayout.

What I want to ask the experts is if it is possible at all? Do I need to Following is my layout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:id="@+id/layoutMain"
    tools:context=".MainActivity$PlaceholderFragment">

    <TextView android:id="@+id/section_label" android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:layout_width="300sp"
        android:layout_height="300sp"
        android:textSize="250sp"
        android:textStyle="bold"
        android:textColor="@android:color/black"
        android:textAlignment="center"
        android:gravity="center"
        android:id="@+id/imgItem"
        android:layout_marginTop="2sp"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="35sp"
        android:textStyle="bold"
        android:textColor="@android:color/black"
        android:textAlignment="center"
        android:gravity="center"
        android:text="Large Text"
        android:id="@+id/txtItemSmall"
        android:layout_below="@+id/imgItem"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10sp" />

    <View
        android:layout_width="match_parent"
        android:id="@+id/dividerTop"
        android:alpha="0.5"
        android:layout_height="3dp"
        android:background="@android:color/black"
        android:layout_below="@id/imgItem"
        android:layout_marginTop="115sp"/>

    <ImageView
        android:layout_width="64sp"
        android:layout_height="64sp"
        android:alpha="0.5"
        android:layout_marginTop="10sp"
        android:id="@+id/btnRandom"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/dividerTop"
        android:src="@drawable/ic_random"/>

    <ImageView
        android:layout_width="64sp"
        android:layout_height="64sp"
        android:alpha="0.5"
        android:layout_marginTop="10sp"
        android:layout_marginRight="50sp"
        android:id="@+id/btnPrevious"
        android:layout_below="@id/dividerTop"
        android:layout_toLeftOf="@id/btnRandom"
        android:src="@drawable/ic_previous"/>

    <ImageView
        android:layout_width="64sp"
        android:layout_height="64sp"
        android:alpha="0.5"
        android:layout_marginTop="10sp"
        android:layout_marginLeft="50sp"
        android:id="@+id/btnNext"
        android:layout_below="@id/dividerTop"
        android:layout_toRightOf="@id/btnRandom"
        android:src="@drawable/ic_next"/>

    <View
        android:layout_width="match_parent"
        android:id="@+id/dividerBottom"
        android:alpha="0.5"
        android:layout_height="3dp"
        android:background="@android:color/black"
        android:layout_below="@id/btnRandom"
        android:layout_marginTop="10sp"/>

</RelativeLayout>

Solution

  • Eventually figured out myself. The Views need to be added in the order you want to position it from bottom and cannot be in the sequence they appear on screen. Following is the updated layout and works exactly as expected.

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
        android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:id="@+id/layoutMain"
        tools:context=".MainActivity$PlaceholderFragment">
    
        <TextView android:id="@+id/section_label" android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    
        <TextView
            android:layout_width="300sp"
            android:layout_height="300sp"
            android:textSize="250sp"
            android:textStyle="bold"
            android:textColor="@android:color/black"
            android:textAlignment="center"
            android:gravity="center"
            android:id="@+id/imgItem"
            android:layout_marginTop="2sp"
            android:layout_centerHorizontal="true" />
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="35sp"
            android:textStyle="bold"
            android:textColor="@android:color/black"
            android:textAlignment="center"
            android:gravity="center"
            android:text="Large Text"
            android:id="@+id/txtItemSmall"
            android:layout_below="@+id/imgItem"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10sp" />
    
    
    
        <View
            android:id="@+id/dividerBottom"
            android:layout_width="match_parent"
            android:layout_height="3dp"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="70sp"
            android:alpha="0.5"
            android:background="@android:color/black" />
    
    
    
        <ImageView
            android:layout_width="64sp"
            android:layout_height="64sp"
            android:alpha="0.5"
            android:id="@+id/btnRandom"
            android:layout_centerHorizontal="true"
            android:layout_above="@id/dividerBottom"
            android:layout_marginBottom="10sp"
            android:src="@drawable/ic_random"/>
    
        <ImageView
            android:layout_width="64sp"
            android:layout_height="64sp"
            android:alpha="0.5"
            android:layout_marginRight="50sp"
            android:id="@+id/btnPrevious"
            android:layout_above="@id/dividerBottom"
            android:layout_marginBottom="10sp"
            android:layout_toLeftOf="@id/btnRandom"
            android:src="@drawable/ic_previous"/>
    
        <ImageView
            android:layout_width="64sp"
            android:layout_height="64sp"
            android:alpha="0.5"
            android:layout_marginLeft="50sp"
            android:id="@+id/btnNext"
            android:layout_above="@id/dividerBottom"
            android:layout_marginBottom="10sp"
            android:layout_toRightOf="@id/btnRandom"
            android:src="@drawable/ic_next"/>
    
        <View
            android:layout_width="match_parent"
            android:id="@+id/dividerTop"
            android:alpha="0.5"
            android:layout_height="3dp"
            android:background="@android:color/black"
            android:layout_above="@id/btnRandom"
            android:layout_marginBottom="10sp" />
    
    </RelativeLayout>