Develop Reference

scroll image that has text description using view pager in android

My current design lets me swipe (left and right swipe) through images like this:current design
But what I really want to do is change it a bit so that I have a text description at the bottom. The text description changes when the image change. The new design is like this:
new design
I'm not sure how do I achieved this design? For example how do I draw those three circles? How do I make the text change when the image changed? Can anyone please advise?
Here is my code:
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
public class MainActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
ImagePagerAdapter adapter = new ImagePagerAdapter();
viewPager.setAdapter(adapter);
}
private class ImagePagerAdapter extends PagerAdapter {
private int[] mImages = new int[] {
R.drawable.chiang_mai,
R.drawable.himeji,
R.drawable.petronas_twin_tower,
R.drawable.ulm
};
#Override
public int getCount() {
return mImages.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == ((ImageView) object);
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
Context context = MainActivity.this;
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(mImages[position]);
((ViewPager) container).addView(imageView, 0);
return imageView;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager) container).removeView((ImageView) object);
}
}
}
//activity_main
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />

Oh, you need to inflate a custom layout containing an ImageView and a TextView below it (or any other arrangement you may need). Then modify your PagerAdapter to inflate this custom layout with the image and the text. This is just to give you a better idea.
#Override
public Object instantiateItem(ViewGroup container, int position) {
Context context = container.getContext(); // I feel this is a better implementation
CustomLayout layout = new CustomLayout(context);
// This is a custom layout that you could create
// you could init a LinearLayout and add an
// ImageView and a TextView to it, your call :)
// Set image and text in your view accortind to 'position'
return layout;
}

As i understand, you want both image and text to be scrolled, and you need indicator at the bottom.
So you change your PagerAdapter to sth like this:
public class ImagePagerAdapter extends PagerAdapter {
private int[] mImages ;
private Context mContext;
public ImagePagerAdapter(Context context, int[] mImages) {
mContext = context;
this.mImages = mImages;
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
LayoutInflater inflater = LayoutInflater.from(mContext);
ViewGroup layout = (ViewGroup) inflater.inflate(R.layout.your_layout_with_image_and_text,container,false);
ImageView imageView = (ImageView) layout.findViewById(R.id.your_image_view);
TextView textView=(TextView)layout.findViewById(R.id.your_text_view)
//.. load image and text you got from constructor
container.addView(layout, 0);
return layout;
}
public int getCount() {
if(mImages!=null)
return mImages.length;
else
return 0;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
#Override
public void destroyItem(ViewGroup collection, int position, Object view) {
collection.removeView((View) view);
}
}
For indicator, use this and put it below ViewPager in xml
<your_package.CirclePageIndicator
android:id="#+id/indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:fillColor="#color/primary_color"
app:pageColor="#color/white"
app:strokeColor="#color/primary_color"
android:padding="4dp" />

Try this way,you need to create array for texts,
private int imageArr[] = { R.drawable.f, R.drawable.g, R.drawable.h,
R.drawable.i, R.drawable.j};
private String[] stringArray = new String[] { "first", "sec","third","fourth","fifth"};
initialize your adapter
adapter = new ImagePagerAdapter(this, imageArr, stringArray );
make your adapter like
int imgArray [];
String[] stringArray;
public ImagePagerAdapter(Activity act, int[] imgArra, String[] stringArr) {
activity = act;
imgArray = imgArra;
stringArray = stringArr;
}
then get the position
txt.setText(stringArray[position]);
See this for more

Cannot update views on left and right side of view pager

I have used viewpager which displays view with an image and radiobutton below. Each swipe screen is not a fragment, they are layouts which just swipe the same view with different imageview. The problem is that, I am unable to deselect the radio button which is in left and right side of the current view after i select the radio button of the current screen. If I return POSITION_NONE in getItemPosition(), it refresh the screen and radio button also deselected but the view is flickered. If i am able to call instantiateItem(), my problem is solved . But this method is called only when view is destroyed based on the setOffsetScreenPageLimit(). How can I achieved such requirements, if view pager cannot help?
Fragment:
public class AnswerImageDialogFragment extends DialogFragment implements ViewPager.OnPageChangeListener {
//member declaration
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
String strQuestion = null;
View rootView = inflater.inflate(R.layout.activity_viewpager_demo, container,
false);
getDialog().getWindow().requestFeature(Window.FEATURE_NO_TITLE);
intro_images = (ViewPager) rootView.findViewById(R.id.pager_introduction);
pager_indicator = (LinearLayout) rootView.findViewById(R.id.viewPagerCountDots);
//do some stuff
//set the adapter
mAdapter = new ViewPagerAdapter(getContext(), map);
intro_images.setAdapter(mAdapter);
intro_images.setCurrentItem(clickPosition);
intro_images.setOnPageChangeListener(this);
setUiPageViewController();
bus = EventBus.getDefault();
bus.register(this);
return rootView;
}
//other method
}
PagerAdapter:
public class ViewPagerAdapter extends PagerAdapter {
// member declaration
public ViewPagerAdapter(Context mContext, HashMap<String, Object> map) {
//other initialization
}
#Override
public int getCount() {
return optionImages.size();
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == ((LinearLayout) object);
}
#Override
public Object instantiateItem(ViewGroup container, final int position) {
View itemView = LayoutInflater.from(mContext).inflate(R.layout.pager_item, container, false);
final ImageView ivOption = (ImageView) itemView.findViewById(R.id.answerId); // this is used as radio button in this case
/*The code snippet is to select the answer option based on whether answer is choosen or not.
If choosen, select as default in the pop up answer.
*/
if (null != ans) {
Iterator iterator = ans.iterator();
if (ans.size() > 0) {
int value = (int) iterator.next();
if (value == position) {
ivOption.setImageResource(R.drawable.ic_radio_button_tick);
} else {
ivOption.setImageResource(R.drawable.ic_radio_button_nontick);
}
}
}
p = position;
/*The code snippet is to change the answer value based on the user selection.
This means if user choosen another answer then clear the earlier choosen answer
*/
ivOption.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
//do stuff
}
});
txtQuestion.setText(question);
txtOption.setText(optionsList.get(position));
imageView.setParseFile(optionImages.get(position));
imageView.loadInBackground();
container.addView(itemView);
return itemView;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
LinearLayout ll = (LinearLayout) object;
/*RelativeLayout ivOption = (RelativeLayout) ll.getChildAt(2);
ImageView iv = (ImageView) ivOption.getChildAt(1);
iv.setImageResource(R.drawable.ic_radio_button_tick);*/
container.removeView(ll);
}
#Override
public int getItemPosition(Object object) {
return super.getItemPosition(object);
}
public void refresh(ArrayList object) {
this.object = new ArrayList();
this.object.addAll(object);
this.notifyDataSetChanged();
}

