Question

I need a certain layout for an android app. I have the custom buttons and am able to load them in to a button but need help on how to lay them out on the screen. I am a newbie to android development (See my screen name). Trying to learn how to use .xml

I have attached what I need and what xml code I already have. Any help would be greatly appreciated.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent" 
              android:layout_height="fill_parent" 
              android:orientation="vertical" android:weightSum="1">


              <LinearLayout 
              android:layout_width="fill_parent" 
              android:layout_height="fill_parent" 
              android:orientation="horizontal" android:weightSum="1"
              android:gravity="center_vertical|center_horizontal" >
                  <Button android:gravity="center_vertical|center_horizontal" android:id="@+id/button" android:layout_height="wrap_content" android:padding="10dp" android:background="@drawable/schedule_button" android:layout_width="wrap_content"></Button>
                    <Button android:id="@+id/button" android:layout_height="wrap_content" android:padding="10dp" android:background="@drawable/grad_button" android:layout_width="wrap_content"></Button>
              </LinearLayout>


              <LinearLayout 
              android:layout_width="fill_parent" 
              android:layout_height="fill_parent" 
              android:orientation="horizontal" android:weightSum="1"
              android:gravity="center_vertical|center_horizontal" >
                 <Button android:gravity="center_vertical|center_horizontal" android:id="@+id/button" android:layout_height="wrap_content" android:padding="10dp" android:background="@drawable/schedule_button" android:layout_width="wrap_content"></Button>
                <Button android:id="@+id/button" android:layout_height="wrap_content" android:padding="10dp" android:background="@drawable/grad_button" android:layout_width="wrap_content"></Button>
              </LinearLayout>



</LinearLayout>

Answer 1

I see that you are trying to display images as buttons. Hence, I would recommend that you use ImageButton instead of a Button. I have included some code. There are a few different ways you can go about trying to achieve what you intend to here. But, I have to chosen to solely use LinearLayout just to keep it simple. Deepa has used a RelativeLayout to achieve this and it is a very good solution indeed. You should look into RelativeLayout as it might help you in the future while structuring layouts.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical" >

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >
    <ImageButton
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src = "@drawable/ic_launcher"
        android:background="@null"/>
    <ImageButton
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src = "@drawable/ic_launcher"
        android:background="@null"/>
</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >    
    <ImageButton
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:src = "@drawable/ic_launcher"
        android:background="@null"
        android:layout_height="wrap_content"/>

    <ImageButton
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:src = "@drawable/ic_launcher"
        android:background="@null"
        android:layout_height="wrap_content"/>
</LinearLayout>


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >    

    <ImageButton
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:src = "@drawable/ic_launcher"
        android:layout_height="wrap_content"
        android:background="@null"/>

    <ImageButton
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:src = "@drawable/ic_launcher"
        android:layout_height="wrap_content"
        android:background="@null"/>
 </LinearLayout>   

In the above code I have used the default launch icons as the images. You must replace them as necessary with you corresponding button images. Also, there are 4 important aspects here that you must understand.

First – I have used android:background=”@null” to get rid of a frame that is attached to the ImageButton. Try to run the code without this line and you will understand what I am talking about

Second – This line: android:src = “@drawable/ic_launcher” is used to declare the image that you display as the image.

Third – If you want some space between the buttons you could put in some padding between each of these elements. You could do so by using the ‘android:padding= xxdp’

Fourth – If you want the buttons to have a specific size, you could do so by replacing the values ‘wrap_content’ by ‘xxdp’ for the width and height. However, it is important that you add the following line when you intend to do so: android:scaleType = “fitXY”. This will tell the element that you want it to be laid out in an absolute manner. But, instead of resorting to this approach, I recommend that you resize the images appropriately before getting them into your layout.