Develop Reference

Swiping through Bitmap Images by using a ViewPager

I'm trying to create an app where I can swipe through photos. I currently have the images saved as bitmaps. How can I use ViewPager to swipe through the images? (Preferably without Picasso or Glide)

You said you have the bitmaps, store it in arraylist. First, make an Adapter for your ViewPager.
public class AdapterPagerImageSlider extends PagerAdapter {
private ArrayList<Bitmap> bitmaps;
private Context context;
private LayoutInflater layoutInflater;
public AdapterPagerImageSlider(Context context, ArrayList<Bitmap> bitmaps) {
this.context = context;
this.bitmaps= bitmaps;
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = layoutInflater.inflate(R.layout.inflater_imageslider, container, false);
ImageView imageView = view.findViewById(R.id.image);
imageView.setImageBitmap(bitmaps.get(position)); //this set image from bitmap
container.addView(view);
return view;
}
#Override
public int getCount() {
return bitmaps.size();
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((LinearLayout) object);
}
#Override
public boolean isViewFromObject(#NonNull View view, #NonNull Object o) {
return (view == o);
}
}
Then, make a layout and name it inflater_imageslider
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
Last, declare that adapter and set it to your ViewPager.
ArrayList<Bitmap> bitmaps = new ArrayList<>();
//code of storing your bitmaps to arraylist here : bitmaps.add(yourbitmap);
ViewPager vp = findViewById(R.id.vp);
AdapterPagerImageSlider adapter = new AdapterPagerImageSlider(MainActivity.this, bitmaps);
vp.setAdapter(adapter);
Hope it helps.

Android ViewPager loading same images

I am using ViewPager to load images from server.When it is swiped the first image is shown again and again.I checked the urls in the browser and it shows different images.I then tried loading images from drawable.Here the last image is being loaded repeatedly.Below is the complete code:
ImagePagerAdapter.java:
public class ImagePagerAdapter extends PagerAdapter {
TaxiDisplayData taxiDisplayData;
LinearLayout pager_lyt;
ImageView imageView;
LayoutInflater layoutInflater;
Context context;
String category;
int count;
LinearLayout linearLayout;
View view;
ImageLoaderConfiguration config;
ArrayList images;
public ImagePagerAdapter(Context context,String ctgry){
Log.e("I","T");
config = new ImageLoaderConfiguration.Builder(context).build();
ImageLoader.getInstance().init(config);
images =new ArrayList();
this.context=context;
this.category=ctgry;
if (category.equalsIgnoreCase("taxi")){
count= taxiDisplayData.getInstance().imagecount();
}
layoutInflater=(LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
#Override
public int getCount() {
Log.e("Count",Integer.toString(count));
return count;
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
view=layoutInflater.inflate(R.layout.srch_dsply_pager,container,false);
linearLayout=(LinearLayout) view.findViewById(R.id.pgr_lyt);
imageView=(ImageView) view.findViewById(R.id.image1);
if (category.equalsIgnoreCase("taxi"))
{ images =taxiDisplayData.getInstance().getArrayList();
if(count!=0){
Iterator iterator= images.iterator();
while (iterator.hasNext())
{
Log.e("I","Z");
Picasso.with(context).load("http://example.com/xxxx/"+(String) iterator.next())
.placeholder(R.drawable.doctors)
.fit().into(imageView);
}
}}
container.addView(view);
return view;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View)object);
}
#Override
public boolean isViewFromObject(View view, Object object) {
Log.e("I","f");
return view==object;
}}
srch_dsply_pager.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/pgr_lyt">
<ImageView
android:layout_width="match_parent"
android:layout_height="#dimen/prsnl_img_dimen"
android:id="#+id/image1"
android:scaleType="fitXY"
/>
</LinearLayout>

instantiateItem() Creates one view and adds it in the view pager. In your source you are iterating trough the whole array, load only the last one and return the view. Instead the while you should have something like
String url = images.get(position);
Picasso.load(url).into(imageview);

View Pager and Credit Card View

