Develop Reference

Android - Wrap buttons within view

I am trying to make buttons wrap in a LinearLayout in Android, but they are just continuing off to the right of the view (the word shown in the screenshot should be "HELLO", so I want the "O" to drop down to the next line).
I am adding the buttons programmatically, but even if I code them into the XML layout file, they still don't wrap. Here is the layout file with the LinearLayout container into which I am dynamically adding the buttons:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constrainedWidth="true"
tools:context=".LetterTileView">
<LinearLayout
android:id="#+id/TilesContainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constrainedWidth="true"
android:orientation="horizontal">
</LinearLayout>
And here is the code I am using to create and add the tile buttons:
Context context = this;
LinearLayout layout = (LinearLayout) findViewById(R.id.TilesContainer);
LayoutParams params = new LayoutParams( LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT );
params.setMargins(50, 50, 0, 0);
for (int i=0;i<wordLength;i++) {
Button tileButton = new Button(this);
tileButton.setLayoutParams(params);
tileButton.setText(wordStringtoLetters[i]);
tileButton.setId(i);
tileButton.setBackgroundResource(R.drawable.tile_button);
tileButton.setTextSize(TypedValue.COMPLEX_UNIT_SP, 36);
layout.addView(tileButton);
}
Any advice would be appreciated. Thanks!

I ended up using FlexboxLayout, which works great for this. Thanks to those who offered suggestions!

First of all, there is no need to use a ConstraintLayout you can use your LinearLayout as the parent layout.
Then for the purpose of displaying all buttons in one line, you have to set weight for the LinearLayout in XML and set weight for the views you add to it.
The xml file should look like:
<LinearLayout
android:id="#+id/TilesContainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:weightSum="5"
app:layout_constrainedWidth="true"
android:orientation="horizontal">
</LinearLayout>
And in code you should set weight for each view you by adding ,1.0f to LayoutParam :
Context context = this;
LinearLayout layout = (LinearLayout) findViewById(R.id.TilesContainer);
LayoutParams params = new LayoutParams( LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT,1.0f );
params.setMargins(50, 50, 0, 0);
for (int i=0;i<wordLength;i++) {
Button tileButton = new Button(this);
tileButton.setLayoutParams(params);
tileButton.setText(wordStringtoLetters[i]);
tileButton.setId(i);
tileButton.setBackgroundResource(R.drawable.tile_button);
tileButton.setTextSize(TypedValue.COMPLEX_UNIT_SP, 36);
layout.addView(tileButton);
}

How to generate programmatically Horizontal scrolling LinearLayout with Imageview and textview at center bottom