Image slide not working good when viewpager and imageview in the same xml

I am doing a slide view , and by mistake I have added the pageview and ViewPager in same xml and that caused problems , when I tried to fix it the slide stoped working , so I need help to make the slide working.( In this tutorials 1 and 2 explained the viewpage should be in another xml but honestly I didnt understand why .
This is SingleViewActivity.java
public class SingleViewActivity extends Activity {
private ImageView image1;
ViewPager viewPager;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.single_view);
//
slide mCustomPagerAdapter = new slide(this);
viewPager = (ViewPager) findViewById(R.id.viewPager);
viewPager.setAdapter(mCustomPagerAdapter);
}}
and this is slide.java
public class slide extends PagerAdapter{
Context mContext;
LayoutInflater mLayoutInflater;
public slide(Context context) {
mContext = context;
mLayoutInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
#Override
public int getCount() {
return mThumbIds.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == ((LinearLayout) object);
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
View itemView = mLayoutInflater.inflate(R.layout.activity_main, container, false);
ImageView imageView = (ImageView) itemView.findViewById(R.id.SingleView);
imageView.setImageResource(mThumbIds[position]);
container.addView(itemView);
return itemView;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((LinearLayout) object);
}
public Integer[] mThumbIds =
{
R.drawable.sample2,
R.drawable.sample2,
R.drawable.sample2,
R.drawable.sample2,
R.drawable.sample2,
R.drawable.sample2,
R.drawable.sample2,
R.drawable.sample2
};
}
Single view.xml
<ImageView android:id="#+id/SingleView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/edittextm"/>
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
As I understand view pager should be in another xml , please note that I want the images to slide in SingleViewactivity.

The ViewPager should be in the main Activity's XML.
The different pages in the ViewPager should be a separate XML layout.

Android Not able to share correct text from viewpager

I am trying to share the text that i am showing on viewpager on a button click but it's sending the text from the next page. Like on the first page of viewpager its showing '0' and when I am sharing it to whats app or sms, its sending the text '1' i.e next text from string array.
Here is my code.
SampleFragmant.java
public class SampleFragmant extends Fragment {
ViewPager viewPager;
SampleAdapter adapter;
ImageView shareButton, saveButton;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.sample,
container, false);
viewPager = (ViewPager) rootView
.findViewById(R.id.view_pager);
shareButton = (ImageView) rootView.findViewById(R.id.shareButton);
shareButton.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View arg0) {
Intent sharingIntent = new Intent(
android.content.Intent.ACTION_SEND);
sharingIntent.setType("text/plain");
String shareBody = adapter.textposition;
sharingIntent.putExtra(android.content.Intent.EXTRA_SUBJECT,
"Test Application:");
sharingIntent.putExtra(android.content.Intent.EXTRA_TEXT,
shareBody);
startActivity(Intent.createChooser(sharingIntent, "Share via"));
}
});
adapter = new SampleAdapter(getActivity());
viewPager.setAdapter(adapter);
return rootView;
}
}
SampleAdapter.java
public class SampleAdapter extends PagerAdapter {
Context context;
public String textposition;
private String[] textToDisplay = new String[] {
"0","1","2","3","4","5","6"};
#Override
public int getCount() {
// TODO Auto-generated method stub
return textToDisplay.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
// TODO Auto-generated method stub
return view == ((TextView) object);
}
#Override
public Object instantiateItem(View container, int position) {
// TODO Auto-generated method stub
TextView textView = new TextView(context);
textView.setText(textToDisplay[position]);
textposition= textToDisplay[position];
textView.setTextSize(16);
textView.setTypeface(null, Typeface.BOLD_ITALIC);
textView.setGravity(Gravity.CENTER);
((ViewPager) container).addView(textView, 0);
return textView;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager) container).removeView((TextView) object);
}
}

