Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Android

Posted by Cicedea Andrei
Cicedea Andrei
Courses Plus Student 369 Points

How to work with relative layouts?

I have a relative layout with many edittexts and buttons and textviews, and I arranged them in 4 LinearLayouts, as child of a RelativeLayout. The problem is that if I use a different size of screen, the LinearLayouts are not at the same place where I put them, and I can't make it work. How to deal with this problem? This are the codes for the medii.xml file where I have them:

    <p><?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/mediib" >

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="160dp"
        android:layout_height="200dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="37dp"
        android:layout_marginTop="255dp"
        android:orientation="vertical" >

        <EditText
            android:id="@+id/editText1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/nota2"
            android:gravity="center"
            android:hint="@string/nota"
            android:inputType="number"
            android:textColorHint="@color/white" />

        <Button
            android:id="@+id/button2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/bb" />

        <Button
            android:id="@+id/button1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/bbc" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="TextView"
            android:textColor="@color/white"
            android:textSize="25sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout3"
        android:layout_width="160dp"
        android:layout_height="200dp"
        android:layout_alignParentRight="true"
        android:layout_alignTop="@+id/linearLayout1"
        android:layout_marginRight="33dp"
        android:orientation="vertical" >

        <EditText
            android:id="@+id/EditText02"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/nota2"
            android:gravity="center"
            android:hint="@string/nota"
            android:inputType="number"
            android:textColorHint="@color/white" >

            <requestFocus />
        </EditText>

        <EditText
            android:id="@+id/EditText01"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/nota2"
            android:gravity="center"
            android:hint="@string/teze"
            android:inputType="number"
            android:textColorHint="@color/white" />

        <Button
            android:id="@+id/Button02"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/bb" />

        <Button
            android:id="@+id/Button01"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/bbc" />

        <TextView
            android:id="@+id/TextView01"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="TextView"
            android:textColor="@color/white"
            android:textSize="25sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout4"
        android:layout_width="160dp"
        android:layout_height="200dp"
        android:layout_alignLeft="@+id/linearLayout3"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="45dp"
        android:orientation="vertical" >

        <EditText
            android:id="@+id/EditText03"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/nota2"
            android:gravity="center"
            android:hint="@string/nota"
            android:inputType="number"
            android:textColorHint="@color/white" />

        <Button
            android:id="@+id/Button06"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/bb" />

        <Button
            android:id="@+id/Button05"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/bbc" />

        <TextView
            android:id="@+id/TextView03"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="TextView"
            android:textColor="@color/white"
            android:textSize="25sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="160dp"
        android:layout_height="200dp"
        android:layout_alignLeft="@+id/linearLayout1"
        android:layout_alignTop="@+id/linearLayout4"
        android:orientation="vertical" >

        <EditText
            android:id="@+id/EditText04"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/nota2"
            android:gravity="center"
            android:hint="@string/nota"
            android:inputType="number"
            android:textColorHint="@color/white" />

        <Button
            android:id="@+id/Button04"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/bb" />

        <Button
            android:id="@+id/Button03"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/bbc" />

        <TextView
            android:id="@+id/TextView02"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="TextView"
            android:textColor="@color/white"
            android:textSize="25sp" />
    </LinearLayout>

</RelativeLayout>

