Search code examples
androidandroid-relativelayout

RelativeLayout issue doesn't fit in all screen sizes


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


Solution

  • 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.

    1. 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

    2. 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?