Slide show in android

Slide show in android - android

I want to write slide show for my app like this picture.
how i can write some thing like that :

You can use ViewPager for this:
public class MainActivity extends AppCompatActivity
{
private static final Integer[] IMAGES= {R.drawable.one,R.drawable.two,R.drawable.three,R.drawable.four};
private ArrayList<Integer> ImagesArray = new ArrayList<Integer>();
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
}
private void init() {
for(int i=0;i<IMAGES.length;i++)
ImagesArray.add(IMAGES[i]);
mPager = (ViewPager) findViewById(R.id.pager);
mPager.setAdapter(new SlidingImage_Adapter(MainActivity.this,ImagesArray));
CirclePageIndicator indicator = (CirclePageIndicator)
findViewById(R.id.indicator);
indicator.setViewPager(mPager);
final float density = getResources().getDisplayMetrics().density;
indicator.setRadius(5 * density);
NUM_PAGES =IMAGES.length;
// Auto start of viewpager
final Handler handler = new Handler();
final Runnable Update = new Runnable() {
public void run() {
if (currentPage == NUM_PAGES) {
currentPage = 0;
}
mPager.setCurrentItem(currentPage++, true);
}
};
Timer swipeTimer = new Timer();
swipeTimer.schedule(new TimerTask() {
#Override
public void run() {
handler.post(Update);
}
}, 30000, 30000);
// Pager listener over indicator
indicator.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageSelected(int position) {
currentPage = position;
}
#Override
public void onPageScrolled(int pos, float arg1, int arg2) {
}
#Override
public void onPageScrollStateChanged(int pos) {
}
});
}
}
And Layout File:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true" />
<com.viewpagerindicator.CirclePageIndicator
android:id="#+id/indicator"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="bottom"
android:padding="10dip"
app:centered="true"
app:fillColor="#ff0099"
app:pageColor="#FF0000"
app:snap="false" />
</RelativeLayout>
You are done :)

Related

ViewPager Text Onclick

