Attend XDA's Second Annual Developer Conference, XDA:DevCon 2014!
5,733,966 Members 50,626 Now Online
XDA Developers Android and Mobile Development Forum

[GUIDE][UP] How to easly Implement J.W. ViewPagerIndicator + transitions [SAMPLE APP]

Tip us?
 
ivn888
Old
(Last edited by ivn888; 15th October 2013 at 12:34 PM.) Reason: Title change
#1  
ivn888's Avatar
Senior Member - OP
Thanks Meter 853
Posts: 289
Join Date: Oct 2012
Location: NaN - Somewhere in Time

 
DONATE TO ME
Default [GUIDE][UP] How to easly Implement J.W. ViewPagerIndicator + transitions [SAMPLE APP]

IF YOU MAKE USE OF THIS GUIDE AND YOU WILL MAKE PUBLIC YOUR APPLICATION, PLEASE THANK THE OP AND GIVE ME & ENRICOCID CREDITS/MENTION . THANK YOU

1) Set Up Jake Wharton ViewPagerIndicator




IF YOU WANNA DOWNLOAD MY SAMPLE APP GO HERE:
http://forum.xda-developers.com/show...29&postcount=4





1 - Download JakeWharton ViewPagerIndicator:


Download from here: JakeWharton ViewPagerIndicator download

Or from the website: http://viewpagerindicator.com/



2 - OPEN ECLIPSE


First you need to extract "library" folder from the zip and save it in your documents folder, like the picture below:


Now drag & drop "library" folder to your Documents directory:


- Import downloaded ViewPagerIndicator Library to your workspace:
GO TO FILE > NEW > OTHER > ANDROID > ANDROID PROJECT FROM EXISTING CODE:



- Click next button and browse directory (1) to select the downloaded ViewPagerIndicator Library (2):
(1) CLICK BROWSE...
(2) AND SELECT "LIBRARY" FOLDER, GO TO Libraries > My Documents > Library, click OK.


Now give a name to this project (for example "ViewPagerIndicator") and check "Copy project into workspace", like the picture:


Click "Finish"





If you like my work don't Forget To Hit Thanks, five star or offer me a beer :P



Make a donation
The Following 10 Users Say Thank You to ivn888 For This Useful Post: [ Click to Expand ]
 
EnricoD
Old
(Last edited by EnricoD; 23rd September 2013 at 01:19 PM.)
#2  
EnricoD's Avatar
Recognized Contributor
Thanks Meter 3718
Posts: 2,131
Join Date: May 2013

 
DONATE TO ME
2) How to load VievPagerIndicator to Your Project


- Create a new Android Application Project:



- Give a name to your project (for example "ViewPagerTest"), like the picture below:



- Go next and click finish to create the project



- Now navigate to your project properties:


- Go to Android and Click "Add" to load the library into your project:




You will receive an error:


To fix this error you have two options:

- 1) delete the libs folder of your project:


- 2) [RECOMENDED]The best way is to copy the android-support-v4.jar from sdk/extras/android/support/v4 to your workspace/ViewPagerIndicator/libs folder, without deleting libs folder of your project!!!


If you have other errors like this:


go to ViewPagerIndicator properties and change the "Project Build Target". This must be equal to that of the ViewPagerTest project:







---------- Post added at 08:28 PM ---------- Previous post was at 08:27 PM ----------




3) Create Layouts



Blue = Add
Red = Delete

- Now go to res > layout


and edit activity_main.xml deleting the entire code:


Code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

</RelativeLayout>
Copy & paste the code below to your activity_main.xml

Code:
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <com.viewpagerindicator.TitlePageIndicator
        android:id="@+id/indicator"
        android:padding="10dip"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:background="#000000"
        android:textColor="#2FB3E3"
        app:footerColor="#2FB3E3"
        app:footerLineHeight="1dp"
        app:footerIndicatorHeight="3dp"
        app:footerIndicatorStyle="underline"
        app:selectedColor="#FFFFFF"
        app:selectedBold="true"
        />
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />

</LinearLayout>
Now create new .xml files in your layout folder (I will create 3 layouts for example). Go to New > other


and select "Android XML file":



Give a name to your xml file (for example "layout1") and select linear layout, click finish. See the picture:


Create two other layouts and call them "layout2" and "layout3":


The Following 4 Users Say Thank You to EnricoD For This Useful Post: [ Click to Expand ]
 
ivn888
Old
(Last edited by ivn888; 20th September 2013 at 05:01 PM.)
#3  
ivn888's Avatar
Senior Member - OP
Thanks Meter 853
Posts: 289
Join Date: Oct 2012
Location: NaN - Somewhere in Time

 
DONATE TO ME
4)Implement ViewPager using fragments



Blue = Add
Red = Delete

Now go to src > com.example.viewpagertest and edit MainActivity.java


Delete the content marked in red:

Code:
package com.example.viewpagertest;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class MainActivity extends Activity {

   @override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
	}

   @override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}
and add the following code:

Code:
import com.viewpagerindicator.PageIndicator;
import com.viewpagerindicator.TitlePageIndicator;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import com.example.viewpagertest.R;

public class MainActivity extends FragmentActivity {
    
    FragmentAdapter mAdapter;
    ViewPager mPager;
    PageIndicator mIndicator;
    int Number = 0;

      @override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        mAdapter = new FragmentAdapter(getSupportFragmentManager());

        mPager = (ViewPager)findViewById(R.id.pager);
        mPager.setAdapter(mAdapter);

        mIndicator = (TitlePageIndicator)findViewById(R.id.indicator);
        mIndicator.setViewPager(mPager);
        
    }
    
      @override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
    
    
}
The result:

Code:
package com.example.viewpagertest;

import com.viewpagerindicator.PageIndicator;
import com.viewpagerindicator.TitlePageIndicator;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import com.example.viewpagertest.R;

public class MainActivity extends FragmentActivity {
    
    FragmentAdapter mAdapter;
    ViewPager mPager;
    PageIndicator mIndicator;
    int Number = 0;

      @override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        mAdapter = new FragmentAdapter(getSupportFragmentManager());

        mPager = (ViewPager)findViewById(R.id.pager);
        mPager.setAdapter(mAdapter);

        mIndicator = (TitlePageIndicator)findViewById(R.id.indicator);
        mIndicator.setViewPager(mPager);
        
    }
    
      @override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
    
    
}
Now you have to create three fragments into src > com.example.viewpagertest folder:

- go to new > other:


and create three classes named "FirstActivity", "SecondActivity" and "ThirdActivity" like the picture below:


Now edit FirstActivity.java in src > com.example.viewpagertest folder and delete the red code:

Code:
package com.example.viewpagertest;

public class FragmentAdapter {

}
and add the following code:

Code:
package com.example.viewpagertest;

import com.example.viewpagertest.R;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FirstActivity extends Fragment {
    
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
        View v = inflater.inflate(R.layout.layout1, null);
        
        
        
        return v;
        
    }
}
For the SecondActivity class:

Code:
package com.example.viewpagertest;

import com.example.viewpagertest.R;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class SecondActivity extends Fragment {
    
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
        View v = inflater.inflate(R.layout.layout2, null);
        
        
        
        return v;
        
    }
}
For the ThirdActivity class:

Code:
package com.example.viewpagertest;

import com.example.viewpagertest.R;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class ThirdActivity extends Fragment {
    
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
        View v = inflater.inflate(R.layout.layout3, null);
        
        
        
        return v;
        
    }
}
Now we need to create a new class called "FragmentAdapter.java" into src > com.example.viewpagertest folder:

- go to new > other:


and create a new class called "FragmentAdapter" like the pictures:



click finish.

Now edit the FragmentAdapter.java in src > com.example.viewpagertest folder and delete the red code:

Code:
package com.example.viewpagertest;

public class FragmentAdapter {

}
and add the following code:

Code:
package com.example.viewpagertest;

import com.viewpagerindicator.IconPagerAdapter;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatPagerAdapter;

public class FragmentAdapter extends FragmentStatPagerAdapter implements IconPagerAdapter{

    public FragmentAdapter(FragmentManager fm) {
        super(fm);
        // TODO Auto-generated constructor stub
    }

      @override
    public int getIconResId(int index) {
        // TODO Auto-generated method stub
        return 0;
    }

      @override
    public Fragment getItem(int position) 
    {
        // TODO Auto-generated method stub
        Fragment fragment = new FirstActivity();
        switch(position){
        case 0:
            fragment = new FirstActivity();
            break;
        case 1:
            fragment = new SecondActivity();
            break;
        case 2:
            fragment = new ThirdActivity();
            break;
        }
        return fragment;
    }

      @override
    public int getCount() {
        // TODO Auto-generated method stub
        return 3;
    }
    
      @override
    public CharSequence getPageTitle(int position){
        String title = "";
        switch(position){
        case 0:
            title = "First";
            break;
        case 1:
            title = "Second";
            break;
        case 2:
            title = "Third";
            break;
        }
        return title;
    }

}
Save the entire project! Enjoy your App!!!

The Following 3 Users Say Thank You to ivn888 For This Useful Post: [ Click to Expand ]
 
ivn888
Old
(Last edited by ivn888; 19th September 2013 at 07:40 PM.)
#4  
ivn888's Avatar
Senior Member - OP
Thanks Meter 853
Posts: 289
Join Date: Oct 2012
Location: NaN - Somewhere in Time

 
DONATE TO ME
SAMPLE APP:

>>>DOWNLOAD<<<
The Following 3 Users Say Thank You to ivn888 For This Useful Post: [ Click to Expand ]
 