</p>
    ```

5 Answers

Ben Jakuben
STAFF
Ben Jakuben
Treehouse Teacher
Ben Jakuben
Ben Jakuben
Treehouse Teacher

Okay, here's something you can hopefully build on. What I've done is refactor your layout to use a LinearLayout as the shell. I split this into two evenly spaced rows. Each row is a LinearLayout, and they are evenly spaced by using the same layout_weight attribute for both. Then, within each row, I evenly spaced your existing LinearLayouts into columns again using android:layout_weight="1".

My goal was to remove all the hard-coded numbers for widths, heights, and margins. You can use some, but the more you have, the more inflexible a layout will be for multiple screen sizes. You may need to add some back depending on your drawable resources.

I didn't have your resources, so I changed everything to have different background colors to show how it all looks. You can hopefully just revert my changes to your own drawables.

I also extracted common attributes into styles (see styles.xml below). This made it a lot easier to change things as it would be applied to all four layouts at once. If you have questions about how the styles are used just let me know. The upcoming Implementing Designs for Android project will talk extensively about styles and themes in Android.

I was going to record this as a Forum Tip video but had some technical difficulties and ran out of time last week.

Oh, and there was an extra EditText in one of the layouts. Hope it was okay to remove it. :)

Preview

Imgur

activity_main.xml

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="horizontal">

        <LinearLayout
            android:id="@+id/linearLayout1"
            style="@style/QuadrantLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <EditText
                android:id="@+id/editText1"
                style="@style/CustomEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <requestFocus />
            </EditText>

            <Button
                android:id="@+id/button2"
                style="@style/CustomButton1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <Button
                android:id="@+id/button1"
                style="@style/CustomButton2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <TextView
                android:id="@+id/textView1"
                style="@style/CustomTextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/linearLayout3"
            style="@style/QuadrantLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <EditText
                android:id="@+id/EditText02"
                style="@style/CustomEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
            </EditText>

            <Button
                android:id="@+id/Button02"
                style="@style/CustomButton1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <Button
                android:id="@+id/Button01"
                style="@style/CustomButton2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <TextView
                android:id="@+id/TextView01"
                style="@style/CustomTextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="horizontal">

        <LinearLayout
            android:id="@+id/linearLayout4"
            style="@style/QuadrantLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <EditText
                android:id="@+id/EditText03"
                style="@style/CustomEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <Button
                android:id="@+id/Button06"
                style="@style/CustomButton1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <Button
                android:id="@+id/Button05"
                style="@style/CustomButton2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <TextView
                android:id="@+id/TextView03"
                style="@style/CustomTextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/linearLayout2"
            style="@style/QuadrantLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <EditText
                android:id="@+id/EditText04"
                style="@style/CustomEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <Button
                android:id="@+id/Button04"
                style="@style/CustomButton1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <Button
                android:id="@+id/Button03"
                style="@style/CustomButton2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <TextView
                android:id="@+id/TextView02"
                style="@style/CustomTextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
        <!-- Customize your theme here. -->
    </style>

    <style name="QuadrantLayout">
        <item name="android:background">@android:color/holo_blue_dark</item>
        <item name="android:orientation">vertical</item>
        <item name="android:layout_margin">8dp</item>
        <item name="android:layout_gravity">center_vertical</item>
    </style>

    <style name="CustomEditText">
        <item name="android:background">@android:color/holo_orange_dark</item>
        <item name="android:hint">Test hint</item>
        <item name="android:textColorHint">@android:color/white</item>
        <item name="android:gravity">center</item>
        <item name="android:inputType">number</item>
    </style>

    <style name="CustomButton1">
        <item name="android:background">@android:color/holo_purple</item>
        <item name="android:text">Button 1</item>
    </style>

    <style name="CustomButton2">
        <item name="android:background">@android:color/holo_red_dark</item>
        <item name="android:text">Button 2</item>
    </style>

    <style name="CustomTextView">
        <item name="android:background">@android:color/darker_gray</item>
        <item name="android:gravity">center</item>
        <item name="android:text">TextView</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:textSize">25sp</item>
    </style>

</resources>
Albert Evangelista
Albert Evangelista
27,689 Points
Albert Evangelista
Albert Evangelista
27,689 Points

i think the way relative layouts arranges stuff within itself is it makes references to something it knows is already there. lets say you placed a button in the middle of the relative layout but that is you who placed it there, relative layout will say "the button is 300 units below what i consider is the TOP and 300 units to the right of what i consider is the LEFT of my layout." it does the same thing if you put another item inside the layout, be it another button or a checkbox or another type of layout. it will make a reference of the location of the first item you put inside it and then place the next item relative to that location. so if you change the screen size, it might say "hey thats not what we agreed on the last time" and then it will react differently and adjust "appropriately". i dont know if android layouts have some sort of "media query" to refer to when presented with another screen size but i think its the way to go.

Cicedea Andrei
PLUS
Cicedea Andrei
Courses Plus Student 369 Points
Cicedea Andrei
Cicedea Andrei
Courses Plus Student 369 Points

I know all what you descriebed here, but how to do it..?

Ben Jakuben
Ben Jakuben
Treehouse Teacher
Ben Jakuben
Ben Jakuben
Treehouse Teacher

Hi Cicedea,

I'm working on a solution for you right now. Stay tuned!

Cicedea Andrei
PLUS
Cicedea Andrei
Courses Plus Student 369 Points
Cicedea Andrei
Cicedea Andrei
Courses Plus Student 369 Points

Ok. Thank you very much !

Ben Jakuben
Ben Jakuben
Treehouse Teacher
Ben Jakuben
Ben Jakuben
Treehouse Teacher

Sorry for the delay - I ran into some problems yesterday. What is your end goal? Do you want each layout to fill up a quadrant of the screen? Do you want some kind of padding around each one? I made some assumptions and will post a layout when I can, but I'm traveling today and probably won't get to it until tomorrow at the soonest.

Cicedea Andrei
PLUS
Cicedea Andrei
Courses Plus Student 369 Points
Cicedea Andrei
Cicedea Andrei
Courses Plus Student 369 Points

It's doing nothing. I'm glad you answer, even the delay is somehow high. My end goal is to create a layout, arranged how I want, using a RelativeLayout and this layout to remain the same in all sizes of screens (to have all items at the same position even I change the screen size). It's fine, take your time yo answer. Thanks a lot !