crazyPixel crazyPixel - 4 months ago 16
Android Question

Creating a linearlayout with weights

Im trying to make something similar to this - Android Layout(User Interface) only I want to make the first column with a weight of 4 the second one with a weight of 2 (and also with two rows) and the last one with a weight of 1 (and also with three rows)...problem is It messes up itself (I copy and pasted the answer and changed everything according to my needs but it keeps on get messed up.. =) any help?
[code]

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@color/background_color"
android:orientation="vertical"

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="4"
android:gravity="center_horizontal|center_vertical"
android:orientation="horizontal" >

<TextView
android:id="@+id/textDishes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:text="@string/dishes"
android:textAppearance="?android:attr/textAppearanceLarge" />

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

<View
android:layout_width="fill_parent"
android:layout_height="@dimen/seperator_size"
android:background="@color/seperator" />

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:measureWithLargestChild="true"
android:orientation="horizontal"
android:weightSum="2" >

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

<TextView
android:id="@+id/textfood"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/food"
android:textAppearance="?android:attr/textAppearanceLarge" />

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

<View
android:layout_width="fill_parent"
android:layout_height="@dimen/seperator_size"
android:background="@color/seperator" />

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

<TextView
android:id="@+id/textMalls"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/malls"
android:textAppearance="?android:attr/textAppearanceLarge" />

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

<View
android:layout_width="fill_parent"
android:layout_height="@dimen/seperator_size"
android:background="@color/seperator" />

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:weightSum="3"
android:orientation="horizontal" >

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

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/app_name"
android:textAppearance="?android:attr/textAppearanceLarge" />

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

<View
android:layout_width="fill_parent"
android:layout_height="@dimen/seperator_size"
android:background="@color/seperator" />

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

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/coupons"
android:textAppearance="?android:attr/textAppearanceLarge" />

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

<View
android:layout_width="fill_parent"
android:layout_height="@dimen/seperator_size"
android:background="@color/seperator" />

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

<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/markets"
android:textAppearance="?android:attr/textAppearanceLarge" />

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

</LinearLayout>
[/code]


That is the result -

enter image description here

The result should look like -
enter image description here
Any help??

Answer

EDIT working example now

This is not a complete answer because the vertical dividers are still not working, but hopefully it gets you going in the right direction:

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="4"
    android:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textDishes"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Dishes"
        android:textAppearance="?android:attr/textAppearanceLarge" />

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

<View
    android:layout_width="match_parent"
    android:layout_height="5dp"
    android:background="@color/red" />

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="2"
    android:orientation="horizontal" >

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textfood"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Food"
            android:textAppearance="?android:attr/textAppearanceLarge" />

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

    <View
        android:layout_width="5dp"
        android:layout_height="fill_parent"
        android:background="@color/red"
        android:gravity="center" >
    </View>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textMalls"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Malls"
            android:textAppearance="?android:attr/textAppearanceLarge" />

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

<View
    android:layout_width="match_parent"
    android:layout_height="5dp"
    android:background="@color/red" />

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="horizontal" >

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="App name"
            android:textAppearance="?android:attr/textAppearanceLarge" />

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

    <View
        android:layout_width="5dp"
        android:layout_height="fill_parent"
        android:background="@color/red"
        android:gravity="center" >
    </View>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Coupons"
            android:textAppearance="?android:attr/textAppearanceLarge" />

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

    <View
        android:layout_width="5dp"
        android:layout_height="fill_parent"
        android:background="@color/red"
        android:gravity="center" >
    </View>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Markets"
            android:textAppearance="?android:attr/textAppearanceLarge" />

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

enter image description here