ivn888
Old
(Last edited by ivn888; 19th September 2013 at 07:35 PM.)
#5  
ivn888's Avatar
Senior Member - OP
Thanks Meter 853
Posts: 289
Join Date: Oct 2012
Location: NaN - Somewhere in Time

 
DONATE TO ME
JAKE WHARTON VIEW PAGER INDICATOR GITHUB:

https://github.com/JakeWharton/Andro...PagerIndicator
The Following 2 Users Say Thank You to ivn888 For This Useful Post: [ Click to Expand ]
 
ivn888
Old
#6  
ivn888's Avatar
Senior Member - OP
Thanks Meter 853
Posts: 289
Join Date: Oct 2012
Location: NaN - Somewhere in Time

 
DONATE TO ME
CREDITS:

- me
- enricocid
- Jake Warthon


Thanks to Xda!

The Stuff Song (click to show)
 

ARCJUICE EXPERT XD


Working on about... 200-300 arcgis projects these month... LOL, Firenze and Prato Provinces. Don't have time for nothing... LOL
The Following 2 Users Say Thank You to ivn888 For This Useful Post: [ Click to Expand ]
 
morfances
Old
#7  
morfances's Avatar
Senior Member
Thanks Meter 32
Posts: 151
Join Date: Jun 2013
Quote:
Originally Posted by ivn888 View Post
CREDITS:

- me
- enricocid
- Jake Warthon


Thanks to Xda!
grandi ,ottimo lavoro
The Following User Says Thank You to morfances For This Useful Post: [ Click to Expand ]
 
rakz992
Old
#8  
rakz992's Avatar
Recognized Themer
Thanks Meter 1563
Posts: 844
Join Date: Feb 2013
Location: bangalore

 
DONATE TO ME
Awesome!! I badly needed this.. Thanks for the guide

Suppose I want to add pics and some strings for each layout, how do I do that?? Can you give an example for this also..?? thanks
The Following User Says Thank You to rakz992 For This Useful Post: [ Click to Expand ]
 
ivn888
Old
(Last edited by ivn888; 20th September 2013 at 05:09 PM.)
#9  
ivn888's Avatar
Senior Member - OP
Thanks Meter 853
Posts: 289
Join Date: Oct 2012
Location: NaN - Somewhere in Time

 
DONATE TO ME
Quote:
Originally Posted by rakz992 View Post
Awesome!! I badly needed this.. Thanks for the guide

Suppose I want to add pics and some strings for each layout, how do I do that?? Can you give an example for this also..?? thanks
You can use the ImageView to display images in your Application.There are many different configuration options and many screens from different devices that you should take into account. I write a little guide using my viewer app.


EXAMPLE:

First to use imageview you have to add resources, in Eclipse navigate to res/values/strings.xml.



Edit the strings.xml



This is the content of string.xml:

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

    <string name="app_name">ViewPagerTest</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>

</resources>
Add the following string:

Code:
<string name="content">image</string>
Like this:

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

    <string name="app_name">ViewPagerTest</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>
    <string name="content">image</string>
    
</resources>
Now you have to add a picture in the appropriate project folder, as you would have noticed there are 5 folders that contain the image resources of the project :

res/drawable-hdpi
res/drawable-ldpi
res/drawable-mdpi
res/drawable-xhdpi
res/drawable-xxhdpi

You can copy the images you want to put in you’re application in any one of these folders. Android SDK will automatically recognize any images you put on any one of these folders as drawable resources. Refer to official Android’s Drawable Resource and Screen Support to understand of how image works in Android.

Inside these folder there are default project .pngs. Now i use them to show you on how to add pict. The pictures are named ic_launcher.png

Now open layout1.xml



This is the blank layout:

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

</LinearLayout>
and add the following code:

Code:
<ImageView
        android:id="@+id/image"
        android:contentDescription="@string/content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />
Like this:

Code:
<?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" >
    
    
    <ImageView
        android:id="@+id/image"
        android:contentDescription="@string/content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />
    
</LinearLayout>
Now you may open the Graphical layout editor to preview your UI:





--------------------------------------------------------------------------------------------------------------

1) Resources: string.xml, <string name="content">image</string>
2) Your_image
3) Use imageview to image to your layout:

<ImageView
android:id="@+id/image"
android:contentDescription="@string/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/Your_image" />[/COLOR]

The Stuff Song (click to show)
 

ARCJUICE EXPERT XD


Working on about... 200-300 arcgis projects these month... LOL, Firenze and Prato Provinces. Don't have time for nothing... LOL
The Following 2 Users Say Thank You to ivn888 For This Useful Post: [ Click to Expand ]
 
nikwen
Old
#10  
nikwen's Avatar
Recognized Contributor
Thanks Meter 1295
Posts: 2,690
Join Date: Feb 2013
@ivn888: We cannot see your pictures. You ran out of bandwidth.

The Following 2 Users Say Thank You to nikwen For This Useful Post: [ Click to Expand ]
Thread Tools
Display Modes