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!
Related
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);
}
}
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.
Layout of the row of list view:
<?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/linearLayout_template3">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/template3_textView"/>
<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="200dp"
android:orientation ="horizontal" />
</LinearLayout>
ListView Adapter:
Here I am using Holder class to save the Tag information of convertView.
and also giving a unique ID to viewPager.I basically intend to show Images in ViewPager but to test the code I am working with TextViews.
public class ListViewAdapter extends ArrayAdapter<ParsedItems> {
LinearLayout mainLinnerLayout;
ViewPagerAdapter pagerAdapter;
Context context;
ArrayList<ParsedItems> mObject;
ViewPagerAdapter adapter;
private ProgressDialog progressDialog;
public ListViewAdapter(Context context,int resource, ArrayList<ParsedItems> objects) {
super(context,resource,objects);
this.context = context;
this.mObject = objects;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
Holder holder=null;
ParsedItems items = mObject.get(position);
String template = items.getTemplate();
ParsedItemsImage mInnerItem;
ArrayList<ParsedItemsImage> mInnerItems = items.getItems();
LinearLayout innerLinearLayout=null;
if((Holder)convertView.getTag() == null){
LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = inflater.inflate(R.layout.row_layout_template3, parent,false);
ViewPager viewPager = (ViewPager)convertView.findViewById(R.id.pager);
holder = new Holder();
holder.viewPager = viewPager;
holder.viewPager.setId(NotificationID.getID());
holder.textView = (TextView)convertView.findViewById(R.id.template3_textView);
convertView.setTag(holder);}
else
{
holder = (Holder)convertView.getTag();
}
holder.textView.setText("oyi!");
pagerAdapter = new ViewPagerAdapter(mInnerItems,context,convertView);
holder.viewPager.setAdapter(pagerAdapter);
return convertView;
}
class Holder
{
TextView textView;
ViewPager viewPager;
}
}
ViewPagerAdapter class:
public class ViewPagerAdapter extends PagerAdapter {
ArrayList<ParsedItemsImage> mInnerItems;
Context context;
private final WeakReference<View> ref;
public ViewPagerAdapter(ArrayList<ParsedItemsImage> items,Context context, View view)
{
mInnerItems = new ArrayList<ParsedItemsImage>(items);
this.context = context;
ref = new WeakReference<View>(view);
}
#Override
public int getCount() {
//return mInnerItems.size();
return 6;
}
#Override
public boolean isViewFromObject(View view, Object o) {
return false;
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
View collection;
ParsedItemsImage mParsedItemsImage = mInnerItems.get(position);
String url=mParsedItemsImage.getImage();
LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
collection = inflater.inflate(R.layout.template3_imageview,container,false);
TextView textView = (TextView)collection.findViewById(R.id.text_temp3);
ViewPager vp = (ViewPager)container;
textView.setText("test");
vp.addView(collection);
return textView;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((TextView) object);
}
}
Template3_imageview.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="200dp">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/text_temp3"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="100dp"
android:id="#+id/imageView_template3"/>
</LinearLayout>
Output:
SO the output shows the textview added in the ArrayAdapter's getView() method :
holder.textView.setText("oyi!");
but doesn't show the one in the ViewPager Adapter:
textView.setText("test");
Please help.
P.S.: I intend to add images finally but i was testing if textviews are getting added in pager or not.So you will see some extra code in the post.
The error was in isViewFromObject() method. I changed this
#Override
public boolean isViewFromObject(View view, Object o) {
return false;
}
to
#Override
public boolean isViewFromObject(View view, Object o) {
return view == o;
}
and it worked!
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
I have a grid view in my application and i need to scroll it horizontally.I have tried changing the gridview to gallery.But then only one row is available,but i need different rows as in a grid view.So basically what i need is a gridview that can be scrolled horizontally.Is there any efficient way to do this?Thanks in advance.
Regards
Anu
Hi,Thanks for the reply.i have tried using a Gallery and implement an adapter that provides a multirow view in its getView method.
My java file is:
public class Gridview extends Activity
{
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Gallery g = (Gallery) findViewById(R.id.gallery);
g.setAdapter(new GridAdapter(this));
g.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView parent, View v, int position, long id) {
Toast.makeText(Gridview.this, "" + position, Toast.LENGTH_SHORT).show();
}
});
}
public class GridAdapter extends BaseAdapter {
int mGalleryItemBackground;
private Context mContext;
private Integer[] mImageIds = {
R.drawable.icon,
R.drawable.icon,
R.drawable.icon,
R.drawable.icon,
R.drawable.icon,
R.drawable.icon,
R.drawable.icon,
};
public GridAdapter(Context c) {
mContext = c;
TypedArray a = obtainStyledAttributes(R.styleable.HelloGallery);
mGalleryItemBackground = a.getResourceId(
R.styleable.HelloGallery_android_galleryItemBackground, 0);
a.recycle();
}
public int getCount() {
return mImageIds.length;
}
public Object getItem(int position) {
return position;
}
public long getItemId(int position) {
return position;
}
public View getView(int position, View convertView, ViewGroup parent) {
View v;
if(convertView==null)
{
LayoutInflater li = getLayoutInflater();
v = li.inflate(R.layout.icon, null);
ImageView iv = (ImageView)v.findViewById(R.id.icon_image);
iv.setImageResource(R.drawable.icon);
}
else
{
v = convertView;
}
return v;
}
}
}
main.xml is :
<?xml version="1.0" encoding="utf-8"?>
<Gallery xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gallery"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
icon.xml is:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearlayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/icon_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
</ImageView>
</LinearLayout>
The output i got is : http://www.4shared.com/photo/MzUcmzel/device.html
But this is not i need actually.i want the icons in different rows.Any help is appreciated.
I think your best bet is to use a Gallery and implement an adapter that provides a multirow view in its getView method. See Hello Gallery and look at the ImageAdapter implementation within.
Instead of the ImageView that getView returns in that example, you can, for example, inflate your own custom layout, for example a LinearLayout with vertical orientation.
You might consider a TableLayout inside a HorizontalScrollView, but the disadvantage there is that everything will be in memory at once, making it difficult to scale to lots of items. The Gallery recycles Views and offers some resource advantages.
I have already posted this answer here and here, but these questions are
identical...
There is a nice solution in Android from now on : HorizontalGridView.
1. Gradle dependency
dependencies {
compile 'com.android.support:leanback-v17:23.1.0'
}
2. Add it in your layout
your_activity.xml
<!-- your stuff before... -->
<android.support.v17.leanback.widget.HorizontalGridView
android:layout_width="wrap_content"
android:layout_height="80dp"
android:id="#+id/gridView"
/>
<!-- your stuff after... -->
3. Layout grid element
Create a layout for your grid element ( grid_element.xml ). I have created a simple one with only one button in it.
<?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">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button" />
</LinearLayout>
4. Create an adapter
Highly inspired by this link : https://gist.github.com/gabrielemariotti/4c189fb1124df4556058
public class GridElementAdapter extends RecyclerView.Adapter<GridElementAdapter.SimpleViewHolder>{
private Context context;
private List<String> elements;
public GridElementAdapter(Context context){
this.context = context;
this.elements = new ArrayList<String>();
// Fill dummy list
for(int i = 0; i < 40 ; i++){
this.elements.add(i, "Position : " + i);
}
}
public static class SimpleViewHolder extends RecyclerView.ViewHolder {
public final Button button;
public SimpleViewHolder(View view) {
super(view);
button = (Button) view.findViewById(R.id.button);
}
}
#Override
public SimpleViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
final View view = LayoutInflater.from(this.context).inflate(R.layout.grid_element, parent, false);
return new SimpleViewHolder(view);
}
#Override
public void onBindViewHolder(SimpleViewHolder holder, final int position) {
holder.button.setText(elements.get(position));
holder.button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Toast.makeText(context, "Position =" + position, Toast.LENGTH_SHORT).show();
}
});
}
#Override
public long getItemId(int position) {
return position;
}
#Override
public int getItemCount() {
return this.elements.size();
}
}
5. Initialize it in your activity :
private HorizontalGridView horizontalGridView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.your_activity);
horizontalGridView = (HorizontalGridView) findViewById(R.id.gridView);
GridElementAdapter adapter = new GridElementAdapter(this);
horizontalGridView.setAdapter(adapter);
}
True about using a Gallery or ListView re: re-using views. But if your list is not too long, you can try a TableLayout with a ViewFlipper. Here's a summary of possible options/solutions.
This post might get help you out what you wanted to achieve
Scroll like Shelf View
how about using a viewPager :
http://developer.android.com/reference/android/support/v4/view/ViewPager.html
?
Try to wrap it in HorizontalScrollView