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

Layout Linear or Relative in eclipse? Also how do I link multiple screens

My main screen will have a background and 4 square buttons that should link to an individual game. what is the best layout to use for this? I started off using the relative layout and placed two of my custom buttons on the main screen however when run in emulator one of the buttons runs off the page.

Do I need more than one screen? At the moment i just have main screen where i would like to place my 4 buttons. How do i link many screens? do i need to create a Android XML Layout File for each screen in the game and then use the onClickListener to link them???

if it is any help I have screen design that I could show so it could be understood more clearly what I am trying to achieve.

p.s I am trying to work with a screen size for a Nexus 7

10 Answers

Did this in about 30 seconds, but it should do the trick.

alt text

<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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:orientation="vertical" >

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

            <Button
                android:id="@+id/Button01"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="1" />

            <Button
                android:id="@+id/Button02"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="2" />

        </LinearLayout>

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

            <Button
                android:id="@+id/Button03"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="3" />

            <Button
                android:id="@+id/Button04"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="4" />

        </LinearLayout>

    </LinearLayout>

</RelativeLayout>

First, the goal with any Android application is to get the application to work flawlessly on many different screen sizes, resolutions, orientations and pixel densities. That is the beauty of Android. I recommend you always test with at least one physical device and multiple emulators. With that being said layouts were one of the hardest things for me when I first started.

Anyway, try this code as your xml. It will give you four buttons. Overall, it's a relative layout with a linear layout inside the bottom left of the relative layout. When using a linear layout, you have the ability to assign a "weight" property to it's children. Layout weight is essentially a percentage of width you want the view to take up in it's linear layout parent.

<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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true" >

        <Button
            android:id="@+id/Button01"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="1" />

        <Button
            android:id="@+id/Button02"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="2" />

        <Button
            android:id="@+id/Button03"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="3" />

        <Button
            android:id="@+id/Button04"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="4" />
    </LinearLayout>

</RelativeLayout>

XML

Lastly, there is no easy way to "link" screens like in iOS. Though it's not difficult to do in Android at all. You hit it the nail right on the head when you said "do i need to create a Android XML Layout File for each screen in the game and then use the onClickListener to link them???". For most applications, this is the route you want to go. Ideally, each activity will get it's own xml layout file. This gives the ability for the Android platform to handle stuff like the back button so you don't have to do it yourself. Developing a game is a little different though, so you may not want to follow some of these conventions. I haven't developed any games, so maybe this is something Ben Jakuben can answer.

Thanks for the the reply. I tried the XML code and it works great. However what I am trying to achieve is the landscape layout with all four buttons centered in the middle of the screen. For example 1 on top of 2 and 3 on top of 4. I've been trying all morning to make adjustments to the code you provided, yet no luck! The buttons I have created are custom buttons.

Can you draw a picture of your desired outcome?

Sure. How do I post the image on the Forum?

Upload the picture on any service online (Google Drive, Imgur, etc) and then you can either post the link or post it like this:

![alt text](/path/to/img.jpg "Title")

So it'll show up as an image in your post.

You need to select the image you want to share and then press the share button. Then change the access on it from "Private" to "Anyone with the Link".

Lol! I will give it a go and let you know.

Thanks allot for the help