How to make this UI with imagebuttons?

Question

I want to create my main UI like this one: http://lh3.ggpht.com/RYB2ckycDc_4rb2bmsDzqLLmYcj37xDOA7d7sR6XIVfwRb3a44_HqMqfb1vdmtxTEidenVY4C9RcTREl

Is it possible to make that with ImageButton? The images must have the same resolution? Thank you very much.

XML file, one line of imagebuttons:

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

<RelativeLayout android:id="@+id/acceuil"
   android:layout_width="fill_parent" android:layout_height="fill_parent"
   android:orientation="vertical"
   xmlns:android="http://schemas.android.com/apk/res/android">


<ImageButton

    android:id="@+id/consom" 

    android:layout_alignParentLeft="true"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:src="@drawable/consom_icon">
</ImageButton>
<ImageButton

    android:id="@+id/param" 

    android:layout_alignParentRight="true"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
     android:src="@drawable/consom_icon" >
 </ImageButton>

 </RelativeLayout>

here is what i have: http://imageshack.us/f/856/imagebutton.png/

Answer 1

Using the GridView, you can populate it with your set of icons that you have in hdpi, mdpi and ldpi in your res/ folder. When you populate the list, make sure you give the icons and ID so that you can determine which button was clicked to start the activity/intent that button is supposed to complete.

Android has a solid example on the gist of what I'm saying. http://developer.android.com/resources/tutorials/views/hello-gridview.html

Example on how to handle the clicks with a switch statement:

    GridView gridView = (GridView) findViewById(R.id.gridview);
    gridView.setAdapter(new MyGridViewAdapter(this));
    gridView.setOnItemClickListener(new OnItemClickListener() {
        public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
            switch (v.getId()) {
            case R.drawable.my_button:
                startActivity(new Intent("com.awesome.Activity"));
            }
        }
    });

Answer 2

You could do a 'dashboard' type UI like this using ImageButtons in a TableLayout but I think you would have problems if you want part of the image to appear to be over the edge of the button. You might be better using ImageViews which have a button-type image with another image over it.

Check out the android UI design patterns where they discuss a twitter-like app design.

Edit: Try something like the following TableLayout

<TableLayout>
 <TableRow>
  <ImageButton />
  <ImageButton />
 </TableRow>
 <TableRow>
  <ImageButton />
  <ImageButton />
 </TableRow> 
</TableLayout>

Answer 3

Have u try like this,

< RelativeLayout android:id="@+id/acceuil"

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

< LinearLayout....... android:orientation="horizontal ...........>

< ImageButton

android:id="@+id/consom" 
android:layout_alignParentLeft="true"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@drawable/consom_icon">

< /ImageButton>

< ImageButton

android:id="@+id/param" 
android:layout_alignParentRight="true"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
 android:src="@drawable/consom_icon" >

< /ImageButton>

< /LinearLayout>

< comment!--- for second row imageButtons>

< LinearLayout....... android:orientation="horizontal ...........>

< ImageButton

android:id="@+id/consom" 
android:layout_alignParentLeft="true"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@drawable/consom_icon">

< /ImageButton>

< ImageButton

android:id="@+id/param" 
android:layout_alignParentRight="true"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
 android:src="@drawable/consom_icon" >

< /ImageButton>

< /LinearLayout>

< comment.--- Linear/Relative Layouts for more rows as needed...>

< /RelativeLayout>