I am currently doing this android tutorial https://www.androidhive.info/2016/05/android-build-intro-slider-app/ .
I want to implement the onClick() event inside the viewpager page like if I clicked the text, it will direct me to another page.
Is it possible? If possible, please help me? Thanks
here is my code for viewPager.
public class welcomeActivity extends AppCompatActivity {
ViewPager viewPager;
private LinearLayout myLinear;
private TextView[] dots;
private int[] layouts;
private Button btnSkip, btnNext;
private MyViewPagerAdapter myViewPagerAdapter;
private PrefManager prefManager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (Build.VERSION.SDK_INT >= 21) {
getWindow().getDecorView().
setSystemUiVisibility
(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);}
setContentView(R.layout.activity_welcome);
viewPager = (ViewPager) findViewById(R.id.view_pager);
myLinear = (LinearLayout) findViewById(R.id.layoutDots);
btnSkip = (Button) findViewById(R.id.btn_skip);
btnNext = (Button) findViewById(R.id.btn_next);
layouts = new int[]{
R.layout.slide1, R.layout.slide2, R.layout.slide3, R.layout.slide4, R.layout.slide5
};
addBottomDots(0);
changeStatusBarColor();
myViewPagerAdapter = new MyViewPagerAdapter();
viewPager.setAdapter(myViewPagerAdapter);
viewPager.addOnPageChangeListener(viewPagerListener);
btnSkip.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
launchHomeScreen();
}
});
btnNext.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
int current = getItem(+1);
if (current < layouts.length){
viewPager.setCurrentItem(current);
}else launchHomeScreen();
}
});
}
ViewPager.OnPageChangeListener viewPagerListener = new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
addBottomDots(position);
if (position == layouts.length -1){
btnSkip.setVisibility(View.GONE);
btnNext.setText("Get Started..");
}
else {
btnNext.setText(getString(R.string.next));
btnSkip.setVisibility(View.VISIBLE);
}
}
#Override
public void onPageSelected(int position) {
}
#Override
public void onPageScrollStateChanged(int state) {
}
};
private void addBottomDots(int currentPage) {
dots = new TextView[layouts.length];
int[] colorsActive = getResources().getIntArray(R.array.array_dot_active);
int[] colorsInactive = getResources().getIntArray(R.array.array_dot_inactive);
myLinear.removeAllViews();
for (int i = 0; i < dots.length; i++) {
dots[i] = new TextView(this);
dots[i].setText(Html.fromHtml("•"));
dots[i].setTextSize(35);
dots[i].setTextColor(colorsInactive[currentPage]);
myLinear.addView(dots[i]);
}
if (dots.length > 0)
dots[currentPage].setTextColor(colorsActive[currentPage]);
}
private int getItem(int i) {
return viewPager.getCurrentItem() + i;
}
private void launchHomeScreen() {
//prefManager.setFirstTimeLaunch(false);
startActivity(new Intent(welcomeActivity.this, MainActivity.class));
finish();
}
private void changeStatusBarColor() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Window window = getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(Color.TRANSPARENT);
}
}
public class MyViewPagerAdapter extends PagerAdapter{
private LayoutInflater inflater;
#Override
public Object instantiateItem(ViewGroup container, int position) {
inflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View v = inflater.inflate(layouts[position],container,false);
container.addView(v);
return v;
}
#Override
public int getCount() {
return layouts.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
View view = (View) object;
container.removeView(view);
}
}
}
Here is my layouts. (activity_welcome.xml)
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:showIn="#layout/activity_welcome">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:id="#+id/layoutDots"
android:layout_width="match_parent"
android:layout_height="#dimen/dots_height"
android:layout_alignParentBottom="true"
android:layout_marginBottom="#dimen/dots_margin_bottom"
android:gravity="center"
android:orientation="horizontal"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:alpha=".5"
android:layout_above="#id/layoutDots"
android:background="#android:color/white" />
<Button
android:id="#+id/btn_next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="#null"
android:text="Next"
android:textColor="#android:color/white" />
<Button
android:id="#+id/btn_skip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="#null"
android:text="BACK"
android:textColor="#android:color/white" />
</RelativeLayout>
slide1.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:background="#color/bg_screen1">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:orientation="vertical">
<ImageView
android:layout_width="#dimen/img_width_height"
android:layout_height="#dimen/img_width_height"
android:src="#drawable/ic_food" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/slide_1_title"
android:textColor="#android:color/white"
android:textSize="#dimen/slide_title"
android:textStyle="bold" />
<TextView
android:id="#+id/tvFood"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:paddingLeft="#dimen/desc_padding"
android:paddingRight="#dimen/desc_padding"
android:text="#string/slide_1_desc"
android:textAlignment="center"
android:textColor="#android:color/white"
android:textSize="#dimen/slide_desc" />
</LinearLayout>
</RelativeLayout>
slide2.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:background="#color/bg_screen2">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:orientation="vertical">
<ImageView
android:layout_width="#dimen/img_width_height"
android:layout_height="#dimen/img_width_height"
android:src="#drawable/ic_movie" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/slide_2_title"
android:textColor="#android:color/white"
android:textSize="#dimen/slide_title"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:paddingLeft="#dimen/desc_padding"
android:paddingRight="#dimen/desc_padding"
android:text="#string/slide_2_desc"
android:textAlignment="center"
android:textColor="#android:color/white"
android:textSize="#dimen/slide_desc" />
</LinearLayout>
</RelativeLayout>

After this line in your adapter :
View v = inflater.inflate(layouts[position],container,false);
Add:
TextView tv =(TextView) v.findViewById(R.id.yourTextView);
tv.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// Do your stuff here whatever you want to do upon click
}});

