Search This Blog

Tuesday, November 7, 2017

Custom ViewPager with Image using PageAdapter.

Screen slides are transitions between one entire screen to another and are common with UIs like setup wizards or slideshows. This lesson shows you how to do screen slides with a  View Pager provided by the support libraryView Pages can animate screen slides automatically. 

This example show how to implement View Pager with custom Pager Adapter. 


Steps:1 Below is my MainActivity name is MyViewPager.class





my_pageviwer.xml : Add android.support.v4.view.ViewPager  widgets in your 
                                          MainActivity.xml

 <?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"  
   android:id="@+id/linearlayout"  
   tools:context="com.example.aaru.costomizegride.MyViewPager"  
 >  
   <android.support.v4.view.ViewPager  
     android:layout_width="match_parent"  
     android:layout_height="match_parent"  
     android:id="@+id/viewPager"  
     ></android.support.v4.view.ViewPager>  
 </LinearLayout>  

MyViewPager.class: get View Pager ID add some dummy text in arraylist.

 package com.example.aaru.costomizegride;  
 import android.support.v4.view.ViewPager;  
 import android.support.v7.app.AppCompatActivity;  
 import android.os.Bundle;  
 import java.lang.reflect.Array;  
 import java.util.ArrayList;  
 public class MyViewPager extends AppCompatActivity {  
 ArrayList<String>alName=new ArrayList<String>();  
 @Override protected void onCreate(Bundle savedInstanceState) {  
 super.onCreate(savedInstanceState);  
 setContentView(R.layout.activity_my_view_pager);  
 ViewPager viewPager= (ViewPager) findViewById(R.id.viewPager);  
 for (int i=0;i<8;i++){  
 alName.add("Name "+(i+1));  
 }  
 CustomviewPager customviewPager=new CustomviewPager(alName,MyViewPager.this);  
 viewPager.setAdapter(customviewPager);  
 }  
 }  


pagerraw.xml  : Create xml layout i have create pagerraw.xml and add imageview and text.


 <?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:layout_width="match_parent"  
   android:layout_height="match_parent"  
   android:orientation="vertical"  
   >  
   <ImageView  
     android:layout_width="match_parent"  
     android:layout_height="400dp"  
     android:id="@+id/imageView"  
     android:src="@drawable/sample_0"  
     />  
   <TextView  
     android:id="@+id/textView"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:text="Puppy"  
     android:layout_gravity="center"  
     android:textSize="20dp"    />  
 </LinearLayout>  






CustomviewPager .class: Create a Java class name is customadapter and extend with  pager adapter. 


 package com.example.aaru.costomizegride;  
 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.LinearLayout;  
 import android.widget.TextView;  
 import java.util.ArrayList;  
 /** * Created by Aaru on 9/28/2017. */  
 public class CustomviewPager extends PagerAdapter {  
   ArrayList<String> alName=new ArrayList<String>();  
   Context context;  
   LayoutInflater layoutInflater;  
   public CustomviewPager(ArrayList<String> alName, Context context){  
     this.alName=alName;  
     this.context=context;  
      layoutInflater=(LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
   }  
   @Override  public int getCount() {  
     return alName.size();  
   }  
   @Override  public boolean isViewFromObject(View view, Object object) {  
     return view==((LinearLayout)object);  
   }  
   @Override  public void destroyItem(ViewGroup container, int position, Object object) {  
     container.removeView((LinearLayout)object);  
   }  
   @Override  public Object instantiateItem(ViewGroup container, int position) {  
     View view =layoutInflater.inflate(R.layout.pagerraw,container,false);  
     TextView textView=(TextView)view.findViewById(R.id.textView);  
     textView.setText(alName.get(position));  
     ((ViewPager)container).addView(view);  
     return view;  
   }  
 }  








>>>>>>>>>>>>>>>>>>.Enjoy Coding<<<<<<<<<<<<<<<<<<<

No comments:

Post a Comment