Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android - multi-line linear layout

I need a multi-line layout, which would behave as horizontal linear layout, but when there is not enough space to place new widget it would expand to next line, just like words in text. Widgets would be added there at runtime, and should go with wrap_content. Actually, there would be buttons.

Is there any widgets with such behaviour? Or give a suggestion about how to write such layout by myself.

Finally it should look like this:

draft for a multi-line layout

like image 714
Raiv Avatar asked Aug 09 '11 13:08

Raiv


People also ask

Can we use linear layout in ConstraintLayout?

You can create linear layouts now with ConstraintLayout by constraining the sides of each element with each other. The quick way of creating these layouts is to select all the views together and right click to center horizontally or vertically.

How do you put two buttons on the same line in linear layout?

If you are placing the buttons inside the LinearLayout, give the Orientation value as "Vertical", it will automatically place the buttons in the same line. If you are using RelativeLayout, then for one button use android:layout_toLeftOf OR android:layout_toRightOf and give value as ID of other button.

How do you do a vertical LinearLayout?

To create a linear layout in which each child uses the same amount of space on the screen, set the android:layout_height of each view to "0dp" (for a vertical layout) or the android:layout_width of each view to "0dp" (for a horizontal layout). Then set the android:layout_weight of each view to "1" .

What is layout_weight and weightSum in android?

Answer: Per documentation, android:weightSum defines the maximum weight sum, and is calculated as the sum of the layout_weight of all the children if not specified explicitly. Let's consider an example with a LinearLayout with horizontal orientation and 3 ImageViews inside it.


2 Answers

Check the comments: this will do the job

/* *  Copyright 2011 Sherif */  private void populateText(LinearLayout ll, View[] views , Context mContext) {      Display display = getWindowManager().getDefaultDisplay();     ll.removeAllViews();     int maxWidth = display.getWidth() - 20;      LinearLayout.LayoutParams params;     LinearLayout newLL = new LinearLayout(mContext);     newLL.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,             LayoutParams.WRAP_CONTENT));     newLL.setGravity(Gravity.LEFT);     newLL.setOrientation(LinearLayout.HORIZONTAL);      int widthSoFar = 0;      for (int i = 0 ; i < views.length ; i++ ){         LinearLayout LL = new LinearLayout(mContext);         LL.setOrientation(LinearLayout.HORIZONTAL);         LL.setGravity(Gravity.CENTER_HORIZONTAL|Gravity.BOTTOM);         LL.setLayoutParams(new ListView.LayoutParams(                 LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));         //my old code         //TV = new TextView(mContext);         //TV.setText(textArray[i]);         //TV.setTextSize(size);  <<<< SET TEXT SIZE         //TV.measure(0, 0);         views[i].measure(0,0);         params = new LinearLayout.LayoutParams(views[i].getMeasuredWidth(),                 LayoutParams.WRAP_CONTENT);         //params.setMargins(5, 0, 5, 0);  // YOU CAN USE THIS         //LL.addView(TV, params);         LL.addView(views[i], params);         LL.measure(0, 0);         widthSoFar += views[i].getMeasuredWidth();// YOU MAY NEED TO ADD THE MARGINS         if (widthSoFar >= maxWidth) {             ll.addView(newLL);              newLL = new LinearLayout(mContext);             newLL.setLayoutParams(new LayoutParams(                     LayoutParams.FILL_PARENT,                     LayoutParams.WRAP_CONTENT));             newLL.setOrientation(LinearLayout.HORIZONTAL);             newLL.setGravity(Gravity.LEFT);             params = new LinearLayout.LayoutParams(LL                     .getMeasuredWidth(), LL.getMeasuredHeight());             newLL.addView(LL, params);             widthSoFar = LL.getMeasuredWidth();         } else {             newLL.addView(LL);         }     }     ll.addView(newLL); } 
like image 112
Sherif elKhatib Avatar answered Oct 18 '22 05:10

Sherif elKhatib


Sherif's answer was good, but didn't handle the case where there may be extra views on either side of the LinearLayout in question. I've updated and cleaned up the code to handle this case:

/**  * Copyright 2011 Sherif   * Updated by Karim Varela to handle LinearLayouts with other views on either side.  * @param linearLayout  * @param views : The views to wrap within LinearLayout  * @param context  * @param extraView : An extra view that may be to the right or left of your LinearLayout.  * @author Karim Varela  **/ private void populateViews(LinearLayout linearLayout, View[] views, Context context, View extraView) {     extraView.measure(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);      // kv : May need to replace 'getSherlockActivity()' with 'this' or 'getActivity()'     Display display = getSherlockActivity().getWindowManager().getDefaultDisplay();     linearLayout.removeAllViews();     int maxWidth = display.getWidth() - extraView.getMeasuredWidth() - 20;      linearLayout.setOrientation(LinearLayout.VERTICAL);      LinearLayout.LayoutParams params;     LinearLayout newLL = new LinearLayout(context);     newLL.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));     newLL.setGravity(Gravity.LEFT);     newLL.setOrientation(LinearLayout.HORIZONTAL);      int widthSoFar = 0;      for (int i = 0; i < views.length; i++)     {         LinearLayout LL = new LinearLayout(context);         LL.setOrientation(LinearLayout.HORIZONTAL);         LL.setGravity(Gravity.CENTER_HORIZONTAL | Gravity.BOTTOM);         LL.setLayoutParams(new ListView.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));          views[i].measure(0, 0);         params = new LinearLayout.LayoutParams(views[i].getMeasuredWidth(), LayoutParams.WRAP_CONTENT);         params.setMargins(5, 0, 5, 0);          LL.addView(views[i], params);         LL.measure(0, 0);         widthSoFar += views[i].getMeasuredWidth();         if (widthSoFar >= maxWidth)         {             linearLayout.addView(newLL);              newLL = new LinearLayout(context);             newLL.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));             newLL.setOrientation(LinearLayout.HORIZONTAL);             newLL.setGravity(Gravity.LEFT);             params = new LinearLayout.LayoutParams(LL.getMeasuredWidth(), LL.getMeasuredHeight());             newLL.addView(LL, params);             widthSoFar = LL.getMeasuredWidth();         }         else         {             newLL.addView(LL);         }     }     linearLayout.addView(newLL); } 

'

like image 23
Karim Varela Avatar answered Oct 18 '22 06:10

Karim Varela