How to use swipe left gesture to read a full news article in Inshorts news app | Inshorts News App Clone PART 3 | Android Studio | Firebase
In this series of tutorials, we are going to create a clone app of Inshorts News App using Firebase Realtime Database. Before starting make sure you are ready with the vertical viewPager and Firebase Database connection, if not then see the PART 1 and PART 2 of the Inshorts News App Clone.
Today, In this tutorial we are going to see how to use the swipe left gesture to read a full news article in Inshort news app.
Overview
Before create, let’s see what we’re going to create.
Part 1: add a page change listener
- For each news position, we need to store its position in a variable and for direction, we take two float variables.
int newposition;float x1,x2;
- After then add page change listener in where we set our data in the adapter class
public class ViewPagerAdapter extends PagerAdapter {
……………..
int newposition;
float x1,x2;
public ViewPagerAdapter(Context context, List<SliderItems> sliderItems, ArrayList<String> titles, ArrayList<String> desc, ArrayList<String> newslinks, ArrayList<String> heads, VerticalViewPager verticalViewPager) {
………………
}
@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);
…………………..
verticalViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
//save position value in newposition variable on page change
newposition = position;
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
container.addView(itemView);
return itemView;
}
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
container.removeView((LinearLayout) object);
}
}
- then set on touch listener in the vertical ViewPager
- here we will set the touch to the left i.e. when we swipe left a new activity will open, where we set our newsLink.
public class ViewPagerAdapter extends PagerAdapter {
……
int newposition;
float x1,x2;
public ViewPagerAdapter(Context context, List<SliderItems> sliderItems, ArrayList<String> titles, ArrayList<String> desc, ArrayList<String> newslinks, ArrayList<String> heads, VerticalViewPager verticalViewPager) {
………….
}
@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);
………………..
verticalViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
…………..
});
verticalViewPager.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
switch (motionEvent.getAction()){
case MotionEvent.ACTION_DOWN:
x1 = motionEvent.getX();
break;
case MotionEvent.ACTION_UP:
x2 = motionEvent.getX();
float deltaX = x1-x2;
if (deltaX > 300){
Intent i = new Intent(context, NewsDetailActivty.class);
if (position == 1){
//for first page
i.putExtra("url", newslinks.get(0));
context.startActivity(i);
}
else {
//when page scrolled
i.putExtra("url", newslinks.get(newposition));
context.startActivity(i);
}
}
break;
}
return false;
}
});
container.addView(itemView);
return itemView;
}
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
container.removeView((LinearLayout) object);
}
}
Part 2: Details Activity
- Now, create a new activity(/package/activities/NewActivity) and add a WebView for our newsLink.
- Create a WebView in the new XML file
<WebView android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/webview"/>
- And, In the new java file gets the data from intent and shows it in the webView.
public class NewsDetailActivty extends AppCompatActivity {
String newslink;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_news_detail_activty);
// get data from intent
Intent i = getIntent();
newslink = i.getStringExtra(“url”);
WebView view = (WebView) findViewById(R.id.webview);
view.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return false;
}
});
view.getSettings().setJavaScriptEnabled(true);
view.loadUrl(newslink);
}
}
Part 3: Give Permissions
- before running the app gives the INTERNET and ACCESS_NETWORK_STATE permission
<?xml version=”1.0" encoding=”utf-8"?>
<manifest xmlns:android=”http://schemas.android.com/apk/res/android"
package=”com.codewithgolap.inshorts”>
<uses-permission android:name=”android.permission.INTERNET” />
<uses-permission android:name=”android.permission.ACCESS_NETWORK_STATE” />
<application
android:allowBackup=”true”
android:icon=”@mipmap/ic_launcher”
android:label=”@string/app_name”
android:roundIcon=”@mipmap/ic_launcher_round”
android:supportsRtl=”true”
android:theme=”@style/AppTheme”>
<activity android:name=”.SplashActivity”>
<intent-filter>
<action android:name=”android.intent.action.MAIN” />
<category android:name=”android.intent.category.LAUNCHER” />
</intent-filter>
</activity>
<activity android:name=”.NewsDetailActivty” />
<activity android:name=”.MainActivity”>
</activity>
<meta-data
android:name=”preloaded_fonts”
android:resource=”@array/preloaded_fonts” />
</application>
</manifest>
