CODEWITHSUNDEEP
androidxmlandroid-layout
idish
idish

Reputation: 3260

Creating a layout in android

im trying to set that kind of layout: 3 images displayed horizontally, and numbers in the next row displayed under those images.

Here's the wanted layout: enter image description here Here's my current xml layout, that displays the images fine, but the numbers are not right under the images, how can I do that? (you can copy it to a new project and watch the layout)the layout: http://pastebin.com/aYb8eeQn

Upvotes: 0

Views: 97

Answers (4)

Tudor Luca
Tudor Luca

Reputation: 6419

Here you go.

I used a horizontal LinearLayout with android:weightSum="3", and each child with a android:layout_weight="1". Notice also that the width of the childred is android:layout_width="0dip".

The second image is way bigger that the other two.

enter image description here

<LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="100dip"
        android:background="#333"
        android:orientation="horizontal"
        android:weightSum="3" >

        <LinearLayout
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_margin="5dip"
            android:layout_weight="1"
            android:background="#fff"
            android:gravity="center"
            android:orientation="vertical" >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="0dip"
                android:layout_weight="1"
                android:scaleType="centerInside"
                android:src="@drawable/ic_launcher" />

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

        <LinearLayout
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_margin="5dip"
            android:layout_weight="1"
            android:background="#fff"
            android:gravity="center"
            android:orientation="vertical" >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="0dip"
                android:layout_weight="1"
                android:scaleType="centerInside"
                android:src="@drawable/wonders_of_zen" />

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

        <LinearLayout
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_margin="5dip"
            android:layout_weight="1"
            android:background="#fff"
            android:gravity="center"
            android:orientation="vertical" >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="0dip"
                android:layout_weight="1"
                android:scaleType="centerInside"
                android:src="@drawable/ic_launcher" />

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

Upvotes: 6

Jayabal
Jayabal

Reputation: 3619

dont worry, try as follows

First create inner layout as per your need,

<LinearLayout android:layout_width="wc" ...height="wc" orientation="vertical">
//Here place your image view
<ImageButton ..width="48dp" ..height="48dp" />

//Then place your text view
<TextView ..width="match_parent" ..height="wc" ..gravity="center" />
</LinearLayout>

duplicate this layout in relative layout and provide appropriate positions. otherwise place duplicated layouts inside in another Linear Layout (default orientation) as follows

<LinearLayout ....>
         <LinearLayout ...... orientation="vertical">
             <ImageButton ...... />
             <TextView ......... />
         </LinearLayout>

         <LinearLayout ...... orientation="vertical">
             <ImageButton ...... />
             <TextView ......... />
         </LinearLayout>

         <LinearLayout ...... orientation="vertical">
             <ImageButton ...... />
             <TextView ......... />
         </LinearLayout>


</LinearLayout>

Upvotes: 0

PearsonArtPhoto
PearsonArtPhoto

Reputation: 39698

You have to take the time to use one big huge RelativeLayout. I'll show you for two images, just keep extending the pattern for more.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent" >

   <ImageButton
        android:id="@+id/img1"
        android:onClick="myClickHandler"
        android:layout_marginLeft="5dp"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@drawable/emptystar" />
   <ImageButton
        android:id="@+id/img2"
        android:onClick="myClickHandler"
        android:layout_marginLeft="5dp"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@drawable/emptystar" 
        android:layout_toLeftOf="@+id/img1"
        android:alignParentRight="True"/>
   <TextView
        android:textStyle="bold"
        android:text="1"
        android:layout_toLeftOf="@id/img1"
        android:textSize="48sp"
        android:layout_marginLeft="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/img1"
        android:layout_alignRight="@+id/img1"
        android:layout_alignLeft="@+id/img1"
        android:layout_alignParentBottom="true"/>
   <TextView
        android:textStyle="bold"
        android:text="2"
        android:textSize="48sp"
        android:layout_marginLeft="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_below="@+id/img2"
        android:layout_alignRight="@+id/img2"
        android:layout_alignLeft="@+id/img2"
        android:layout_alignParentBottom="true"/>
</RelativeLayout

Upvotes: 0

Cat
Cat

Reputation: 67502

Just set up evenly-spaced LinearLayouts within a horizontal LinearLayout. Something like this (not complete, just an outline):

<LinearLayout
    android:orientation="horizontal">
    <LinearLayout
        android:layout_width="0"
        android:layout_weight="1"
        android:orientation="vertical">
        <ImageView /> <!-- first image -->
        <TextView /> <!-- 1 -->
    </LinearLayout>
    <!-- Repeat the above LinearLayout as many times as you like -->
</LinearLayout>

Upvotes: 1

Related Questions