Develop Reference

Viewpager optimization with custom views

Scenario - I am working on an app that shows events respective to particular dates in a viewpager, where each page represents a day(i.e 24 hrs in a vertical manner, similar to google calendar). Each page/fragment contains a vertical scrollview(it has a framelayout inside it) and based on list of events i am dynamically creating custom-views(view position and dimension is based on the corresponding event timing and duration) and adding it to the scrollview. User can drag and drop events between dates.
Issue - I have successfully achieved the view creation part, now the issue is with performance. Sometimes vewpager(using FragmentStatePagerAdapter) lags while swiping through pages.
Someone please suggest me how to reduce the lag or any better ways to achieve this

Yes I had a similar performance with viewpager and FragmentStatePagerAdapter, the problem with viewpager is that pre creates the views either side of the current view to speed up the swipe to next view.
This works well for static views but for views with dynamic data the pre-created view was usually out of date and needed to be regenerated when the user swiped to it.
Thus it was having to call onCreateView on 3 views while the user swiped between views leading to lag sometimes.
I thought of 2 improvements for performance, though only used one.
1) The view holder/model pattern e.g. https://www.androidcode.ninja/android-viewholder-pattern-example/ and https://developer.android.com/topic/libraries/architecture/viewmodel where the inflation and finding items re-used / separated from onCreateView activities.
I did not use this method
2) Create bare bones views for the dynamic ones (The first view was static and then there were 2 dynamic ones at positions 1 and 2 that contained listviews of different aspects of the dynamic data.)
The listviews were inflated and had an adapter set to an empty list in onCreateView of these views thus they were fast to create.
Then I added an on OnPageChangeListener which notified the adapter backing the ViewPager that the pages had changed
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageSelected(int position) {
if (position == 1 || position == 2)
{
mSectionsPagerAdapter.notifyDataSetChanged();
}
}
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
// Code goes here
}
#Override
public void onPageScrollStateChanged(int state) {
// Code goes here
}
});
The notifyDataSetChanged causes the viewPager to call getItemPosition in the FragmentStatePagerAdapter class to work out if the page position has changed and it if need to re-create it in the a new position.
Then in FragmentStatePagerAdapter extended class I overrode getItemPosition with
#Override
public int getItemPosition(Object object) {
if (object instanceof LogFragment) {
LogFragment f = (LogFragment) object;
if (f != null) {
f.update();
}
} else if (object instanceof SummaryFragment){
SummaryFragment f = (SummaryFragment) object;
if (f != null) {
f.update();
}
} else {
return POSITION_UNCHANGED;
}
return super.getItemPosition(object);
}
This allowed me to get the Fragment object and then call the update method on it but still returning POSITION_UNCHANGED so the viewpager did not try and re-create the Fragments.
Then in the update method of the Fragment I get the listview adapter and update the data.
public void update(){
adapter.clear();
adapter.addAll(datasource.getData());
}
Thus the more costly getting and display the dynamic data is only done when the page is actually display, NOT when it is pre-created by viewPager (because that pre-created view would be old out of date data anyway and would need to be updated)
There is one downside to this approach, the screen shown during the swipe is still the old data (either empty or data from when that page was last updated), this was acceptable to me.

Swipe tabs for unknown amount of items

I will try to explain what I am thinking of doing as an Android app. But I am really confused how would I approach this problem.
When you get JSON from some web API (eg Location) and let's say that JSON has 5 different locations and you want to store each Location as a separate list item in a list view. This is simple, you use a location adapter class, and then those 5 items get stored as a list. For example, JSON updates 24h later and now there are 10 locations. No problems at all - Android handles this because of location adapter and etc. (I know all of this). Basically, what I am trying to tell that android does not need to know how many list items there will be before fetching information from JSON.
Now, the problem is that I am trying to create a swipe views which will represent each of the list items (1 Full view = 1 list item). For example, if there are 5 locations, i can only swipe 4 times and then I will reach the last tab. If there is update, and there are 10 locations, I could only swipe 9 times until I reach the end. I hope you understand idea.
My question is - how do I create dynamic swipe views where each of the list items would have its own separate window and to reach another list item you would swipe?
My main concern is how do you not tell android how many swipe views you will need and he would figure it out when he reads the JSON and knows the number of locations.
Many Thanks

Let's say your data is like this:
{"India","Morocco","China","Russia"}
You can getLength of the JSON object.In this case it is 4.Save that in a static variable.Suppose
max_swipes=4
Then in you swipe method
`if(position<=max_swipes || position==0){//code to swipe }
else
{
//cannot swipe last position
}`

