I am trying to implement a scroller like show in the image below.
I have tried using viewpager but it only shows one item at a time. And I need to show 5 of them and of different sizes. The one in middle needs to be bigger.
Each Item is a frameLayout that contains an ImageView and a TexView, I dont have any problem implementing that part. The problem is it needs to be a scroller and have many items in scroller e.g upto 15 maybe. But should have only 5 items visible at any one time just like shown below. I have tried many implementations. Please some one give me a working example as I have already tried many examples none of them works perfectly. I have waisted more than a week on this one.
You can control it by overriding getPageWidth() in the PagerFragmentAdapter:
#Override
public float getPageWidth(int position) {
return(0.4f);
}
and making sure the size of your images is not too large, so that the page width fits multiple images.
Here are all the steps to set this up:
1) Add a fragment container to your activity layout, where you will load the PhotoPagerFragment:
<!-- PHOTO PAGER FRAGMENT -->
<FrameLayout
android:id="#+id/photoPagerFragmentContainer"
android:layout_width="match_parent"
android:layout_height="150dp"
android:tag="sticky"
android:layout_gravity="center_horizontal" >
</FrameLayout>
2) Inject the PhotoPagerFragment in your activity's onCreate():
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_layout);
//Insert the fragment
FragmentManager fm = getSupportFragmentManager();
Fragment fragment = fm.findFragmentById(R.id.photoPagerFragmentContainer);
if (fragment == null) {
fragment = new PhotoPagerFragment();
fm.beginTransaction()
.add(R.id.photoPagerFragmentContainer, fragment)
.commit();
}
}
3) Create a layout for your PhotoPagerFragment:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/black"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="#+id/photoPager"
android:layout_width="fill_parent"
android:layout_height="120dp"
android:layout_marginTop="2dp"/>
</LinearLayout>
4) Create your PhotoPagerFragment:
public class PhotoPagerFragment extends Fragment {
private ViewPager mPhotoPager;
private PagerAdapter mPhotoAdapter;
public static final String TAG = "PhotoPagerFragment";
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_photo_pager, container, false);
mPhotoAdapter = new PhotoPagerFragmentAdapter(getActivity().getSupportFragmentManager());
mPhotoPager = (ViewPager) view.findViewById(R.id.photoPager);
mPhotoPager.setAdapter(mPhotoAdapter);
return view;
}
}
5) And the adapter:
public class PhotoPagerFragmentAdapter extends FragmentPagerAdapter {
private int[] Images = new int[] {
R.drawable.photo_1, R.drawable.photo_2,
R.drawable.photo_3, R.drawable.photo_4,
R.drawable.photo_5, R.drawable.photo_6
};
private int mCount = Images.length;
public PhotoPagerFragmentAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
return PhotoDetailsFragment.newInstance(Images[position]);
}
#Override
public int getCount() {
return mCount;
}
#Override
public float getPageWidth(int position) {
return(0.4f);
}
public void setCount(int count) {
if (count > 0 && count <= 10) {
mCount = count;
notifyDataSetChanged();
}
}
}
6) And finally, your PhotoDetailsFragment that will show each image:
public final class PhotoDetailsFragment extends Fragment {
private int photoResId;
private static final String TAG = "PhotoDetailsFragment";
public static final String EXTRA_PHOTO_ID = "com.sample.photo_res_id";
public static PhotoDetailsFragment newInstance(int photoResId) {
Bundle args = new Bundle();
args.putSerializable(EXTRA_PHOTO_ID, photoResId);
PhotoDetailsFragment fragment = new PhotoDetailsFragment();
fragment.setArguments(args);
return fragment;
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
photoResId = (Integer)getArguments().getSerializable(EXTRA_PHOTO_ID);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
final ImageView image = new ImageView(getActivity());
image.setImageResource(photoResId);
// Hook up the clicks on the thumbnail views
image.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
...
}
});
LinearLayout layout = new LinearLayout(getActivity());
layout.setLayoutParams(new LayoutParams(-1, -1));
layout.setGravity(Gravity.CENTER);
layout.addView(image);
return layout;
}
}
Related
Although I can scroll in the ViewPager, the physical fragments themselves are not visible for some reason.
FYI - I have an Activity with tabs using a ViewPager. Inside the first tab/fragment, I have the code below. So essentially, I have an App with a ViewPager controlling the tabs and there's another ViewPager inside one of the Tabs which is to control a bunch of images. I have tested the Fragment in question by putting it inside the top level view pager and it works perfectly fine! It's only when I put it inside the view pager in question does it not render anything...
So, this is the hierarchy for a better understanding:
MainActivity has a ...
ViewPager (3 fragments showing the tab content) has a ...
1st TabFragment has a ...
ViewPager (3 fragments showing images) <--- I can't see these, but I can swipe on them for some reason.
Unfortunately... None of the Fragments are visible, HOWEVER... I can still swipe for some reason to the last fragment...Just nothing is visibly shown...
Layout with the ViewPager inside:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
Code with ViewPager
final List<Fragment> imageFragments = new ArrayList<>();
for (final UserImage userImage : user.getImages()) {
final SizeImage processed = userImage.getProcessed();
imageFragments.add(UserImageFragment.newInstance(processed.getFullsize()));
}
final ImagesPagerAdapter imagesAdapter = new ImagesPagerAdapter(getFragmentManager(), imageFragments);
viewPager.setAdapter(imagesAdapter);
The PagerAdapter:
public class ImagesPagerAdapter extends FragmentStatePagerAdapter {
#NonNull
private List<Fragment> fragments;
public ImagesPagerAdapter(#NonNull final FragmentManager fragmentManager,
#NonNull final List<Fragment> fragments) {
super(fragmentManager);
this.fragments = fragments;
}
#Override
public Fragment getItem(final int position) {
return fragments.get(position);
}
#Override
public int getCount() {
return fragments.size();
}
}
The Fragment:
public class UserImageFragment extends Fragment {
#BindView(R.id.image_view)
ImageView imageView;
public static UserImageFragment newInstance(final String url) {
final UserImageFragment fragment = new UserImageFragment();
Bundle args = new Bundle();
args.putString("url", url);
fragment.setArguments(args);
return fragment;
}
#Nullable
#Override
public View onCreateView(LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
final View view = inflater.inflate(R.layout.fragment_user_image, container, false);
ButterKnife.bind(this, view);
final Bundle arguments = getArguments();
if (arguments != null) {
final String url = arguments.getString("url", null);
if (url != null) {
final Uri uri = Uri.parse(url);
Picasso.with(getActivity()).load(url).into(imageView, new Callback() {
#Override
public void onSuccess() {
Toast.makeText(getActivity(), "Success", Toast.LENGTH_SHORT).show();
}
#Override
public void onError() {
Toast.makeText(getActivity(), "Fail", Toast.LENGTH_SHORT).show();
}
});
}
}
return view;
}
}
And here is xml code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/md_red_900">
<ImageView
android:id="#+id/image_view"
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#color/md_yellow_500" />
</RelativeLayout>
To show Fragments inside another Fragment, use getChildFragmentManager() instead of getFragmentManager()
final ImagesPagerAdapter imagesAdapter = new
ImagesPagerAdapter(getChildFragmentManager(), imageFragments);
viewPager.setAdapter(imagesAdapter);
It may not be obvious at first sight but don't try to cache or prepare fragments for a fragment adapter. Fragment(State)PagerAdapter.getItem has to return a new item and when the method is called is managed internally by the adapter.
Let the fragment adapter have data it needs to construct fragments at the right time:
final List<UserImage> userImages = user.getImages();
final ImagesPagerAdapter imagesAdapter = new ImagesPagerAdapter(getFragmentManager(), userImages);
viewPager.setAdapter(imagesAdapter);
And implement the fragment adapter so that getItem returns a new fragment:
public class ImagesPagerAdapter extends FragmentStatePagerAdapter {
#NonNull
private List<UserImage> userImages;
public ImagesPagerAdapter(#NonNull final FragmentManager fragmentManager,
#NonNull final List<UserImage> userImages) {
super(fragmentManager);
this.userImages = userImages;
}
#Override
public Fragment getItem(final int position) {
final UserImage userImage = userImages.get(position);
final SizeImage processed = userImage.getProcessed();
return UserImageFragment.newInstance(processed.getFullsize())
}
#Override
public int getCount() {
return userImages.size();
}
}
Here I see two options for improvement:
Replace List<UserImage> with List<SizeImage> or List<whatever getFullSize returns>. The less implementation details you leak to the adapter the better.
If userImage.getProcessed().getFullsize() takes time (accesses disk, performs computation) do that asynchronously in one of UserImageFragment lifecycle methods - defer to when it's needed and don't block UI thread.
Neither FragmentPagerAdapter nor FragmentStatePagerAdapter are built with updates in mind so
Don't try to modify the userImages list.
If the images change replace and reattach the whole adapter.
Recently started with Android development and am in the process of creating a screen slide that would appear after selecting an image that is part of a gallery (grid view). I followed the Android Tutorial here however the problem that I am running into is the ViewPager doesn't seem to work (logs in the activity aren't printing out), and the only thing I see in the new fragment is some text.
Below I have included the code, and any assistance would be appreciated!
This is where the initial call from the gallery is made to show the slider goToGallerySlider()
PhotoGalleryFragment.java
public class PhotoGalleryFragment extends BaseFragment {
private static final String TAG = PhotoGalleryFragment.class.getSimpleName();
public static final String EVENT_ID_EXTRA = "EventDetailFragment.EventIdExtra";
private GridView grid;
public List<EventPhoto> eventDetailPhotoList;
#Bind(R.id.photoRoll)
GridView photoRoll;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_event_detail_photo_gallery, container, false);
grid = (GridView) view.findViewById(R.id.photoRoll);
Context aContext = getActivity().getBaseContext();
grid.setAdapter(new PhotoGalleryAdapter(aContext, eventDetailPhotoList));
grid.setOnItemClickListener((parent, v, position, id) ->
goToGallerySlider(parent, v, position, id));
return view;
}
#Override
public int getTitleResourceId() {
return R.string.photo_gallery;
}
private void goToGallerySlider(ViewGroup parent, View v, int position, long id) {
Log.d(TAG, "!!!We are in the goToGallerySlider() call function!");
GallerySliderFragment sliderFragment = new GallerySliderFragment();
sliderFragment.eventDetailPhotoList = eventDetailPhotoList;
getBaseActivity().setFragment(sliderFragment, true);
}
}
fragment_photo_gallery_slider.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView style="?android:textAppearanceMedium"
android:id="#+id/textView_in_slider_fragment"
android:padding="16dp"
android:lineSpacingMultiplier="1.2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/lorem" />
</RelativeLayout>
activity_photo_gallery_slider.xml
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
GallerySliderFragment.java
public class GallerySliderFragment extends BaseFragment {
private static final String TAG = GallerySliderFragment.class.getSimpleName();
public List<EventPhoto> eventDetailPhotoList;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
Log.d(TAG, "!!!We are inside the onCreate in GallerySliderFragment");
ViewGroup view = (ViewGroup) inflater.inflate(R.layout.fragment_event_detail_photo_gallery_slider, container, false);
((AngelPointsApplication) getActivity().getApplication()).getComponent().inject(this);
ButterKnife.bind(this, view);
return view;
}
public int getTitleResourceId() {return R.string.gallery_slider; }
}
PhotoGalleryActivity.java
public class PhotoGalleryActivity extends BaseActivity {
private static final String TAG = PhotoGalleryFragment.class.getSimpleName();
private ViewPager mPager;
private PagerAdapter mPagerAdapter;
private static final int NUM_PAGES = 5;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Log.d(TAG, "!!!We are in the onCreate in PhotoGalleryActivity");
setContentView(R.layout.activity_event_detail_photo_gallery_slider);
mPager = (ViewPager) findViewById(R.id.viewPager);
mPagerAdapter = new ScreenSlidePagerAdapter(getSupportFragmentManager());
mPager.setAdapter(mPagerAdapter);
}
public void onBackPressed() {
if (mPager.getCurrentItem() == 0) {
Log.d(TAG, "!!!In PhotoGalleryActivity user pressed BACK Button on 1st Image");
super.onBackPressed();
} else {
Log.d(TAG, "!!!In PhotoGalleryActivity user pressed BACK Button to see previous photo");
mPager.setCurrentItem(mPager.getCurrentItem() - 1);
}
}
/**
* A simple pager adapter that represents 5 ScreenSlidePageFragment objects, in
* sequence.
*/
private class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter {
public ScreenSlidePagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public android.support.v4.app.Fragment getItem(int position) {
Log.d(TAG, "!!!In PhotoGalleryActivity get next item position");
return new GallerySliderFragment();
}
#Override
public int getCount() {
Log.d(TAG, "!!!In PhotoGalleryActivity get count: " + NUM_PAGES);
return NUM_PAGES;
}
}
}
I am using ViewpagerIndicator library for sliding app intro images.
The way I do it:
1) Create 2 Fragments with background as the intro images. These images match the parents in width and height.
2) Create a fragment activity and pop these 2 fragments into the activity.
The problem:
Upon swiping horizontally, the fragments get swiped too slowly. I feel something is wrong with images occupying the whole view. But I am unable to figure out the problem.
Here is my FragmentActivity:
public class DemoActOne extends FragmentActivity{
public DemoFragAdapter mAdapter;
public ViewPager mPager;
public PageIndicator mIndicator;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.simple_lines);
mAdapter = new DemoFragAdapter(getSupportFragmentManager());
mPager = (ViewPager)findViewById(R.id.pager);
mPager.setAdapter(mAdapter);
mIndicator = (LinePageIndicator)findViewById(R.id.indicator);
mIndicator.setViewPager(mPager);
}
}
Here is my DemoFragAdapter:
public class DemoFragAdapter extends FragmentPagerAdapter {
private int mCount = 2;
public DemoFragAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
if (position == 0) {
return DemoOne.newInstance();
}
else {
return DemoTwo.newInstance();
}
}
#Override
public int getCount() {
return mCount;
}
}
Here is DemoOne fragment - DemoTwo is same except for the relative layout background image I load.
public class DemoOne extends Fragment {
private View mReturnView;
public static DemoOne newInstance() {
DemoOne fragment = new DemoOne();
return fragment;
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
mReturnView = inflater.inflate(R.layout.demo_one, container, false);
return mReturnView;
}
}
Here is demo_one.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/demo1"
android:clickable="false">
</RelativeLayout>
Why am I not able to swipe comfortably?
Edit: Image sizes are 1280 X 1920 - if that helps.
I think your problem might be solved if you 9 patch those images...
Here is the link where you can do that online :
Android Asset Studio - 9 Patch Generator
I am trying to create a ViewPager which contains 5 fragments.
5 fragments "container", so each of them contain 2 fragments.
The 4 first fragments have the same layout and belong to the same class. The fifth is from an other class, and there is no problem with that one.
The problem is that when the activity launches, only 1 fragment seem to be working (the one at position 0 in viewPager). I tried to return new Fragment() at position 0 in my PagerAdapter, but when I do that it's the 2nd fragment that is working. (By working i mean displaying the list on the left, I still haven't taken care of the details fragment on the right)
Here is some code
CustomPagerAdapter.java
public class CustomPagerAdapter extends FragmentPagerAdapter{
public CustomPagerAdapter(FragmentManager fm) {
super(fm);
}
public CustomPagerAdapter(FragmentManager fm, Context context) {
super(fm);
}
#Override
public Fragment getItem(int pos) {
if(pos == 4)
return new OtherContainerFragment();
else
return new ContainerFragment(pos);
}
#Override
public int getCount() {
return 5;
}
ContainerFragment.java
public class ContainerFragment extends Fragment {
private int CONTAINER_TYPE;
public ContainerFragment(){
}
public ContainerFragment(int type){
CONTAINER_TYPE = type;
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_container, container, false);
}
#Override
public void onViewCreated(View view, Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
FragmentTransaction ft = getActivity().getSupportFragmentManager().beginTransaction();
CustomListFragment frag = new CustomListFragment(CONTAINER_TYPE);
ft.replace(R.id.replaceable_list, frag);
ft.commit();
CustomListFragment.java
public class CustomListFragment extends SuperCustomListFragment{
private ArrayList<Model> mModels;
private int TYPE;
public CustomListFragment(){
}
public CustomListFragment(int type){
TYPE = type;
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return super.onCreateView(inflater, container, savedInstanceState);
}
#Override
public void onViewCreated(View view, Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
mModels = new ArrayList<Model>();
if(TYPE == AppConstants.FRAGMENT_TYPE_JOURNAL){
mAdapter = AppUtils.getJournalListAdapter(getActivity(), mModels);
new syncPapers().execute();
}else if(TYPE == AppConstants.FRAGMENT_TYPE_MOVIES){
mAdapter = AppUtils.getMoviesListAdapter(getActivity(), mModels);
new syncMovies().execute();
}
if(mAdapter != null)
mListView.setAdapter(mAdapter); //mListView is defined in the superClass
Here are the constants I use :
public class AppConstants {
public static final int FRAGMENT_TYPE_AGENDA = 0; //so Fragment at position 0 should be of type agenda
public static final int FRAGMENT_TYPE_NEWS = 1; // position 1 should be of type news
public static final int FRAGMENT_TYPE_MOVIES = 2; // ...
public static final int FRAGMENT_TYPE_JOURNAL = 3; // ...
}
And the xml for the container :
<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:id="#+id/replaceable_list"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</LinearLayout>
<LinearLayout
android:id="#+id/replaceable_details"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/background" >
</LinearLayout>
</LinearLayout>
SO this code is not working, it seems that the list on the left in the fragment container is replaced in each fragment, and only the fragment at position 0 displays it. (Currently it displays the list with the adapter of type "JOURNAL", but it should display list of type "AGENDA".
--------------------
*BUT !...*
--------------------
If I create different fragment_container layout-files, and write IF conditions in the onCreateView and onViewCreated in the ContainerFragment.java, everything works fine.
So :
ContainerFragment.java
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
if(CONTAINER_TYPE == AppConstants.FRAGMENT_TYPE_JOURNAL)
return inflater.inflate(R.layout.fragment_container_journal, container, false);
else if(CONTAINER_TYPE == AppConstants.FRAGMENT_TYPE_MOVIES)
return inflater.inflater(R.layout.fragment_container_movies, container, false);
else
return super.onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState);
}
#Override
public void onViewCreated(View view, Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
FragmentTransaction ft = getActivity().getSupportFragmentManager().beginTransaction();
CustomListFragment frag = new CustomListFragment(CONTAINER_TYPE);
if(CONTAINER_TYPE == AppConstants.FRAGMENT_TYPE_JOURNAL)
ft.replace(R.id.replaceable_journal_list, frag);
else if(CONTAINER_TYPE == AppConstants.FRAGMENT_TYPE_MOVIES)
ft.replace(R.id.replaceable_movies_list, frag);
else
return;
ft.commit();
I guess that's because in each fragment, I replace the LinearLayout of the same ID ? (replaceable_list)
I thought it was possible to share the same layout file for every fragments and didn't want to create 4 layout-files that would be the same. But it looks like I must do so ?
Or am I missing something here ?
Thank you for your time,
Though a very late response but I was facing same kind of issue and I fixed the issue by using
getChildFragmentManager().beginTransaction()
instead of
getActivity().getSupportFragmentManager().beginTransaction()
As in this case we are trying to make transaction from within a fragment (one out of the list of fragments which are attached to the ViewPager, thus the Activity holding the ViewPager) so we have to use getChildFragmentManager() here for desired results.
I was able to solve this by setting the id of the layout that is inflated within each fragment to its position.
What you would have to do is simply change the method onCreateView in you ContainerFragment class to:
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.fragment_container, container, false);
v.setId(CONTAINER_TYPE)
return v;
This works because of the way the FragmentPagerAdapter implementation handles fragment tags.
I am using Jake's ViewPageIndicator and want to display Images like a swipe gallery.
Any refernce link where i can get started. I have implemented the basic viewpager and now want to implement image viewpaper as below
Is it possible to to achieve using ViewPageIndicator ?
In Jake's ViewPageIndicator he has implemented View pager to display a String array (i.e.
["this","is","a","text"]) which you pass from YourAdapter.java (that extends FragmentPagerAdapter) to the YourFragment.java which returns a View to the viewpager.
In order to display something different, you simply have to change the context type your passing. In this case you want to pass images instead of text, as shown in the sample below:
This is how you setup your Viewpager:
public class PlaceDetailsFragment extends SherlockFragment {
PlaceSlidesFragmentAdapter mAdapter;
ViewPager mPager;
PageIndicator mIndicator;
public static final String TAG = "detailsFragment";
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_place_details,
container, false);
mAdapter = new PlaceSlidesFragmentAdapter(getActivity()
.getSupportFragmentManager());
mPager = (ViewPager) view.findViewById(R.id.pager);
mPager.setAdapter(mAdapter);
mIndicator = (CirclePageIndicator) view.findViewById(R.id.indicator);
mIndicator.setViewPager(mPager);
((CirclePageIndicator) mIndicator).setSnap(true);
mIndicator
.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageSelected(int position) {
Toast.makeText(PlaceDetailsFragment.this.getActivity(),
"Changed to page " + position,
Toast.LENGTH_SHORT).show();
}
#Override
public void onPageScrolled(int position,
float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
return view;
}
}
your_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<com.viewpagerindicator.CirclePageIndicator
android:id="#+id/indicator"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dip" />
</LinearLayout>
YourAdapter.java
public class PlaceSlidesFragmentAdapter extends FragmentPagerAdapter implements
IconPagerAdapter {
private int[] Images = new int[] { R.drawable.photo1, R.drawable.photo2,
R.drawable.photo3, R.drawable.photo4
};
protected static final int[] ICONS = new int[] { R.drawable.marker,
R.drawable.marker, R.drawable.marker, R.drawable.marker };
private int mCount = Images.length;
public PlaceSlidesFragmentAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
return new PlaceSlideFragment(Images[position]);
}
#Override
public int getCount() {
return mCount;
}
#Override
public int getIconResId(int index) {
return ICONS[index % ICONS.length];
}
public void setCount(int count) {
if (count > 0 && count <= 10) {
mCount = count;
notifyDataSetChanged();
}
}
}
YourFragment.java
// you need to return image instaed of text from here.//
public final class PlaceSlideFragment extends Fragment {
int imageResourceId;
public PlaceSlideFragment(int i) {
imageResourceId = i;
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
ImageView image = new ImageView(getActivity());
image.setImageResource(imageResourceId);
LinearLayout layout = new LinearLayout(getActivity());
layout.setLayoutParams(new LayoutParams());
layout.setGravity(Gravity.CENTER);
layout.addView(image);
return layout;
}
}
You should get a View pager like this from the above code.
I made a library named AndroidImageSlider, you can have a try.
Image Viewer with ViewPager Implementation, check this project https://github.com/chiuki/android-swipe-image-viewer
Refer this discussion also Swiping images (not layouts) with viewpager
Just use this https://gist.github.com/8cbe094bb7a783e37ad1 for make surrounding pages visible and http://viewpagerindicator.com/ this, for indicator. That's pretty cool, i'm using it for a gallery.
Hoho.. It should be very easy to use Gallery to implement this, using ViewPager is much harder. But i still encourage to use ViewPager since Gallery really have many problems and is deprecated since android 4.2.
In PagerAdapter there is a method getPageWidth() to control page size, but only by this you cannot achieve your target.
Try to read the following 2 articles for help.
multiple-view-viewpager-options
viewpager-container
you can use custom gallery control.. check this https://github.com/kilaka/ImageViewZoom
use galleryTouch class from this..
Hi if your are looking for simple android image sliding with circle indicator you can download the complete code from here http://javaant.com/viewpager-with-circle-indicator-in-android/#.VysQQRV96Hs . please check the live demo which will give the clear idea.
enter code here public Timer timer;
public TimerTask task;
public ImageView slidingimage;
private int[] IMAGE_IDS = {
R.drawable.home_banner1, R.drawable.home_banner2, R.drawable.home_banner3
};
enter code here #Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home_screen);
final Handler mHandler = new Handler();
// Create runnable for posting
final Runnable mUpdateResults = new Runnable() {
public void run() {
AnimateandSlideShow();
}
};
int delay = 2000; // delay for 1 sec.
int period = 2000; // repeat every 4 sec.
Timer timer = new Timer();
timer.scheduleAtFixedRate(new TimerTask() {
public void run() {
mHandler.post(mUpdateResults);
}
}, delay, period);
enter code here private void AnimateandSlideShow() {
slidingimage = (ImageView)findViewById(R.id.banner);
slidingimage.setImageResource(IMAGE_IDS[currentimageindex%IMAGE_IDS.length]);
currentimageindex++;
Animation rotateimage = AnimationUtils.loadAnimation(this, R.anim.custom_anim);
slidingimage.startAnimation(rotateimage);
}
A great One Image slider : https://github.com/daimajia/AndroidImageSlider Check it