Dynamic TextViews wrapping to next row/line in Linear layout

Question

I am trying to build a UI, where in I have a linear layout which has been defined in the XML.

As per the user's input, I need to add some TextViews to this linear layout. I am able to do this.

My actual problem is, when I have more text views, they are stacked next to each other and some of text views text are hidden or stretched vertically as shown in the image below.

I would like to use the whole width of the linear layout and if the text view can not fit in this row, it should be put in a new row or below the first text view.. I would like the display to be as below.

Following is my Linear layout configuration in XML:

    <RelativeLayout
        android:id="@+id/RL1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:paddingBottom="5dip"
        android:paddingTop="5dip" >

        <TextView
            android:id="@+id/text1"
            android:layout_width="85dip"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:gravity="left"
            android:text="Lable 1"
            android:textColor="#999999" />

        <LinearLayout
            android:id="@+id/LL1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toLeftOf="@+id/button1"
            android:layout_toRightOf="@+id/text1"
            android:gravity="left|center_vertical"
            android:orientation="horizontal"
            android:paddingLeft="5dip"
            android:paddingRight="5dip"
            android:paddingTop="3dip" >
        </LinearLayout>

        <Button
            android:id="@+id/button1"
            android:layout_width="30dip"
            android:layout_height="30dip"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginTop="2dip"
            android:background="@drawable/plus"
            android:clickable="true"
            android:focusable="true"
            android:paddingTop="5dip" />
    </RelativeLayout>

Can any one please help me in how to realign the same in java code.

Bandbox

in ur xml u have only one textview and one button only right... – Punnet

rest of the text views are added dynamically... from the java code – Bandbox

This answer about ConstraintLayout Flow may apply... #6997337 – Licentiate

Answer 1

I would Like to suggest you about how you can provide equal sizes to all your views in Linear Layout,you can do that by using weight property in the XML file i.e., android:weight for that particular View and when you use this property you should give width=0dp or 0dip.I think this will solve your problem easily.

Please I suggest you first you take full Knowledge of how to use this property in the following Link:-Weight property with an example

Fumikofumitory

I tried that it has a drawback, you utilize 4 rows to show 4 items.. where in I can complete them in 2 lines as shown above. – Bandbox

Answer 2

Please see:

How to wrap Image buttons in a horizontal linear layout?

How can I do something like a FlowLayout in Android?

You also might search github for FlowLayout.java.

An alternative approach is given in: Android - multi-line linear layout

In addition, there's a class that adds images into a TextView: https://mcmap.net/q/216428/-how-to-add-image-in-a-textview-text which is not the same as wrapping views in the general case, but sometimes may do the job.

Mumbletypeg

Answer 3

i'm korean. so i don't speak English well, but i'll help you.

first, Create 'item.xml' with four text boxes.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">


<CheckBox
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/set_checkbox"/>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/text2"
    android:text="0"
    android:layout_weight="1"
    android:gravity="center"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/text3"
    android:text="0"
    android:layout_weight="4"
    android:gravity="center"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/text4"
    android:text="0"
    android:layout_weight="4"
    android:gravity="center"/>
</LinearLayout>

second, Create 'main.xml' where 'item.xml' will be dynamically generated. 'orientation' helps to create one line at a time.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
</LinearLayout>

Finally, You can create four TextView per line using the code below.

        LinearLayout layout = (LinearLayout)findViewById(R.id.mainxml); 
        LinearLayout item = (LinearLayout)layout.inflate(this.getContext(), R.layout.itemxml, null);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(MATCH_PARENT, WRAP_CONTENT);
        item.setLayoutParams(params);


        CheckBox cb = item.findViewById(R.id.set_checkbox);
        TextView text2 = item.findViewById(R.id.text2);
        TextView text3 = item.findViewById(R.id.text3);
        TextView text4 = item.findViewById(R.id.text4);

        cb.setChecked(true);
        text2.setText("text2");
        text3.setText("text3");
        text4.setText("text3");

        layout.addView(item);

The 10th loop is shown in the following picture. enter image description here

Adobe