To implement such functionality you just simply can use viewPager. You can copy the code from here and here. These are two file and you just need to copy as it is. After adding these two files in your project you need to create an adapter and here is the thing which makes it dynamic to create swipe views.
I am adding code snippet hope it will help you.
public class ViewPagerAdapter extends FragmentStatePagerAdapter {
private DetailFragment page;
CharSequence Titles[]; // This will Store the Titles of the Tabs which are Going to be passed when ViewPagerAdapter is created
int NumbOfTabs; // Store the number of tabs, this will also be passed when the ViewPagerAdapter is created
// Build a Constructor and assign the passed Values to appropriate values in the class
public ViewPagerAdapter(FragmentManager fm, CharSequence mTitles[], int mNumbOfTabsumb) {
super(fm);
this.Titles = mTitles;
this.NumbOfTabs = mNumbOfTabsumb;
}
//This method return the fragment for the every position in the View Pager, This method is called only when we slide or change the tabs and not called upon rotating the screen
#Override
public Fragment getItem(int position) {
if(position < NumbOfTabs)
{
page= new DetailFragment();
return page;
}else {
return null;
}
}
// This method return the titles for the Tabs in the Tab Strip(in case you want to add title to each page.
#Override
public CharSequence getPageTitle(int position) {
return Titles[position];
}
#Override
public int getCount() {
return NumbOfTabs;
}
}
While creating the instance of this adapter you can pass the number of page you are going to require by calculating the number of items in JSON.
Hope this will help.

Android: how can I create a ListView header outside of a list?

This is my situation:
I would like the list to treat the "header" and tabs sections as a list header so that the "header" and tabs do not stay fixed on the screen and they all scroll together with the list.
I can't simply add the header and tabs as a headerView for the list via mListView.addHeaderView() because the tabs will swap out the "List" content area when pressed. The content area for the other tabs will contain other lists, and the header and tabs should scroll with the new list as well.
I'd appreciate any help.

You can override the getViewType method in order to precise how many kind of rows you listview has.
Have a look here.

Think of the entire thing as the ListView. You can call addHeaderView() as many times as you want so you can have two header views ("Header", and "Tab | Tab | Tab").
Re:
I can't simply add the header and tabs as a headerView for the list via mListView.addHeaderView() because the tabs will swap out the "List" content area when pressed.
Yes you can.
Update the reference to your list data and call mAdapter.notifyDataSetChanged().

I had the same need as you, I found this project that implements exactly what you need, plus some more eye-candy tricks.
https://github.com/kmshack/Android-ParallaxHeaderViewPager
The magic is binding the scrolling that happens in the fragment list to the header defined in the activity. There is also a fundamental binding between the selection of a tab and the scroll position in the list, to adjust lists when swiping.
This code is based upon that github repo but is simpler (therefore less robust), read it just to understand what happens, then read the source in the repo.
public class MyFragment extends Fragment implements OnScrollListener {
#Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
((MyParentActivity) getActivity()).onScrollFragment(view, mTabPosition);
}
public void adjustScroll(int scrollHeight) {
if (scrollHeight == 0 && fragmentListView.getFirstVisiblePosition() >= 1) {
return;
}
officesListView.setSelectionFromTop(1, scrollHeight);
}
}
then in the activity you just need these two specific methods
public class MyParentActivity implements ViewPager.OnPageChangeListener{
#Override
public void onPageSelected(int position)
myFragmentPagerAdapter.getFragmentAt(position)
.adjustScroll((int) (mHeader.getHeight() + ViewHelper.getTranslationY(mHeader)));
}
public void onScrollFragment(AbsListView view, int tabPosition) {
if (mViewPager.getCurrentItem() == tabPosition) {
int scrollY = getScrollY(view);
ViewHelper.setTranslationY(mHeader, Math.max(-scrollY, mMinHeaderTranslation));
}
}
}
this code is good up to API 8 thanks to NineOldAndroids' ViewHelper

ViewPager - update view after adapter got empty

I'm using a FragmentStatePagerAdapter with a ViewPager.
Everything is working fine. If I open my activity with an empty Adapter, the ViewPageris empty, if I add items, the ViewPager updates correctly.
BUT, if I open my activity and delete the last item of my ViewPager, the ViewPagerdoes not invalidate correctly and keeps the last Fragment visible.
How can I avoid this?
I'm using my library, it's a wrapper class for ViewPager + ViewPagerIndicator + FragmentPager(State)Adapter:
The class itself is placed here: https://github.com/MichaelFlisar/PagerManager/blob/master/src/com/michaelflisar/pagermanager/MFragmentPagerStateAdapter.java
The implementation is placed here: https://github.com/MichaelFlisar/PagerManager/blob/master/src/com/michaelflisar/pagermanager/MPagerAdapterHelper.java
It implements a simple FragmentStatePagerAdapter with weak references to it's fragments...
My code looks like following:
mPagerManager = new MPagerManager<ExerciseViewFragment, MFragmentPagerStateAdapter<ExerciseViewFragment>>(pager, tpi,
new MFragmentPagerStateAdapter<ExerciseViewFragment>(fragmentManager)
{
#Override
public CharSequence getPageTitle(int pos)
{
return mData.workout.getWExercise().get(pos).getExercise().getName();
}
#Override
public int getCount()
{
return mData.workout.getWExercise().size();
}
#Override
public ExerciseViewFragment createFragment(int pos)
{
return ExerciseViewFragment.newInstance(pos, mData.workout.getWExercise());
}
});
I'm calling mPagerManager.notifyDataSetChanged(); which forwards the call to the FragmentPagerStateAdapter directly...
PS: I know, I can make it invisible, if item count is 0... But I'm wondering if there's a better solution

