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

Search This thread
I

ivn888

Guest
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

z31g.gif



IF YOU WANNA DOWNLOAD MY SAMPLE APP GO HERE:
http://forum.xda-developers.com/showpost.php?p=45742129&postcount=4



1 - Download JakeWharton ViewPagerIndicator:


Download from here: JakeWharton ViewPagerIndicator download

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

Senza_nome.png

2 - OPEN ECLIPSE

eclip.png

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

Senza_nome3.png

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

Drag_drop.png

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

other.png

exicode.png

- 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.

brows.jpg

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

name2.png

Click "Finish"





If you like my work don't Forget To Hit Thanks, five star
Untitled.png
:good: or offer me a beer :p :good:



Make a donation
 
Last edited:
E

EnricoD

Guest
2) How to load VievPagerIndicator to Your Project


- Create a new Android Application Project:

newpro.png

newprog1.png

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

newandro.png


- Go next and click finish to create the project

test.png


- Now navigate to your project properties:

propre.png

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

and.png

load.png


You will receive an error:

error.png

To fix this error you have two options:

- 1) delete the libs folder of your project:

error1.png

- 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:

errorlikethis.png

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

fixpro.png






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

activitymain.png

and edit activity_main.xml deleting the entire code:


Code:
[COLOR="red"]<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>[/COLOR]

Copy & paste the code below to your activity_main.xml

Code:
[COLOR="Blue"]<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>[/COLOR]

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

image.png

and select "Android XML file":

xml.png


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

image.png

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

3la.png

 
Last edited:
I

ivn888

Guest
4)Implement ViewPager using fragments



Blue = Add
Red = Delete

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

maina.png

Delete the content marked in red:

Code:
[COLOR="Blue"]package com.example.viewpagertest;[/COLOR]

[COLOR="Red"]import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class MainActivity extends Activity {

   [user=439709]@override[/user]
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
	}

   [user=439709]@override[/user]
	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;
	}

}[/COLOR]

and add the following code:

Code:
[COLOR="blue"]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;

      [user=439709]@override[/user]
    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);
        
    }
    
      [user=439709]@override[/user]
    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;
    }
    
    
}[/COLOR]

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;

      [user=439709]@override[/user]
    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);
        
    }
    
      [user=439709]@override[/user]
    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:

frag.png

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

first.png

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

Code:
[COLOR="Blue"]package com.example.viewpagertest;[/COLOR]

[COLOR="Red"]public class FragmentAdapter {

}[/COLOR]

and add the following code:

Code:
package com.example.viewpagertest;

[COLOR="Blue"]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;
        
    }
}
[/COLOR]

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:

frag.png

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

class.png

fragm.png

click finish.

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

Code:
[COLOR="Blue"]package com.example.viewpagertest;[/COLOR]

[COLOR="Red"]public class FragmentAdapter {

}[/COLOR]

and add the following code:

Code:
package com.example.viewpagertest;

[COLOR="blue"]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
    }

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

      [user=439709]@override[/user]
    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;
    }

      [user=439709]@override[/user]
    public int getCount() {
        // TODO Auto-generated method stub
        return 3;
    }
    
      [user=439709]@override[/user]
    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;
    }

}[/COLOR]

Save the entire project! Enjoy your App!!!

 
Last edited:

rakz992

Senior Member
Feb 25, 2013
875
1,577
bangalore
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 :)
 
I

ivn888

Guest
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.

Senza_nome.png


Edit the strings.xml

Senza_nome2.png


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:
[COLOR="Blue"]<string name="content">image</string>[/COLOR]

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>
    [COLOR="blue"]<string name="content">image</string>[/COLOR]
    
</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

image.png


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:
[COLOR="Blue"]<ImageView
        android:id="@+id/image"
        android:contentDescription="@string/content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />[/COLOR]

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" >
    
    
    [COLOR="blue"]<ImageView
        android:id="@+id/image"
        android:contentDescription="@string/content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />[/COLOR]
    
</LinearLayout>

Now you may open the Graphical layout editor to preview your UI:

image.png




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

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:

rakz992

Senior Member
Feb 25, 2013
875
1,577
bangalore
bro another help here
i want to add Zoom-out page transformer animation for slide from one layout to other..

should i replace mAdapter with this
pager.setPageTransformer(true, new ZoomOutPageTransformer());

can you help me on how to do it ?
thank you :)
 
I

ivn888

Guest
bro another help here
i want to add Zoom-out page transformer animation for slide from one layout to other..

should i replace mAdapter with this
pager.setPageTransformer(true, new ZoomOutPageTransformer());