By default ViewPager creates several views at once. For instance, if a view with position 5 is shown to user, it will create views with positions 4, 5 and 6. This is needed for smooth transition animations and controlled by setOffscreenPageLimit(int limit) (by default limit is 1). So, it will instantiate views for these positions by invoking instantiateItem method. And that's why it's incorrect to assume that the position you get in instantiateItem is the position of a view that is shown to user.
Instead of that you should use onPageSelected(int position) of ViewPager.OnPageChangeListener to determine a position of current view.

problems with listview using in viewpager?

i want to add a single listview in four pages of viewpager with different data for each page.
Vector pages = new Vector();
pages.add(listAppStore1);
pages.add(listAppStore2);
pages.add(listAppStore3);
pages.add(listAppStore4);
ViewPager vp = (ViewPager) findViewById(R.id.viewpager);
CustomPagerAdapter adapter = new CustomPagerAdapter(AppsActivity.this,pages);
vp.setAdapter(adapter);
vp.setOnPageChangeListener(new OnPageChangeListener() {
public void onPageSelected(int arg0) {
// TODO Auto-generated method stub
}
public void onPageScrolled(int arg0, float arg1, int position) {
// TODO Auto-generated method stub
}
public void onPageScrollStateChanged(int position1) {
// TODO Auto-generated method stub
if (position1==0) {
modifydata();
myAppStore.setadapter(mStoreAdapter);
} else if (position1==1) {
modifydata();
myAppStore.setadapter(mStoreAdapter);
}else if (position1==2) {
modifydata();
myAppStore.setadapter(mStoreAdapter);
}else if (position1==3) {
modifydata();
myAppStore.setadapter(mStoreAdapter);
}
}
});
}
and here is adapter class
public class CustomPagerAdapter extends PagerAdapter {
private Context mContext;
private Vector<View> pages;
public CustomPagerAdapter(Context context, Vector<View> pages) {
this.mContext=context;
this.pages=pages;
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
View page = pages.get(position);
container.addView(page);
return page;
}
#Override
public int getCount() {
return 3;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view.equals(object);
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
i am getting error in logcat after force close is
The specified child already has a parent. You must call removeView() on the child's parent first. any idea please!!!!!
now i have changed it with four listview.... and it is showing only three pages!!!where is the fouth one? And if pagerviewer holds only three pages at one time how to remove the first one on fourth position and vice versa????

you are adding different views in the same parent(container) in instantiateItem method..remove this line from the instantiateItem()
container.addView(page);

Here, you are using a single list view object for all the 4 times(View pager childs). But in this is not acceptable. You can't add a single view object more than one time.
And also ViewPager accepts only 3 childs alive at a time(Current visible , previous to current visible, next to current visible).
So, Better to create new listview object each time

Am I wrong assuming you are adding the same instance of listAppStore to pages ?
If no it is the possible cause of the error.
You should initialize your views directly in the adapter and not outside it. The adapter should be only provided with data that is passed to the view for the given position.