This is an old question but I thought you might still need to know what to do. It's very common issue. ViewPager does not invalid views which are already created(including these which are ready on the left and right side of your current view).
Solving this is very easy. Just implement the following method in your adapter like this:
#Override
public int getItemPosition(Object object) {
return POSITION_NONE;
}
By default this method returns PagerAdapter.POSITION_UNCHANGED.
For most developers this method usage is misleading, I had this problem myself till I realised that this method is used by ViewPager.dataSetChanged() to establish which items should be recreated. With above code you tell ViewPager to recreate all items whenever data set change.

Can a ListView contain Fragments

As in, can the ELEMENTS of a ListView be Fragments. I know that you can assign a TextView XML to a ListView to change the way it looks, but can you add Fragments into a ListView.
For instance: I have a Fragment. The XML for said Fragment contains an ImageView, a couple of large-style TextViews, and a small-style TextView. The Fragment class code receives a Bundle, then based on the contents populates the TextViews and ImageView accordingly. Both the Fragment XML and the Fragment code work without issue
(I can display an individual Fragment just fine). I have a FragmentActivity in which I want to display the aforementioned list of Fragments. Here is the code I'm using to try to populate the ListView inside of the FragmentActivity's View:
ArrayList<Fragment> fragList = new ArrayList<Fragment>();
Fragment fragment = Fragment.instantiate(this, TileItem.class.getName());
Bundle bundle = new Bundle();
bundle.putInt("key", 0);
fragment.setArguments(bundle);
fragList.add(fragment);
ArrayAdapter<Fragment> adapter = new ArrayAdapter<Fragment>(this, R.layout.tile_item, fragList);
listItems.setAdapter(adapter);
Here's my mode of thinking on this. I make an ArrayList of Fragments to hold all of my instantiated Views. I then create a Fragment, create a Bundle, add data to the Bundle (so that the Fragment can marshal data into it's Views correctly), add the Bundle to the Fragment, then finally add the Fragment to the ArrayList. After that, I make an ArrayAdapter, add the element layout I want to use, and the list of Fragments I've made; then set the ListView to read from my adapter.
Anyone running this code will likely get the NPE # instantiating the ArrayAdapter. What gives? Is this even possible? Before I keep racking my brain on this can someone tell me if I'm just wasting my time? Is there a better way? I've been thinking of using a ScrollView, but so much of the functionality of a ListView would need to re-implemented and I hate-hate-hate reinventing the wheel when it's not necessary.
Thanks to anyone reading, and especially thank you for your thoughts if you decide to leave them. I've tried searching around for an established answer to this but all I seem to find are questions/web pages concerning using a ListView INSIDE of a Fragment; not using Fragments AS THE ELEMENTS of a ListView
Edit: I took the suggestions below and started investigating more. From the way things appear I should be able to use a custom adapter that inflates fragments instead of just flat out building from XML (for lack of a better way to describe the process) However, my current implementation is throwing an NPE when trying to set the adapter.
Here is my custom adapter code (shortened for brevity):
public class AdapterItem extends ArrayAdapter<Fragment> {
Context c;
List<Fragment> f;
public AdapterItem(Context c, List<Fragment> f) {
super(c, R.layout.tile_item, f);
this.c = c;
this.f = f;
}
#Override
public View getView(int pos, View v, ViewGroup vg) {
LayoutInflater i = (LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
return i.inflate(R.layout.tile_item, vg, false);
}
}
and here is how I'm implementing it:
ArrayList<Fragment> fragList = new ArrayList<Fragment>();
Fragment fragment = Fragment.instantiate(this, TileItem.class.getName());
Bundle bundle = new Bundle();
bundle.putInt("key", 0);
fragment.setArguments(bundle);
fragList.add(fragment);
AdapterItem adapter = new AdapterItem(this, fragList);
adapter.add(fragment);
listItems.setAdapter(adapter);
So it's been a few days and I'm pretty sure this thread has been buried. However, I thought I would add one last update just in case someone wants to try this and a google search brings them here. So in my implementation I'm getting an NPE when the ListView is given the adapter. It doesn't take a rocket surgeon to figure out that it's certainly the adapter and not the ListView throwing the error. For the life of me I can't figure out why though...
At any rate, I think I have some idea though. First, a little back story: A while back I was trying to make FragmentTransactions inside of a FragmentDialog. Everytime I attempted to do so, I would get an NPE. Eventually, through much research, I discovered that the reason pertained to the way that Fragments are instanced. When a Fragment is called it needs the context from it's parent. Since a Dialog's parent is the Activity that started it, the Dialog itself didn't meet the criteria necessary. I believe, that when attempting to add fragments to a ListView, this is also the case. Since the ListView doesn't meet the agreement with instancing a Fragment it throws the NPE and thus, leaves me hanging and going back to conventions. D#mn...I had really hoped I would be able to do this. Using Fragments instead of simple XML would have made it so much easier to organize/search through the list. Oh well... guess it can't be done in case anyone is wondering.

I'd say this is not possible to do as putting a fragment in a ListView would mean the fragment can be multiplied across multiple containers. When you use the FragmentManager to create a fragment, it is tagged with an identifier, making it simple to reload and rearrange on orientation and other configuration changes. It also encourages uses across multiple device configs.
A Fragment is really a subset of an Activity. Would you ever have an Activity as part of a list? Definitely not (should be the answer!)!!!
Moreover, it is not very useful to attach() and detach() a fragment continuously as they move in and out of view (cells get recycled). These are all expensive operations that a ListView shouldn't deal with. Lists should scroll quickly.
From the conversation on the comments, I can see you want to achieve nice code with a good separation of view setup code and adapter in the Activity. Do so with either:
Override the View class and do your custom drawing and setup there.
Create a new class, in which you supply a context and data set required for it to get you back the view a list needs to show - this is what I usually do.
Have a Utils class to build your video elsewhere (silly).
Just don't use Fragments in Lists. Not the use case they are aiming for. HTH.

It turns out that you can create a ListView where each item in the listView is a Fragment. The trick is wrapping the Fragment in a FrameLayout.
UPDATE 9/16/2014
Even though it is possible to create a ListView that contain Fragments, it doesn't look like it's a good idea. This seems to definitely be a corner case in the Android world and there be dragons. For a simple fragment like the one in the example below everything works beautifully, but if you have a complex project with a lot going on in it then this is probably not the way to go. My new approach is to pull all of the GUI related code into a View that extends FrameLayout, and insert that into a the ListView -- this works MUCH BETTER and is more in line with how Android expects to be used. If you need the functionality of a Fragment in other parts of your code, you can simply use this new View there too.
Back to the original answer...
I've added a new ManyFragments example to my AnDevCon 14 Fragments example app if you want to try it out. Essentially it comes down the the BaseAdapter, which in my example looks like this:
BaseAdapter adapter = new BaseAdapter() {
#Override public int getCount() { return 10000; }
#Override public Object getItem(int i) { return new Integer(i); }
#Override public long getItemId(int i) { return i; }
#Override
public View getView(int i, View view, ViewGroup viewGroup) {
if (view!=null){
ManyListItemFragment fragment = (ManyListItemFragment) view.getTag();
fragment.setCount(i);
} else {
FrameLayout layout = new FrameLayout(getActivity());
layout.setLayoutParams(frameLayoutParams);
int id = generateViewId();
layout.setId(id);
ManyListItemFragment fragment = new ManyListItemFragment();
fragment.setCount(i);
getChildFragmentManager()
.beginTransaction()
.replace(id,fragment)
.commit();
view = layout;
view.setTag(fragment);
}
return view;
}
};
In case you're curious here's generateViewId():
#TargetApi(Build.VERSION_CODES.JELLY_BEAN_MR1)
public static int generateViewId() {
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN_MR1) {
for (;;) {
final int result = sNextGeneratedId.get();
// aapt-generated IDs have the high byte nonzero; clamp to the range under that.
int newValue = result + 1;
if (newValue > 0x00FFFFFF) newValue = 1; // Roll over to 1, not 0.
if (sNextGeneratedId.compareAndSet(result, newValue)) {
return result;
}
}
} else {
return View.generateViewId();
}
}
private static final AtomicInteger sNextGeneratedId = new AtomicInteger(1);

You don't need to use Fragments.
Write a custom ViewAdapter and have it inflate a more complex layout (or maybe several more complex layouts if you need to get really fancy) then populate the fields of the layout as necessary.
[Aside: to the people who answered in comments -- please use answers rather than comments if you are actually answering the question! If only because you get more reputation points that way!]