Search code examples
androidandroid-linearlayout

Split the screen in 3 equal parts - ImageButtons


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>

Solution

  • 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>