RelativeLayout issue doesn't fit in all screen sizes

Question

I am developing my first application in android and i am stuck with my xml layout. I have 4 textviews in my layout and 2 imagebuttons below the textview. Textview's need to be placed one below the other which differs in size i.e the 1st and 2nd textview is of 1 line, 3rd textview can go upto 3-4 lines and 4th textview of 2 lines. 2 buttons need to b placed below the 4th textview but next to each other. Below is my layout file :-

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:weightSum="1">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:id="@+id/name"
    android:text="LocAlert"
    android:textStyle="italic"
    android:layout_gravity="center_horizontal"
    android:layout_weight="0.07"
    android:textColor="@android:color/holo_blue_dark"
    android:layout_marginTop="37dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:id="@+id/task_name"
    android:textStyle="bold"
    android:text="name"
    android:textColor="@android:color/tab_indicator_text"
    android:layout_gravity="center_horizontal"
    android:layout_below="@+id/name"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="39dp" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceSmall"
    android:textColor="@android:color/tab_indicator_text"
    android:text="location"
    android:layout_gravity="center_horizontal"
    android:id="@+id/task_location"
    android:gravity="center"
    android:layout_marginTop="42dp"
    android:layout_below="@+id/task_name"
    android:layout_centerHorizontal="true" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceSmall"
    android:text="distance"
    android:textColor="@android:color/tab_indicator_text"
    android:layout_gravity="center_horizontal"
    android:id="@+id/task_distance"
    android:layout_marginBottom="56dp"
    android:layout_above="@+id/imageButton"

    android:layout_centerHorizontal="true"/>

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/imageButton"
    android:src="@drawable/speakblue"
    android:background="#FFFFFF"
    android:text="Speak Out"
    android:layout_marginBottom="55dp"
    android:layout_alignParentBottom="true"
    android:layout_toStartOf="@+id/task_name" />

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/imageButton2"
    android:background="#FFFFFF"
    android:src="@drawable/okblue"
    android:layout_below="@+id/task_distance"
    android:layout_alignParentEnd="true" />

The problem i am facing is in the 3rd and 4th textview and the imagebuttons. As my 3rd textview size increases and decreases according to lines my 4th textview and buttons also messes up.. Doesn't fit in the properly one by other in equal format.. When i run my app on a device which has big screen size there's alot of gap between the textview's.. How can i let my layout to fit in all screen size and with proper space.. Please help..

Edited

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:id="@+id/name"
    android:text="LocAlert"
    android:textStyle="italic"
    android:layout_gravity="center_horizontal"
    android:layout_weight="1"
    android:textColor="@android:color/holo_blue_dark"
    android:layout_marginTop="37dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:id="@+id/task_name"
    android:textStyle="bold"
    android:text="name"
    android:textColor="@android:color/tab_indicator_text"
    android:layout_gravity="center_horizontal"
    android:layout_below="@+id/name"
    android:layout_centerHorizontal="true"
    android:layout_weight="1" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceSmall"
    android:textColor="@android:color/tab_indicator_text"
    android:text="location"
    android:layout_gravity="center_horizontal"
    android:id="@+id/task_location"
    android:gravity="center"
    android:layout_weight="1"
    android:layout_below="@+id/task_name"
    android:layout_centerHorizontal="true" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceSmall"
    android:text="distance"
    android:textColor="@android:color/tab_indicator_text"
    android:layout_gravity="center_horizontal"
    android:id="@+id/task_distance"
    android:layout_below="@+id/task_location"

    android:layout_weight="1"
    android:layout_centerHorizontal="true"/>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/task_distance">

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton"
        android:src="@drawable/speakblue"
        android:background="#FFFFFF"
        android:text="Speak Out"
        android:layout_weight="1" />

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton2"
        android:background="#FFFFFF"
        android:src="@drawable/okblue"

        android:layout_weight="1"
        android:layout_gravity="right"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true" />

</RelativeLayout>

I ended up with this.. There's a space between the 2nd textview and 3rd textview which i don't want.. How can i solve this.. ?

enter image description here

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

You are using margintop for the first three textviews,, then switching to margin bottom for the remaining elements, so this is fixing the elements relative to the parent top and bottom. then leaving the middle most elements to fill the gap in the middle of this.

I would be using layout_below to commit differences in positions between textviews and buttons, rather than top_margin/bottom to the parent element.

http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html#attr_android:layout_below
I would be using a weight sum for each textview/button that adds up to weightsum total..

What is android:weightSum in android, and how does it work?

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 07 '15 at 16:10

I tried both of your solution.. Have edited my post by adding the result of the change.. I ended with the above image where m having a space between 2nd and 3rd textview.. How can i solve that.. I want it to take equal space too.. – user2205230 Jun 07 '15 at 17:49
I found the solution for the above said problem.. Removed gravity from the 3rd textview which went fine..But now what i see is the 3rd textview is going to left of the screen i want it as my 1st image.. How can i do that.. ? – user2205230 Jun 07 '15 at 18:07
Found this too.. Used gravity but center_horizontal instead of center.. Thanxx mann.. – user2205230 Jun 07 '15 at 19:14

RelativeLayout issue doesn't fit in all screen sizes

1 Answers1