Create a Slider Using ViewPager
Use of ViewPager for sliding Views.
slider, slide, pager,
for making this we should do 3 things :
============================== 😋😋😋😋😋 =============================
💪1. Taking ViewPager in our targeted / main activity
💪2. Create a Layout Resource File (ex: Slide.xml) into layout folder. and design it as wish.
😈3.Create an Adapter extends PageAdapter (Ex: SlideAdapter.java).
Here all the complexity starts baby (3 points). 😪
💓4. Now Set Adapter With ViewPager into java file. (Ex: MainActivity.java)
============================== 😋😋😋😋😋 =============================
1. Add a ViewPager to your activity home :
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager> 
2. Create a Layout Resource File (ex: Slide.xml) into layout folder. and design it as wish.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="@+id/slideLinearLayout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<ImageView
android:id="@+id/imageSlide"
android:layout_width="200dp"
android:layout_height="200dp"
android:src="@drawable/image_1"/>
<TextView
android:textColor="#fff"
android:id="@+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title Here"
android:textSize="30sp"
android:textStyle="bold"
android:layout_marginTop="40dp"/>
<TextView
android:textColor="#fff"
android:id="@+id/txtDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text Description Here"
android:textSize="17sp"
android:layout_marginTop="40dp"
android:textAlignment="center"/>
</LinearLayout>
😈3.Create an Adapter extends PageAdapter (Ex: SlideAdapter.java).
a. extends by PageAdapter
b. Implements all the method.
c. Make a constructor with the context and define this.context
d. do the same as below.😭
package com.nirjhor3029.sliderusingviewpager;
import android.content.Context;
import android.graphics.Color;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
/**
* Created by nirjhor on 1/22/2018.
*/
public class SlideAdapter extends PagerAdapter {
Context context;
LayoutInflater layoutInflater;
//list of images
public int[] list_img ={
R.drawable.image_1,
R.drawable.image_2,
R.drawable.image_3,
R.drawable.image_4
};
//list of Title
public String[] list_title = {
"Cosmonut",
"SATALITE",
"GALAXY",
"ROCKET"
};
//list of Description
public String[] list_des = {
"Description 1",
"Description 2",
"Description 3",
"Description 4"
};
//list of Background Colors
public int[] list_bgColor={
Color.rgb(55,55,55),
Color.rgb(239,85,85),
Color.rgb(110,49,89),
Color.rgb(1,188,212)
};
public SlideAdapter(Context context) {
this.context = context;
}
@Override
public int getCount() {
return list_title.length;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((LinearLayout)object);
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
//Active the inflater service
layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
//make or generate a view of slide, with the help of inflater
View view = layoutInflater.inflate(R.layout.slide,container,false);
//define every detail by the help of generated view. ;)
LinearLayout layoutSlide = (LinearLayout) view.findViewById(R.id.slideLinearLayout);
ImageView img = (ImageView) view.findViewById(R.id.imageSlide);
TextView txt_title = (TextView) view.findViewById(R.id.txtTitle);
TextView txt_Des = (TextView) view.findViewById(R.id.txtDescription);
//Now initialize every detail of slide view or generated view ;)
layoutSlide.setBackgroundColor(list_bgColor[position]);
img.setImageResource(list_img[position]);
txt_title.setText(list_title[position]);
txt_Des.setText(list_des[position]);
container.addView(view);
//At last Return The generated, defined, initialized new view with new content for showing :P
return view;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return (view == (LinearLayout) object); //keno korlam ? ================ ?
}
}
💓4. Now Set Adapter With ViewPager into java file. (Ex: MainActivity.java)
package com.nirjhor3029.sliderusingviewpager;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
private ViewPager viewPager;
private SlideAdapter slideAdapter;
private TextView txt;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//initialize
viewPager = (ViewPager) findViewById(R.id.viewPager);
slideAdapter = new SlideAdapter(this);
//set Adapter
viewPager.setAdapter(slideAdapter);
}
}
========================== 😼😽😾😿😨 =========================
Final View.
মন্তব্যসমূহ
একটি মন্তব্য পোস্ট করুন