I have a viewPager that implemented for viewing credit cards. In this viewPager placed a imageView with TextViews to have the card image and attributes. I had not yet aware that credit card design git (https://github.com/sharish/CreditCardView) and started to use it. But when I try to set the attributes, it falls into default and not the arrow attributes. (It worked normally with the text view). I'm using a list of the cards, he constroe view the pager with the amount of cards I have but not to set the values (all created cards are equal), that is, it esa not putting it on the list. Am I doing right?
PagerView.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_below="#+id/pager"
android:layout_centerHorizontal="true"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
>
<com.cooltechworks.creditcarddesign.CreditCardView
android:id="#+id/card_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:card_expiration="01/17"
/>
</RelativeLayout>
AdapterCard.java
public class AdapterCards extends android.support.v4.view.PagerAdapter {
Context context;
private List<Card> listCards = new ArrayList<>();
public AdapterCards(Context context, List<Card> listCards){
this.context = context;
this.listCards = listCards;
}
#Override
public int getCount() {
return listCards.size();
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
#Override
public Object instantiateItem(ViewGroup container, int position){
LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View itemView = layoutInflater.inflate(R.layout.pagecards, container, false);
CreditCardView creditCardView = new CreditCardView(context);
creditCardView.setCardExpiry(listCards.get(position).cardValid);
container.addView(itemView);
return itemView;
}
#Override
public void destroyItem(ViewGroup container, int position, Object view){
container.removeView((View)view);
}
}

ViewPager with PagerAdapter Not working

I'm trying to show images from Drawable in view pager using PagerAdapter for that, I have written below code--
// Call to the PagerAdapter
public void showAwardsBadgesAlert()
{
// custom dialog
final Dialog dialog = new Dialog(context, R.style.MyAlertDlgTheme);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setContentView(R.layout.awards_badges_dlg_layout);
dialog.setCanceledOnTouchOutside(false);
dialog.setCanceledOnTouchOutside(true);
ViewPager awardsBadgesPager = (ViewPager) dialog.findViewById(R.id.awardsBadgesPager);
AwardsBadgesAdapter awardsBadgesAdapter = new AwardsBadgesAdapter(context, feedObject.getAwardStatistics().getAwardsBdgesList());
awardsBadgesPager.setAdapter(awardsBadgesAdapter);
dialog.show();
}
// Below is my Adapter Class--
public class AwardsBadgesAdapter extends PagerAdapter
{
private Context context;
private ArrayList<AwardsBadges> awardsList;
public AwardsBadgesAdapter(Context context, ArrayList<AwardsBadges> awardsList)
{
this.context = context;
this.awardsList = awardsList;
}
#Override
public int getCount()
{
if(awardsList != null)
{
return awardsList.size();
}
return 0;
}
#Override
public boolean isViewFromObject(View view, Object object)
{
return view == object;
}
#Override
public Object instantiateItem(final View container, final int position)
{
LayoutInflater inflater = (LayoutInflater) this.context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View layout = inflater.inflate(R.layout.awards_badges_dlg_item, null);
ImageView ivAwards = (ImageView) layout.findViewById(R.id.ivAwardsBadges);
AwardsBadges currBadge = awardsList.get(position);
if(currBadge.getImageName()!=null && currBadge.getImageName().equalsIgnoreCase("pink star diamond"))
{
Picasso.with(context).load(R.drawable.pinkstar).into(ivAwards);
}
else if(currBadge.getImageName()!=null && currBadge.getImageName().equalsIgnoreCase("tanzanite"))
{
Picasso.with(context).load(R.drawable.tanzanite).into(ivAwards);
}
else if(currBadge.getImageName()!=null && currBadge.getImageName().equalsIgnoreCase("painite"))
{
Picasso.with(context).load(R.drawable.painite).into(ivAwards);
}
else if(currBadge.getImageName()!=null && currBadge.getImageName().equalsIgnoreCase("taaffeite"))
{
Picasso.with(context).load(R.drawable.taaffeite).into(ivAwards);
}
return layout;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object)
{
((ViewPager) container).removeView((View) object);
}
#Override
public float getPageWidth(int position)
{
return (0.33f);
}
}
// Below is my dialog 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.support.v4.view.ViewPager
android:id="#+id/awardsBadgesPager"
android:layout_width="match_parent"
android:layout_height="#dimen/sz_seventy"
android:layout_below="#+id/txtPlace"
android:layout_margin="10dp"
android:background="#color/tipstransperent"
android:padding="10dp"
android:visibility="visible" >
</android.support.v4.view.ViewPager>
</RelativeLayout>
// Below is ViewPager Item 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:padding="5dp" >
<ImageView
android:id="#+id/ivAwardsBadges"
android:layout_width="#dimen/sz_fifty"
android:layout_height="#dimen/sz_fifty"
android:layout_centerInParent="true" />
</RelativeLayout>
// Below is the screen shot explaining currently how it is showing empty ViewPager--
When I debug the app everything seems fine but don't know why Images are not getting displayed in ViewPager. Please Help..

First, you should be overriding the instantiateItem() method with ViewGroup as the first parameter, not the one with View as the first parameter. The latter is deprecated.
Then, you need to add your inflated View to the container in the PagerAdapter's instantiateItem() method. Quoting the docs for the instantiateItem() method:
The adapter is responsible for adding the view to the container given here
Simply add container.addView(layout); to the instantiateItem() method, before the return statement.

((ViewPager) container).addView(layout);
Add above statement in your instantiateItem() method, before the return statement. This will surely help you.

Image slider using View Pager issue

I have an activity which contains a listView. Each item of the listView contains a swipeable set of images (which I have unsuccessfully tried to implement using a ViewPager).
My issue is this: when I try to implement a simple image slider using a view pager (i.e. Activity contains a ViewPager, and the View Pager's adapter supplies the images), the output is as expected, but if I try doing what I have mentioned in the previous paragraph (i.e. The Activity contains a listView and each item of the listView is a ViewPager which displays a swipeable set of images), I get a blank output. Please help me out! I have posted some code below:
MainActivity.java
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ListView list = (ListView) findViewById(R.id.stylistDisplay);
//To keep things simple I am sending only one item of the list to the adapter
list.setAdapter(new StylistAdapter(Cart.getList().get(0), this));
}
static class StylistAdapter extends BaseAdapter {
Stylist stylistObj;
Context context;
LayoutInflater inflater;
public StylistAdapter(Stylist obj, Context context) {
this.stylistObj = obj;
this.context = context;
inflater = ((Activity)this.context).getLayoutInflater();
}
#Override
public int getCount() {
return 1;
}
#Override
public Object getItem(int position) {
return stylistObj;
}
#Override
public long getItemId(int position) {
return position;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
final ViewItem item;
if (convertView == null) {
convertView = inflater.inflate(R.layout.stylist_photos_view_pager, null);
item = new ViewItem();
item.photosViewPager = (ViewPager) convertView.findViewById(R.id.photos_view_pager);
convertView.setTag(item);
} else {
item = (ViewItem) convertView.getTag();
}
PhotosAdapter adapter = new PhotosAdapter(context);
item.photosViewPager.setAdapter(adapter);
return convertView;
}
private class ViewItem {
ViewPager photosViewPager;
}
}
activity_main.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.temp.customer.MainActivity">
<ListView
android:id="#+id/stylistDisplay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#android:color/transparent"
android:background="#color/backGround"
android:padding="13.3dp"
android:clickable="true"
android:dividerHeight="5dp" />
</FrameLayout>
stylist_photos_view_pager
<RelativeLayout xmlns:android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".MainActivity" >
<android.support.v4.view.ViewPager
android:id="#+id/photos_view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
PhotosAdapter.java
public class PhotosAdapter extends PagerAdapter {
private Context context;
private int[] GalImages = new int[] {
R.drawable.one,
R.drawable.two,
R.drawable.three
};
public PhotosAdapter(Context context) {
this.context = context;
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
LayoutInflater inflater = ((Activity)context).getLayoutInflater();
View viewItem = inflater.inflate(R.layout.stylist_individual_details, container, false);
ImageView imageView = (ImageView) viewItem.findViewById(R.id.iv1);
imageView.setImageResource(GalImages[position]);
TextView textView1 = (TextView) viewItem.findViewById(R.id.tv1);
textView1.setText("hello world");
((ViewPager)container).addView(viewItem);
return viewItem;
}
#Override
public int getCount() {
return 3;
}
#Override
public boolean isViewFromObject(View view, Object object) {
boolean temp = view == ((LinearLayout) object);
return temp;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager) container).removeView((LinearLayout) object);
}
}

I've experienced similar issue, and have to say that it is a bad idea to use ViewPager as a listItem, since ViewPager is supposed to be used for fragments primarily.
I guess that your functionality should be similar to some horizontal pictures, on the main feed which is vertical. You can think of using horizontal scroll views which is a bit of a pain, but still more realistic to do that. You might also end up managing your own scrolling behavior, which might already be implemented by some libraries.
BUT I MIGHT BE WRONG!
This thread has a similar issue:
Placing ViewPager as a row in ListView

After reading around for a while I tried explicitly setting the height of the viewPager and its parent. This worked for me.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="200dip"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="200dip" >
</android.support.v4.view.ViewPager>
</LinearLayout>
I don't know if there is a better solution, but if you do get a better solution please comment!