ViewPager with items preview

ViewPager with items preview - android

I want to show a ViewPager with all the days of the week with a preview of the following and previous item of the current one.
I've tried a lot of solutions suggested from stackoverflow but none of them is working. I don't wont to use fragments in the ViewPager so I've used a PagerAdapter.
See this image:
My starting point is:
activity_main.xml
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Choose a day of the week:" />
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/weekOfTheDayPager"/>
MainActivity.java
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setUpAdapter();
}
private void setUpAdapter() {
ViewPager _mViewPager = (ViewPager) findViewById(R.id.weekOfTheDayPager);
final String[] daysOfTheWeek = {"Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"};
final Context myContext = getBaseContext();
_mViewPager.setAdapter(new PagerAdapter() {
#Override
public int getCount() {
return daysOfTheWeek.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
#Override
public Object instantiateItem(ViewGroup collection, int position) {
LayoutInflater inflater = LayoutInflater.from(myContext);
ViewGroup layout = (ViewGroup) inflater.inflate(R.layout.dayoftheweeklayout, collection, false);
((TextView) layout.findViewById(R.id.dayOfTheWeekTextView)).setText(daysOfTheWeek[position]);
collection.addView(layout);
return layout;
}
#Override
public void destroyItem(ViewGroup collection, int position, Object view) {
collection.removeView((View) view);
}
});
}}
and finally the layout for the ViewPager item:
dayoftheweeklayout.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/dayOfTheWeekTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Sunday"
android:layout_gravity="center_horizontal"/>
</FrameLayout>
Any suggestion will be appreciated.

So it looks like you want a carousel view.
Here's the recipe:
First, in order to show pages to the side in ViewPager, you need to provide some padding on the sides and then set clipToPadding to false:
<android.support.v4.view.ViewPager
android:id="#+id/weekOfTheDayPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:paddingEnd="#dimen/view_pager_padding"
android:paddingLeft="#dimen/view_pager_padding"
android:paddingRight="#dimen/view_pager_padding"
android:paddingStart="#dimen/view_pager_padding"/>
Next, you need to override getPageWidth in your PagerAdapter to tell the ViewPager that you want to display three pages at a time:
#Override
public float getPageWidth(int position) {
return 1F / 3F;
}
Then you need to tell the ViewPager to use a custom PageTransformer:
viewPager.setPageTransformer(false, new MyPageTransformer());
...
public static class MyPageTransformer implements ViewPager.PageTransformer {
private ArgbEvaluator mColorFade = new ArgbEvaluator();
#Override
public void transformPage(View page, float position) {
// position is 0 when page is centered (current)
// -1 when page is all the way to the left
// +1 when page is all the way to right
// Here's an example of how you might morph the color
int color = mColorFade(Math.abs(position), Color.RED, Color.GRAY);
TextView tv = (TextView) page.findViewById(R.id.dayOfTheWeekTextView);
tv.setTextColor(color);
}
}
There's probably something I forgot, but search SO for "android viewpager carousel" and you will find an answer in there somewhere.

Related

PagerAdapter change TextView when swiping

