Split the screen in 3 equal parts - ImageButtons

Question

I have 3 ImageButtons with texts under each and a separator between them. I want them to occupy equal space of the screen, 1/3rd each. I tried the weight component, equalizing it 0 and weightSum of the layout (equal to "3") but that didn't work. Here is the code so far:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_gravity="center">

    <LinearLayout
        style="@style/..."
        android:layout_marginLeft="15dp">

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/pic"/>

        <TextView
            style="@style/TextImageUploader"
            android:text="@string/..."/>
    </LinearLayout>

    <View
        android:layout_width="0.5dp"
        android:layout_height="match_parent"
        android:background="@color/..."/>

    <LinearLayout
        style="@style/..."
        android:layout_marginLeft="15dp">

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/pic"/>

        <TextView
            style="@style/TextImageUploader"
            android:text="@string/..."/>
    </LinearLayout>

    <View
        android:layout_width="0.5dp"
        android:layout_height="match_parent"
        android:background="@color/blue_800"/>

    <LinearLayout
        style="@style/..."
        android:layout_marginLeft="15dp">

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/pic"/>

        <TextView
            style="@style/TextImageUploader"
            android:text="@string/..."/>
    </LinearLayout>

</LinearLayout>

Answer 1

try this:

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

    <LinearLayout
        style="@style/..."
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_marginLeft="15dp">

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/pic"/>

        <TextView
            style="@style/TextImageUploader"
            android:text="@string/..."/>
    </LinearLayout>

    <View
        android:layout_width="0.5dp"
        android:layout_height="match_parent"
        android:background="@color/..."/>

    <LinearLayout
        style="@style/..."
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_marginLeft="15dp">

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/pic"/>

        <TextView
            style="@style/TextImageUploader"
            android:text="@string/..."/>
    </LinearLayout>

    <View
        android:layout_width="0.5dp"
        android:layout_height="match_parent"
        android:background="@color/blue_800"/>

    <LinearLayout
        style="@style/..."
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_marginLeft="15dp">

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/pic"/>

        <TextView
            style="@style/TextImageUploader"
            android:text="@string/..."/>
    </LinearLayout>

</LinearLayout>

Answer 2

You need to put android:layout_weight="1" in the LinearLayout containing the ImageView and TextView. As long as the layout_weights are the same, you don't need to put in a weightSum. The View that serves as a separator should have android:layout_weight="0"