gandharv09
gandharv09

Reputation: 257

android loading icons equidistant separated by line

I have a horizontal linearlayout which has fixed width. The view can have icons ranging from 2 to 6 at runtime in number.I want these icons to be at equal distance separated by line between them but they should occupy complete layout width. E.g : If Linearlayout width = 100dp and icons = 4 i ll have 3 lines in between these 4 icons, separated at equal distance.Each line width would be (100 - 4*(icon width))/3

I have made 6 imageviews and 5 line views which i am trying to hide/expose at runtime based on data i get. I have managed to make visible the right ones at runtime but i am unable to set width of separating lines accordingly.

This is what i have in LinearLayout

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



        <ImageView
            android:id="@+id/iv_itinerary_mode_0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="fitCenter"
            android:visibility="gone" />

        <View
            android:id="@+id/iv_itinerary_next_0"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/lightgrey"
            android:layout_gravity="center_vertical"
            android:visibility="gone" />

        <ImageView
            android:id="@+id/iv_itinerary_mode_1"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:scaleType="fitCenter"
            android:visibility="gone" />

            <View
                android:id="@+id/iv_itinerary_next_1"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="@color/lightgrey"
                android:layout_gravity="center_vertical"
                android:visibility="gone" />

            <ImageView
            android:id="@+id/iv_itinerary_mode_2"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:scaleType="fitCenter"
            android:visibility="gone" />

            <View
                android:id="@+id/iv_itinerary_next_2"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="@color/lightgrey"
                android:layout_gravity="center_vertical"
                android:visibility="gone" />

            <ImageView
            android:id="@+id/iv_itinerary_mode_3"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:scaleType="fitCenter"
            android:visibility="gone" />

            <View
                android:id="@+id/iv_itinerary_next_3"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="@color/lightgrey"
                android:layout_gravity="center_vertical"
                android:visibility="gone" />

            <ImageView
            android:id="@+id/iv_itinerary_mode_4"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:scaleType="fitCenter"
            android:visibility="gone" />

            <View
                android:id="@+id/iv_itinerary_next_4"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="@color/lightgrey"
                android:layout_gravity="center_vertical"
                android:visibility="gone" />

            <ImageView
            android:id="@+id/iv_itinerary_mode_5"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:scaleType="fitCenter"
            android:visibility="gone" />

            <View
                android:id="@+id/iv_itinerary_next_5"
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="@color/lightgrey"
                android:layout_gravity="center_vertical"
                android:visibility="gone" />

            <ImageView
            android:id="@+id/iv_itinerary_mode_6"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:scaleType="fitCenter"
            android:visibility="gone" />

        </LinearLayout>

Kindly suggest how to set this layout such that lines and icons set which are visible set at equal distance on their own at the same time occupying the width.

E.g Image :

enter image description here

Upvotes: 0

Views: 108

Answers (1)

gandharv09
gandharv09

Reputation: 257

As suggested by Mohit i solved it by giving weight to each line as 100 and to each imageview weight as 1. Though this doesnt go with the weightsum concept it worked for me.

Upvotes: 1

Related Questions