Ticker

6/recent/ticker-posts

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

 

************

Make sure you add the CardView dependency in the build.gradle App module.

implementation 'androidx.cardview:cardview:1.0.0'


Overview



Now lets 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 String image;

   
public SliderItems(String image) {
       
this.image = image;
    }

   
public String getImage() {
       
return image;
    }
}

**here for images, I used String datatype but later change it to 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));

    }
}



Part 2->CLICK HERE


**Stay tuned for later parts** 

In the next part, we will see how to SetupFirebase Database and Retrieve data from Firebase in Android.

 





Post a Comment

0 Comments