I want to generate programmatically Horizontal scrolling LinearLayout with Imageview and textview at center bottom.
this is my Java code.:
LinearLayout rec=(LinearLayout)findViewById(R.id.hori_recom);
//ViewGroup.LayoutParams params=new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
ViewGroup.LayoutParams params=new ViewGroup.LayoutParams(450,450);
ViewGroup.LayoutParams params1=new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);
// for(int g=0;g<5;g++)
for(int g=0;g<imgpath_orignal.size();g++)
{
ImageView recimg=new ImageView(Details.this);
recimg.setId(g+1);
recimg.setPadding(25,0,0,0);
Picasso.with(Details.this).load(al_gallary_img.get(g)).placeholder(R.drawable.logo)
.error(R.drawable.logo).into(recimg);
recimg.setLayoutParams(params);
TextView txtlabel=new TextView(Details.this);
txtlabel.setId(g+1);
txtlabel.setGravity(Gravity.CENTER|Gravity.BOTTOM);
txtlabel.setPadding(15,15,15,15);
txtlabel.setText(""+al_img_caption.get(g));
txtlabel.setLayoutParams(params1);
rec.addView(txtlabel);
rec.addView(recimg);
This is my Xml:
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="none">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/hori_recom"
android:layout_marginTop="10dp"/>
</HorizontalScrollView>
Problem is I am not getting my textview at bottom-center of my Imageview.

Do one thing - combine your ImageView and TextView in one layout
Say this layout as row_layout.
<LinearLayout
....
....
<ImageView
...
... />
<TextView
...
... />
</LinearLayout>
Now add Layout into the LinearLayout which lies into HorizontalScrollView -
for(int g=0; g<imgpath_orignal.size(); g++) {
View v = LayoutInflater.from(context).inflate(R.layout.row_layout, parent, false);
// Do your layout binding stuff over here..
ImageView ivPhoto = (ImageView) v.findViewById(R.id.imageview_id); // Give reference
Picasso.with(context).load(url).into(ivPhoto); // Loading image using Picasso
rec.addView(v);
}

This is because you have set gravity of TextView as center_bottom instead of layout_gravity.
Just remove
txtlabel.setGravity(Gravity.CENTER|Gravity.BOTTOM);
and instead of
ViewGroup.LayoutParams params1 = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);`
do this
LinearLayout.LayoutParams params1 = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);
params1.gravity = Gravity.CENTER|Gravity.BOTTOM;
This is the way of setting layout_gravity programatically.

Linearlayout overlay another linearlayout

I have some problem with add linearlayout dynamically. It's add on the top of screen, overlay other linearlayout.
Here XML,code and results.
XML:
<TextView
android:id="#+id/top_km"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#888"
android:gravity="top"
android:textColor="#fff"
android:textSize="30dip"
android:layout_centerHorizontal="true"/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/top_km"
android:id="#id/textLayout">
</RelativeLayout>
Code:
myLayout = (RelativeLayout) page.findViewById(R.id.textLayout);
LinearLayout linLayout = new LinearLayout(this);
linLayout.setOrientation(LinearLayout.VERTICAL);
LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
myLayout.addView(linLayout);
LinearLayout hozLayout = new LinearLayout(this);
hozLayout.setOrientation(LinearLayout.HORIZONTAL);
LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
myLayout.addView(hozLayout);
Results:
enter link description here
Thanks

Don't use a RelativeLayout as your holder. Use a LinearLayout with orientation="vertical" instead.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/top_km"
android:orientation="vertical"
android:id="#id/textLayout" />
then in code
myLayout = (LinearLayout) page.findViewById(R.id.textLayout);
followed by
// rest of your code

It's because you use RealativeLayout for proper adding use
1. RelativeLayout.LayoutParams for st LayoutParams
2. In LayoutParams use field below
Example:
RelativeLayout rl=new RelativeLayout(this);
LinearLayout ll1=new LinearLayout(this);
TextView tx1=new TextView(this);
tx1.setText("Test1");
ll1.addView(tx1);
rl.addView(ll1);
LinearLayout ll2=new LinearLayout(this);
TextView tx2=new TextView(this);
tx2.setText("Test1");
ll2.addView(tx1);
rl.addView(ll2);
RelativeLayout.LayoutParams lp2=(LayoutParams) ll2.getLayoutParams();
And then use lp2.addRule
Here some help:
Parameters
verb One of the verbs defined by RelativeLayout, such as ALIGN_WITH_PARENT_LEFT.
anchor The id of another view to use as an anchor, or a boolean value(represented as TRUE) for true or 0 for false). For verbs that don't refer to another sibling (for example, ALIGN_WITH_PARENT_BOTTOM) just use -1.

Maybe it's easier for you to add it in the XML file with android:visibility="GONE" and then in the code just show it (View.VISIBLE) or hide it (View.GONE).

The content of a LinearLayout isn't visible

I tried to add some GUI elements like an ImageView or a TextView to a LinearLayout programmatically. But the elements aren't displayed.
To see if a element is drawn or not, I set a different background color for each element. The result was that I can only see the background color of the LinearLayout. But why?
public class MyLinearLayout extends LinearLayout {
public MyLinearLayout(Context context) {
super(context);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
setLayoutParams(params);
setBackgroundColor(Color.RED);
imageView = new ImageView(context);
params = new LinearLayout.LayoutParams(100, 100);
imageView.setLayoutParams(params);
imageView.setBackgroundColor(Color.BLUE);
addView(imageView);
}
}
The strange thing is that I can see the red background color of the LinearLayout but in the size of the ImageView. If I add some other GUI elements like a TextView, I can see how the LinearLayout grows. But I can not see the TextView.
I'm really confused, because this not the first time I do something like this. Can u tell me what I'm doing wrong?
This is a snippet of the layout.xml file:
<LinearLayout android:layout_width="match_parent"
android:layout_height="45dp"
android:id="#+id/bottom_bar"
android:layout_alignParentBottom="true"
android:gravity="bottom">
<FrameLayout android:id="#+id/block_edit_delete_layout"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:background="#drawable/block_edit_delete_selector">
<ImageView android:layout_height="match_parent"
android:layout_width="wrap_content"
android:src="#drawable/block_edit_delete"
android:scaleType="fitXY"
android:contentDescription="#string/delete"/>
</FrameLayout>
<LinearLayout
android:id="#+id/block_edit_progress"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal"/>
<FrameLayout android:id="#+id/block_edit_random_layout"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:background="#drawable/block_edit_delete_selector">
<ImageView android:layout_height="match_parent"
android:layout_width="wrap_content"
android:src="#drawable/block_edit_random"
android:scaleType="fitXY"
android:contentDescription="#string/random_numbers"/>
</FrameLayout>
</LinearLayout>
The LinearLayout with the ID block_edit_progress is the container layout of multiple instances of the class MyLinearLayout. The instances are added in the code:
for(int i = 0; i < numberOfMyLinearLayouts; i++) {
MyLinearLayout v = new MyLinearLayout(getContext());
addView(v);
}
I hope this helps.

If i convert your code to xml, it would be something like:
<LinearLayout layout_width=wrap_content, layout_height = wrap_content>
<LinearLayout id= MyLinearLayout>//just an idea, syntax may be wrong
<LinearLayout layout_width= 100, layout_width=100>
<ImageView color=BLUE>
</ImageView>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Whenever you call setLayoutParams on a View, parameter params you give should be parent element.
Try something like if you want linearlayout to be the parent of your linearlayout, use MATCH_PARENT for width, height if you want your view to span the width, height of view's parent
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT);
setLayoutParams(lp);//lp is parent view
Also try this, just in case views are getting added to right of your views, and you are not able to see them on screen
yourview.setOrientation(LinearLayout.VERTICAL);

Change the width and height of linear layout to match_parent and see how it changes. wrap_content will only show the content of the linear layout, which seems to be your problem.

I solved the problem. (Or found a workaround)
I moved the complete initialization stuff out of the constructor of the MyLinearLayout. If I then adding a View after the layout has been completely generated, everything works.
Like this:
MyLinearLayout ll = new MyLinearLayout(getContext());
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(100, 100);
ll.setLayoutParams(params);
ll.setBackgroundColor(Color.RED);
ImageView v = new ImageView(getContext());
params = new LinearLayout.LayoutParams(50, 50);
v.setLayoutParams(params);
v.setBackgroundColor(Color.GREEN);
ll.addView(v);
addView(ll);
I don't know why the other way doesn't work. Thanks for the fast answers!

How to split Linear Layout in to two columns?

I have to split a Single Linear layout into a Two Columns(Like newspaper Columns).The linear layout contain text-view and image-view
I have taken the screen width and have divided it to half and made the TextView and ImageView to come in a first column , ie, A B C blocks in the picture below.. now the remaining TextView and 'ImageView has to go to next column like in D E F like that it goes on.So it would be helpful if anyone gives me any code or ideas to implement this.. I tried with GridView which is not suitable for my issue. Since the TextView and ImageView sizes are not definite.
I don't know how to split Liner layout.
I tried with calculating the rootlayout height
like this
linearLayout.post(new Runnable() {
#Override
public void run() {
// TODO Auto-generated method stub
int linsize=linearLayout.getHeight();
int relsize=root.getHeight();
int textsize=txt1.getHeight();
mainheight=relsize;
subheight=linsize;
Toast.makeText(getApplicationContext(), "Linerlayout "+linsize, Toast.LENGTH_LONG).show();
Toast.makeText(getApplicationContext(), "Relative layout"+relsize, Toast.LENGTH_LONG).show();
Toast.makeText(getApplicationContext(), "text height "+textsize, Toast.LENGTH_LONG).show();
if(mainheight==subheight)
{
Toast.makeText(getApplicationContext(), "make a new linear layout", Toast.LENGTH_LONG).show();
createsubview();
}
}
});
Screenshot

You could easily do this with nested LinearLayouts:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/item" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
content here/>
<TextView
content here/>
</LinearLayout>
</LinearLayout>
Then all that you need to do is put A, B and C in the first vertical layout, and D, E and F in the second.

You can't do it with GridView. You would have to create a custom view to do this.
if you know how big your grid items are, you can cut some corners. GridView is complicated mostly because it deals with items of any size and loads them dynamically. An easier way for you might be:
1.Create a HorizontalScrollView with a horizontal LinearLayout inside.
2.Determining how many rows of your item will fit on the screen. Call this rows.
3.while you still have items you need to layout:
1.Create a vertical LinearLayout, adding rows or less items to it.
2.Add your new vertical LinearLayout to the horizontal one.
There are some downsides versus what a "horizontal GridView" would get you:
1.All the views are loaded up immediately, which is bad for huge lists of items.
2.You need to know how big your items are, and they need to be the same size.
Upsides:
1.It's very easy to implement.
for more inf plz see this link
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ScrollView scrollView = new ScrollView(this);//ScrollView
LinearLayout ll = new LinearLayout(this); //root LinearLayout
ll.setOrientation(LinearLayout.HORIZONTAL);//with horizontal orientation
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT,1f);
LinearLayout l2 = new LinearLayout(this); //sub linearlayout
l2.setOrientation(LinearLayout.VERTICAL);//with vertical orientation
l2.setLayoutParams(layoutParams);
LinearLayout l3 = new LinearLayout(this); //sub linearlayout
l3.setOrientation(LinearLayout.VERTICAL);//with vertical orientation
l3.setLayoutParams(layoutParams);
int totalvalues=41; //i take count as 41
for(int i=0;i<totalvalues;i++){ // add the buttons in the layout based on condition
Button okButton=new Button(this);
okButton.setText("Button"+i);
if(i<=totalvalues/2){
l2.addView(okButton);
}
else{
l3.addView(okButton);
}
}
ll.addView(l2); //add sub linearlayout to root linearlayout
ll.addView(l3); //add sub linearlayout to root linearlayout
scrollView.addView(ll); //add the root linearlayout to scrollview
setContentView(scrollView);
}

Have you tried:
DisplayMetrics metrics = getResources().getDisplayMetrics();
float dpW = 0f;
int pixelsW = (int) (metrics.density * dpW + 0.5f);
TableLayout.LayoutParams lp = new TableLayout.LayoutParams(pixelsW, LayoutParams.WRAP_CONTENT, 1f);
TextView txt = new TextView(MainActivity.this);
ImageView img = new ImageView(MainActivity.this);
txt.setLayoutParams(lp);
img.setLayoutParams(lp);
Using TableLayout's LayoutParams, you can set the weight of the view, which, as you know, must be 1. We also use DisplayMetrics to convert a float into the "dp" format used in xml.
EDIT:
You can also set this LayoutParams to a LinearLayout.