Develop Reference

Adding views dynamically to LinearLayout not working as expected

I'm inflating views inside a linearlayout dynamically, however once the linear layout reaches the end of the first row, it cuts off the rest and doesn't start on the second row.
for(int a = 0; a < mSkills.get(i).size(); a++){
View singleSkill = LayoutInflater.from(mContext)
.inflate(R.layout.singleskill, holder.mSkillLayout, false);
TextView skillText = singleSkill.findViewById(R.id.singleskilltext);
skillText.setText(mSkills.get(i).get(a));
holder.mSkillLayout.addView(skillText);
}
For the linear layout I have it set to wrap_content for the height:
<LinearLayout
android:id="#+id/ll_skills"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_below="#+id/tv_description"
android:layout_margin="16dp"/>
I've tried setting it to a defined height e.g 300dp however that doesn't work either.
How can I make the layout start on the second row, once the first is full?

Linear Layout can either fill views horizontally or vertically so the 2nd row you are expecting cant to be done with linear layout only. you can try a horizontal scroll view for that to scroll horizontally. For the exact view-like flow that you described, you can use this 3rd party https://github.com/nex3z/FlowLayout
It can manage the flow of your dynamically inflated view such as if there is no space in the first line then it will put the next view in the second line.
also, you can use material design library chips https://material.io/components/chips/#usage

LinearLayout works exactly how it has to be because you specify it as horizontal. For such behavior, you need RecyclerView With GridLayoutManager or create your own layout;).

Actually it's doing exactly as it should be, LinearLayout is Linear!, and place its subviews in a single horizontal or vertical row.
My advice to you is that create dynamic horizontal LinearLayout as you already doing with TextViews. and put every 3 or 4 textviews (depending on screen size) inside it.
and put all LinearLayouts inside one vertical LinearLayout...
Of course in your case, it's not a good idea, the best thing you can do is to use recycler view. but I consider you have problem with that.

Getting child view to match_parent in Android

I have a simple linear layout which I'm inflating in an adapter:
#Override
public View getView(final int position, View convertView, final ViewGroup parent) {
if (convertView == null) {
convertView = inflater.inflate(R.layout.category_listview_row, parent, false);
} else {
((LinearLayout)convertView).removeAllViews();
}
if (LAYOUT_TYPES.GRID.equals(layoutType)) {
convertView = CategoryFragment.getViewForGridLayout(context, displayArray, position, convertView, listener);
} else {
convertView = CategoryFragment.getViewForListLayout(context, displayArray, position, convertView, listener);
}
return convertView;
}
Here, category_listview_row is the following:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:gravity="top"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
The getViewForGridLayout method programmatically creates one or more views and adds them to convertView.
I would like all the child views to match this parent view in height, however I can't get this to work. This is the outer linear layout of the child views that are added programmatically:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/base_listview_style_one_layout"
android:orientation="horizontal"
android:padding="#dimen/node_default_spacing"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:background="#5ab9c6">
This layout has subviews which are removed according to the actual data to be displayed, so some will be longer than others. However I want them all to be the height of the parent so it doesn't look weird.
This is a screenshot of what I'm seeing:
The first row is ok since both items have a title and a subtext
On the second row, the second item doesn't have a subtext so that view is smaller. However, I'd like it to take the full height of the row so all items in a single row will have the same height.
Any tips? Thanks!

I would advise using a Recyclerview with GridLayoutManager.
If you want certain items spanning multiple columns, you can do so by setting SpanSizeLookup on the GridLayoutManager.
Here is a simple example https://stackoverflow.com/a/26907508/4498224.

Propably your layout params are ignored. Be sure that you are adding child views to your convertView like this:
View view = inflater.inflate( R.layout.item /* resource id */,
convertView /* parent */,
true /*attachToRoot, you dont need to call addView then*/);

Instead of removing the textview, why not just make it invisible or set its color to white to it occupies the space?

