how to horizontally align 4 imageview with textview

Question

I want to show four ImageView s horizontally together with TextView s. This is my screen and sample screen which I want to make. How can I do that?

XML code:

 <LinearLayout
  android:orientation="horizontal"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:background="#CCCCCC"
  android:layout_gravity="center"
  >

<ImageView
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
     android:src="@drawable/ic_launcher"
    />
<ImageView
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
   android:src="@drawable/ic_launcher"
    />
 <ImageView
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher"
    />
    <ImageView
    android:id="@+id/button4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
   android:src="@drawable/ic_launcher" 
    />
 </LinearLayout>

Answer 1

You could wrap each ImageView/TextView pair in a LinearLayout like this:

<LinearLayout
  android:id="@+id/group1"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:orientation="vertical"
  android:gravity="center_horizontal>
  <ImageView
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher"
    />
  <TextView
    android:id="@+id/text1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@strings/my_text" />
</LinearLayout>

Edit: Added gravity attribute to keep everything in line

Answer 2

This works. I checked.

  <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="#CCCCCC"
    android:orientation="horizontal" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="hai there" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="hai there" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="hai there " />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="hai there" />
    </LinearLayout>
</LinearLayout>

Answer 3

Use TableRow and place all the images in that. Don't forget to give android:layout weight=1.

<TableRow
android:id="@+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="match_parent" >

<ImageView
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:src="@drawable/ic_launcher" />

<ImageView
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:src="@drawable/ic_launcher" />

<ImageView
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:src="@drawable/ic_launcher" />

<ImageView
    android:id="@+id/button4"
    android:layout_width="wrap_content"
    android:layout_weight="1"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher" />
</TableRow>

Answer 4

Use this

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


<ImageView
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
     android:src="@drawable/ic_launcher"
    android:layout_weight=".25f"
    />


<ImageView
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
   android:src="@drawable/ic_launcher"
     android:layout_weight=".25f"
    />
 <ImageView
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher"
      android:layout_weight=".25f"
    />
    <ImageView
    android:id="@+id/button4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
   android:src="@drawable/ic_launcher" 
     android:layout_weight=".25f"
    />
 </LinearLayout>