How to make a nice Main Menu Page

Question

I want to make a nice Main Menu Page like the home page of Android Device in which the button images are layout in rows; each row in a page say contain 4 imageButtons.

I used the below layout, but the imageViews in each rows are not evenly size. I have these questions:

I want to have 3 imageView in a row. How to detect What is the Width and Height of a screen, so divide it for 3 imageView? say, base on galaxy note.
How to do spacing among the 3 imageViews? Below each ImageView there is a textView to indicate the name or function of the ImageView.
Should I allow rotate? if rotate , how to enable scrolling when rotate to horizontal?

Thanks

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/myLinearLayout"
    android:minWidth="25px"
    android:minHeight="25px">

<LinearLayout
        android:orientation="horizontal"
        android:minWidth="25px"
        android:minHeight="25px"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/poiImageView"
        android:id="@+id/linearLayout1"
        android:layout_centerVertical="true">

 <ImageView
        android:id="@+id/Thumbnail1"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:paddingLeft="10dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:src="@drawable/Icon" />


 <ImageView
        android:id="@+id/Thumbnail1a"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:paddingLeft="10dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:src="@drawable/Icon" />

 <ImageView
        android:id="@+id/Thumbnail1b"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:paddingLeft="10dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:src="@drawable/Icon" />

  </LinearLayout>

<LinearLayout>
2nd row
 </LinearLayout>

<LinearLayout>
3rd row
 </LinearLayout>

</LinearLayout>

Nilanchal Nilanchal · Accepted Answer · 2015-08-03T16:51:39

I believe you're looking for GridView. GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid. It handles scrolling by itself when content grows. Additionally you will get additional features packed such as memory handling, inbuilt MVC using adapter pattern etc.

A simple GridView looks as follows;

<GridView
        android:id="@+id/gridView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:columnWidth="100dp"
        android:drawSelectorOnTop="true"
        android:gravity="center"
        android:numColumns="auto_fit"
        android:stretchMode="columnWidth"
        android:verticalSpacing="5dp"
        android:focusable="true"
        android:clickable="true"/>

You can checkout some complete GridView implementation from the following links.

Android GridView Example- Building Image Gallery in android

Download and Display Image in Android GridView

How to make a nice Main Menu Page

1 Answers