I'm trying to make an image pager and it looks like I've done it correct according to all the tutorials that I've looked up, but all I get is a blank screen. A breakpoint on the adapter's instantiateItem method tells me that it is being called and all the right information is getting set into the views, and swiping even works, but I still don't see anything. Here is my code
activity_photos.xml
<RelativeLayout> // I'm not including that code, irrelevant.
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imagePager"
android:background="#android:color/black"/>
</RelativeLayout>
viewpager_itemx.xml
<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:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/imageView"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageLabel"
android:textColor="#android:color/white"/>
</LinearLayout>
PhotosActivity.java
final String[] images = getResources().getStringArray(R.array.tips_images);
final String[] labels = getResources().getStringArray(R.array.tips_text);
final ViewPager viewPager = (ViewPager) findViewById(R.id.imagePager);
final ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(PhotoTipsActivity.this, images, labels);
viewPager.setAdapter(viewPagerAdapter);
and finally, ViewPagerAdapter.java
public class ViewPagerAdapter extends PagerAdapter {
private Context context;
private String[] images;
private String[] labels;
public ViewPagerAdapter(Context context, String[] images, String[] labels) {
this.context = context;
this.images = images;
this.labels = labels;
}
#Override
public int getCount() {
return images.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
final View itemView = LayoutInflater.from(context).inflate(R.layout.viewpager_item, container, false);
final ImageView imageView = (ImageView) itemView.findViewById(R.id.imageView);
final TextView imageLabel = (TextView) itemView.findViewById(R.id.imageLabel);
// Get drawable image.
final int imageId = context.getResources().getIdentifier(images[position], "drawable", context.getPackageName());
imageView.setImageResource(imageId);
imageLabel.setText(labels[position]);
return itemView;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(((LinearLayout) object));
}
}
Any blatantly obvious reason why I'm not seeing my images?
The same way destroyItem() needs to remove the view from the container, instantiateItem() needs to add the view to the container.
Just add
container.addView(itemView);
before returning from instantiateItem() and you'll be in business.
Related
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.
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);
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!
I am trying to put a carousel on my top half of Android screen.
I like Bootstrap carousels like:
http://www.w3schools.com/bootstrap/bootstrap_carousel.asp
I am not sure the best way to approach this? Do I use a GridView in top half of my screen??
First you must create a Viewpager into your xml like:
<RelativeLayout 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"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:id="#+id/relativeLayout">
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</RelativeLayout>
For a custom Adapter you need to create a res/layout/pager_item.xml which will be used to inflate and generate a view into Adapter:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView" />
</LinearLayout>
After that, you can create the custom Adapter to set your ViewPager:
public class CustomPagerAdapter extends PagerAdapter {
private Context mContext;
private LayoutInflater mLayoutInflater;
private int[] mResources;
public CustomPagerAdapter(Context context, int[] resources) {
mContext = context;
mResources = resources;
mLayoutInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
#Override
public int getCount() {
return mResources.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == ((LinearLayout) object);
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
View itemView = mLayoutInflater.inflate(R.layout.pager_item, container, false);
ImageView imageView = (ImageView) itemView.findViewById(R.id.imageView);
imageView.setImageResource(mResources[position]);
container.addView(itemView);
return itemView;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((LinearLayout) object);
}
}
Then put the following code into onCreate in your Activity:
mViewPager = (ViewPager) findViewById(R.id.pager);
// This is just an example. You can use whatever collection of images.
int[] mResources = {
R.drawable.first,
R.drawable.second,
R.drawable.third,
R.drawable.fourth,
R.drawable.fifth,
R.drawable.sixth
};
CustomPagerAdapter mCustomPagerAdapter = new CustomPagerAdapter(this, mResources);
mViewPager.setAdapter(mCustomPagerAdapter);
Take a look the following tutorial for more details: http://codetheory.in/android-image-slideshow-using-viewpager-pageradapter/
Of simply use Android Image Slider, it's a beautiful and simple to use Library :
https://github.com/daimajia/AndroidImageSlider
Hi In My application I am displaying images by using swipe.Now, i want to display the under the image i want to display the name.
I want to write the some name in that image.how to write the code
Can anyone please help me.
Photos class updated code
public class Photos extends Activity {
Button button1;
String mImages;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.photos);
ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
ImagePagerAdapter adapter = new ImagePagerAdapter();
viewPager.setAdapter(adapter);
}
private class ImagePagerAdapter extends PagerAdapter {
String[] description_images = getIntent().getExtras().getStringArray("{image1,image2,image3,image4}"); //ARRAY OF ALL TEXT ASSOCIATED TO IMAGES
String[] mImages = getIntent().getExtras().getStringArray("{R.drawable.a,R.drawable.b,R.drawable.c,R.drawable.d}");
// String[] mText={"Text1","Text2","Text3"};
#Override
public int getCount() {
return mImages.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == ((ImageView) object);
}
#Override
public View instantiateItem(ViewGroup container, int position) {
LayoutInflater inflater = LayoutInflater.from(container.getContext());
View view = inflater.inflate(R.layout.image_view, null);
final ImageView imageView = (ImageView)view.findViewById(R.id.iv_image);
final TextView textView = (TextView )view.findViewById(R.id.iv_text);
textView.setText(description_images[position]);
// imageView.setImageResource(mImages[position]);
container.addView(view, 0);
return view;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
}
xml
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#000000" >
</android.support.v4.view.ViewPager>
description_images = getIntent().getExtras().getStringArray("images_name"); //ARRAY OF ALL TEXT ASSOCIATED TO IMAGES
mImages = getIntent().getExtras().getStringArray("images_path"); //ARRAY OF ALL IMAGE PATHS
private class ImagePagerAdapter extends PagerAdapter {
#Override
public int getCount() {
return mImages.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
#Override
public View instantiateItem(ViewGroup container, int position) {
LayoutInflater inflater = LayoutInflater.from(container.getContext());
View view = inflater.inflate(R.layout.image_view, null);
final ImageView imageView = (ImageView)view.findViewById(R.id.iv_image);
final TextView textView = (TextView )view.findViewById(R.id.iv_text);
textView.setText(description_images[position]);
imageLoader.displayImage(mImages[position], imageView, options);
container.addView(view, 0);
return view;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
Corresponding XML
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/iv_image"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:id="#+id/iv_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true" />
</RelativeLayout>