public class IntroFragment_1 extends Fragment {
private String title;
private int page;
ImageView intro_images_1;
Animation xmlAnimationSample;
// newInstance constructor for creating fragment with arguments
public static IntroFragment_1 newInstance(int page, String title) {
IntroFragment_1 fragmentFirst = new IntroFragment_1();
Bundle args = new Bundle();
args.putInt("someInt", page);
args.putString("someTitle", title);
fragmentFirst.setArguments(args);
return fragmentFirst;
}
// Store instance variables based on arguments passed
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
page = getArguments().getInt("someInt", 0);
title = getArguments().getString("someTitle");
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.intro_view_1, container, false);
intro_images_1 = view.findViewById(R.id.intro_images_1);
xmlAnimationSample = AnimationUtils.loadAnimation(getContext(),R.anim.zoom_intro);
intro_images_1.startAnimation(xmlAnimationSample);
return view;
}
}
MyViewPagerAdapter
public static class MyViewPagerAdapter extends FragmentPagerAdapter {
private static int NUM_ITEMS = 3;
public MyViewPagerAdapter(FragmentManager fragmentManager) {
super(fragmentManager);
}
// Returns total number of pages
#Override
public int getCount() {
return NUM_ITEMS;
}
// Returns the fragment to display for that page
#Override
public Fragment getItem(int position) {
switch (position) {
case 0: // Fragment # 0 - This will show FirstFragment
return IntroFragment_1.newInstance(0, "Page # 1");
case 1: // Fragment # 0 - This will show FirstFragment different title
return IntroFragment_1.newInstance(0, "Page # 1");
case 2: // Fragment # 1 - This will show SecondFragment
return IntroFragment_1.newInstance(0, "Page # 1");
default:
return null;
}
}
// Returns the page title for the top indicator
#Override
public CharSequence getPageTitle(int position) {
return "Page " + position;
}
}
layouts = new int[]{0, 1, 2,};

design layout like this image what is use to design

[ http://i.stack.imgur.com/Re29U.png]
left right swipe center value automatically checked and related table show in layout.

try this
MainActivity.java
public class MainActivity extends AppCompatActivity {
private TextView[] dots;
private LinearLayout dotsLayout;
// Declare Variables
ViewPager viewPager;
String[] CustomerNameList;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
CustomerNameList = new String[]{"xxxxx", "sssss", "aaaaaa", "ffffff", "gggggggg", "jjjjj"};
dotsLayout = (LinearLayout) findViewById(R.id.layoutDots);
addBottomDots(0);
// Locate the ViewPager in viewpager_main.xml
viewPager = (ViewPager) findViewById(R.id.first_customer_popup_view_pager);
// Pass results to ViewPagerAdapter Class
CustomPagerAdapter adapter = new CustomPagerAdapter(this, CustomerNameList);
// Binds the Adapter to the ViewPager
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(viewPagerPageChangeListener);
}
private void addBottomDots(int currentPage) {
dots = new TextView[CustomerNameList.length];
int colorsActive = Color.rgb(102, 41, 125);
int colorsInactive = Color.rgb(217, 217, 217);
dotsLayout.removeAllViews();
for (int i = 0; i < dots.length; i++) {
dots[i] = new TextView(this);
dots[i].setText(Html.fromHtml("•"));
dots[i].setTextSize(100);
dots[i].setTextColor(colorsInactive);
dotsLayout.addView(dots[i]);
}
if (dots.length > 0)
dots[currentPage].setTextColor(colorsActive);
}
// 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) {
}
};
}
CustomPagerAdapter.java
public class CustomPagerAdapter extends PagerAdapter {
private Context context;
private String[] CustomerNameList;
LayoutInflater inflater;
public CustomPagerAdapter(Context context,String[] CustomerNameList) {
this.context = context;
this.CustomerNameList = CustomerNameList;
}
#Override
public int getCount() {
return CustomerNameList.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == ((LinearLayout) object);
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
// Declare Variables
TextView AO_investments_list_popup_name;
TextView AO_investments_list_popup_na;
ListView all_listView;
inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View itemView = inflater.inflate(R.layout.adapter_single_page, container, false);
// Locate the TextViews in viewpager_item.xml
AO_investments_list_popup_name = (TextView) itemView.findViewById(R.id.display);
AO_investments_list_popup_name.setText(CustomerNameList[position]);
((ViewPager) container).addView(itemView);
return itemView;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
// Remove viewpager_item.xml from ViewPager
((ViewPager) container).removeView((LinearLayout) object);
}
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.agthamays.sof_1.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/first_customer_popup_view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true" />
<LinearLayout
android:id="#+id/layoutDots"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#color/colorAccent"
android:gravity="center|center_vertical"
android:orientation="horizontal">
</LinearLayout>
</RelativeLayout>
</LinearLayout>
adapter_single_page.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:background="#color/colorPrimaryDark"
android:orientation="horizontal"
android:layout_height="wrap_content">
<TextView
android:id="#+id/display"
android:layout_width="wrap_content"
android:text="xxxx"
android:textSize="24dp"
android:paddingLeft="100dp"
android:textStyle="bold"
android:textColor="#color/colorAccent"
android:layout_gravity="center"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</LinearLayout>

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

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...

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.

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);
}

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>

