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>
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.
I would be using a weight sum for each textview/button that adds up to weightsum total..