Post Reply

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

OP ivn888

19th September 2013, 07:26 PM   |  #1  
ivn888's Avatar
OP Senior Member
Flag NaN - Somewhere in Time
Thanks Meter: 857
 
289 posts
Join Date:Joined: Oct 2012
Donate to Me
More
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
Last edited by ivn888; 15th October 2013 at 12:34 PM. Reason: Title change
The Following 10 Users Say Thank You to ivn888 For This Useful Post: [ View ]
19th September 2013, 07:28 PM   |  #2  
EnricoD's Avatar
Recognized Contributor / Themer
Thanks Meter: 3,956
 
2,210 posts
Join Date:Joined: 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":


Last edited by EnricoD; 23rd September 2013 at 01:19 PM.
The Following 4 Users Say Thank You to EnricoD For This Useful Post: [ View ]
19th September 2013, 07:28 PM   |  #3  
ivn888's Avatar
OP Senior Member
Flag NaN - Somewhere in Time
Thanks Meter: 857
 
289 posts
Join Date:Joined: Oct 2012
Donate to Me
More
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!!!

Last edited by ivn888; 20th September 2013 at 05:01 PM.
The Following 3 Users Say Thank You to ivn888 For This Useful Post: [ View ]
19th September 2013, 07:30 PM   |  #4  
ivn888's Avatar
OP Senior Member
Flag NaN - Somewhere in Time
Thanks Meter: 857
 
289 posts
Join Date:Joined: Oct 2012
Donate to Me
More
SAMPLE APP:

>>>DOWNLOAD<<<
Last edited by ivn888; 19th September 2013 at 07:40 PM.
The Following 3 Users Say Thank You to ivn888 For This Useful Post: [ View ]
19th September 2013, 07:30 PM   |  #5  
ivn888's Avatar
OP Senior Member
Flag NaN - Somewhere in Time
Thanks Meter: 857
 
289 posts
Join Date:Joined: Oct 2012
Donate to Me
More
JAKE WHARTON VIEW PAGER INDICATOR GITHUB:

https://github.com/JakeWharton/Andro...PagerIndicator
Last edited by ivn888; 19th September 2013 at 07:35 PM.
The Following 2 Users Say Thank You to ivn888 For This Useful Post: [ View ]
19th September 2013, 07:49 PM   |  #6  
ivn888's Avatar
OP Senior Member
Flag NaN - Somewhere in Time
Thanks Meter: 857
 
289 posts
Join Date:Joined: Oct 2012
Donate to Me
More
CREDITS:

- me
- enricocid
- Jake Warthon


Thanks to Xda!
The Following 2 Users Say Thank You to ivn888 For This Useful Post: [ View ]
20th September 2013, 07:36 AM   |  #7  
morfances's Avatar
Senior Member
Thanks Meter: 43
 
186 posts
Join Date:Joined: Jun 2013
More
Quote:
Originally Posted by ivn888

CREDITS:

- me
- enricocid
- Jake Warthon


Thanks to Xda!

grandi ,ottimo lavoro
The Following User Says Thank You to morfances For This Useful Post: [ View ]
20th September 2013, 01:18 PM   |  #8  
rakz992's Avatar
Recognized Themer
Flag bangalore
Thanks Meter: 1,567
 
849 posts
Join Date:Joined: Feb 2013
Donate to Me
More
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: [ View ]
20th September 2013, 02:32 PM   |  #9  
ivn888's Avatar
OP Senior Member
Flag NaN - Somewhere in Time
Thanks Meter: 857
 
289 posts
Join Date:Joined: Oct 2012
Donate to Me
More
Quote:
Originally Posted by rakz992

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]
Last edited by ivn888; 20th September 2013 at 05:09 PM.
The Following 2 Users Say Thank You to ivn888 For This Useful Post: [ View ]
20th September 2013, 03:44 PM   |  #10  
nikwen's Avatar
Recognized Contributor
Thanks Meter: 1,378
 
2,765 posts
Join Date:Joined: Feb 2013
More
@ivn888: We cannot see your pictures. You ran out of bandwidth.

The Following 2 Users Say Thank You to nikwen For This Useful Post: [ View ]
Post Reply Subscribe to Thread
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Top Threads in Java for Android App Development by ThreadRank