Create new line inside Linear Layout

Question

References Image

What I want: dynamically add the image inside the box and if a line is complete then add it to new line.

WHere I am currently: I am able to add the image inside the linear layout, if no of image is greater than the block width then remaining image will not shown.

What is the issue: Since I am adding to the linear layout and I am not telling the layout where I should be added. SO it add at the end of the row.

Solution Tried: :

I have added the gridview with the 3 column inside the linear layout.But in this approach, I am able to figure about how to calculate the position where I add image. Since in grid view we can't find the position of last item filled. One more problem with this approach I need to track last item position.

xml code:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/relativeView"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </android.support.v7.widget.Toolbar>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:paddingTop="@dimen/activity_horizontal_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:layout_marginTop="?attr/actionBarSize"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <LinearLayout

            android:weightSum="2"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:textStyle="bold"
                android:textColor="@color/green"
                android:gravity="center_horizontal"
                android:layout_weight="1"
                android:text="Morning"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <TextView
                android:textStyle="bold"
                android:textColor="@color/green"
                android:gravity="center_horizontal"
                android:layout_weight="1"
                android:text="Afternoon"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

        </LinearLayout>

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

            <LinearLayout
                android:layout_marginBottom="@dimen/activity_vertical_margin"
                android:layout_marginEnd="@dimen/activity_vertical_margin"
                android:background="@drawable/rectangle_curve"
                android:orientation="horizontal"
                android:padding="@dimen/activity_vertical_margin"
                android:id="@+id/ll1"
                android:layout_width="match_parent"
                 android:layout_height="match_parent"
                android:layout_weight="1.0">

               <!-- <GridView
                    android:layout_weight="1.0"
                    android:layout_marginTop="@dimen/cardview_default_elevation"
                    android:orientation="horizontal"
                    android:layout_marginBottom="@dimen/activity_vertical_margin"
                    android:layout_marginEnd="@dimen/activity_vertical_margin"
                    android:background="@drawable/rectangle_curve"
                    android:horizontalSpacing="10dp"
                    android:verticalSpacing="10dp"
                    android:numColumns="auto_fit"
                    android:id="@+id/gv1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
                    </GridView>-->
            </LinearLayout>

            <LinearLayout
                android:layout_marginBottom="@dimen/activity_vertical_margin"
                android:layout_marginStart="@dimen/activity_vertical_margin"
                android:background="@drawable/rectangle_curve"
                android:padding="@dimen/activity_vertical_margin"
                android:orientation="horizontal"
                android:id="@+id/ll2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1.0">

                <!--<GridView
                    android:layout_weight="1.0"
                    android:layout_marginTop="@dimen/cardview_default_elevation"
                    android:orientation="horizontal"
                    android:layout_marginBottom="@dimen/activity_vertical_margin"
                    android:layout_marginEnd="@dimen/activity_vertical_margin"

                    android:background="@drawable/rectangle_curve"
                    android:horizontalSpacing="10dp"
                    android:verticalSpacing="10dp"
                    android:numColumns="auto_fit"
                    android:id="@+id/gv2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
                </GridView>
-->

            </LinearLayout>


         </LinearLayout>


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

            <TextView
                android:textStyle="bold"
                android:textColor="@color/green"
                android:gravity="center_horizontal"
                android:layout_weight="1"
                android:text="Evening"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <TextView
                android:textStyle="bold"
                android:textColor="@color/green"
                android:gravity="center_horizontal"
                android:layout_weight="1"
                android:text="Night"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

        </LinearLayout>



    <LinearLayout
        android:weightSum="2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1.0"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_marginBottom="@dimen/activity_vertical_margin"
            android:layout_marginEnd="@dimen/activity_vertical_margin"
            android:orientation="horizontal"
            android:padding="@dimen/activity_vertical_margin"
            android:background="@drawable/rectangle_curve"
            android:id="@+id/ll3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1.0">

<!--
        <GridView
            android:layout_weight="1.0"
            android:layout_marginTop="@dimen/cardview_default_elevation"
            android:orientation="horizontal"
            android:layout_marginBottom="@dimen/activity_vertical_margin"
            android:layout_marginEnd="@dimen/activity_vertical_margin"

            android:background="@drawable/rectangle_curve"
            android:horizontalSpacing="10dp"
            android:verticalSpacing="10dp"
            android:numColumns="auto_fit"
            android:id="@+id/gv3"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </GridView>-->

            </LinearLayout>

            <LinearLayout
                android:background="@drawable/rectangle_curve"
                android:layout_marginStart="@dimen/activity_vertical_margin"
                android:layout_marginBottom="@dimen/activity_vertical_margin"
                android:orientation="horizontal"
                android:id="@+id/ll4"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1.0">


           <!-- <GridView
            android:layout_weight="1.0"
            android:layout_marginTop="@dimen/cardview_default_elevation"
            android:orientation="horizontal"
            android:layout_marginBottom="@dimen/activity_vertical_margin"
            android:layout_marginEnd="@dimen/activity_vertical_margin"
            android:background="@drawable/rectangle_curve"
            android:horizontalSpacing="10dp"
            android:verticalSpacing="10dp"
            android:numColumns="auto_fit"
            android:id="@+id/gv4"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </GridView>
-->
                </LinearLayout>


        </LinearLayout>


</LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:layout_marginEnd="@dimen/activity_horizontal_margin"
        android:id="@+id/fab_add_reminders"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_action_add"
        app:backgroundTint="@color/white"
        android:layout_gravity="bottom|end" />

</android.support.design.widget.CoordinatorLayout>

Answer 1

You may use android:numColumns="auto_fit" attribute to your gridview. It will automatically fit according to the number of images.

 <GridView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/gvFrameBook"
        android:numColumns="auto_fit"
        android:columnWidth="150dp"
        android:layout_centerInParent="true"
        android:stretchMode="spacingWidthUniform"
        android:verticalSpacing="5dp"/>

Then you can add your linearlayout programmatically in getview() method of adapter class. To add linearlayout to your gridview you may consider following example

 public View getView(int position, View convertView, ViewGroup parent) {
        convertView = getActivity().getLayoutInflater().inflate(R.layout.put_linearlayout_here, parent, false);
        ivImg = (ImageView) convertView.findViewById(R.id.ivImg);}

Inside your "put_linearlayout_here.xml" you add linearlayout (with your cherished background ) and inside it add an imageview with id "ivImg". Hope this helps.