swipe view pager with indicator

I am having a swipe ViewPager with page indicator but when I run my application I see the playbutton.xml and the swipe view does not work.
Here is my java Activity (play_button.java):
public class play_button extends Activity implements
ViewPager.OnPageChangeListener, View.OnClickListener{
protected View view;
private ImageButton btnNext, btnFinish;
private ViewPager intro_images;
private LinearLayout pager_indicator;
private int dotsCount;
private ImageView[] dots;
private ViewPagerAdapter mAdapter;
private int[] mImageResources = {
R.mipmap.abc1,
R.mipmap.abc2,
R.mipmap.abc3,
R.mipmap.abc4,
R.mipmap.abc5
};
#Override
protected void onCreate(Bundle savedInstanceState)
{
// To make activity full screen.
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
super.onCreate(savedInstanceState);
setReference();
setContentView(R.layout.playbutton);
/* toolbar.setVisibility(View.GONE);*/
}
public void setReference() {
view = LayoutInflater.from(this).inflate(R.layout.playbutton,null);
intro_images = (ViewPager) view.findViewById(R.id.pager_introduction);
btnNext = (ImageButton) view.findViewById(R.id.btn_next);
btnFinish = (ImageButton) view.findViewById(R.id.btn_finish);
pager_indicator = (LinearLayout) view.findViewById(R.id.viewPagerCountDots);
btnNext.setOnClickListener(this);
btnFinish.setOnClickListener(this);
mAdapter = new ViewPagerAdapter(play_button.this, mImageResources);
intro_images.setAdapter(mAdapter);
intro_images.setCurrentItem(0);
intro_images.addOnPageChangeListener(this);
setUiPageViewController();
}
private void setUiPageViewController() {
dotsCount = mAdapter.getCount();
dots = new ImageView[dotsCount];
for (int i = 0; i < dotsCount; i++) {
dots[i] = new ImageView(this);
dots[i].setImageDrawable(ResourcesCompat.getDrawable(getResources(), R.drawable.nonselecteditem_dot, null));
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT
);
params.setMargins(4, 0, 4, 0);
pager_indicator.addView(dots[i], params);
}
dots[0].setImageDrawable(ResourcesCompat.getDrawable(getResources(), R.drawable.selecteditem_dot, null));
}
#Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btn_next:
intro_images.setCurrentItem((intro_images.getCurrentItem() < dotsCount)
? intro_images.getCurrentItem() + 1 : 0);
break;
case R.id.btn_finish:
finish();
break;
}
}
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
for (int i = 0; i < dotsCount; i++) {
dots[i].setImageDrawable(ResourcesCompat.getDrawable(getResources(), R.drawable.nonselecteditem_dot, null));
}
dots[position].setImageDrawable(ResourcesCompat.getDrawable(getResources(), R.drawable.selecteditem_dot, null));
if (position + 1 == dotsCount) {
btnNext.setVisibility(View.GONE);
btnFinish.setVisibility(View.VISIBLE);
} else {
btnNext.setVisibility(View.VISIBLE);
btnFinish.setVisibility(View.GONE);
}
}
#Override
public void onPageScrollStateChanged(int state) {
}
}
Here is my xml (playbutton.xml):
<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:id="#+id/container"
android:fitsSystemWindows="true"
tools:context="com.androprogrammer.tutorials.samples.ViewPagerDemo">
<android.support.v4.view.ViewPager
android:id="#+id/pager_introduction"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:listitem="#layout/pager_item" />
<RelativeLayout
android:id="#+id/viewPagerIndicator"
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_alignParentBottom="true"
android:layout_marginTop="5dp"
android:gravity="center">
<LinearLayout
android:id="#+id/viewPagerCountDots"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:gravity="center"
android:orientation="horizontal" />
<ImageButton
android:id="#+id/btn_next"
android:layout_width="42dip"
android:layout_height="42dip"
android:layout_alignParentRight="true"
android:layout_marginRight="15dip"
android:background="#drawable/btn_round_semitransperant"
android:src="#mipmap/ic_navigation_arrow_forward" />
<ImageButton
android:id="#+id/btn_finish"
android:layout_width="42dip"
android:layout_height="42dip"
android:layout_alignParentRight="true"
android:layout_marginRight="15dip"
android:background="#drawable/btn_round_semitransperant"
android:contentDescription="Let's start"
android:src="#mipmap/ic_navigation_check"
android:visibility="gone" />
</RelativeLayout>
Here is my ViewPagerAdabter (ViewPagerAdapter.java):
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
public class ViewPagerAdapter extends PagerAdapter {
private Context mContext;
private int[] mResources;
public ViewPagerAdapter(Context mContext, int[] mResources) {
this.mContext = mContext;
this.mResources = mResources;
}
#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 = LayoutInflater.from(mContext).inflate(R.layout.pager_item, container, false);
ImageView imageView = (ImageView) itemView.findViewById(R.id.img_pager_item);
imageView.setImageResource(mResources[position]);
container.addView(itemView);
return itemView;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((LinearLayout) object);
}
}
And here the pager_item.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:src="#mipmap/abc1"
android:id="#+id/img_pager_item"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:clickable="false"/>
</LinearLayout>
When I run my application and click on my play button instead od going to the swipe view page I see the playbutton.xml.
Does anyone knows where the problem is?

