java - Swipe without tab content overlapping -

i have created swipe view tabs, when swiping between tabs, content in tab slide finger, , previous tabs' content overlap tab being swiped in.

for example:

here's mainactivity.java:

import android.os.bundle; import android.support.v4.app.fragment; import android.support.v4.view.viewpager; import android.support.v7.app.actionbar; import android.support.v7.app.actionbaractivity; import android.view.menu; import android.view.menuitem;  public class mainactivity extends actionbaractivity {     fragment tab1fragment = new tab1();     fragment tab2fragment = new tab2();     fragment tab3fragment = new tab3();      viewpager mviewpager;     private tabspageradapter madapter;      @override     protected void oncreate(bundle savedinstancestate) {         super.oncreate(savedinstancestate);         setcontentview(r.layout.activity_main);          mviewpager = (viewpager) findviewbyid(r.id.pager);         mviewpager.setonpagechangelistener(                 new viewpager.simpleonpagechangelistener() {                     @override                     public void onpageselected(int position) {                         getsupportactionbar().setselectednavigationitem(position);                     }                 });          madapter = new tabspageradapter(getsupportfragmentmanager());         mviewpager.setadapter(madapter);          actionbar actionbar = getsupportactionbar();         actionbar.setnavigationmode(actionbar.navigation_mode_tabs);          //instantiate tabs.         tab1 = actionbar.newtab();         tab2 = actionbar.newtab();         tab3 = actionbar.newtab();          //set tabs' text.         tab1.settext("tab 1");         tab2.settext("tab 2");         tab3.settext("tab 3");          //setting tab listeners         tab1.settablistener(new mytablistener(tab1fragment));         tab2.settablistener(new mytablistener(tab2fragment));         tab3.settablistener(new mytablistener(tab3fragment));          //adding tabs actionbar         actionbar.addtab(tab1);         actionbar.addtab(tab2);         actionbar.addtab(tab3);      }      @override     public boolean oncreateoptionsmenu(menu menu) {         // inflate menu; adds items action bar if present.         getmenuinflater().inflate(r.menu.menu_main, menu);         return true;     }      @override     public boolean onoptionsitemselected(menuitem item) {         // handle action bar item clicks here. action bar         // automatically handle clicks on home/up button, long         // specify parent activity in androidmanifest.xml.         int id = item.getitemid();          //noinspection simplifiableifstatement         if (id == r.id.action_settings) {             return true;         }          return super.onoptionsitemselected(item);     } } 

mytablistener.java:

import android.support.v4.app.fragment;  public class mytablistener implements android.support.v7.app.actionbar.tablistener {     private fragment fragment;      public mytablistener(fragment fragment) {         this.fragment = fragment;     }      @override     public void ontabselected(android.support.v7.app.actionbar.tab tab, android.support.v4.app.fragmenttransaction ft) {         ft.add(android.r.id.content, fragment);         ft.attach(fragment);     }      @override     public void ontabunselected(android.support.v7.app.actionbar.tab tab, android.support.v4.app.fragmenttransaction ft) {         ft.remove(fragment);     }      @override     public void ontabreselected(android.support.v7.app.actionbar.tab tab, android.support.v4.app.fragmenttransaction ft) {      } } 

tab1.java (tab2.java , tab3.java similar):

import android.os.bundle; import android.support.v4.app.fragment; import android.view.layoutinflater; import android.view.view; import android.view.viewgroup;  public class tab1 extends fragment {     @override     public view oncreateview(layoutinflater inflater, viewgroup container,                              bundle savedinstancestate) {          view rootview = inflater.inflate(r.layout.tab1_layout, container, false);          return rootview;     } } 

tabspageradapter.java:

import android.support.v4.app.fragmentmanager; import android.support.v4.app.fragment; import android.support.v4.app.fragmentpageradapter;  public class tabspageradapter extends fragmentpageradapter {     public tabspageradapter(fragmentmanager fm) {         super(fm);     }      @override     public fragment getitem(int index) {         switch (index) {             case 0:                 return new tab1();             case 1:                 return new tab2();             case 2:                 return new tab3();         }         return null;     }      @override     public int getcount() {         return 3;     } } 

activity_main.xml:

<android.support.v4.view.viewpager xmlns:android="http://schemas.android.com/apk/res/android"                                    android:id="@+id/pager"                                    android:layout_width="match_parent"                                    android:layout_height="match_parent"> </android.support.v4.view.viewpager> 

tab1_layout.xml (tab2_layout.xml , tab3_layout.xml similar):

<?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"     >     <textview         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="this tab 1."/> </linearlayout> 

i tried adding background color in tab xml layout files, there no sliding animation @ all. android version 4.4.2, don't know if issue related that. how can solve tabs swipe without overlapping content previous tab?

see explanation given on developer site - adding tabs swipe view

don't call add() or attach methods this:

public void ontabselected(actionbar.tab tab, fragmenttransaction ft) {     mviewpager.setcurrentitem(tab.getposition()); }