can you help me on how to do it ?
thank you :)

Tomorrow i will release a short guide on how to add this animation... :)
 
I

ivn888

Guest
Customize the Animation with PageTransformer - How to add Zoom-out page transformer


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

open.png

2) Now drag & drop "library" folder to your Documents directory,i will rename it "library_1":

Senza_nome.png

3) Import downloaded NineOld Library to your workspace:
GO TO FILE > NEW > OTHER > ANDROID > ANDROID PROJECT FROM EXISTING CODE

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

5) Now give a name to this project (for example "Library_1 or "NineOld") and check "Copy project into workspace"

follow the first post to understand "how import libs": http://forum.xda-developers.com/showpost.php?p=45742000&postcount=1

EXAMPLE APP:

Copy the ZoomOutPageTransformer.java to your src/com.example.viewpagertest/ folder or create a class named ZoomOutPageTransformer:

Code:
package com.example.viewpagertest;
import android.support.v4.view.ViewPager.PageTransformer;
import android.view.View;
[COLOR="green"]import com.nineoldandroids.view.ViewHelper;[/COLOR]

public class ZoomOutPageTransformer implements PageTransformer {
    private static float MIN_SCALE = 0.85f;
    private static float MIN_ALPHA = 0.5f;

    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();
        int pageHeight = view.getHeight();
        
        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            [COLOR="green"]ViewHelper[/COLOR].setAlpha(view, 0);
        } else if (position <= 1) { // [-1,1]
            // Modify the default slide transition to shrink the page as well
            float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
            float vertMargin = pageHeight * (1 - scaleFactor) / 2;
            float horzMargin = pageWidth * (1 - scaleFactor) / 2;
            if (position < 0) {
                [COLOR="green"]ViewHelper[/COLOR].setTranslationX(view, horzMargin - vertMargin / 2);
            } else {
                [COLOR="green"]ViewHelper[/COLOR].setTranslationX(view, -horzMargin + vertMargin / 2);
            }

            // Scale the page down (between MIN_SCALE and 1)
            [COLOR="green"]ViewHelper[/COLOR].setScaleX(view, scaleFactor);
            [COLOR="green"]ViewHelper[/COLOR].setScaleY(view, scaleFactor);

            // Fade the page relative to its size.
            [COLOR="green"]ViewHelper[/COLOR].setAlpha(view, MIN_ALPHA +
                    (scaleFactor - MIN_SCALE) /
                    (1 - MIN_SCALE) * (1 - MIN_ALPHA));

        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            [COLOR="green"]ViewHelper[/COLOR].setAlpha(view, 0);
        }
    }
}

If you have deleted the "libs" folder of your project, go to workspace/ViewPagerTest/ make a new folder called "libs" and put the android-support-v4.jar (you will find it in sdk/extras/android/support/v4 folder), copy the same file (android-support-v4.jar) in workspace/ViewPagerIndicator/libs folder.

Now go to library_1 options and check the correct project build target and "Is library":

Senza_nome3.png

Load the library into your project.

THE CODE​

blue = add
red = delete

Now i will make an xml file called "colors" in res/values folder:

Code:
[COLOR="Blue"]<?xml version="1.0" encoding="UTF-8"?>

<resources>

    <color name="red">#F75D59</color>
    <color name="blue">#0000FF</color>
    <color name="orange">#dc5a1e</color>

</resources>[/COLOR]

add the following code to layout1:

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" 
    [COLOR="blue"]android:background="@color/red"[/COLOR]>
    </LinearLayout>

layout2:

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" 
    [COLOR="blue"]android:background="@color/blue" >[/COLOR]
</LinearLayout>

layout3:

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" 
    [COLOR="blue"]android:background="@color/orange">[/COLOR]
</LinearLayout>


Now open the MainActivity.java:

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;

        [user=439709]@override[/user]
    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);
        
    }
    
        [user=439709]@override[/user]
    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 blue lines like this:

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;

      [user=439709]@override[/user]
    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);
        
        [COLOR="blue"]mPager.setPageTransformer(true, new ZoomOutPageTransformer ());[/COLOR]
        
		
            
    }
        
      [user=439709]@override[/user]
    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;
    }
    
    
}
 
Last edited:
I

ivn888

Guest
Using DepthPageTransformer

fm6.gif


Create a class called DepthPageTransformer in src/.../ folder and add the following:

Code:
package com.example.viewpagertest;

import android.support.v4.view.ViewPager.PageTransformer;
import android.view.View;
//import com.nineoldandroids.view.ViewHelper;