If you want to show dots pager indicator then I am attaching link through which you can implement dots pager indicator easily. I personally recommend it. with this even you can work with infinite pager indicator
Follow this link

CirclePageIndicator on top of ViewPager

In my layout I am trying to get the CirclePageIndicator to sit at the bottom of my image and for my image to be aligned at the top of the screen. Whatever I try it doesn't work. Here is how I want it to look like:
What it ends up looking like is this
Here is my code for this.
<RelativeLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_gravity="top">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="3dp"/>
<com.viewpagerindicator.CirclePageIndicator
android:id="#+id/indicator"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/pager"/>
</RelativeLayout>
And because it is a ViewPager I added the ability to scroll through each image. Here is the code for that.
public class SectionsPagerAdapter extends FragmentPagerAdapter {
private int[] Images = new int[] { R.drawable.homephoneicon1, R.drawable.homephoneicon2,
R.drawable.homephoneicon3, R.drawable.homephoneicon4, R.drawable.homephoneicon5};
public SectionsPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
return SlideshowFragment.newInstance(Images[position]);
}
#Override
public int getCount() {
return NUM_SLIDES;
}
}
Here is the Slideshow code
public class SlideshowFragment extends Fragment {
int imageResourceId;
public static SlideshowFragment newInstance(int i) {
SlideshowFragment fragment = new SlideshowFragment();
fragment.imageResourceId = i;
return fragment;
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
ImageView image = new ImageView(getActivity());
image.setImageResource(imageResourceId);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
LinearLayout layout = new LinearLayout(getActivity());
layout.setLayoutParams(new LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT));
layout.setGravity(Gravity.TOP);
layout.addView(image, params);
return layout;
}
}
Thanks for any help!

