How to create Vertical ViewPager with swipe card in Android | Inshorts News App Clone PART 1 | Android Studio
In this series of tutorials, we are going to create a clone app of Inshorts News App using Firebase Realtime Database.
Today we will make our Vertical ViewPager with viewPager view transformer and Vertical Swipe Card.
Before going to make, let’s understand a little bit about ViewPager.
What is ViewPager?
ViewPager allows us to flip left and right through pages of data. The ViewPager uses a PagerAdapter whose job is to supply views to the MainActivity similar to what a ListAdapter does for a ListView.
Want to know more about ViewPager? Click Here
Overview
Now let's make our ViewPager, which is used to swipe up, down, and left.
Part 1: create VerticalViewPager class.
- Right-click on the java package and create a new java file named VerticalViewPager.java (/package/VerticalViewPager.java). Create Vertical ViewPager class.
public class VerticalViewPager extends ViewPager {
public VerticalViewPager(@NonNull Context context) {
super(context);
}public VerticalViewPager(@NonNull Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}}
- Next, implement PageTransformer method and set the PageTransformer inside the VerticalViewPager method.
public VerticalViewPager(@NonNull Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
setPageTransformer(true,new VerticalPageTransformer());
setOverScrollMode(OVER_SCROLL_NEVER);
}
private class VerticalPageTransformer implements ViewPager.PageTransformer{
@Override
public void transformPage(@NonNull View page, float position) {}
}
- Now, change the page positions inside the VerticalPageTransformer.
private class VerticalPageTransformer implements ViewPager.PageTransformer{
@Override
public void transformPage(@NonNull View page, float position) {
//now check positions
if (position < -1){
//[-infinite, -1] ; if this page is way off screen to the left
page.setAlpha(0);
}else if (position <= 0){
//[-1,0] ; use the default slide transition when moving to the left
page.setAlpha(1);
//counteract the default slide transition
page.setTranslationX(page.getWidth()* -position);
//set Y position to swipe in from top
float yPosition = position * page.getHeight();
page.setTranslationY(yPosition);
page.setScaleX(1);
page.setScaleY(1);
}else if (position <= 1){
//[0,1] ; counteract the defauly slide transition
page.setTranslationX(page.getWidth() * -position);
//to scalethe page down
float scale = 0.75f + (1–0.75f) * (1 — Math.abs(position));
page.setScaleX(scale);
page.setScaleY(scale);
}else {
//[1, +infinity] ; this page way off screen to the right
page.setAlpha(0);
}
}
}
- Next, swap the X and Y coordinates using MotionEvent object
private MotionEvent swapXYCordinates(MotionEvent event){
//now swap x and y coordinates using this
float width = getWidth();
float height = getHeight();
float newX = (event.getY()/height) * width;
float newY = (event.getX()/width) * height;
event.setLocation(newX, newY);
return event;
}
- next implement the Intercept Touch Event to handle the touch events.
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
boolean intercepted = super.onInterceptTouchEvent(swapXYCordinates(ev));
swapXYCordinates(ev);
return intercepted;
}
- Last implement the touch event
@Override
public boolean onTouchEvent(MotionEvent ev) {
return super.onTouchEvent(swapXYCordinates(ev));
}
VerticalViewPager.java
package com.codewithgolap.inshorts;
import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.viewpager.widget.ViewPager;
public class VerticalViewPager extends ViewPager {
public VerticalViewPager(@NonNull Context context) {
super(context);
}
public VerticalViewPager(@NonNull Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
setPageTransformer(true,new VerticalPageTransformer());
setOverScrollMode(OVER_SCROLL_NEVER);
}
private class VerticalPageTransformer implements ViewPager.PageTransformer{
@Override
public void transformPage(@NonNull View page, float position) {
//now check positions
if (position < -1){
//[-infinite, -1] ; if this page is way off screen to the left
page.setAlpha(0);
}else if (position <= 0){
//[-1,0] ; use the default slide transition when moving to the left
page.setAlpha(1);
//counteract the default slide transition
page.setTranslationX(page.getWidth()* -position);
//set Y position to swipe in from top
float yPosition = position * page.getHeight();
page.setTranslationY(yPosition);
page.setScaleX(1);
page.setScaleY(1);
}else if (position <= 1){
//[0,1] ; counteract the defauly slide transition
page.setTranslationX(page.getWidth() * -position);
//to scalethe page down
float scale = 0.75f + (1–0.75f) * (1 — Math.abs(position));
page.setScaleX(scale);
page.setScaleY(scale);
}else {
//[1, +infinity] ; this page way off screen to the right
page.setAlpha(0);
}
}
}
private MotionEvent swapXYCordinates(MotionEvent event){
//now swap x and y coordinates using this
float width = getWidth();
float height = getHeight();
float newX = (event.getY()/height) * width;
float newY = (event.getX()/width) * height;
event.setLocation(newX, newY);
return event;
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
boolean intercepted = super.onInterceptTouchEvent(swapXYCordinates(ev));
swapXYCordinates(ev);
return intercepted;
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
return super.onTouchEvent(swapXYCordinates(ev));
}
}
Part 2: design the UI for the Inshorts App
Go to the main activity layout file (/res/layout/activity_main.xml) and create the vertical viewPager
<?xml version=”1.0" encoding=”utf-8"?>
<RelativeLayout 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:background=”@color/white”
tools:context=”.MainActivity”>
<com.codewithgolap.inshorts.VerticalViewPager
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:id=”@+id/verticalViewPager”/>
</RelativeLayout>
Part 3: create Item Container
Now create the item for the vertical view pager. Right-click on the layout folder and create a new drawable resource file (/res/layout/new/drawable resource file/item_container.xml) inside it (take reference from the inshorts app)
<?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"
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:minHeight=”500dp”
android:orientation=”vertical”>
<androidx.cardview.widget.CardView
android:id=”@+id/card_view”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:layout_gravity=”center”
app:cardCornerRadius=”10dp”>
<LinearLayout
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:background=”@color/black”
android:orientation=”vertical”>
<ImageView
android:id=”@+id/imageView”
android:layout_width=”match_parent”
android:layout_height=”300dp”
android:scaleType=”fitXY”
android:src=”@drawable/ic_launcher_background” />
<TextView
android:id=”@+id/headline”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_marginStart=”10dp”
android:layout_marginTop=”10dp”
android:layout_marginEnd=”10dp”
android:fontFamily=”@font/halant_medium”
android:includeFontPadding=”true”
android:text=”Headline”
android:textColor=”@color/white”
android:textSize=”16sp” />
<TextView
android:id=”@+id/desc”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_marginStart=”10dp”
android:layout_marginTop=”8dp”
android:layout_marginEnd=”10dp”
android:fontFamily=”@font/halant”
android:includeFontPadding=”true”
android:maxLines=”4"
android:text=”description”
android:textColor=”@color/off_black”
android:textSize=”13sp” />
<TextView
android:id=”@+id/swipetext”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_marginStart=”10dp”
android:layout_marginTop=”10dp”
android:layout_marginEnd=”10dp”
android:fontFamily=”@font/halant_medium”
android:padding=”2dp”
android:text=”Swipe left to read more”
android:textColor=”@color/white”
android:textSize=”10sp” />
</LinearLayout>
<ImageView
android:id=”@+id/imageView2"
android:layout_width=”match_parent”
android:layout_height=”70dp”
android:layout_gravity=”bottom”
android:scaleType=”centerCrop”
android:src=”@drawable/ic_launcher_background” />
<TextView
android:id=”@+id/head”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_gravity=”bottom”
android:layout_marginStart=”20dp”
android:layout_marginTop=”10dp”
android:layout_marginEnd=”20dp”
android:layout_marginBottom=”20dp”
android:fontFamily=”@font/halant_medium”
android:includeFontPadding=”true”
android:text=”head”
android:textColor=”@color/white”
android:textSize=”13sp” />
</androidx.cardview.widget.CardView>
</LinearLayout>
You can use your own item layout, this is just a reference for you.
Part 4: create a class for images that are fetched from the link
- For images create a model class
package com.codewithgolap.inshorts.adapters;
public class SliderItems {
private int image;
public SliderItems(int image) {
this.image = image;
}
public int getImage() {
return image;
}
}**here for images, I used int datatype because later I fetched the image as a link from the news portal.
Part 5: create View pager Adapter
Now create a ViewPager Adapter to inflate out item container. Go to the java package and create a new java class named ViewPagerAdapter.java (/package/adapter/ViewPagerAdapter.java)
public class ViewPagerAdapter extends PagerAdapter {
List<SliderItems> sliderItems;
LayoutInflater mLayoutInflater;
Context context;
public ViewPagerAdapter(Context context, List<SliderItems> sliderItems) {
this.context = context;
this.sliderItems = sliderItems;
mLayoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
@Override
public int getCount() {
return sliderItems.size();
}
@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
return view == ((LinearLayout) object);
}
@NonNull
@SuppressLint(“ClickableViewAccessibility”)
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
View itemView = mLayoutInflater.inflate(R.layout.item_container, container, false);
ImageView imageView = itemView.findViewById(R.id.imageView);
imageView.setImageResource(sliderItems.get(position).getImage());container.addView(itemView);
return itemView;
}
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
container.removeView((LinearLayout) object);
}
}
Part 6: add some items
Now go to the main activity and add some items (/package/MainActivity.java)
public class MainActivity extends AppCompatActivity {
//now create list of type slider items
List<SliderItems> sliderItems = new ArrayList<>();@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final VerticalViewPager verticalViewPager = (VerticalViewPager) findViewById(R.id.verticalViewPager);sliderItems.add(new SliderItems(R.drawable.ic_lanucher_background));
sliderItems.add(new SliderItems(R.drawable.ic_lanucher_background));
sliderItems.add(new SliderItems(R.drawable.ic_lanucher_background));
verticalViewPager.setAdapter(new ViewPagerAdapter(MainActivity.this, sliderItems));}
}**Stay tuned for later parts**
