Force ViewGroup's children move to next line if they exceed the device width

Question

I want to have a view group which may has some views which are positioned horizontally next together. The problem with my code is, everything is fine but when children count is getting greater, all children positioned horizontally together and exceed the device width. I need to force them move to next line if they exceed the device width.

This is my code:

<LinearLayout
    android:id="@+id/linearLayout"
    android:layout_width="match_parent"
    android:layout_height="92dp"
    android:layout_marginTop="?attr/actionBarSize"
    android:background="@color/divider"
    android:padding="6dp">

    <LinearLayout
        android:id="@+id/linear_layout_container"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="horizontal"></LinearLayout>

    <ImageButton
        android:id="@+id/image_button_add_item"
        android:layout_width="78dp"
        android:layout_height="match_parent"
        android:background="@color/secondary_text"
        android:contentDescription="@string/content_description_add_new_file"
        android:src="@drawable/ic_plus"/>

</LinearLayout>

Note: the linear_layout_container view group contains all views and all of them are children of linearLayout view group.

Answer 1

LinearLayout works that way by default. For your purpose you require a FlowLayout.

Romain guy's FlowLayout

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;

public class FlowLayout extends ViewGroup {
        private int mHorizontalSpacing;
        private int mVerticalSpacing;
        private Paint mPaint;

        public FlowLayout(Context context, AttributeSet attrs) {
                super(context, attrs);

                TypedArray a = context.obtainStyledAttributes(attrs,
                                R.styleable.FlowLayout);
                try {
                        mHorizontalSpacing = a.getDimensionPixelSize(
                                        R.styleable.FlowLayout_horizontalSpacing, 0);
                        mVerticalSpacing = a.getDimensionPixelSize(
                                        R.styleable.FlowLayout_verticalSpacing, 0);
                } finally {
                        a.recycle();
                }

                mPaint = new Paint();
                mPaint.setAntiAlias(true);
                mPaint.setColor(0xffff0000);
                mPaint.setStrokeWidth(2.0f);
        }

        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
                int widthSize = MeasureSpec.getSize(widthMeasureSpec)
                                - getPaddingRight();
                int widthMode = MeasureSpec.getMode(widthMeasureSpec);

                boolean growHeight = widthMode != MeasureSpec.UNSPECIFIED;

                int width = 0;
                int height = getPaddingTop();

                int currentWidth = getPaddingLeft();
                int currentHeight = 0;

                boolean breakLine = false;
                boolean newLine = false;
                int spacing = 0;

                final int count = getChildCount();
                for (int i = 0; i < count; i++) {
                        View child = getChildAt(i);
                        measureChild(child, widthMeasureSpec, heightMeasureSpec);

                        LayoutParams lp = (LayoutParams) child.getLayoutParams();
                        spacing = mHorizontalSpacing;
                        if (lp.horizontalSpacing >= 0) {
                                spacing = lp.horizontalSpacing;
                        }

                        if (growHeight
                                        && (breakLine || currentWidth + child.getMeasuredWidth() > widthSize)) {
                                height += currentHeight + mVerticalSpacing;
                                currentHeight = 0;
                                width = Math.max(width, currentWidth - spacing);
                                currentWidth = getPaddingLeft();
                                newLine = true;
                        } else {
                                newLine = false;
                        }

                        lp.x = currentWidth;
                        lp.y = height;

                        currentWidth += child.getMeasuredWidth() + spacing;
                        currentHeight = Math.max(currentHeight, child.getMeasuredHeight());

                        breakLine = lp.breakLine;
                }

                if (!newLine) {
                        height += currentHeight;
                        width = Math.max(width, currentWidth - spacing);
                }

                width += getPaddingRight();
                height += getPaddingBottom();

                setMeasuredDimension(resolveSize(width, widthMeasureSpec),
                                resolveSize(height, heightMeasureSpec));
        }

        @Override
        protected void onLayout(boolean changed, int l, int t, int r, int b) {
                final int count = getChildCount();
                for (int i = 0; i < count; i++) {
                        View child = getChildAt(i);
                        LayoutParams lp = (LayoutParams) child.getLayoutParams();
                        child.layout(lp.x, lp.y, lp.x + child.getMeasuredWidth(), lp.y
                                        + child.getMeasuredHeight());
                }
        }

        @Override
        protected boolean drawChild(Canvas canvas, View child, long drawingTime) {
                boolean more = super.drawChild(canvas, child, drawingTime);
                LayoutParams lp = (LayoutParams) child.getLayoutParams();
                if (lp.horizontalSpacing > 0) {
                        float x = child.getRight();
                        float y = child.getTop() + child.getHeight() / 2.0f;
                        canvas.drawLine(x, y - 4.0f, x, y + 4.0f, mPaint);
                        canvas.drawLine(x, y, x + lp.horizontalSpacing, y, mPaint);
                        canvas.drawLine(x + lp.horizontalSpacing, y - 4.0f, x
                                        + lp.horizontalSpacing, y + 4.0f, mPaint);
                }
                if (lp.breakLine) {
                        float x = child.getRight();
                        float y = child.getTop() + child.getHeight() / 2.0f;
                        canvas.drawLine(x, y, x, y + 6.0f, mPaint);
                        canvas.drawLine(x, y + 6.0f, x + 6.0f, y + 6.0f, mPaint);
                }
                return more;
        }

        @Override
        protected boolean checkLayoutParams(ViewGroup.LayoutParams p) {
                return p instanceof LayoutParams;
        }

        @Override
        protected LayoutParams generateDefaultLayoutParams() {
                return new LayoutParams(LayoutParams.WRAP_CONTENT,
                                LayoutParams.WRAP_CONTENT);
        }

        @Override
        public LayoutParams generateLayoutParams(AttributeSet attrs) {
                return new LayoutParams(getContext(), attrs);
        }

        @Override
        protected LayoutParams generateLayoutParams(ViewGroup.LayoutParams p) {
                return new LayoutParams(p.width, p.height);
        }

        public static class LayoutParams extends ViewGroup.LayoutParams {
                int x;
                int y;

                public int horizontalSpacing;
                public boolean breakLine;

                public LayoutParams(Context context, AttributeSet attrs) {
                        super(context, attrs);
                        TypedArray a = context.obtainStyledAttributes(attrs,
                                        R.styleable.FlowLayout_LayoutParams);
                        try {
                                horizontalSpacing = a
                                                .getDimensionPixelSize(
                                                                R.styleable.FlowLayout_LayoutParams_layout_horizontalSpacing,
                                                                -1);
                                breakLine = a.getBoolean(
                                                R.styleable.FlowLayout_LayoutParams_layout_breakLine,
                                                false);
                        } finally {
                                a.recycle();
                        }
                }

                public LayoutParams(int w, int h) {
                        super(w, h);
                }
        }

}

Just warp your views with FlowLayout.

You could write your own code by extending ViewGroup. There are some libraries in github

https://github.com/ApmeM/android-flowlayout

Answer 2

In order to move them to the next line you will have to do some measuring, but if you want a simple solution:

• You can just make them MATCH_PARRENT
• Or give them a fix width size and play with the weight(you do need to wrap them with linear layout that is set for MATCH_PARRENT and horizontal layout).
• Or you can play with the new Percentage Layout, that been introduced at August 2015.