public class DepthPageTransformer implements PageTransformer {
    private static float MIN_SCALE = 0.75f;

    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setAlpha(0);

        } else if (position <= 0) { // [-1,0]
            // Use the default slide transition when moving to the left page
            view.setAlpha(1);
            view.setTranslationX(0);
            view.setScaleX(1);
            view.setScaleY(1);

        } else if (position <= 1) { // (0,1]
            // Fade the page out.
            view.setAlpha(1 - position);

            // Counteract the default slide transition
            view.setTranslationX(pageWidth * -position);

            // Scale the page down (between MIN_SCALE and 1)
            float scaleFactor = MIN_SCALE
                    + (1 - MIN_SCALE) * (1 - Math.abs(position));
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0);
        }
    }
}

In your MainActivity.java add the blue code:

Code:
  [user=439709]@override[/user]
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        ...
        ...
        
       [COLOR="Blue"] mPager.setPageTransformer(true, new DepthPageTransformer ());[/COLOR]
        
        ...
        ...
		        
    }
 

m4RinKo2

Senior Member
Oct 5, 2012
946
512
22
How to use addPreferencesFromResource(R.xml.preferences); in these fragments with action bar sherlock? I tried to make work, but... But implented ABS in my app.
 

Blaze

Senior Member
Feb 23, 2013
361
502
Kolkata
4)Implement ViewPager using fragments 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{


its FragmentStatePagerAdapter (instead of FragmentStatPagerAdapter) and Override (instead of override)

i think u made these two small mistakes. bt the tutorial is awesome.. was looking for this
 
Last edited:

Top Liked Posts

  • There are no posts matching your filters.
  • 2
    4)Implement ViewPager using fragments 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{


    its FragmentStatePagerAdapter (instead of FragmentStatPagerAdapter) and Override (instead of override)

    i think u made these two small mistakes. bt the tutorial is awesome.. was looking for this
    1
    i need to implement a button that plays sound onclick.
    so my BUTTON code is
    Code:
    public class MainActivity extends Activity {
        @Override
        protected void onCreate(Bundle savedInstanceState) {        
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            Button one = (Button)this.findViewById(R.id.button1);
            final MediaPlayer mp = MediaPlayer.create(this, R.raw.audio);
            one.setOnClickListener(new OnClickListener(){
    
                public void onClick(View v) {
                    mp.start();
                }
            });     
        }


    The default code for FirstActivity is
    Code:
    public class FirstActivity extends Fragment{
    	   
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
            View v = inflater.inflate(R.layout.layout1, null);
            
            
            
            return v;
        }
    
      
    }

    My BUTTON code should be implemented in FirstActivity.java?

    If YES,how should it be written?
    If NO, plz correct me if i am wrong.

    Thanks in advance.

    Yes, you have to put that code into the onCreateView(...) method of the FirstActivity.java Fragment. I find it quite confusing that the OP has called these classes (FirstActivity, Second...) Activity and not Fragment since there is only one activity, which is MainActivity.

    So for your code you have to put it in the Fragment like this:
    Code:
    public class FirstActivity extends Fragment{
    	   
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
            View v = inflater.inflate(R.layout.layout1, null); // call findViewById on the just inflated View!
            Button one = (Button) v.findViewById(R.id.button1); // make sure there is a Button with android:id="@+id/button1" in the layout1.xml file!
            final MediaPlayer mp = MediaPlayer.create(this, R.raw.audio);
            one.setOnClickListener(new OnClickListener(){
    
                public void onClick(View v) {
                    mp.start();
                }
            });     
            
            return v;
        }
    
      
    }
    1
    Yeah its working..

    But i am facing another problem now :rolleyes:
    I tried changing the ImageView resource on button click.

    Code:
    public class FirstActivity extends Fragment{
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
            View v = inflater.inflate(R.layout.layout1, null);
            Button button1 = (Button) v.findViewById(R.id.button1);
            button1.setOnClickListener(new View.OnClickListener() {
            	
     [user=439709]@override[/user]
                 public void onClick(View v) {
            		 ImageView a= (ImageView) v.findViewById(R.id.imageview1);
            		 a.setImageResource(R.drawable.click);
                 }
            });
     return v;
    }}

    Check this Code.
    Is this Correct? I am not geting any compilation error, but the app get error on button click.

    You should not call v.findViewById() in the onClick since the view is certainly gonna be null (isn't it giving you compilation error about v has to be final?). Instead, use getView().findViewById()! Other than that, please check your logs and try to find the error yourself with nikwen's awesome guide on debugging.