View Pager and Adding Text View Dynamically

The ViewPager is the widget that allows the user to swipe left or right to see an entirely new screen. 

In this tutorial, you will learn how to implement a viewpager gallery of images and Left, Right arrow icon in your Android application

Sample code:
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:background="@drawable/roundcorners_darkgrey_border"
    android:orientation="vertical">

    <TextView
        android:id="@+id/cd_tv_city"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:text="Matching Properties"
        android:textColor="#000000"
        android:textSize="18dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="2dp"
        android:text="Individual: Raja K"
        android:textColor="#000000" />


    <FrameLayout
        android:id="@+id/view_pager_image_layout"
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        android:orientation="vertical">

        <android.support.v4.view.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center" />

        <RelativeLayout
            android:id="@+id/imageview_left_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left|center_vertical"
            android:visibility="gone">

            <TextView
                android:layout_width="40dp"
                android:layout_height="50dp"
                android:background="@drawable/white_shadow"
                android:gravity="center"
                android:textColor="@android:color/white"
                android:textSize="25dp" />

            <TextView
                android:id="@+id/arrow"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:shadowColor="#000000"
                android:shadowDx="2"
                android:shadowDy="1"
                android:shadowRadius="3"
                android:text="@string/unit_left_arrow_icon"
                android:textColor="@android:color/white"
                android:textSize="16dp" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/imageview_right_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right|center_vertical"
            android:visibility="gone">

            <TextView
                android:layout_width="40dp"
                android:layout_height="50dp"
                android:background="@drawable/white_shadow_rgt"
                android:gravity="center"
                android:textColor="@android:color/white"
                android:textSize="25dp" />

            <TextView
                android:id="@+id/arrow1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:shadowColor="#000000"
                android:shadowDx="1"
                android:shadowDy="2"
                android:shadowRadius="3"
                android:text="@string/unit_right_arrow_icon"
                android:textColor="@android:color/white"
                android:textSize="16dp" />
        </RelativeLayout>


    </FrameLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="10dp"
        android:orientation="horizontal"
        android:weightSum="10">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="5"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/view_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/icon_star_active"
                android:textColor="#33B5E5" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="View"
                android:textColor="#33B5E5" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="5"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/short_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/icon_star_active"
                android:textColor="#33B5E5" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="ShortList"
                android:textColor="#33B5E5" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/phone_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/dedicatedtelephonelineavailable_icon"
                android:textColor="#33B5E5" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Express Interest"
                android:textColor="#33B5E5" />
        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/bottom_layer"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:orientation="horizontal">

    </LinearLayout>

</LinearLayout>

Java code:


package androidapp.test.com.viewpagerproject;

import android.app.ActionBar;
import android.app.Activity;
import android.graphics.Color;
import android.graphics.Typeface;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.Window;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

import java.nio.charset.MalformedInputException;
import java.util.ArrayList;

public class MainActivity extends Activity {
    ViewPager viewPager;
    private ArrayList<ImageItem> Image_list;
    private RelativeLayout leftNavigate;
    private RelativeLayout rightNavigate;
    private TextView view_image, short_image, phone_image, star;
    private LinearLayout lm;
    // private TextView image1,image2,image3,image4,image5;
    //  Typeface tfAndroidFont;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        viewPager = (ViewPager) findViewById(R.id.view_pager);
        leftNavigate = (RelativeLayout) findViewById(R.id.imageview_left_image);
        rightNavigate = (RelativeLayout) findViewById(R.id.imageview_right_image);
        view_image = (TextView) findViewById(R.id.view_image);
        short_image = (TextView) findViewById(R.id.short_image);
        phone_image = (TextView) findViewById(R.id.phone_image);


        // view_image.setTypeface(tfAndroidFont);
        // phone_image.setTypeface(tfAndroidFont);
        // short_image.setTypeface(tfAndroidFont);
        Image_list = new ArrayList<ImageItem>();
        for (int i = 0; i < 5; i++) {
            ImageItem img = new ImageItem();
            if (i == 0) img.img_url = R.drawable.me;
            if (i == 1) img.img_url = R.drawable.me2;
            if (i == 2) img.img_url = R.drawable.me;
            if (i == 3) img.img_url = R.drawable.me2;
            if (i == 4) img.img_url = R.drawable.me;
            img.title = "Android";
            img.id = "Easy";
            Image_list.add(img);
        }
        //Create four
        lm = (LinearLayout) findViewById(R.id.bottom_layer);
        dynamicView(0);

        if (Image_list.size() == 1) {
            rightNavigate.setVisibility(View.GONE);
            leftNavigate.setVisibility(View.GONE);

        } else {
            leftNavigate.setVisibility(View.GONE);
            rightNavigate.setVisibility(View.VISIBLE);
        }
        PageListener pageListener = new PageListener();
        viewPager.setOnPageChangeListener(pageListener);

        ImageAdapter adapter = new ImageAdapter(MainActivity.this, Image_list);
        viewPager.setAdapter(adapter);

        leftNavigate.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View arg0) {
                viewPager.setCurrentItem(viewPager.getCurrentItem() - 1);
            }
        });

        rightNavigate.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View arg0) {
                viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
            }
        });


    }


    private class PageListener extends ViewPager.SimpleOnPageChangeListener {
        @Override
        public void onPageSelected(int position) {
            try {
                // Log.i("View Pager", "page selected " + position);

                int currentPage = position + 1;
                lm.removeAllViews();
                dynamicView(position);
                if (currentPage == 1) {
                    leftNavigate.setVisibility(View.GONE);
                    rightNavigate.setVisibility(View.VISIBLE);
                } else if (currentPage == Image_list.size()) {

                    leftNavigate.setVisibility(View.VISIBLE);
                    rightNavigate.setVisibility(View.GONE);
                } else {
                    leftNavigate.setVisibility(View.VISIBLE);
                    rightNavigate.setVisibility(View.VISIBLE);
                }


            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }


    public void dynamicView(int pos) {
        for (int j = 0; j < Image_list.size(); j++) {
            LinearLayout ll = new LinearLayout(MainActivity.this);
            ll.setOrientation(LinearLayout.HORIZONTAL);
            // Create TextView
            star = new TextView(MainActivity.this);
            star.setText("S");
            //  star.setTypeface(tfAndroidFont);
            if (pos == j) {
                star.setTextColor(Color.BLUE);
            } else {
                star.setTextColor(Color.RED);
            }

            star.setTextSize(25);
            star.setPadding(10, 0, 0, 0);
            star.setId(j);
            ll.addView(star);
            lm.addView(ll);
            star.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(getApplicationContext(), "Clicked", Toast.LENGTH_LONG).show();
                    viewPager.setCurrentItem(v.getId());
                }
            });

        }

    }
}

To Get Full Code:

Click Here