Here is how I did it
Code
public static SlideshowFragment newInstance(int i) {
SlideshowFragment fragment = new SlideshowFragment();
fragment.imageResourceId = i;
return fragment;
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
ImageView image = new ImageView(getActivity());
image.setImageResource(imageResourceId);
image.setScaleType(ImageView.ScaleType.FIT_XY);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);
RelativeLayout layout = new RelativeLayout(getActivity());
layout.setLayoutParams(new LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT));
layout.addView(image, params);
return layout;
}
Layout
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.5">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<com.viewpagerindicator.CirclePageIndicator
android:id="#+id/indicator"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:padding="5dp"
android:layout_alignParentBottom="true"/>
</RelativeLayout>

late comer but seems a better workaround
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="#dimen/height"/>
<com.viewpagerindicator.CirclePageIndicator
android:id="#+id/indicator"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:padding="5dp"
android:layout_alignBottom="#+id/pager"/>

activity_main.xml:-
<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: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=".MainActivity">
<RelativeLayout
android:layout_width="fill_parent"
android:background="#ffffff"
android:layout_height="300dp">
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="300dp"></android.support.v4.view.ViewPager>
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="10dp"
android:background="#android:color/transparent"
android:gravity="center_horizontal"
android:textSize="50sp" />
</RelativeLayout>
view_pager_item.xml:-
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/pagerItem"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textAlignment="center" />
</RelativeLayout>
ViewPagerAdapter.java:-
public class ViewPagerAdapter extends PagerAdapter {
Context con;
String[] data;
public ViewPagerAdapter(Context con, String[] data) {
this.data = data;
this.con = con;
}
#Override
public int getCount() {
return data.length;
}
#Override
public boolean isViewFromObject(View view, Object o) {
return view == o;
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
LayoutInflater inflater = (LayoutInflater) con.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = inflater.inflate(R.layout.view_pager_item, container, false);
try {
TextView textView = (TextView) view.findViewById(R.id.pagerItem);
textView.setText(data[position]);
((ViewPager) container).addView(view);
} catch (Exception ex) {
ex.printStackTrace();
}
return view;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager) container).removeView((RelativeLayout) object);
}
}
MainActivity.java:-
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
try {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
String[] data = new String[]{
"page 1",
"page 2",
"page 3",
"page 4"
};
final ViewPagerAdapter adapter = new ViewPagerAdapter(this, data);
final ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
viewPager.setOffscreenPageLimit(2);
viewPager.setAdapter(adapter);
final TextView textView = (TextView) findViewById(R.id.textView);
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
textView.setText("");
for (int i = 0; i < adapter.getCount(); i++) {
Spannable word = new SpannableString(" " + ".");
if (i == position) {
word.setSpan(new ForegroundColorSpan(Color.RED), 0, word.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
} else {
word.setSpan(new ForegroundColorSpan(Color.BLUE), 0, word.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
}
textView.append(word);
}
}
#Override
public void onPageSelected(int position) {
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
} catch (Exception ex) {
ex.printStackTrace();
}
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}

Simple way import pagerlibrary and use this code into .xml file.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_above="#+id/twoImage"
android:id="#+id/slideLay"
>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/offer_pager"
/>
<com.viewpagerindicator.CirclePageIndicator
android:id="#+id/page_indicatorr"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#null"
app:fillColor="#000000"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="10dp"
android:padding="5dip"
>
</com.viewpagerindicator.CirclePageIndicator>
</RelativeLayout>

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Slide show in android - android

I want to write slide show for my app like this picture. how i can write some thing like that :

Related

ViewPager Text Onclick

design layout like this image what is use to design

Android image slider

swipe view pager with indicator

CirclePageIndicator on top of ViewPager

Categories

Resources