Ads Top

How To Create Swipe Views in Android App?



Android Swipe Views

Well, hello guys. We are back with a new useful Android tutorial. In this tutorial, I will explain how you can add �horizontal swipe views� to your android application by using �ViewPager�. Horizontal swipe views allow app users to swipe to their left or right, and be presented with a new screen. You see this often on your home screen, in your music player apps, social networking apps (like Facebook), contacts, call logs, etc. It accounts for excellent navigation of your app, and is marginally preferred to scrolling a long page. So let's get started!




ViewPager is a new feature that is available in Android API 11+. If you want to develop using API 11- then you have to use the �Android Support Library�, you can install this package with the help of the Android SDK Manager.





Here's we've covered so far with respect to Android App Development. These tutorials cover the very basics of Android App Development. So if you know absolutely nothing about app development, you can get a good start by following these tutorials. Make sure you have set up the SDK and have a basic understanding of creating a basic Android app before moving on with this tutorial.






Part 1: How To Set up the Android SDK for App Development?




Part 2: Create Your First "Hello World" Android App



Creating Swipe Views


Step 1: Create a new Android Application project




Using Eclipse create a new Android application project (�SwipeViews�). For this tutorial I have selected API 16 (Jelly Bean).





Create new project



Step 2: Create Multiple Layout Files




Create a new Android XML File in res/layout. For this right click Layout and select New >> Android XML File.





Create Layout Files




Set the file name as �page1�, and click finish button. Similarly, create 3 more layout files (page2, page3, and page4).





Create XML file



Step 3: Edit Newly Created Views




Now that you have created layout files, it�s time to add some material in them. Open �page1.xml� and copy the following code in it.




<?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"

android:background="#CCFF66"

>

<TextView

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:text="Page3"

android:textSize="33dp"

android:layout_marginTop="22dp"

android:layout_marginLeft="22dp"

/>

</LinearLayout>



Similarly, copy the following codes to their respective XML files. You can create your own as well. For the purpose of this tutorial, we'll just use colors and text to visually differentiate pages from each other.



Page2




<?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"

android:background="#66FFFF"

>

<TextView

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:text="Page2"

android:textSize="33dp"

android:layout_marginTop="22dp"

android:layout_marginLeft="22dp"

/>

</LinearLayout>



Page3




<?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"

android:background="#CCFF66"

>

<TextView

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:text="Page3"

android:textSize="33dp"

android:layout_marginTop="22dp"

android:layout_marginLeft="22dp"

/>

</LinearLayout>



Page4




<?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"

android:background="#E0A3FF"

>

<TextView

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:text="Page4"

android:textSize="33dp"

android:layout_marginTop="22dp"

android:layout_marginLeft="22dp"

/>

</LinearLayout>



Step 4: Edit MainActivity.xml




Now it�s time to edit our main activity. Open res/layout/activity_main.xml. And add




<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

<android.support.v4.view.ViewPager

android:id="@+id/customviewpager"

android:layout_width="match_parent"

android:layout_height="match_parent"

/>

</LinearLayout>



You can see that, we�ve added android.ViewPager tag in main_activity.xml.



Step 5: Create a custom page adapter




Now we need to create an adapter for ViewPager. For this right-click �com.example.swipeviews� and create new class �CustomPagerAdapter�.




Create new class




Add the following code after package name.




import android.content.Context;

import android.os.Parcelable;

import android.support.v4.view.PagerAdapter;

import android.support.v4.view.ViewPager;

import android.view.LayoutInflater;

import android.view.View;

public class CustomPagerAdapter extends PagerAdapter {

public Object instantiateItem(View collection, int position) {

LayoutInflater inflater = (LayoutInflater) collection.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);

int resId = 0;

switch (position) {

case 0: {

resId = R.layout.page1;

break;

}

case 1: {

resId = R.layout.page2;

break;

}

case 2: {

resId = R.layout.page3;

break;

}

case 3: {

resId = R.layout.page4;

break;

}

}

View view = inflater.inflate(resId, null);

((ViewPager) collection).addView(view, 0);

return view;

}

@Override

public void destroyItem(View arg0, int arg1, Object arg2) {

((ViewPager) arg0).removeView((View) arg2);

}

@Override

public boolean isViewFromObject(View arg0, Object arg1) {

return arg0 == ((View) arg1);

}

@Override

public Parcelable saveState() {

return null;

}

@Override

public int getCount() {

return 4;

}

}




If you want to add more views, simply add a new case and increment the return value of getCount().



Step 6: Edit MainActivity class.



Open MainActivity.java class. Add the following code after the package name.




import android.app.Activity;

import android.os.Bundle;

import android.support.v4.view.ViewPager;

import android.view.Menu;



public class MainActivity extends Activity {

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

// Create and set adapter

CustomPagerAdapter adapter = new CustomPagerAdapter();

ViewPager myPager = (ViewPager) findViewById(R.id.customviewpager);

myPager.setAdapter(adapter);

myPager.setCurrentItem(0);

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

getMenuInflater().inflate(R.menu.activity_main, menu);

return true;

}

}



Step 7: Execute :D



Right click �SwipeViews�, and click Run As >> Android Application.




Run Application




Open your app, and swipe left and right. You can see the pages change as you do so. In this way, you can create a simple yet powerful app that can provide varied functionality to the user.





Liked this tutorial? Share it with friends, and leave us feedback! Cheers :)

Categories

adsense adsense optimization adsense tips Animation Announcement Apps Background backlinks Basic blog Blog Design blogger Blogger Design Blogger Hack blogger pages blogger posts Blogger Security Blogger Special Tricks Blogger Templates Blogger Tips Blogger Tips & Tricks Blogger tools blogger tricks Blogger Widgets Blogger Widgets and plugins Blogging Basic Tips Blogging ethics Blogging tips Blogging Tools Blogging Tricks Btemplates 2013 Btemplates 2014 Bugs and Errors click bombing Comments css CSS and HTMLTricks CSS3 Cursors custom domain Design Drop Down Menu Earning Tips Editing emoticons Events Facebook Facebook tricks Featured Content Slider firebug Flash Free Coupons Free Recharge Gadget Generator Google Google AdSense Google Analytics Google Plus Google Plus Tricks Guest Posts Horizontal Menu How To HowTo Tuts HTML Image Image Effects Increase traffic instagram Interesting invalid clicks Java Script javascript jQuery Label labels Link Building Links LOGO Makers Make Money Make Money Online Marketing Menu bar menus Menus for Blogger Multi Tabbed Navigation navigation menu News Numbered Page Optimizing Other Tricks Page Photoshop Pop Out popular posts Post posts presentations Pure CSS Menu recent comments recent posts related posts Responsive Blogger Templates robots Rss Search box SEO SEO Strategy SEO Tips & Tricks sitemap Slide Show slideshows Social Media social media plugins statcounter static pages Style your Blog swf Tab Menu Template Template Designing Template Tricks Templates templates 2016 threaded comments Tips tools Traffic Tips Twitter Unlock modems Vertical bar Video Wallpapers Web Designing web hosting Webmaster Tools Widget Widget Generators Widgets wordpress WordPress Plugins WordPress Themes WordPress Tricks WP Tips
Powered by Blogger.