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
Related
I try to made a example simple ViewPager app but Ive got error. I thought it was the image resolution fault but after changing ImageView as TextView and writing example text on it Ive got the same error. (after commented the ViewPAger implementation works fine)
channel '2d5df67 com.example.k.myapplication/com.example.k.myapplication.MainActivity (server)' ~ Channel is unrecoverably broken and will be disposed!
public class MainActivity extends AppCompatActivity {
List<String> list;
ViewPager viewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
list = new ArrayList<>();
list.add("https://www.w3schools.com/css/trolltunga.jpg");
list.add("http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2016/03/ultraviolet_image_shows_the_sun_s_intricate_atmosphere/15891756-1-eng-GB/Ultraviolet_image_shows_the_Sun_s_intricate_atmosphere_node_full_image_2.jpg");
list.add("http://pnge.org/wp-content/uploads/2017/03/1488980395_548_image.jpg");
list.add("http://pnge.org/wp-content/uploads/2017/03/image.png");
list.add("https://www.w3schools.com/css/trolltunga.jpg");
list.add("http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2016/03/ultraviolet_image_shows_the_sun_s_intricate_atmosphere/15891756-1-eng-GB/Ultraviolet_image_shows_the_Sun_s_intricate_atmosphere_node_full_image_2.jpg");
list.add("http://pnge.org/wp-content/uploads/2017/03/1488980395_548_image.jpg");
list.add("http://pnge.org/wp-content/uploads/2017/03/image.png");
viewPager = (ViewPager)findViewById(R.id.viewPAger);
ViewPAgerAdapter adapter = new ViewPAgerAdapter(MainActivity.this,list);
viewPager.setAdapter(adapter);
}}
Adapter Class
public class ViewPAgerAdapter extends PagerAdapter {
private List<String> record;
private Context context;
private LayoutInflater inflater;
public ViewPAgerAdapter(Context context, List<String>record) {
this.record=record;
this.context=context;
inflater=(LayoutInflater)context.getSystemService(context.LAYOUT_INFLATER_SERVICE);
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
View view = inflater.inflate(R.layout.item,container);
ImageView img = (ImageView)view.findViewById(R.id.image);
Glide.with(context).load(record.get(position)).fitCenter().into(img);
container.addView(view);
return view;
}
#Override
public int getCount() {
return record.size();
}
#Override
public int getItemPosition(Object object) {
return super.getItemPosition(object);
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == ((LinearLayout) object);
}
}
Item layout
<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="match_parent"
android:id="#+id/image"
/>
</LinearLayout>
activity layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.k.myapplication.MainActivity">
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/viewPAger"/>
</LinearLayout>
try adding this to your manifest -- android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize|mcc|mnc"
i have group of of images url in array of string ,now i want to display them in view pager , i tried to display images from folders and it's worked .but when i used array of string ,the images don't show . so what's the problem? that is part of my code.
ViewPager viewPager;
CustomerAdapter adapter;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
String [] urls={"https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/pia20645_main.jpg?itok=dLn7SngD","http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg","http://humminglove.com/wp-content/uploads/2013/08/l-is-l.jpg"};
viewPager = (ViewPager)findViewById(R.id.view_pager);
adapter = new CustomerAdapter(this,urls);
viewPager.setAdapter(adapter);
}
that is adapter
public class CustomerAdapter extends PagerAdapter{
private int[] images = {R.mipmap.img1,R.mipmap.img2,R.mipmap.img3,R.mipmap.img4};
private Context ctx;
private String[] urls;
private LayoutInflater inflater;
public CustomerAdapter(Context ctx,String []urls){
this.ctx = ctx;
this.urls=urls;
}
#Override
public int getCount() {
return urls.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return (view ==(LinearLayout)object);
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
inflater = (LayoutInflater)ctx.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View v = inflater.inflate(R.layout.swip,container,false);
ImageView img =(ImageView)v.findViewById(R.id.imagee);
TextView tv = (TextView)v.findViewById(R.id.textView);
Picasso.with(ctx).load(urls[position]).into(img);
tv.setText("Image :"+position);
container.addView(v);
return v;
}
#Override
public void destroyItem(View container, int position, Object object) {
container.refreshDrawableState();
}
}
that's my main_activity xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="web.blu_ray91111.example.commyc.newwww.MainActivity">
<android.support.v4.view.ViewPager
android:id ="#+id/view_pager"
android:layout_height="300dp"
android:layout_width="match_parent"
>
</android.support.v4.view.ViewPager>
swip.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="25dp"
android:text="Hello world!"
android:id="#+id/textView"
android:textStyle="bold"
android:layout_marginTop="30dp"
android:gravity="center" />
<ImageView
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imagee"
/>
In your case it is not clear why it didn't loaded.
1) It might take time to load big images
2) Some network error occurred on loading images
So I am you to use placeholders to coverup the error and on loading time of images.
Picasso.with(mContext).load(fileImage)
.placeholder(R.drawable.placeholder_img)
.error(R.drawable.error_placeholder_img).into(img)
Check you can access the url by normal browser
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.
I have Created an Image Slider using View Pager by following some tutorials.
So my problems is I wanted my slider to have a transparent toolbar.
And when i clicked on the screen the toolbar will hide.
Here's my code together with the output(I made), and the output i Want.
My Activity
public class viewInfo extends AppCompatActivity{
private ViewPager viewPager;
private Toolbar toolbar;
private CustomSwipeAdapter adapter;
PhotoViewAttacher mAttacher;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_view_info);
toolbar = (Toolbar) findViewById(R.id.app_bar);
setSupportActionBar(toolbar);
viewPager = (ViewPager) findViewById(R.id.view_pager);
adapter = new CustomSwipeAdapter(this);
viewPager.setAdapter(adapter);
}
public class CustomSwipeAdapter extends PagerAdapter {
private int[] image_resources = {R.drawable.bsu, R.drawable.gameover2};
private Context context;
private LayoutInflater layoutInflater;
public CustomSwipeAdapter(Context context) {
this.context = context;
}
#Override
public int getCount() {
return image_resources.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return (view == (LinearLayout) object);
}
#Override
public Object instantiateItem(View container, int position) {
layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View item_view = layoutInflater.inflate(R.layout.swipe_layout, (ViewGroup) container, false);
ImageView imageView = (ImageView) item_view.findViewById(R.id.image_view);
imageView.setPadding(5, 5, 5, 5);
imageView.setImageResource(image_resources[position]);
((ViewGroup) container).addView(item_view);
mAttacher = new PhotoViewAttacher(imageView);
mAttacher.update();
return item_view;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((LinearLayout) object);
}
}
}
2.XML(swipe_layout)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:background="#000"
>
<ImageView
android:id="#+id/image_view"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:gravity="center"
/>
</LinearLayout>
3.XML(My Activity's XML)
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFF"
android:orientation="vertical"
tools:context="com.thesis.juandirection.juandirectionfinale.viewInfos.viewInfo">
<include
android:id="#id/app_bar"
layout="#layout/app_bar" />
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</LinearLayout>
What i want Is this effect..
Transparent toolbar.
I tried to put a listener to Linearlayout that when the user
clicked the layout it will hide the toolbar, but no luck.
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!