I'm using a PagerAdapter to swipe through a couple of ImageViews which works perfectly fine. I have a bunch of people in the gallery and I wish to add an individual name/description (id: speaker_name) to them. All I got to work is the same description for all of them. Im absolutely new to this and I am struggling for a day now to get it to work. All the solutions I found used fragments or an OnPageChangeListener but i couldnt figure out how to implement it.
This is what i've got:
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context=".MainActivity" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/basicBackground">
</android.support.v4.view.ViewPager>
<TextView
android:id="#+id/speaker_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50sp"
android:text="The Name"
android:textAlignment="center"
android:textColor="#android:color/white"
android:textSize="30sp" />
</FrameLayout>
</RelativeLayout>`
PagerAdapter:
public class ImageAdapter extends PagerAdapter {
SpeakerActivity sa;
Context context;
int i = 0;
public int[] GalImages = new int[] {
R.drawable.ben,
R.drawable.brett,
R.drawable.mark,
R.drawable.dusan,
R.drawable.michael,
R.drawable.mike,
R.drawable.ollie,
R.drawable.rebecca,
R.drawable.sebastian,
R.drawable.thomas,
R.drawable.tomasz,
R.drawable.toni,
};
ImageAdapter(Context context){
this.context=context;
}
#Override
public int getCount() {
return GalImages.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == ((ImageView) object);
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView imageView = new ImageView(context);
int padding = context.getResources().getDimensionPixelSize(R.dimen.padding_medium);
imageView.setPadding(padding, padding, padding, padding);
imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
imageView.setImageResource(GalImages[position]);
((ViewPager) container).addView(imageView, 0);
return imageView;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager) container).removeView((ImageView) object);
}
}
Activity:
public class SpeakerActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.speaker_activity);
ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
ImageAdapter adapter = new ImageAdapter(this);
viewPager.setAdapter(adapter);
}
}

To change textview text when swiping you can do this inside oncreate() method:
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
switch (position){
case 0:
//Do stuff
textview.setText("Ben");
break;
case 1:
//Do stuff
textview.setText("Brett");
break;
//Add other cases for the pages
}
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
This is the implementation of viewpager OnPageChangeListener() for me the best way.

let me give you the basic idea
ViewPager that the Activity layout is binded to.
ImageAdapter that extends ViewPager/FragmentPager that basically adds views or fragments into the viewpager so that the activity can show it to you.
the activity connects the two objects by setting the viewpager's adapter to your ImageAdapter
Like I said in #2 there are many ways you u can implement the ViewPager there are many sites out there.
refer to https://www.bignerdranch.com/
it explain in great detail

Unwanted white space beneath ImageView in ViewPager android

I'm using ViewPager as image slider. I'm using Android Studio. Everything works fine, I can slide between images. However beneath my images I have for some reason white space. I know that you can't call wrap_content on ViewPager and I've tried to put the fragment which contains the image slider into an Activity with another fragment below the image-slider-fragment, but between them is still some weird white space and within the white space I can also swipe to another image, which would of course cause only problems later on:
fragment_home.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="HomeFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<fragment
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="ImageSliderFragment"
android:id="#+id/fragment1"
tools:layout="#layout/fragment_image_slider"
android:layout_weight="2"/>
<fragment
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="BottomFragment"
tools:layout="#layout/fragment_bottom"
android:id="#+id/fragment2"
android:layout_weight="2"/>
</LinearLayout>
</FrameLayout>
swipe_layout.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image_view_of_slider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY"/>
<!-- adjustviewBounds prevents non-defined padding -->
<TextView
android:id="#+id/text_view_of_swipe_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"/>
</RelativeLayout>
fragment_image_slider.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="wrap_content"
tools:context="ImageSliderFragment"
android:id="#+id/image_slide_id">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager_of_image_slider"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<!--height="wrap_content/match_parent" both have the same result -->
</FrameLayout>
CustomSliderAdapter.java:
public class CustomSliderAdapter extends PagerAdapter {
private int[] image_res = {R.drawable.a,R.drawable.b,
R.drawable.c, R.drawable.d};
private String[] image_names = {"a", "b", "c", "d"};
private Context ctx;
private LayoutInflater layoutInflater;
public CustomSliderAdapter(Context ctx) {
this.ctx = ctx;
}
#Override
public int getCount() {
return image_res.length;
}
#Override
public int getItemPosition(Object object) {
return super.getItemPosition(object);
}
#Override
public boolean isViewFromObject(View view, Object object) {
return (view == (RelativeLayout) object);
}
#Override
public Object instantiateItem(final ViewGroup container, final int position) {
layoutInflater = (LayoutInflater) ctx.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = layoutInflater.inflate(R.layout.swipe_layout, container, false);
ImageView imageView = (ImageView) view.findViewById(R.id.image_view_of_slider);
TextView textView = (TextView) view.findViewById(R.id.text_view_of_swipe_layout);
imageView.setImageResource(image_res[position]);
textView.setText(image_names[position]);
container.addView(view);
return view;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((RelativeLayout) object);
}
}
ImageSliderFragment.class:
public class ImageSliderFragment extends Fragment {
ViewPager viewPager;
CustomSliderAdapter adapter;
View myView;
public static int imageHeight;
public ImageSliderFragment() {}
#Override
public void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
if(myView==null) {
myView = inflater.inflate(R.layout.fragment_image_slider, container, false);
viewPager = (ViewPager) myView.findViewById(R.id.view_pager_of_image_slider);
adapter = new CustomSliderAdapter(getActivity());
//With this I could set height of ViewPager manually
ViewGroup.LayoutParams params = viewPager.getLayoutParams();
params.height = imageHeight;
viewPager.setLayoutParams(params);
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
viewPager.setAdapter(adapter);
} else {
((ViewGroup) myView.getParent()).removeView(myView);
}
return myView;
}
}
How activity looks
I've also tried to change the height of my xml file with numbers (f.e.200dp), which works, but there are so many different device screens that at some point it would get at some point messed up
So again my problem is: make ViewPager fit to Imageview,because I can swipe between images also in the white space.
Help is much appreciated!

You can try like this on your imageview for viewpager image ....
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY" />

Image slider using View Pager issue

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!

Circlepage indicator to imageview using sliding

I want to add a circle indicator to images when images change from one to another. The circle indicator has to change at the same time.

You can use ViewPager and Fragment to do this. The activity layout should contains a ViewPager inside. and the Fragment layout needs nothing but an ImageView.
In Java code, the fragment needs an adapter, which should be something like this:
private class MyPagerAdapter extends FragmentPagerAdapter {
private ArrayList<String> imageList;
private int imagePosition;
public MyPagerAdapter(FragmentManager fragmentManager, ArrayList<String> imageList, int imagePosition) {
super(fragmentManager);
this.imageList = imageList;
this.imagePosition = imagePosition;
}
#Override
public Fragment getItem(int index) {
return new GalleryFragment(imageList.get(index));
}
#Override
public int getCount() {
return imageList.size();
}
}
imageList is used to hold the URLs of pictures you want to display. You can just replace it by ArrayList<Integer> imageList if the pictures you want to show is in the drawable folder.
For the indicator part, TextView with text "●" would be fine.It may looks a little strange, but it's quite neat and easy. You can change the size and the color of the indicators as you wish.
Then what's left is just to put the Fragment into ViewPager
gallery_pager.setAdapter(new MyPagerAdapter(GalleryActivity.this.getSupportFragmentManager(),
curImageList, imagePosition));
gallery_pager.setCurrentItem(imagePosition);
gallery_pager.setOnPageChangeListener(new OnPageChangeListener() {
#Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
#Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
#Override
public void onPageSelected(int index) {
// TODO Auto-generated method stub
for (int i = 0; i < curImageList.size(); i++) {
PagerIndicator[i].setVisibility(View.VISIBLE);
PagerIndicator[i].setTextColor(0xff666666);
if (i == index) {
PagerIndicator[i].setTextColor(0xffffffff);
}
}
}
});
In the method onPageSelected you can controll how the dots would be like when a picture is slided to.
Edited
Most parts of the codes had been added above, what you may need is the code for the Fragment:
public class GalleryFragment extends Fragment{
private Context context;
private String imageUrl;
public GalleryFragment(String imageUrl)
{
this.imageUrl = imageUrl;
}
#Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
context = GalleryFragment.this.getActivity();
ImageView image = new ImageView(context);
LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
image.setLayoutParams(params);
image.setScaleType(ScaleType.FIT_CENTER);
//TODO use the imageUrl to load and display the image;
LinearLayout layout = new LinearLayout(context);
layout.setGravity(Gravity.CENTER);
layout.addView(image);
return layout;
}
}
and the XML of the activity should be like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#222222" >
<android.support.v4.view.ViewPager
android:id="#+id/gallery_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:orientation="horizontal" >
<TextView
android:id="#+id/dot1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="●"
android:textColor="#15EDE2"
android:textSize="13sp" />
<!--add as many dots here as you need. If the size of the imageList changes, just keep the same amount of dots VISIBLE and others GONE-->
</LinearLayout>
</RelativeLayout>

Android view pager with page indicator

I need to get page indicator in the view pager file with images. Here is my code.
public class IndicatorActivity extends Activity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
MyPagerAdapter adapter = new MyPagerAdapter();
ViewPager myPager = (ViewPager) findViewById(R.id.pager);
myPager.setAdapter(adapter);
myPager.setCurrentItem(0);
TitlePageIndicator indicator = (TitlePageIndicator)findViewById(R.id.indicat);
indicator.setViewPager( myPager );
}
}
In this code, i got an error in TitlePageIndicator indicator = (TitlePageIndicator)findViewById(R.id.indicat); as TitlePageIndicator cannot be resolved to a type. What is this error. How can I resolve it?
here is my xml code:
<?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="fill_parent"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<com.viewpagerindicator.TitlePageIndicator
android:id="#+id/indicat"
android:layout_height="wrap_content"
android:layout_width="fill_parent" />
</LinearLayout>
What code do I need to write in the TitlePageIndicator?
I want to do this without using fragments.
Me also created a class such as:
class MyPagerAdapter extends PagerAdapter {
private static Integer[] titles = new Integer[]
{
R.drawable.jk,R.drawable.lm,R.drawable.no
};
public int getCount() {
return 3;
}
public Object instantiateItem(View collection, int position) {
LayoutInflater inflater = (LayoutInflater) collection.getContext()
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view;
ImageView iv;
view = inflater.inflate(R.layout.first, null);
((ViewPager) collection).addView(view, 0);
switch (position) {
case 0:
iv = (ImageView)view.findViewById(R.id.imageView1);
iv.setImageResource(titles[position]);
break;
case 1:
iv = (ImageView)view.findViewById(R.id.imageView1);
iv.setImageResource(titles[position]);
break;
case 2:
iv = (ImageView)view.findViewById(R.id.imageView1);
iv.setImageResource(titles[position]);
break;
}
return view;
}
public void destroyItem(View arg0, int arg1, Object arg2) {
((ViewPager) arg0).removeView((View) arg2);
}
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == ((View) arg1);
}
}
Did I want to do anything more than this class?
Thanks in advance for help

UPDATE: 22/03/2017
main fragment layout:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RadioGroup
android:id="#+id/page_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:layout_marginBottom="#dimen/margin_help_container"
android:orientation="horizontal">
<RadioButton
android:id="#+id/page1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true" />
<RadioButton
android:id="#+id/page2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<RadioButton
android:id="#+id/page3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RadioGroup>
</FrameLayout>
set up view and event on your fragment like this:
mViewPaper = (ViewPager) view.findViewById(R.id.viewpager);
mViewPaper.setAdapter(adapder);
mPageGroup = (RadioGroup) view.findViewById(R.id.page_group);
mPageGroup.setOnCheckedChangeListener(this);
mViewPaper.addOnPageChangeListener(this);
*************************************************
*************************************************
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
// when current page change -> update radio button state
int radioButtonId = mPageGroup.getChildAt(position).getId();
mPageGroup.check(radioButtonId);
}
#Override
public void onPageScrollStateChanged(int state) {
}
#Override
public void onCheckedChanged(RadioGroup radioGroup, int checkedId) {
// when checked radio button -> update current page
RadioButton checkedRadioButton = (RadioButton)radioGroup.findViewById(checkedId);
// get index of checked radio button
int index = radioGroup.indexOfChild(checkedRadioButton);
// update current page
mViewPaper.setCurrentItem(index), true);
}
custom checkbox state: Custom checkbox image android
Viewpager tutorial: http://architects.dzone.com/articles/android-tutorial-using

Here are a few things you need to do:
1-Download the library if you haven't already done that.
2- Import into Eclipse.
3- Set you project to use the library:
Project-> Properties -> Android -> Scroll down to Library section, click Add... and select viewpagerindicator.
4- Now you should be able to import com.viewpagerindicator.TitlePageIndicator.
Now about implementing this without using fragments:
In the sample that comes with viewpagerindicatior, you can see that the library is being used with a ViewPager which has a FragmentPagerAdapter.
But in fact the library itself is Fragment independant. It just needs a ViewPager.
So just use a PagerAdapter instead of a FragmentPagerAdapter and you're good to go.

I know this has already been answered, but for anybody looking for a simple, no-frills implementation of a ViewPager indicator, I've implemented one that I've open sourced. For anyone finding Jake Wharton's version a bit complex for their needs, have a look at https://github.com/jarrodrobins/SimpleViewPagerIndicator.

I have also used the SimpleViewPagerIndicator from #JROD. It also crashes as described by #manuelJ.
According to his documentation:
SimpleViewPagerIndicator pageIndicator = (SimpleViewPagerIndicator) findViewById(R.id.page_indicator);
pageIndicator.setViewPager(pager);
Make sure you add this line as well:
pageIndicator.notifyDataSetChanged();
It crashes with an array out of bounds exception because the SimpleViewPagerIndicator is not getting instantiated properly and the items are empty. Calling the notifyDataSetChanged results in all the values being set properly or rather reset properly.

Just an improvement to the nice answer given by #vuhung3990.
I implemented the solution and works great but if I touch one radio button it will be selected and nothing happens.
I suggest to also change page when a radio button is tapped. To do this, simply add a listener to the radioGroup:
mPager = (ViewPager) findViewById(R.id.pager);
final RadioGroup radioGroup = (RadioGroup)findViewById(R.id.radiogroup);
radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
#Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.radioButton :
mPager.setCurrentItem(0, true);
break;
case R.id.radioButton2 :
mPager.setCurrentItem(1, true);
break;
case R.id.radioButton3 :
mPager.setCurrentItem(2, true);
break;
}
}
});

you have to do following:
1-Download the full project from here https://github.com/JakeWharton/ViewPagerIndicator
ViewPager Indicator
2- Import into the Eclipse.
After importing if you want to make following type of screen then follow below steps -
change in
Sample circles Default
package com.viewpagerindicator.sample;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import com.viewpagerindicator.CirclePageIndicator;
public class SampleCirclesDefault extends BaseSampleActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.simple_circles);
mAdapter = new TestFragmentAdapter(getSupportFragmentManager());
mPager = (ViewPager)findViewById(R.id.pager);
// mPager.setAdapter(mAdapter);
ImageAdapter adapter = new ImageAdapter(SampleCirclesDefault.this);
mPager.setAdapter(adapter);
mIndicator = (CirclePageIndicator)findViewById(R.id.indicator);
mIndicator.setViewPager(mPager);
}
}
ImageAdapter
package com.viewpagerindicator.sample;
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
public class ImageAdapter extends PagerAdapter {
private Context mContext;
private Integer[] mImageIds = { R.drawable.about1, R.drawable.about2,
R.drawable.about3, R.drawable.about4, R.drawable.about5,
R.drawable.about6, R.drawable.about7
};
public ImageAdapter(Context context) {
mContext = context;
}
public int getCount() {
return mImageIds.length;
}
public Object getItem(int position) {
return position;
}
public long getItemId(int position) {
return position;
}
#Override
public Object instantiateItem(ViewGroup container, final int position) {
LayoutInflater inflater = (LayoutInflater) container.getContext()
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View convertView = inflater.inflate(R.layout.gallery_view, null);
ImageView view_image = (ImageView) convertView
.findViewById(R.id.view_image);
TextView description = (TextView) convertView
.findViewById(R.id.description);
view_image.setImageResource(mImageIds[position]);
view_image.setScaleType(ImageView.ScaleType.FIT_XY);
description.setText("The natural habitat of the Niligiri tahr,Rajamala Rajamala is 2695 Mts above sea level"
+ "The natural habitat of the Niligiri tahr,Rajamala Rajamala is 2695 Mts above sea level"
+ "The natural habitat of the Niligiri tahr,Rajamala Rajamala is 2695 Mts above sea level");
((ViewPager) container).addView(convertView, 0);
return convertView;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == ((View) object);
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager) container).removeView((ViewGroup) object);
}
}
gallery_view.xml
<?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="fill_parent"
android:background="#drawable/about_bg"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/about_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1" >
<LinearLayout
android:id="#+id/about_layout1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".4"
android:orientation="vertical" >
<ImageView
android:id="#+id/view_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/about1">
</ImageView>
</LinearLayout>
<LinearLayout
android:id="#+id/about_layout2"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight=".6"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="SIGNATURE LANDMARK OF MALAYSIA-SINGAPORE CAUSEWAY"
android:textColor="#000000"
android:gravity="center"
android:padding="18dp"
android:textStyle="bold"
android:textAppearance="?android:attr/textAppearance" />
<ScrollView
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:fillViewport="false"
android:orientation="vertical"
android:scrollbars="none"
android:layout_marginBottom="10dp"
android:padding="10dp" >
<TextView
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#000000"
android:text="TextView" />
</ScrollView>
</LinearLayout>
</LinearLayout>

You Can create a Linear layout containing an array of TextView (mDots).
To represent the textView as Dots provide this HTML source in your code .
refer my code .
I got this information from Youtube Channel TVAC Studio .
here the code : `
addDotsIndicator(0);
viewPager.addOnPageChangeListener(viewListener);
}
public void addDotsIndicator(int position)
{
mDots = new TextView[5];
mDotLayout.removeAllViews();
for (int i = 0; i<mDots.length ; i++)
{
mDots[i]=new TextView(this);
mDots[i].setText(Html.fromHtml("•")); //HTML for dots
mDots[i].setTextSize(35);
mDots[i].setTextColor(getResources().getColor(R.color.colorAccent));
mDotLayout.addView(mDots[i]);
}
if(mDots.length>0)
{
mDots[position].setTextColor(getResources().getColor(R.color.orange));
}
}
ViewPager.OnPageChangeListener viewListener = new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int
positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
addDotsIndicator(position);
}
#Override
public void onPageScrollStateChanged(int state) {
}
};`

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.

ViewPager with items preview - android

Related

PagerAdapter change TextView when swiping

Unwanted white space beneath ImageView in ViewPager android

Image slider using View Pager issue

Circlepage indicator to imageview using sliding

Android view pager with page indicator

Categories

Resources