Please change your linearlayout height from wrap content to "match_parent".
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:gravity="top"
android:layout_width="match_parent"
android:layout_height="wrap_content" />`

Set the height of parent layout to wrap_content.
Set the height of child view to match-parent.
Try this i hope it will resolve your issue.

#zundi you can use view holder design pattern with recycler view adapter and define which row needs to have two images and which one needs to have one. Its pretty much simpler than doing it with linear layout.
Recycleview show different view types has a pretty decent explanation on how to do this.
And also to answer you question of making
some rows with 2 items and other rows with 1 item
you can use setSpanSizeLookup (GridLayoutManager.SpanSizeLookup spanSizeLookup) method of GridLayoutManager and define it in the activity.
RecycleView's span size gives you more info on how to achieve that.
mLayoutManager.setSpanSizeLookUp(new GridLayoutManager.SpanSizeLookUp() {
#Override
public int getSpanSize(int position) {
if(position == 0)
return 2; //here the view takes up two spaces in a row(header)
else return 1; //here view takes 1 space i.e., 2 views in a total row
} });
In the above example my grid layout manager takes 2 view holders based on different positions and decides if its header or not and populates the data.
Other Solution:
Rather than giving match parent and wrap parent inside your layout give a fixed 'dp' for height. That should make the views look consistent.

#zundi if doing it right way with RecyclerView and LayoutManager which would simplify you life dramatically but have a bit of learning curve doesn't suits you, here is an option that hasn't been mentioned yet:
You can define android:lines=x on TextView which contains subtext.
Just match_parent is not going to work for you because you want LinearLayout to wrap height of its children and its children to match_parent which is a circular dependency

This method can be performed on both Linear Layout or TextView you are using
You have set
android:layout_height="match_parent"
but not the height, so it is simple case
android:layout_height="match_parent"
So, in case even if there will be no value in the string it will still contain the height allotted to it

Adding a custom view multiple times in a layout

I have a custom XML file. I want to repeat this in a layout (say Relative) n number of times, dynamically (obviously).
I have seen many posts, but none helped. I am not looking for a ListView or Adapters or so. It's as simple as - A RelativeLayout. Inside it, adding the custom XML one above another. Any number of times.
With a static LinearLayout (Vertical orientation), adding the view dynamically results in rendering it once, not one below another. Don't know why. Although a TextView or so do repeat one below the other in a loop inside a LinearLayout (Vertical).
Then I dynamically created the layout (Relative), and inflated the custom XML. Displayed one. When I tried for another below the first it told me to remove child's parent first (Exception). If I do that and add again, its as good as removing the first rendered view and adding it again.
So how can I get multiple views in same layout?
A rough presentation of what I've attempted:
mainLayout = (RelativeLayout)findViewById(R.id.mainlay); //Mainlayout containing some views already
params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
params.addRule(RelativeLayout.BELOW,R.id.sideLayout); //sideLayout is an existing LinearLayout within the main layout.
View child = getLayoutInflater().inflate(R.layout.dynamiccustomlayout,null);
RelativeLayout r1 = new RelativeLayout(this);
r1.setLayoutParams(params);
r1.addView(child);
mainLayout.addView(r1);
mainLayout.setLayoutParams(params);
mainLayout.addView( child);
/* r2 = new RelativeLayout(this);
r2.setLayoutParams(params);
r2.addView(contentLayout); [Gives exception] */

This is how it worked out for me...
Before that, the issue with android is:
If you add dynamic views inside a LinearLayout (Horizontal), they will appear horizontally with new created instances, added to the view.
However, shockingly, it's not the same in case of LinearLayout (Vertical orientation). Hence the whole mess.
Solution:
The RelativeLayout layout file was binded with the variable, somewhat like this:
customLay = (RelativeLayout) mainLay.findViewById(R.id.dynamicCustomLayout);
Then, a Dynamic RelativeLayout was created within which the former variable is added/wrapped.
customLayout = new RelativeLayout(this);
customLayout.addView(customLay);
Every layout is assigned an id:
customLayout.setId(i);
And then a loop is run (2 if conditions for i=0 and i>0)
for i>0 (indicates the 2nd dynamic layout, to be added below the first), LayoutParameter is created:
params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
And then for i>0, using the ids of dynamic views, they are added one below the other:
//Following code below used id to place these views below each other to attain list type arrangement of views//
// i==0 for first view on top//
if (i == 0) {
params.addRule(RelativeLayout.BELOW, R.id.sideLayout);
customLayout.setLayoutParams(params);
}
// i>0 for views that will follow the first top//
else {
params.addRule(RelativeLayout.BELOW, i - 1);
customLayout.setLayoutParams(params);
}
Then added to main root layout, where all these views or cards need to be displayed:
includeLayout.addView(customLayout);
Ofcourse, the code is not just this. I have written the essential points that helped me achieve the target and that may help others in future.
So the main essence was ---
using a Dynamic RelativeLayout, to
bind the static RelativeLayout, and
assigning ids to the Dynamic RelativeLayout wrappers, and
on basis of ids use RelativeLayoutParameters to place the following
ids below the previous ones.

You have to instanciate every child by itself
View child = getLayoutInflater().inflate(R.layout.dynamiccustomlayout,null);
r1.addView(child);
View child2 = getLayoutInflater().inflate(R.layout.dynamiccustomlayout,null);
r1.addView(child2);
//ok, i do a analog thing in obne of my apps. here is the code:
public class FlxForm extends LinearLayout {
public FlxForm(Context context) {
super(context);
inflater = LayoutInflater.from(context);
inflater.inflate(R.layout.flxform, this);
this.setPadding(0, 0, 0, 0);
container = (LinearLayout) this.findViewById(R.id.flxform);
this.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.WRAP_CONTENT));
//here is my funtion to calculate the items i want to add, its a little bit too complicated, but in the end it works like:
for(int i=0;i<10;i++){
View x = inflater.inflate(R.layout.dynamiccustomlayout,null);
container.addview(x);
}
}
}
XML for the Form
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/flxform"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:focusable="false"
android:background="#android:color/transparent"
android:orientation="vertical" >
</LinearLayout>
Then you can instantiate a "Form" Objekt and add it into a ScrollView

For doing this You would have to nest your RelativeLayout inside a ScrollView and Manage all the Scrolling, items adding, memory management, etc manually.
So the simple solution for adding n Number of Custom Views is to use a RecyclerView, ListView, GridView, etc with a neat CustomAdapter and Your Custom View.
Here is a nice example of using RecyclerView with custom Adapter :
http://code.tutsplus.com/tutorials/getting-started-with-recyclerview-and-cardview-on-android--cms-23465
I hope this Helps.

Android HorizontalScrolling laggy

I have a HorzontalScrollView with a LinearLayout inside. During Runtime I can add more LinearLayouts to the LinearLayout.
Now I have the problem that the Scrollview only scrolls a little bit and not smooth with one finger slide!
Does anyone have a solution for this problem?

HorizontalScrollView doesn't use an adapter that manages the list's memory, therefore it can't handle heavy (images, custom views, etc) lists.
You can use this Horizontal ListView http://www.dev-smart.com/archives/34 but make sure you don't write the on list item click method inside the getView, it will make the list scroll slow. Other than that, that's a great resource for a smooth horizontal list view.
You can also explore the Android view pager, which is also supported on lower Android versions using the compatibility pack: http://developer.android.com/sdk/compatibility-library.html
Edit - something like that in the adapter that inflates the XML you want (the linearLayout) and then populates every view with the relevant data.
#Override
public View getView(final int position, View convertView, ViewGroup parent) {
if (convertView == null) {
convertView = LayoutInflater.from(parent.getContext()).inflate(R.layout.chat_friends_list_item, null);
}
ImageView status = (ImageView)convertView.findViewById(R.id.status);
ImageView image = (ImageView)convertView.findViewById(R.id.image);
ImageView imageBorder = (ImageView)convertView.findViewById(R.id.image_border);
TextView title = (TextView)convertView.findViewById(R.id.title);
}

The problem was my parent Viewflow because it has stolen the swipe event! The HorizontalListView is too buggy for me! (Problems with size attributes)
However,thank you for your answer! ;)

Multiple pages at the same time on a ViewPager

Is there a possibility to display two pages at the same time, when using a ViewPager? I'm not looking for an edge effect, but rather for two full pages at the same time.

Please have a look at the getPageWidth Method in the corresponding PagerAdapter. Override it and return e.g. 0.8f to have all child pages span only 80% of the ViewPager's width.
More info:
http://developer.android.com/reference/android/support/v4/view/PagerAdapter.html#getPageWidth(int)

See my more up-to-date answer here: Can ViewPager have multiple views in per page?
I discovered that a perhaps even simpler solution through specifying a negative margin for the ViewPager. I've created the MultiViewPager project on GitHub, which you may want to take a look at:
https://github.com/Pixplicity/MultiViewPager
Although this question specifically asks for a solution without edge effect, some answers here propose the workaround by CommonsWare, such as the suggestion by kaw.
There are various problems with touch handling and hardware acceleration with that particular solution. A simpler and more elegant solution, in my opinion, is to specify a negative margin for the ViewPager:
ViewPager.setPageMargin(
getResources().getDimensionPixelOffset(R.dimen.viewpager_margin));
I then specified this dimension in my dimens.xml:
<dimen name="viewpager_margin">-64dp</dimen>
To compensate for overlapping pages, each page's content view has the opposite margin:
android:layout_marginLeft="#dimen/viewpager_margin_fix"
android:layout_marginRight="#dimen/viewpager_margin_fix"
Again in dimens.xml:
<dimen name="viewpager_margin_fix">32dp</dimen>
(Note that the viewpager_margin_fix dimension is half that of the absolute viewpager_margin dimension.)
We implemented this in the Dutch newspaper app De Telegraaf Krant:

You have to override the getPageWidth() method on the viewpager's Adapter. For Example:
#Override
public float getPageWidth(int position) {
return 0.9f;
}
Try that code in your Adapter and then you'll understand.

See that blog entry.PagerContainer technique is solved my problem.
EDIT:
I found same answer.
How to migrate from Gallery to HorizontalScrollView & ViewPager?

You can solve this problem by using getPageWidth in PagerAdapter class.
Be sure about whether your JAR is up-to-date.Since previously ViewPager was not supporting multiple pages at the same time.
public float getPageWidth(){
return 0.4f;(You can choose it .For full screen per page you should give 1f)
}

create your layout file: my_layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">
<FrameLayout
android:id="#+id/pager_container"
android:layout_width="match_parent"
android:layout_height="240dp"
android:clipChildren="false">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="200dp"
android:clipToPadding="false"
android:layout_height="200dp"
android:layout_marginLeft="70dp"
android:layout_marginRight="70dp"
android:layout_gravity="center" />
</FrameLayout>
</layout>
the viewpager is about as small as you want your pages to be. With android:clipToPadding="false" the pages outside the pager are visible as well. But now dragging outside the viewpager has no effect This can be remedied by picking touches from the pager-container and passing them on to the pager:
MyLayoutBinding binding = DataBindingUtil.<MyLayoutBinding>inflate(layoutInflater, R.layout.my_layout, parent, false)
binding.pager.setOffscreenPageLimit(3);
binding.pager.setPageMargin(15);
binding.pagerContainer.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
return chatCollectionLayoutBinding.pager.onTouchEvent(event);
}
});

I don't think that's possible with the limitations of a View Pager. It only allows a user to view pages 1 at a time. You might be able to work something out with the use of fragments, and have 2 ViewPager fragments side by side and use buttons to work out the page flipping you want to implement, but the code may become very complex.
You can try something like a ViewFlipper - where you can do a lot more customizations (including animations).
Hope this helps.

It can be don in the Item Layout of the Viewpager. Assume that, you want two pages at a time.
This is the Item Layout (photo_slider_item.xml):
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" style="#style/photosSliderItem">
<ImageView android:id="#id/photoBox1" style="#style/photoBox"/>
<ImageView android:id="#id/photoBox2" style="#style/photoBox"/>
</LinearLayout>
And in your PagerAdapter:
#Override
public View instantiateItem(ViewGroup container, int position){
View sliderItem = LayoutInflater.from(container.getContext()).inflate(photo_slider_item, container, false);
ImageView photoBox1 = (ImageView) sliderItem.findViewById(R.id.photoBox1);
ImageView photoBox2 = (ImageView) sliderItem.findViewById(R.id.photoBox2);
photoBox1.setImageResource(photosIds[position]);
if(position < photosIds.length-1){
photoBox2.setImageResource(photosIds[position+1]);
} else {photoBox2.setImageResource(photosIds[0]);}
container.addView(sliderItem);
return sliderItem;
}
Edited version for more than two items
if you want more than two items, first add your items to the LinearLayout then use following algorithm:
photoBox1.setImageResource(photosIds[position]);
if(position < photosIds.length-i-1){
photoBox2.setImageResource(photosIds[position+1]);
photoBox3.setImageResource(photosIds[position+2]);
.
.
.
photoBox(i).setImageResource(photosIds[position+i-1]);
} else if(position < photosIds.length-i-2){
photoBox2.setImageResource(photosIds[position+1]);
photoBox3.setImageResource(photosIds[position+2]);
.
.
.
photoBox(i-1).setImageResource(photosIds[position+i-2]);
photoBox(i).setImageResource(photosIds[0]);
} . . . else if(position < photosIds.length-1){
photoBox2.setImageResource(photosIds[position+1]);
photoBox3.setImageResource(photosIds[0]);
photoBox4.setImageResource(photosIds[1]);
.
.
.
photoBox(i-1).setImageResource(photosIds[i-2-2]);
photoBox(i).setImageResource(photosIds[i-2-1]);
} else {
photoBox2.setImageResource(photosIds[0]);
photoBox3.setImageResource(photosIds[1]);
.
.
.
photoBox(i-1).setImageResource(photosIds[i-1-2]);
photoBox(i).setImageResource(photosIds[i-1-1]);
}
i : number of your items
[i-2-2] : number 2 in the middle is number of items in the last page of the viewpager.