Difficulty with layout for a menu

odhran · January 16th, 2012, 05:23 PM

Hi everyone,

I'm a newbie to android app development

(as you'll probably find out with the question I'm going to ask)

Here's the problem:

I'm creating a menu in XML using the eclipse software.
Unfortunately, I'm no expert in XML but I have attempted to create a basic menu.

The issue I'm having is the alignment of the menu buttons. The buttons on the left column are smaller in width compared to the buttons in the right column. I know this may not seem much of an issue now, but the problem is made worse if I edit the text value of the buttons.

I want to achieve even distribution for both columns of buttons but I have been scratching my head trying to figure this one out!

Would anyone be kind enough to help me out on this one?

Please find below an image describing my program and the code:

Code:

<TableLayout 
	android:layout_width="fill_parent" 
	android:layout_height="fill_parent" 
	
	xmlns:android="http://schemas.android.com/apk/res/android">
	<TableRow android:background="#FFFFFF">

		<ImageView
		    android:id="@+id/imageView1"
		    android:layout_width="fill_parent"
		    android:layout_height="wrap_content"
		    android:src="@drawable/ic_launcher"
		    
			android:layout_weight="0" />

		<EditText
		    android:layout_width="fill_parent"
	        android:layout_height="wrap_content"
	        
	        android:layout_weight="10" />
		
		<ImageView
		    android:id="@+id/imageView1"
		    android:layout_width="fill_parent"
		    android:layout_height="wrap_content"
		    android:src="@drawable/ic_launcher"
		    
			android:layout_weight="0" />

	</TableRow>

	
	
	<TableRow android:layout_marginTop="30dip">

		<Button
		    android:id="@+id/button1"
		    android:layout_width="fill_parent"
		    android:layout_height="100dip"
		    android:layout_weight="1"
		    android:text="New"
		    android:layout_column="0" />


		<Button
		    android:id="@+id/button2"
		    android:layout_width="fill_parent"
		    android:layout_height="100dip"
		    android:layout_weight="1"
		    android:text="Share"
		    android:layout_column="1" />
		
		</TableRow>
		
	<TableRow>

		<Button
		    android:id="@+id/button3"
		    android:layout_width="fill_parent"
		    android:layout_height="100dip"
		    android:layout_weight="1" 
		    android:text="Open"
		    android:layout_column="0" 
		    />

		<Button
		    android:id="@+id/button4"
		    android:layout_width="fill_parent"
		    android:layout_height="100dip"
		    android:layout_weight="1"
		    android:text="Comm"
		    android:layout_column="1" />
		
		</TableRow>
	
</TableLayout>

Thanks in advance

jiminaus · January 17th, 2012, 02:53 AM

Use TableLayout when you want Android to calculate column width for you. If you want to control column widths, don't use TableLayout.

Here's a implementation of your layout. It uses a top-level vertical linear layout. Inside it are three nested layouts. First is a relative layout, then 2 horizontal linear layouts.

Notice that I moved the margin between the relative layout and the first linear layout onto the first linear layout itself.

Also notice that I moved the constrains on the button heights to being a constraint on the linear layouts. This is cleaner.

Your table layout would have worked for what is now the relative layout. But I converted it to a relative layout because: a) this is an ideal use of the relative layout, and b) to demonstrate the relative layout.

Code:

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFFFFF"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:src="@drawable/ic_launcher" />

        <EditText
            android:id="@+id/editText1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_toLeftOf="@+id/imageView2"
            android:layout_toRightOf="@+id/imageView1"
            android:gravity="center"
            android:text="Hello World - Long Title Demonstration"
            android:textColor="#000000" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:src="@drawable/ic_launcher" />
        
    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="100dip"
        android:layout_marginTop="30dip"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/button1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="New With Long Label That Wraps" />

        <Button
            android:id="@+id/button2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Share" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="100dip"
        android:orientation="horizontal" >

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

        <Button
            android:id="@+id/button4"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Comm" />
    </LinearLayout>

</LinearLayout>

odhran · January 20th, 2012, 04:09 AM

Hi jiminaus,

Thank you so much for helping me out. The code is very easy to understand works beautifully!

Again, thank you

miXer · January 23rd, 2012, 03:29 AM

You do know that Android has built in menus you can use? Menus | Android Developers

odhran · January 23rd, 2012, 09:49 AM

Hi miXer,

Thanks for the link. Are you suggesting using the Options Menu instead?
I decided not to do this as I want to save the Options Menu for things such as setting, help etc.

Football Fans: Download the 2012 Schedule App from Google Play!