Question

I’m new to Android and am trying to understand how to get a particular layout right? Can anyone explain Which layout does Venmo use for their first screen of the Android app (left most image at the following link: http://30.media.tumblr.com/tumblr_lak5yachMv1qcl8xuo1_500.png)

I tried to create a layout similar to that for learning purposes but can’t get it right. Here is my sample layout code:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http``://schemas.android.com/apk/res/android"
android:orientation="vertical" 
android:id="@+id/tableLayout1" 
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:background="#fff"
android:scrollbars="none">
<TableRow 
    android:layout_height="wrap_content" 
    android:id="@+id/tableRow1">
    <ImageButton 
        android:layout_height="wrap_content" 
        android:id="@+id/imageButton5" 
        android:background="@drawable/icon" 
        android:layout_width="wrap_content"
        android:layout_weight="1">
    </ImageButton>
</TableRow>    
<TableRow 
    android:layout_height="wrap_content" 
    android:id="@+id/tableRow2">
        <TextView 
            android:text="TextView" 
            android:id="@+id/textView1" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:layout_weight="1">
        </TextView>
</TableRow>
<TableRow 
    android:id="@+id/tableRow3" 
    android:layout_height="wrap_content"
    android:layout_margin="0dip"
    android:padding="0px"
    android:background="#ff6600">
        <ImageButton 
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content" 
            android:id="@+id/imageButton1" 
            android:background="@drawable/icon"
            android:gravity="left"
            android:layout_weight="1">
        </ImageButton>
        <ImageButton 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:id="@+id/imageButton2" 
            android:background="@drawable/icon"
            android:gravity="right"
            android:layout_weight="1">
        </ImageButton>
</TableRow>
<TableRow 
    android:id="@+id/tableRow4" 
    android:layout_height="wrap_content">
        <ImageButton 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:id="@+id/imageButton3" 
            android:background="@drawable/icon"
            android:gravity="left"
            android:layout_weight="1">
        </ImageButton>
        <ImageButton 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:id="@+id/imageButton4" 
            android:background="@drawable/icon"
            android:gravity="right"
            android:layout_weight="1">
        </ImageButton>
</TableRow>
</TableLayout>

What I’m trying to figure out:

1. How to scale an ImageButton to 50% of the screen width and height
2. how to have a flexible height of the ImageButton
3. How to get rid of the margin or padding on the edges such that the ImageButton’s stick to the wall and each other.
4. Is a TableLayout a good approach for this layout?
5. Are there any guidelines for creating images for ImageButton?

Thank you for your help.

Answer 1

I’m the developer of the Venmo Android app.

The other answer suggests using a GridLayout which might work better, but the Venmo app is actually using a table layout.

Here are answers to each individual question…

1. To get your images to scale to equal width, you need to give them a layout_width of 0dp and then set android:layout_weight to 1.
2. To get equal heights, set the ImageButton’s layout_height to fill parent, and then set each table row’s weight to 1.
3. I’m not entirely sure of what margin or padding you’re running into. If you size the ImageButtons and TableRows like I mentioned above this shouldn’t be an issue.
4. I’m not sure about this one. GridLayout might work better, but I haven’t run into any issues with using TableLayout.
5. There aren’t any official guidelines, but I suggest creating states for your drawables so the user can tell when they are pressing the button.

Here’s some sample code of how the Venmo app creates the grid:

<TableLayout android:layout_width="fill_parent" android:layout_height="fill_parent">

<TableRow android:layout_weight="1">

    <ImageButton android:layout_width="0dp"
        android:layout_weight="1" 
        android:layout_height="fill_parent" 
        android:src="@drawable/top_left"
        android:layout_marginRight="2sp"
        android:layout_marginBottom="2sp"
        android:background="@drawable/button"/>             

    <ImageButton android:layout_width="0dp"
        android:layout_weight="1" 
        android:layout_height="fill_parent"
        android:src="@drawable/top_right"
        android:layout_marginBottom="2sp"
        android:background="@drawable/button"/> 

</TableRow>

<TableRow android:layout_weight="1">

    <ImageButton android:layout_width="0dp"
        android:layout_weight="1" 
        android:layout_height="fill_parent" 
        android:src="@drawable/bottom_left"
        android:layout_marginRight="2sp"
        android:background="@drawable/button"/>

    <ImageButton android:layout_width="0dp"
        android:layout_weight="1" 
        android:layout_height="fill_parent" 
        android:src="@drawable/bottom_right"
        android:background="@drawable/button"/>

</TableRow></TableLayout>

Keep in mind that if the screen is ever physically smaller than your ImageButton’s drawable you’re going to run into issues. Also, if you do this you’ll definitely want to make a separate layout for landscape orientation.