android dynamic text with view pager

Question

I have implemented a view pager in android app. I want dynamic text views to be displayed at the top and bottom of the image view. How to set different texts for every image on view pager? Let me know your suggestions.

Thanks.

Answer 1

You need to create custom PagerAdapter for this. I will show you a littel example :

Your Activity :

public class MainActivity
    extends Activity{

@Override
public void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    setContentView(R.layout.view_main);

    List<CustomObject> items = new ArrayList<CustomObject>();
    items.add(new CustomObject("First Top","First Bot"));
    items.add(new CustomObject("Second Top","Second Bot"));
    items.add(new CustomObject("Third Top","Third Bot"));

    ViewPager viewPager = (ViewPager)findViewById(R.id.viewPager);
    CustomPagerAdapter customPagerAdapter = new CustomPagerAdapter(this,items);
    viewPager.setAdapter(customPagerAdapter);
}}

Your adapter :

public class CustomPagerAdapter
    extends PagerAdapter{

List<CustomObject> items;
LayoutInflater inflater;

public CustomPagerAdapter(Context context, List<CustomObject> items)
{
    this.inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    this.items = items;
}


@Override
public boolean isViewFromObject(View view, Object object)
{
    return view == ((RelativeLayout) object);
}

@Override
public int getCount()
{
    return items.size();
}

    @Override
public void destroyItem(ViewGroup container, int position, Object object)
{
    ((ViewPager) container).removeView((View)object);
}

@Override
public Object instantiateItem(ViewGroup container, int position)
{

    View itemView;
    itemView = inflater.inflate(R.layout.your_item_layout, container, false);

    TextView topTextItem = (TextView) itemView.findViewById(R.id.topText);
    TextView bottomTextItem = (TextView) itemView.findViewById(R.id.bottomText);

    CustomObject customObject = items.get(position);

    topTextItem.setText(customObject.topText);
    bottomTextItem.setText(customObject.bottomText);

    ((ViewPager) container).addView(itemView);

    return itemView;
}}

Main layout - view_main :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical" >

<android.support.v4.view.ViewPager
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Layout item - your_item_layout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

<TextView
    android:id="@+id/topText"
    style="@android:style/TextAppearance.Medium"
    android:layout_marginTop="20dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="Top Text" />


<ImageView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:src="@android:drawable/ic_delete" />

<TextView
    style="@android:style/TextAppearance.Medium"
    android:layout_alignParentBottom="true"
    android:id="@+id/bottomText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="20dp"
    android:gravity="center"
    android:text="Bottom Text" />

Best wishes.