Hitesh Bisht
Reputation: 536
Android image slider
I want to create a image slider in my application. A slider will contain around 6 images and user can swipe through them. if user does not interact it will swipe on its own in certain time interval.. I want to create 3 of such sliders in a single fragment.
what's the best approach for such design? three independent sliders. and of course I have to use as less memory possible..
Is there any library I should use.. please suggest the most optimized approach.
Thank you
Upvotes: 3
Views: 24833
Answers (4)
Pratibha Sarode
Reputation: 1849
private LinearLayout dotsLayout;
private TextView[] dots;
ArrayList<BannerModel> BannerArrayList;
private ViewPager viewPager;
private MyViewPagerAdapter myViewPagerAdapter;
int currentPage = 0, NUM_PAGES = 0;
Timer timer;
Add this in oncreate
dotsLayout = (LinearLayout) findViewById(R.id.layoutDots);
viewPager = (ViewPager) findViewById(R.id.view_pager_banner);
BannerArrayList = new ArrayList<>();
SetAdViewPager();
//Call this in webservice response .. now i m setting dummy data ------------------------------------------
//Add data in arraylist
for (int i = 0; i < 6; i++) {
BannerModel bannerModel = new BannerModel();
//Add your data here in model
BannerArrayList.add(bannerModel);
}
NUM_PAGES = BannerArrayList.size();
viewPager.getAdapter().notifyDataSetChanged();
myViewPagerAdapter.notifyDataSetChanged();
viewPager.setAdapter(myViewPagerAdapter);
addBottomDots(0);
SetSliderAutoTimer();
//---------------------------------------------------------------------------
Add these methods
//Method to set timer to slider
private void SetSliderAutoTimer() {
Log.e("SetSliderAutoTimer", "SetSliderAutoTimer");
final Handler handler = new Handler();
final Runnable update = new Runnable() {
public void run() {
Log.e("update", "update");
if (currentPage == NUM_PAGES) {
currentPage = 0;
}
viewPager.setCurrentItem(currentPage++, true);
}
};
timer = new Timer();
timer.schedule(new TimerTask() {
@Override
public void run() {
handler.post(update);
}
}, 100, 6000);
}
//Set viepager and adapter
private void SetAdViewPager() {
myViewPagerAdapter = new MyViewPagerAdapter(BannerArrayList);
viewPager.setSaveFromParentEnabled(false);
viewPager.setAdapter(myViewPagerAdapter);
viewPager.addOnPageChangeListener(viewPagerPageChangeListener);
}
// viewpager change listener
ViewPager.OnPageChangeListener viewPagerPageChangeListener = new ViewPager.OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
addBottomDots(position);
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
};
//Method to set dots according to slider position
private void addBottomDots(int currentPage) {
dots = new TextView[BannerArrayList.size()];
dotsLayout.removeAllViews();
for (int i = 0; i < dots.length; i++) {
dots[i] = new TextView(SetLocationActivity.this);
dots[i].setText(Html.fromHtml("•"));
dots[i].setTextSize(50);
dots[i].setTextColor(SetLocationActivity.this.getResources().getColor(R.color.colorGray));
dotsLayout.addView(dots[i]);
}
if (dots.length > 0)
dots[currentPage].setTextColor(SetLocationActivity.this.getResources().getColor(R.color.colorText));
}
/**
* View pager adapter
*/
public class MyViewPagerAdapter extends PagerAdapter {
private LayoutInflater layoutInflater;
private ArrayList<BannerModel> bannerModelArrayList;
public MyViewPagerAdapter(ArrayList<BannerModel> mbannerModelArrayList) {
bannerModelArrayList = mbannerModelArrayList;
}
@Override
public Object instantiateItem(ViewGroup container, final int position) {
layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = layoutInflater.inflate(R.layout.row_banner, container, false);
ImageView imgAd = view.findViewById(R.id.imgAd);
Picasso.get().load(bannerModelArrayList.get(position).getImage()).into(imgAd);
container.addView(view);
view.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
}
});
return view;
}
@Override
public int getCount() {
return bannerModelArrayList.size();
}
@Override
public boolean isViewFromObject(View view, Object obj) {
return view == obj;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
View view = (View) object;
container.removeView(view);
}
}
xml is as below:
<?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"
tools:context="com.sweedesi.android.customerapp.SetLocationActivity">
<android.support.v7.widget.CardView
android:id="@+id/cardView_adv_Slider_surchbuses_fragment"
android:layout_width="match_parent"
android:layout_height="250dp"
app:cardBackgroundColor="@color/colorWhite"
app:cardElevation="@dimen/margin_10">
<RelativeLayout 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.support.v4.view.ViewPager
android:id="@+id/view_pager_banner"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true" />
<LinearLayout
android:id="@+id/layoutDots"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center"
android:orientation="horizontal"></LinearLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
Upvotes: 0
Pratibha Sarode
Reputation: 1849
add code in xml for slider
<RelativeLayout
android:id="@+id/cardView_adv_Slider_surchbuses_fragment"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginBottom="@dimen/margin_10"
android:background="@drawable/bg_shadow_transperent_rounded"
>
<RelativeLayout 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.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true" />
<LinearLayout
android:id="@+id/layoutDots"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="@dimen/margin_10"
android:background="@color/transparent"
android:gravity="center"
android:orientation="horizontal"></LinearLayout>
</RelativeLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_margin="@dimen/margin_5"
android:background="@drawable/btn_bg_white_rounded"
android:text="Exp - 29 Oct, 2018"
android:textColor="@color/colorGreen"
android:textStyle="bold" />
</RelativeLayout>
Add these methods in onCreate method //To show slider of images-------------
SetAdViewPager();
SetDummyDataToImage();
Here I have added dummy data in arraylist.. you have to add ur data in arraylist
private void SetDummyDataToImage() {
PostImageModel postImageModel = new PostImageModel();
postImageModel.setImage("fbhgdkfjvbg/5c024b2c86b4c.jpg");
ImageList.add(postImageModel);
PostImageModel postImageModel1 = new PostImageModel();
postImageModel1.setImage("coecureiou/5c0130b533cca.jpg");
ImageList.add(postImageModel1);
PostImageModel postImageModel2 = new PostImageModel();
postImageModel2.setImage("fgvomtig/5c0130c67dbac.jpg");
ImageList.add(postImageModel2);
PostImageModel postImageModel3 = new PostImageModel();
postImageModel3.setImage("frejtufgi/5c01309d3ca33.jpg");
ImageList.add(postImageModel3);
NUM_PAGES = ImageList.size();
viewPager.getAdapter().notifyDataSetChanged();
myViewPagerAdapter.notifyDataSetChanged();
// viewPager.setAdapter(myViewPagerAdapter);
addBottomDots(0);
SetSliderAutoTimer();
}
private void SetAdViewPager() {
ImageList = new ArrayList<>();
myViewPagerAdapter = new MyViewPagerAdapter(ImageList);
viewPager.setSaveFromParentEnabled(false);
viewPager.setAdapter(myViewPagerAdapter);
viewPager.addOnPageChangeListener(viewPagerPageChangeListener);
}
// viewpager change listener
ViewPager.OnPageChangeListener viewPagerPageChangeListener = new ViewPager.OnPageChangeListener() {
@Override
public void onPageSelected(int position) {
addBottomDots(position);
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
};
private void addBottomDots(int currentPage) {
dots = new TextView[ImageList.size()];
layoutDots.removeAllViews();
for (int i = 0; i < dots.length; i++) {
dots[i] = new TextView(Constants.mDashboardActivity);
dots[i].setText(Html.fromHtml("•"));
dots[i].setTextSize(35);
dots[i].setTextColor(Constants.mDashboardActivity.getResources().getColor(R.color.colorGray));
layoutDots.addView(dots[i]);
}
if (dots.length > 0)
dots[currentPage].setTextColor(Constants.mDashboardActivity.getResources().getColor(R.color.colorText));
}
/**
* View pager adapter
*/
public class MyViewPagerAdapter extends PagerAdapter {
private LayoutInflater layoutInflater;
private ArrayList<PostImageModel> adsModelArrayList;
public MyViewPagerAdapter(ArrayList<PostImageModel> madsModelArrayList) {
adsModelArrayList = madsModelArrayList;
}
@Override
public Object instantiateItem(ViewGroup container, final int position) {
layoutInflater = (LayoutInflater) getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = layoutInflater.inflate(R.layout.row_post_image, container, false);
ImageView imgAd = view.findViewById(R.id.imgAd);
Picasso.get().load(adsModelArrayList.get(position).getImage()).into(imgAd);
container.addView(view);
view.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
/* Intent browserIntent = new Intent(Intent.ACTION_VIEW, Uri.parse(adsModelArrayList.get(position).getLink()));
startActivity(browserIntent);*/
}
});
return view;
}
@Override
public int getCount() {
return adsModelArrayList.size();
}
@Override
public boolean isViewFromObject(View view, Object obj) {
return view == obj;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
View view = (View) object;
container.removeView(view);
}
}
//Method to set timer to slider
private void SetSliderAutoTimer() {
final Handler handler = new Handler();
final Runnable update = new Runnable() {
public void run() {
if (currentPage == NUM_PAGES) {
currentPage = 0;
}
try {
viewPager.setCurrentItem(currentPage++, true);
} catch (Exception e) {
e.printStackTrace();
}
}
};
new Timer().schedule(new TimerTask() {
@Override
public void run() {
handler.post(update);
}
}, 100, 5000);
}
Upvotes: 0
AMI CHARADAVA
Reputation: 313
If you wanna to use most optimized approach then you should use this Library for Image Slider,and there are full implementation is given so you can understand and use it easily.
But if you wanna to use only simple ViewPager then refer this site.In this tutorial there is simple implementation of ImageSlider is given.
Hope you get your answer, Thanks.
Upvotes: 1
Richard
Reputation: 14625
You can use a ViewPager with views rather than fragments.
Check out this tutorial on how to use the ViewPager with views:
https://www.bignerdranch.com/blog/viewpager-without-fragments/
To scroll automatically use a timer and then call:
viewPager.setCurrentItem(1)
Where 1 is the second item etc...
Upvotes: 4
Related Questions
- How to make image slider from assets images
- Slider in Android
- How to create an image slider?
- Image Slider Not Working in android
- Dynamic Image Slider Android
- I want to implement image slider
- Image slide using viewpager in Android
- Android image slider like Ios
- How to create Android image slider like in example
- Android: Slide Images