How do I properly size in relative layout so my content isn't stretching on larger devices?

238 views Asked by At

I am new to Android programming, and I have tried to research this thoroughly, but still not quite understanding how to resolve this problem. I will include my XML code below. I have tried using set "dip" sizing in Relative Layout in Eclipse to get the appearance desired of my app. Simple layout - Title Header and 3 buttons down the middle. Obviously, the problem I'm running into is the awkward stretching of everything due to the set specific dimensions. Any suggestions on how to properly use "match_parent" and "wrap_content" here? I'm just not quite understanding how to apply them in this situation. Maybe I should have used a Linear Layout, but Relative Layout seemed to be the better choice in case I increased the button count from 3 to upwards of 9 in the future for performance. Any help is much appreciated!

Here is my XML code:

<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:orientation="vertical"
tools:context=".MainActivity"
android:background="#ffffff" >

<TextView
    android:id="@+id/textView1"
    android:layout_width="match_parent"
    android:layout_height="60dip"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:background="@drawable/pets_titlecrop" />

<Button
    android:id="@+id/button1"
    android:layout_width="80dip"
    android:layout_height="80dip"
    android:layout_below="@+id/textView1"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="48dp"
    android:background="@drawable/call_now" />"


<TextView
    android:id="@+id/textView2"
    android:layout_width="100dip"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_below="@+id/textView1"
    android:background="#808080" />

<TextView
    android:id="@+id/textView3"
    android:layout_width="100dip"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_alignTop="@+id/textView2"
    android:background="#808080" />"



<Button
    android:id="@+id/button3"
    android:layout_width="80dip"
    android:layout_height="80dip"
    android:layout_alignLeft="@+id/button2"
    android:layout_below="@+id/button2"
    android:layout_marginTop="36dp"
    android:background="@drawable/bpaw_printedit" />

<Button
    android:id="@+id/button2"
    android:layout_width="80dip"
    android:layout_height="80dip"
    android:layout_alignLeft="@+id/button1"
    android:layout_below="@+id/button1"
    android:layout_marginTop="36dp"
    android:background="@drawable/blue_globemap" />

<TextView
    android:id="@+id/textView5"
    android:layout_width="100dip"
    android:layout_height="30dip"
    android:layout_alignParentBottom="true"
    android:layout_toLeftOf="@+id/textView3"
    android:layout_toRightOf="@+id/textView2"
    android:background="@drawable/by_wvg" />



 </RelativeLayout>
1

There are 1 answers

2
Rachit Mishra On BEST ANSWER

You should try nested Linear layout and thus using weights you may achieve a flexible user interface, try this

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:orientation="vertical"
    tools:context=".MainActivity" >

<TextView
    android:id="@+id/textView1"
    android:layout_width="match_parent"
    android:layout_height="60dip" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#808080" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical" >

        <Button
            android:id="@+id/button1"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />

        <Button
            android:id="@+id/button2"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />

        <Button
            android:id="@+id/button3"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />

        <TextView
            android:id="@+id/textView5"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />

    </LinearLayout>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#808080" />

</LinearLayout>