How do I programmatically distribute child views evenly in a horizontal linear layout?

Question

I have a view like this:

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">


        <ImageView
            android:id="@+id/sample_icon_iv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="32dp"
            android:src="@drawable/active_state"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/sample_item_bar_iv"
            android:layout_width="128dp"
            android:layout_height="1dp"
            android:background="@color/brown_grey"
            app:layout_constraintBottom_toBottomOf="@id/sample_icon_iv"
            app:layout_constraintStart_toEndOf="@id/sample_icon_iv"
            app:layout_constraintTop_toTopOf="@id/sample_icon_iv"
            />

        <TextView
            android:id="@+id/leave_planner_item_date_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:text="26 March"
            app:layout_constraintEnd_toStartOf="@+id/sample_item_bar_iv"
            app:layout_constraintStart_toStartOf="@+id/sample_icon_iv"
            app:layout_constraintTop_toBottomOf="@+id/sample_icon_iv"
            tools:text="26 March" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

I need to inflate this view x times and show those evenly distributed in a horizontal scrollable fashion. I tried adding weight 1 to the inflated views before adding to the parent, but still doesn't seem to work. I also face spacing issues between the bar and the next icon. But if I remove the margin, I am not able to center the text under the icon.

This is how I would like to see the views

How do I achieve this?

Answer 1

Wrap your views in LinearLayout. Determine how many childs you want it to have and then set it like so:

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:weightSum="3"
        android:orientation="horizontal">
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content" 
            android:layout_weight="1"/>
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content" 
            android:layout_weight="1"/>
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content" 
            android:layout_weight="1"/>
    </LinearLayout>

This example will create 3 buttons that take up the entire width of the screen, each button will get 1/3 of the screen width.

To do so programmatically:

LinearLayout layout = findViewById(R.id.yourLayoutID);
Button b = new Button(); // Or, if you want something more complicated than a simple object, you can do View v = inflater.inflate(R.layout.your_layout, null);
LinearLayout.LayoutParams p = new LinearLayout.LayoutParams(0, ViewGroup.LayoutParams.MATCH_PARENT);
p.weight = 1;
b.setLayoutParams(p);
layout.addView(b);

that's the general idea