ViewPager
Android ViewPager widget is found in the support library and it allows the user to swipe left or right to see an entirely new screen.
Today we’re implementing a ViewPager by using Fragment and FragmentPagerAdapter.
Get GITHUB code from Here.
Creating New Project
1.In Android Studio, go to File ⇒ New Project and fill all the details required to create a new project. When it prompts to select a default activity, select Blank Activity and proceed.
2.Open activity_main.xml and write the below code.
activity_main.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:color/black"
android:orientation="vertical" >
<!-- ViewPager -->
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/viewPager" />
<!-- Footer -->
<include layout="@layout/footer" />
</FrameLayout>
3.Open drawable folder and create round_icon.xml and write below code.
round_icon.xml
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android">
<shape android:shape="rectangle">
<gradient
android:endColor="@color/white"
android:startColor="@color/white"
/>
<corners
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
<stroke
android:width="1dp"
android:color="@android:color/holo_green_dark" />
</shape>
</inset>
4.Open footer.xml defined in activity_main.xml and write the below code.
footer.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:padding="15dp"
>
<Button
android:id="@+id/btn_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="@drawable/round_icon" />
<Button
android:id="@+id/btn_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginLeft="5dip"
android:layout_toRightOf="@id/btn_1"
android:background="@drawable/round_icon" />
<Button
android:id="@+id/btn_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginLeft="5dip"
android:layout_toRightOf="@id/btn_2"
android:background="@drawable/round_icon" />
</RelativeLayout>
5.Create fragment_one,fragment_two,fragment_three and write the below code.
fragment_one.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="FragmentOne"
android:textSize="25dp"
android:layout_centerInParent="true"/>
</RelativeLayout>
fragment_two.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="FragmentTwo"
android:textSize="25dp"
android:layout_centerInParent="true"/>
</RelativeLayout>
fragment_three.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="FragmentThree"
android:textSize="25dp"
android:layout_centerInParent="true"/>
</RelativeLayout>
6.Under package name create a folder name fragment and make three fragments named FragmentOne, FragmentTwo, FragmentThree.
FragmentOne.Java
package com.example.lenovo.viewpagerapp.fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.support.v4.app.Fragment;
import android.view.ViewGroup;
import com.example.lenovo.viewpagerapp.R;
public class FragmentOne extends Fragment{
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_one,container,false);
return view;
}
}
FragmentTwo.Java
package com.example.lenovo.viewpagerapp.fragment;
import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.example.lenovo.viewpagerapp.R;
public class FragmentTwo extends Fragment{
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_two,container,false);
return view;
}
}
FragmentThree.Java
package com.example.lenovo.viewpagerapp.fragment;
import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.example.lenovo.viewpagerapp.R;
public class FragmentThree extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_three, container, false);
return view;
}
}
7.Under package name create a class named ViewPagerAdapter and write the below code.It sets the adapter to the viwpager.
ViewPagerAdapter.Java
package com.example.lenovo.viewpagerapp;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import com.example.lenovo.viewpagerapp.fragment.FragmentOne;
import com.example.lenovo.viewpagerapp.fragment.FragmentThree;
import com.example.lenovo.viewpagerapp.fragment.FragmentTwo;
public class ViewPagerAdapter extends FragmentPagerAdapter {
public ViewPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return new FragmentOne();
case 1:
return new FragmentTwo();
case 2:
return new FragmentThree();
}
return null;
}
@Override
public int getCount() {
return 3;
}
}
8.Open MainActivity.Java and write the below code.
MainActivity.Java
package com.example.lenovo.viewpagerapp;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.widget.Button;
public class MainActivity extends FragmentActivity {
private ViewPager _mViewPager;
private ViewPagerAdapter _adapter;
private Button _btn1, _btn2, _btn3;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// sliding screen create FragmentOne,FragmentTwo,FragmentThree
setUpView();
//setting buttons size and text with corresponding fragment
setButtonWithFragment();
}
private void setUpView() {
_mViewPager = (ViewPager) findViewById(R.id.viewPager);
_adapter = new ViewPagerAdapter(getSupportFragmentManager());
_mViewPager.setAdapter(_adapter);
_mViewPager.setCurrentItem(0);
initButton();
}
private void setButtonWithFragment() {
_mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrollStateChanged(int position) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageSelected(int position) {
btnAction(position);
}
});
}
//According to the particular fragment position it sets all the three button
// with the corresponding height,width and text
private void btnAction(int action) {
switch (action) {
case 0:
setButton(_btn1, "1", 40, 40);
setButton(_btn2, "", 20, 20);
setButton(_btn3, "", 20, 20);
break;
case 1:
setButton(_btn2, "2", 40, 40);
setButton(_btn1, "", 20, 20);
setButton(_btn3, "", 20, 20);
break;
case 2:
setButton(_btn3, "3", 40, 40);
setButton(_btn1, "", 20, 20);
setButton(_btn2, "", 20, 20);
break;
}
}
// Inisialize buttons and Bydefault setting buttons height,width and text
private void initButton() {
_btn1 = (Button) findViewById(R.id.btn_1);
_btn2 = (Button) findViewById(R.id.btn_2);
_btn3 = (Button) findViewById(R.id.btn_3);
setButton(_btn1, "1", 40, 40);
setButton(_btn2, "", 20, 20);
setButton(_btn3, "", 20, 20);
}
//setting button with the corresponding height,width and text
private void setButton(Button btn, String text, int h, int w) {
btn.setWidth(w);
btn.setHeight(h);
btn.setText(text);
}
}
When you run the app it will look like this:
I build an app without any error using your source code. But every time I try to launch the app, it force stops itself. It can’t be open or launch. Please reply.
Hi Rasel, Thanks for your comment. Please check your logcat it should tell you the exception details.
Also it would be good to mention android version in which you are running I will also check in that android version.
Sorry for bothering you, now that above mentioned problem is gone. It was my fault as there was a problem with my dependency files.
Thanks for your reply.
I want to add a button inside the FragmentOne and from there, using onclicklistener I want to launch another newly created fragment FragmentFour. The FragmentFour won’t be accessible by sliding, but only via clicking on the button from FragmentOne. How can I do this?
I used this codes inside onclicklistener, but the result is- FragmentFour’s layout overlaps over the FragmentOne’s layout. And FragmentTwo and FragmentThree gets accessible via sliding from FragmentFour, but I don’t want this.
FragmentFour fragFour = new FragmentFour();
FragmentManager fragmentManager = getChildFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();
transaction.replace(R.id.fragment_one, fragFour);
transaction.addToBackStack(null);
transaction.commit();