Android TabLayout Android Design

Question

I m trying to get the new TabLayout in the android design library working   I m following this post    http   android-developers blogspot com 2015 05 android-design-support-library html  and the documentation    http   developer android com reference android support design widget TabLayout html  And have come up with the following code in my activity but the tablayout isn t showing up when I run the activity   I tried adding   in the activity layout file  but it says it can t find that xml tag   public class TabActivity extends BaseActivity        SectionPagerAdapter mSectionsPagerAdapter      ViewPager mViewPager        Override     public void onCreate Bundle savedInstanceState             super onCreate savedInstanceState            setContentView R layout activity tab            LinearLayout v    LinearLayout findViewById R id tabContainer            TabLayout tabLayout   new TabLayout this           tabLayout addTab tabLayout newTab   setText  Tab 1             tabLayout addTab tabLayout newTab   setText  Tab 2             tabLayout addTab tabLayout newTab   setText  Tab 3              tabLayout setLayoutParams new LinearLayout LayoutParams FrameLayout LayoutParams MATCH PARENT  50             v addView tabLayout            mSectionsPagerAdapter   new SectionPagerAdapter getFragmentManager              mViewPager    ViewPager  findViewById R id pager           mViewPager setAdapter mSectionsPagerAdapter            tabLayout setupWithViewPager mViewPager           mViewPager addOnPageChangeListener new TabLayout TabLayoutOnPageChangeListener tabLayout                public class SectionPagerAdapter extends FragmentPagerAdapter            private String TAG    SectionPagerAdapter            public SectionPagerAdapter FragmentManager fm                super fm                       Override         public Fragment getItem int position                        return new Fragment                        Override         public int getCount                 return 2                      Override         public CharSequence getPageTitle int position                Locale l   Locale getDefault                switch  position                    case 0                      return  test                   case 1                      return  test                   case 2                            return null                      Added the following to my gradle file   compile  com android support design 22 2 0

User · Answer

x000D   x000D   lt  xml version  1 0  encoding  utf-8   gt  x000D   lt android support constraint ConstraintLayout xmlns android  http   schemas android com apk res android  x000D      xmlns app  http   schemas android com apk res-auto  x000D      xmlns tools  http   schemas android com tools  x000D      android id    id main content  x000D      android layout width  match parent  x000D      android layout height  match parent  x000D      android fitsSystemWindows  true  x000D      tools context   ui MainActivity  x000D       gt  x000D       lt android support design widget AppBarLayout x000D          android layout width  match parent  x000D          android layout height  wrap content  x000D          android theme   style ThemeOverlay AppCompat Dark ActionBar  gt  x000D   x000D           lt android support v7 widget Toolbar x000D              android id    id toolbar  x000D              android layout width  match parent  x000D              android layout height  wrap content  x000D              android layout alignParentTop  true  x000D              android background   attr colorPrimary  x000D              android elevation  6dp  x000D              android minHeight   attr actionBarSize  x000D              android theme   style ThemeOverlay AppCompat Dark ActionBar  x000D              app popupTheme   style ThemeOverlay AppCompat Light    gt  x000D   x000D           lt android support design widget TabLayout x000D              android id    id tabs  x000D              android layout width  match parent  x000D              android layout height  wrap content  x000D              app tabMode  fixed  x000D              app tabGravity  fill  x000D               gt  x000D               lt android support design widget TabItem x000D                  android id    id tabItem  x000D                  android layout width  wrap content  x000D                  android layout height  wrap content  x000D                  android text   string tab text 1    gt  x000D   x000D               lt android support design widget TabItem x000D                  android id    id tabItem2  x000D                  android layout width  wrap content  x000D                  android layout height  wrap content  x000D                  android text   string tab text 2    gt  x000D               lt android support design widget TabItem x000D                  android id    id tabItem3  x000D                  android layout width  wrap content  x000D                  android layout height  wrap content  x000D                  android text   string tab text 3    gt  x000D               lt android support design widget TabItem x000D                  android id    id tItemab4  x000D                  android layout width  wrap content  x000D                  android layout height  wrap content  x000D                  android text   string tab text 4    gt  x000D           lt  android support design widget TabLayout gt  x000D       lt  android support design widget AppBarLayout gt  x000D       lt android support v4 view ViewPager x000D          android id    id container  x000D          android layout width  match parent  x000D          android layout height  match parent  x000D          android layout below   id tabs  x000D          app layout behavior   string appbar scrolling view behavior  x000D          tools ignore  NotSibling   gt  x000D   lt  android support constraint ConstraintLayout gt  x000D   x000D   x000D     x000D   x000D   lt  xml version  1 0  encoding  utf-8   gt  x000D   lt RelativeLayout xmlns android  http   schemas android com apk res android  x000D      xmlns tools  http   schemas android com tools  x000D      android id    id activity main  x000D      android layout width  match parent  x000D      android layout height  match parent  x000D      tools context   ui MainActivity  gt  x000D       lt include layout   layout tabs  gt  lt  include gt  x000D       lt LinearLayout x000D          android orientation  vertical  x000D          android layout width  match parent  x000D          android layout height  match parent  x000D          android layout marginBottom   dimen activity vertical margin  x000D          android layout marginLeft   dimen activity horizontal margin  x000D          android layout marginRight   dimen activity horizontal margin  x000D          android layout marginTop  80dp  gt  x000D           lt FrameLayout android id    id tabContent  x000D              android layout weight  1  android layout width  match parent  android layout height  0dp  gt  x000D           lt  FrameLayout gt  x000D       lt  LinearLayout gt  x000D   lt  RelativeLayout gt  x000D   x000D   x000D     x000D   x000D  public class MainActivity extends  AppCompatActivity  x000D   x000D    private Toolbar toolbar  x000D      private TabLayout tabLayout  x000D      private ViewPagerAdapter adapter  x000D   x000D      private final static int   tabIcons     x000D              R drawable ic action car  x000D              android R drawable ic menu mapmode  x000D              android R drawable ic dialog email  x000D              R drawable ic action settings x000D         x000D   x000D  protected void onCreate Bundle savedInstanceState    x000D          super onCreate savedInstanceState   x000D          setContentView R layout activity main   x000D           x000D              Toolbar toolbar    Toolbar  findViewById R id toolbar   x000D         setSupportActionBar toolbar   x000D   x000D          ViewPager viewPager    ViewPager          findViewById R id container   x000D          setupViewPager viewPager   x000D   x000D   x000D          tabLayout    TabLayout  findViewById R id tabs   x000D          tabLayout setupWithViewPager viewPager   x000D          setupTabIcons    x000D   x000D           x000D            x000D              private void setupTabIcons     x000D          tabLayout getTabAt 0  setIcon tabIcons 0    x000D          tabLayout getTabAt 1  setIcon tabIcons 1    x000D          tabLayout getTabAt 2  setIcon tabIcons 2    x000D          tabLayout getTabAt 3  setIcon tabIcons 3    x000D        x000D   x000D      private void setupViewPager ViewPager viewPager    x000D          adapter   new ViewPagerAdapter getSupportFragmentManager     x000D          adapter addFrag new CarFragment     x000D          adapter addFrag new LocationFragment     x000D          adapter addFrag new MessageFragment     x000D          adapter addFrag new SettingsFragment     x000D          viewPager setAdapter adapter   x000D        x000D       x000D      class ViewPagerAdapter extends FragmentPagerAdapter   x000D          private final List lt Fragment gt  mFragmentList   new ArrayList lt  gt     x000D          ViewPagerAdapter FragmentManager manager    x000D              super manager   x000D            x000D   x000D           Override x000D          public Fragment getItem int position    x000D              return mFragmentList get position   x000D            x000D   x000D           Override x000D          public int getCount     x000D              return mFragmentList size    x000D            x000D   x000D          void addFrag Fragment fragment    x000D              mFragmentList add fragment   x000D   x000D            x000D   x000D        x000D            x000D   x000D   x000D

User · Answer

I am facing some issue with menu change when fragment changes in ViewPager  I ended up implemented below code    DashboardFragment  public class DashboardFragment extends BaseFragment        private Context mContext      private TabLayout mTabLayout      private ViewPager mViewPager      private DashboardPagerAdapter mAdapter      private OnModuleChangeListener onModuleChangeListener      private NavDashBoardActivity activityInstance       public void setOnModuleChangeListener OnModuleChangeListener onModuleChangeListener            this onModuleChangeListener   onModuleChangeListener              Nullable      Override     public View onCreateView LayoutInflater inflater   Nullable ViewGroup container   Nullable Bundle savedInstanceState            return inflater inflate R layout dashboard fragment  container  false                pass -1 if you want to get it via pager     public Fragment getFragmentFromViewpager int position            if  position    -1              position   mViewPager getCurrentItem            return   Fragment   mAdapter instantiateItem mViewPager  position                 Override     public void onViewCreated View view   Nullable Bundle savedInstanceState            super onViewCreated view  savedInstanceState            mContext   getActivity             activityInstance    NavDashBoardActivity  getActivity             mTabLayout    TabLayout  view findViewById R id tab layout           mViewPager    ViewPager  view findViewById R id view pager            final List lt EnumUtils Module gt  moduleToShow   getModuleToShowList            mViewPager setOffscreenPageLimit moduleToShow size              for EnumUtils Module module  moduleToShow              mTabLayout addTab mTabLayout newTab   setText EnumUtils Module getTabText module              updateTabPagerAndMenu 0   moduleToShow            mAdapter   new DashboardPagerAdapter getFragmentManager   moduleToShow           mViewPager setOffscreenPageLimit mAdapter getCount              mViewPager setAdapter mAdapter            mTabLayout addOnTabSelectedListener new TabLayout OnTabSelectedListener                  Override             public void onTabSelected final TabLayout Tab tab                        mViewPager post new Runnable                          Override                     public void run                             mViewPager setCurrentItem tab getPosition                                                                           Override             public void onTabUnselected TabLayout Tab tab                                Override             public void onTabReselected TabLayout Tab tab                                       mViewPager addOnPageChangeListener new ViewPager OnPageChangeListener                  Override             public void onPageScrolled int position  float positionOffset  int positionOffsetPixels                      added to redraw menu on scroll                             Override             public void onPageSelected int position                    updateTabPagerAndMenu position   moduleToShow                               Override             public void onPageScrollStateChanged int state                                           also validate other checks and this method should be in SharedPrefs        public static List lt EnumUtils Module gt  getModuleToShowList            List lt EnumUtils Module gt  moduleToShow   new ArrayList lt  gt              moduleToShow add EnumUtils Module HOME           moduleToShow add EnumUtils Module ABOUT            return moduleToShow             public void setCurrentTab final int position           if mViewPager    null               mViewPager postDelayed new Runnable                      Override                 public void run                         mViewPager setCurrentItem position                                   100                        private Fragment getCurrentFragment            return mAdapter getCurrentFragment               private void updateTabPagerAndMenu int position   List lt EnumUtils Module gt  moduleToShow             it helps to change menu on scroll           http   stackoverflow com a 27984263 3496570           No effect after changing below statement         ActivityCompat invalidateOptionsMenu getActivity             if mTabLayout    null              mTabLayout getTabAt position  select             if onModuleChangeListener    null                if activityInstance    null                   activityInstance updateStatusBarColor                          EnumUtils Module getStatusBarColor moduleToShow get position                               onModuleChangeListener onModuleChanged moduleToShow get position                 mTabLayout setSelectedTabIndicatorColor EnumUtils Module getModuleColor moduleToShow get position                 mTabLayout setTabTextColors ContextCompat getColor mContext android R color black                        EnumUtils Module getModuleColor moduleToShow get position                         dashboardfragment xml   lt  xml version  1 0  encoding  utf-8   gt   lt LinearLayout xmlns android  http   schemas android com apk res android      xmlns app  http   schemas android com apk res-auto      xmlns tools  http   schemas android com tools      android id    id main layout      android layout width  match parent      android layout height  match parent      android orientation  vertical      tools context   MainActivity  gt        lt  -- our tablayout to display tabs  -- gt       lt android support design widget TabLayout         android id    id tab layout          android layout width  match parent          android layout height  wrap content          android background   attr colorPrimary          android minHeight   attr actionBarSize          android theme   style ThemeOverlay AppCompat Dark ActionBar          app tabBackground   android color white          app tabGravity  fill          app tabIndicatorHeight  4dp          app tabMode  scrollable          app tabSelectedTextColor   android color black          app tabTextColor   android color black    gt        lt  -- View pager to swipe views -- gt       lt android support v4 view ViewPager         android id    id view pager          android layout width  match parent          android layout height  match parent          app layout behavior   string appbar scrolling view behavior    gt    lt  LinearLayout gt    DashboardPagerAdapter  public class DashboardPagerAdapter extends FragmentPagerAdapter    private List lt EnumUtils Module gt  moduleList  private Fragment mCurrentFragment   null   public DashboardPagerAdapter FragmentManager fm  List lt EnumUtils Module gt  moduleList       super fm       this moduleList   moduleList      Override public Fragment getItem int position        return EnumUtils Module getDashboardFragment moduleList get position        Override public int getCount         return moduleList size        Override public void setPrimaryItem ViewGroup container  int position  Object object        if  getCurrentFragment      object            mCurrentFragment     Fragment  object             super setPrimaryItem container  position  object      public Fragment getCurrentFragment         return mCurrentFragment     public int getModulePosition EnumUtils Module moduleName       for int x   0   x  lt  moduleList size     x             if moduleList get x  equals moduleName               return x            return -1         And in each page of Fragment setHasOptionMenu true  in onCreate and implement onCreateOptionMenu  then it will work properly    dASHaCTIVITY  public class NavDashBoardActivity extends BaseActivity         implements NavigationView OnNavigationItemSelectedListener        private Context mContext      private DashboardFragment dashboardFragment      private Toolbar mToolbar      private DrawerLayout drawer      private ActionBarDrawerToggle toggle        Override     protected void onCreate Bundle savedInstanceState            super onCreate savedInstanceState           setContentView R layout activity nav dash board            mContext   NavDashBoardActivity this          if  Build VERSION SDK INT  gt   Build VERSION CODES LOLLIPOP                getWindow   addFlags WindowManager LayoutParams FLAG DRAWS SYSTEM BAR BACKGROUNDS               getWindow   clearFlags WindowManager LayoutParams FLAG TRANSLUCENT STATUS               getWindow   setStatusBarColor ContextCompat getColor mContext R color yellow action bar                       mToolbar    Toolbar  findViewById R id toolbar           setSupportActionBar mToolbar            updateToolbarText new ToolbarTextBO  NCompass                   drawer    DrawerLayout  findViewById R id drawer layout           toggle   new ActionBarDrawerToggle                  this  drawer  mToolbar  R string navigation drawer open  R string navigation drawer close           drawer addDrawerListener toggle           toggle syncState               onclick of back button on Navigation it will popUp fragment            toggle setToolbarNavigationClickListener new View OnClickListener                  Override             public void onClick View view                    if  toggle isDrawerIndicatorEnabled                          getSupportFragmentManager   popBackStack                                                         final NavigationView navigationView    NavigationView  findViewById R id nav view           navigationView setItemIconTintList null    It helps to show icon on Navigation         updateNavigationMenuItem navigationView            navigationView setNavigationItemSelectedListener this              Left Drawer Upper Section         View headerLayout   navigationView getHeaderView 0      0-index header          TextView userNameTv    TextView  headerLayout findViewById R id tv user name           userNameTv setText AuthSharePref readUserLoggedIn   getFullName             RoundedImageView ivUserPic    RoundedImageView  headerLayout findViewById R id iv user pic            ivUserPic setImageResource R drawable profile img            headerLayout setOnClickListener new View OnClickListener                  Override             public void onClick View view                      close drawer and add a fragment to it                 drawer closeDrawers     also try other methods                                        ZA code starts            dashboardFragment   new DashboardFragment            dashboardFragment setOnModuleChangeListener new OnModuleChangeListener                  Override             public void onModuleChanged EnumUtils Module module                    if mToolbar    null                       mToolbar setBackgroundColor EnumUtils Module getModuleColor module                         if EnumUtils Module getMenuID module     -1                          navigationView getMenu   findItem EnumUtils Module getMenuID module   setChecked true                                                        addBaseFragment dashboardFragment           backStackListener                 public void updateStatusBarColor int colorResourceID           if  Build VERSION SDK INT  gt   Build VERSION CODES LOLLIPOP                getWindow   addFlags WindowManager LayoutParams FLAG DRAWS SYSTEM BAR BACKGROUNDS               getWindow   clearFlags WindowManager LayoutParams FLAG TRANSLUCENT STATUS               getWindow   setStatusBarColor colorResourceID                        private void updateNavigationMenuItem NavigationView navigationView           List lt EnumUtils Module gt  modules    DashboardFragment getModuleToShowList             if  modules contains EnumUtils Module MyStores                navigationView getMenu   findItem R id nav my store  setVisible false                     if  modules contains EnumUtils Module Livewall                navigationView getMenu   findItem R id nav live wall  setVisible false                        private void backStackListener            getSupportFragmentManager   addOnBackStackChangedListener new FragmentManager OnBackStackChangedListener                  Override             public void onBackStackChanged                      if getSupportFragmentManager   getBackStackEntryCount    gt   1                                        toggle setDrawerIndicatorEnabled false     disable  hamburger to arrow  drawable                     toggle setHomeAsUpIndicator R drawable ic arrow back black 24dp     set your own                        toggle setDrawerArrowDrawable                           toggle setDrawerIndicatorEnabled false      this will hide hamburger image                        Toast makeText mContext  Update to Arrow  Toast LENGTH SHORT  show                                      else                      toggle setDrawerIndicatorEnabled true                                     if getSupportFragmentManager   getBackStackEntryCount    gt 0                       if getCurrentFragment   instanceof DashboardFragment                           Fragment subFragment     DashboardFragment  getCurrentFragment                                     getViewpager -1                                                           else                                                          private void updateToolBarTitle String title           getSupportActionBar   setTitle title             public void updateToolBarColor String hexColor           if mToolbar    null              mToolbar setBackgroundColor Color parseColor hexColor                Override     public void onBackPressed             DrawerLayout drawer    DrawerLayout  findViewById R id drawer layout           if  drawer isDrawerOpen GravityCompat START                 drawer closeDrawer GravityCompat START             else               super onBackPressed                          Override     public boolean onCreateOptionsMenu Menu menu            if  drawer isDrawerOpen GravityCompat START               getMenuInflater   inflate R menu empty  menu            return super onCreateOptionsMenu menu    true is wriiten first               Override     public boolean onOptionsItemSelected MenuItem item               Handle action bar item clicks here  The action bar will            automatically handle clicks on the Home Up button  so long            as you specify a parent activity in AndroidManifest xml          int id   item getItemId            if  id    android R id home                        if  drawer isDrawerOpen GravityCompat START                   drawer closeDrawer GravityCompat START               else                   if  getSupportFragmentManager   getBackStackEntryCount    gt  0                       else                     drawer openDrawer GravityCompat START                              return false    true                     return false    false so that fragment can also handle the menu event  Otherwise it is handled their            return super onOptionsItemSelected item               SuppressWarnings  StatementWithEmptyBody        Override     public boolean onNavigationItemSelected MenuItem item               Handle navigation view item clicks here          int id   item getItemId             if  id    R id nav my store                   Handle the camera action             dashboardFragment setCurrentTab EnumUtils Module MyStores                       else if   id    R id nav log out                 Dialogs logOut mContext                      DrawerLayout drawer    DrawerLayout  findViewById R id drawer layout           drawer closeDrawer GravityCompat START           return true              public void updateToolbarText ToolbarTextBO toolbarTextBO           mToolbar setTitle              mToolbar setSubtitle              if toolbarTextBO getTitle      null  amp  amp   toolbarTextBO getTitle   isEmpty                mToolbar setTitle toolbarTextBO getTitle             if toolbarTextBO getDescription      null  amp  amp   toolbarTextBO getDescription   isEmpty                mToolbar setSubtitle toolbarTextBO getDescription                    Override     public void onPostCreate  Nullable Bundle savedInstanceState   Nullable PersistableBundle persistentState            super onPostCreate savedInstanceState  persistentState              Sync the toggle state after onRestoreInstanceState has occurred          toggle syncState                Override     public void onConfigurationChanged Configuration newConfig            super onConfigurationChanged newConfig           toggle onConfigurationChanged newConfig

User · Answer

I had to collect information from various sources to put together a functioning TabLayout   The following is presented as a complete use case that can be modified as needed   Make sure the module build gradle file contains a dependency on com android support design   dependencies       compile  com android support design 23 1 1      In my case  I am creating an About activity in the application with a TabLayout   I added the following section to AndroidMainifest xml   Setting the parentActivityName allows the home arrow to take the user back to the main activity    lt  -- android configChanges  orientation screenSize  makes the activity not reload when the orientation changes  -- gt   lt activity     android name   AboutActivity      android label   string about app      android theme   style MyApp About      android parentActivityName   MainActivity      android configChanges  orientation screenSize   gt        lt  -- android support PARENT ACTIVITY is necessary for API  lt   15  -- gt       lt meta-data         android name  android support PARENT ACTIVITY          android value   MainActivity    gt   lt  activity gt    styles xml contains the following entries   This app has a white AppBar for the main activity and a blue AppBar for the About activity   We need to set colorPrimaryDark for the About activity so that the status bar above the AppBar is blue    lt style name  MyApp  parent  Theme AppCompat Light NoActionBar  gt       lt item name  colorAccent  gt  color blue lt  item gt   lt  style gt    lt style name  MyApp About    gt    lt  -- ThemeOverlay AppCompat Dark ActionBar  makes the text and the icons in the AppBar white  -- gt   lt style name  MyApp DarkAppBar  parent  ThemeOverlay AppCompat Dark ActionBar    gt    lt style name  MyApp AppBarOverlay  parent  ThemeOverlay AppCompat ActionBar    gt    lt style name  MyApp PopupOverlay  parent  ThemeOverlay AppCompat Light    gt    There is also a styles xml  v19    It is located at src main res values-v19 styles xml   This file is only applied if the API of the device is    19    lt  -- android windowTranslucentStatus requires API  gt   19   It makes the system status bar transparent    When it is specified the root layout should include android fitsSystemWindows  true     colorPrimaryDark goes behind the status bar  which is then darkened by the overlay  -- gt   lt style name  MyApp About  gt       lt item name  android windowTranslucentStatus  gt true lt  item gt       lt item name  colorPrimaryDark  gt  color blue lt  item gt   lt  style gt    AboutActivity java contains the following code   In my case I have a fixed number of tabs  7  so I could remove all the code dealing with dynamic tabs   import android os Bundle  import android support design widget TabLayout  import android support v4 app Fragment  import android support v4 app FragmentManager  import android support v4 app FragmentPagerAdapter  import android support v4 view ViewPager  import android support v7 app ActionBar  import android support v7 app AppCompatActivity  import android support v7 widget Toolbar   public class AboutActivity extends AppCompatActivity        Override     protected void onCreate Bundle savedInstanceState            super onCreate savedInstanceState           setContentView R layout about coordinatorlayout               We need to use the SupportActionBar from android support v7 app ActionBar until the minimum API is  gt   21          Toolbar supportAppBar    Toolbar  findViewById R id about toolbar           setSupportActionBar supportAppBar               Display the home arrow on supportAppBar          final ActionBar appBar   getSupportActionBar            assert appBar    null    This assert removes the incorrect warning in Android Studio on the following line that appBar might be null          appBar setDisplayHomeAsUpEnabled true                Setup the ViewPager          ViewPager aboutViewPager    ViewPager  findViewById R id about viewpager           assert aboutViewPager    null     This assert removes the incorrect warning in Android Studio on the following line that aboutViewPager might be null          aboutViewPager setAdapter new aboutPagerAdapter getSupportFragmentManager                  Setup the TabLayout and connect it to the ViewPager          TabLayout aboutTabLayout    TabLayout  findViewById R id about tablayout           assert aboutTabLayout    null     This assert removes the incorrect warning in Android Studio on the following line that aboutTabLayout might be null          aboutTabLayout setupWithViewPager aboutViewPager              public class aboutPagerAdapter extends FragmentPagerAdapter           public aboutPagerAdapter FragmentManager fm                super fm                       Override            Get the count of the number of tabs          public int getCount                 return 7                      Override            Get the name of each tab   Tab numbers start at 0          public CharSequence getPageTitle int tab                switch  tab                    case 0                      return getString R string version                    case 1                      return getString R string permissions                    case 2                      return getString R string privacy policy                    case 3                      return getString R string changelog                    case 4                      return getString R string license                    case 5                      return getString R string contributors                    case 6                      return getString R string links                    default                      return                                       Override            Setup each tab          public Fragment getItem int tab                return AboutTabFragment createTab tab                       AboutTabFragment java is used to populate each tab   In my case  the first tab has a LinearLayout inside of a ScrollView and all the others have a WebView as the root layout   import android os Build  import android os Bundle  import android support v4 app Fragment  import android view LayoutInflater  import android view View  import android view ViewGroup  import android webkit WebView  import android widget TextView   public class AboutTabFragment extends Fragment       private int tabNumber          AboutTabFragment createTab stores the tab number in the bundle arguments so it can be referenced from onCreate        public static AboutTabFragment createTab int tab            Bundle thisTabArguments   new Bundle            thisTabArguments putInt  Tab   tab           AboutTabFragment thisTab   new AboutTabFragment            thisTab setArguments thisTabArguments           return thisTab              Override     public void onCreate  Bundle savedInstanceState            super onCreate savedInstanceState               Store the tab number in tabNumber          tabNumber   getArguments   getInt  Tab                Override     public View onCreateView LayoutInflater inflater  ViewGroup container  Bundle savedInstanceState            View tabLayout              Load the about tab layout   Tab numbers start at 0          if  tabNumber    0                   Setting false at the end of inflater inflate does not attach the inflated layout as a child of container                 The fragment will take care of attaching the root automatically              tabLayout   inflater inflate R layout about tab version  container  false             else      load a WebView for all the other tabs   Tab numbers start at 0                 Setting false at the end of inflater inflate does not attach the inflated layout as a child of container                 The fragment will take care of attaching the root automatically              tabLayout   inflater inflate R layout about tab webview  container  false               WebView tabWebView    WebView  tabLayout               switch  tabNumber                    case 1                  tabWebView loadUrl  file    android asset about permissions html                        break                   case 2                      tabWebView loadUrl  file    android asset about privacy policy html                        break                   case 3                      tabWebView loadUrl  file    android asset about changelog html                        break                   case 4                      tabWebView loadUrl  file    android asset about license html                        break                   case 5                      tabWebView loadUrl  file    android asset about contributors html                        break                   case 6                      tabWebView loadUrl  file    android asset about links html                        break                   default                      break                                   return tabLayout            about coordinatorlayout xml is as follows    lt  -- android fitsSystemWindows  true  moves the AppBar below the status bar    When it is specified the theme should include  lt item name  android windowTranslucentStatus  gt true lt  item gt    to make the status bar a transparent  darkened overlay  -- gt   lt android support design widget CoordinatorLayout     android id    id about coordinatorlayout      xmlns android  http   schemas android com apk res android      xmlns app  http   schemas android com apk res-auto      android layout height  match parent      android layout width  match parent      android fitsSystemWindows  true   gt        lt  -- the LinearLayout with orientation  vertical  moves the ViewPager below the AppBarLayout  -- gt       lt LinearLayout         android layout width  match parent          android layout height  match parent          android orientation  vertical   gt            lt  -- We need to set android background   color blue  here or any space to the right of the TabLayout on large devices will be white  -- gt           lt android support design widget AppBarLayout             android id    id about appbarlayout              android layout height  wrap content              android layout width  match parent              android background   color blue              android theme   style MyApp AppBarOverlay   gt                lt  -- android theme   style PrivacyBrowser DarkAppBar  makes the text and icons in the AppBar white  -- gt               lt android support v7 widget Toolbar                 android id    id about toolbar                  android layout width  match parent                  android layout height  wrap content                  android background   color blue                  android theme   style MyApp DarkAppBar                  app popupTheme   style MyApp PopupOverlay    gt                lt android support design widget TabLayout                 android id    id about tablayout                  xmlns android support design  http   schemas android com apk res-auto                  android layout height  wrap content                  android layout width  match parent                  android support design tabBackground   color blue                  android support design tabTextColor   color light blue                  android support design tabSelectedTextColor   color white                  android support design tabIndicatorColor   color white                  android support design tabMode  scrollable    gt           lt  android support design widget AppBarLayout gt            lt  -- android layout weight  1  makes about viewpager fill the rest of the screen  -- gt           lt android support v4 view ViewPager             android id    id about viewpager              android layout width  match parent              android layout height  0dp              android layout weight  1    gt       lt  LinearLayout gt   lt  android support design widget CoordinatorLayout gt    about tab version xml is as follows    lt  -- The ScrollView allows the LinearLayout to scroll if it exceeds the height of the page  -- gt   lt ScrollView     android id    id about version scrollview      xmlns android  http   schemas android com apk res android      android layout height  wrap content      android layout width  match parent   gt        lt LinearLayout         android id    id about version linearlayout          android layout height  wrap content          android layout width  match parent          android orientation  vertical          android padding  16dp   gt            lt  -- Include whatever content you want in this tab here  -- gt        lt  LinearLayout gt   lt  ScrollView gt    And about tab webview xml    lt  -- This WebView displays inside of the tabs in AboutActivity  -- gt   lt WebView     android id    id about tab webview      xmlns android  http   schemas android com apk res android      android layout width  match parent      android layout height  match parent    gt    There are also entries in strings xml   lt string name  about app  gt About App lt  string gt   lt string name  version  gt Version lt  string gt   lt string name  permissions  gt Permissions lt  string gt   lt string name  privacy policy  gt Privacy Policy lt  string gt   lt string name  changelog  gt Changelog lt  string gt   lt string name  license  gt License lt  string gt   lt string name  contributors  gt Contributors lt  string gt   lt string name  links  gt Links lt  string gt    And colors xml   lt color name  blue  gt  FF1976D2 lt  color gt   lt color name  light blue  gt  FFBBDEFB lt  color gt   lt color name  white  gt  FFFFFFFF lt  color gt    src main assets contains the HTML files referenced in AboutTabFragemnt java

User · Answer

I ve just managed to setup new TabLayout  so here are the quick steps to do this                Add dependencies inside your build gradle file   dependencies       compile  com android support design 23 1 1     Add TabLayout inside your layout   lt  xml version  1 0  encoding  utf-8   gt   lt LinearLayout xmlns android  http   schemas android com apk res android        android layout width  match parent        android layout height  match parent        android orientation  vertical  gt        lt android support v7 widget Toolbar         android id    id toolbar          android layout width  match parent          android layout height  wrap content          android background   attr colorPrimary   gt        lt android support design widget TabLayout         android id    id tab layout          android layout width  match parent          android layout height  wrap content   gt        lt android support v4 view ViewPager         android id    id pager          android layout width  match parent          android layout height  match parent   gt    lt  LinearLayout gt   Setup your Activity like this   import android os Bundle  import android support design widget TabLayout  import android support v4 app Fragment  import android support v4 app FragmentManager  import android support v4 app FragmentPagerAdapter  import android support v4 view ViewPager  import android support v7 app AppCompatActivity  import android support v7 widget Toolbar   public class TabLayoutActivity extends AppCompatActivity         Override     protected void onCreate Bundle savedInstanceState            super onCreate savedInstanceState           setContentView R layout activity pull to refresh            Toolbar toolbar    Toolbar  findViewById R id toolbar           TabLayout tabLayout    TabLayout  findViewById R id tab layout           ViewPager viewPager    ViewPager  findViewById R id pager            if  toolbar    null                setSupportActionBar toolbar                      viewPager setAdapter new SectionPagerAdapter getSupportFragmentManager              tabLayout setupWithViewPager viewPager              public class SectionPagerAdapter extends FragmentPagerAdapter            public SectionPagerAdapter FragmentManager fm                super fm                       Override         public Fragment getItem int position                switch  position                    case 0                      return new FirstTabFragment                    case 1                  default                      return new SecondTabFragment                                      Override         public int getCount                 return 2                      Override         public CharSequence getPageTitle int position                switch  position                    case 0                      return  First Tab                   case 1                  default                      return  Second Tab

User · Answer

So easy way     XML    lt android support design widget TabLayout         android id    id tab layout          android layout width  match parent          android layout height  wrap content          android background   fff   gt   lt android support v4 view ViewPager         android id    id viewpager          android layout width  match parent          android layout height  wrap content   gt    Java code   private ViewPager viewPager   private String   PAGE TITLES   new String             text1            text1            text3     private final Fragment   PAGES   new Fragment            new fragment1             new fragment2            new fragment3         Override protected void onCreate Bundle savedInstanceState        super onCreate savedInstanceState       setContentView R layout layout a requests           TODO                tebLayout                               viewPager   findViewById R id viewpager       viewPager setAdapter new MyPagerAdapter getSupportFragmentManager          TabLayout tabLayout   findViewById R id tab layout       tabLayout setSelectedTabIndicatorColor Color parseColor   1f57ff         tabLayout setSelectedTabIndicatorHeight  int   4        getResources   getDisplayMetrics   density        tabLayout setTabTextColors Color parseColor   9d9d9d         Color parseColor   0d0e10         tabLayout setupWithViewPager viewPager

User · Answer

Add this to the module build gradle   implementation  com android support constraint constraint-layout 1 1 3   implementation  com android support design 28 0 0

User · Answer

I try to solve here is my code   first add dependency in build gradle app    dependencies       compile  com android support design 23 1 1      Create PagerAdapter class  public class PagerAdapter extends FragmentPagerAdapter        private final List lt Fragment gt  mFragmentList   new ArrayList lt  gt         private final List lt String gt  mFragmentTitleList   new ArrayList lt  gt          public PagerAdapter FragmentManager manager            super manager               Override     public Fragment getItem int position            Log i  PosTabItem     position           return mFragmentList get position               Override     public int getCount             return mFragmentList size               public void addFragment Fragment fragment  String title            mFragmentList add fragment           mFragmentTitleList add title               Override     public CharSequence getPageTitle int position            Log i  PosTab     position            return mFragmentTitleList get position             create activity main xml   lt RelativeLayout xmlns android  http   schemas android com apk res android      xmlns app  http   schemas android com apk res-auto      xmlns tools  http   schemas android com tools      android id    id main layout      android layout width  match parent      android layout height  match parent      tools context   MainActivity  gt        lt android support v7 widget Toolbar         android id    id toolbar          android layout width  match parent          android layout height  wrap content          android layout alignParentTop  true          android background   attr colorPrimary          android elevation  6dp          android minHeight   attr actionBarSize          android theme   style ThemeOverlay AppCompat Dark ActionBar          app popupTheme   style ThemeOverlay AppCompat Light    gt        lt android support design widget TabLayout         android id    id tab layout          android layout width  match parent          android layout height  wrap content          android layout below    id toolbar          android background   attr colorPrimary          android elevation  6dp          android minHeight   attr actionBarSize          android theme   style ThemeOverlay AppCompat Dark ActionBar    gt        lt android support v4 view ViewPager         android id    id pager          android layout width  match parent          android layout height  fill parent          android layout below   id tab layout    gt    lt  RelativeLayout gt    create MainActivity class  public class MainActivity extends AppCompatActivity        Pager pager       Override     protected void onCreate Bundle savedInstanceState            super onCreate savedInstanceState           setContentView R layout activity main           Toolbar toolbar    Toolbar  findViewById R id toolbar           setSupportActionBar toolbar            TabLayout tabLayout    TabLayout  findViewById R id tab layout             final ViewPager viewPager    ViewPager  findViewById R id pager            pager   new Pager getSupportFragmentManager              pager addFragment new FragmentOne     One             viewPager setAdapter pager            tabLayout setupWithViewPager viewPager           tabLayout setTabMode TabLayout MODE FIXED           tabLayout setSmoothScrollingEnabled true            viewPager addOnPageChangeListener new TabLayout TabLayoutOnPageChangeListener tabLayout             tabLayout setOnTabSelectedListener new TabLayout OnTabSelectedListener                  Override             public void onTabSelected TabLayout Tab tab                    viewPager setCurrentItem tab getPosition                                 Override             public void onTabUnselected TabLayout Tab tab                                 Override             public void onTabReselected TabLayout Tab tab                                         and finally create fragment to add in viewpager  crate fragment one xml   lt LinearLayout xmlns android  http   schemas android com apk res android      android orientation  vertical      android layout width  match parent      android layout height  match parent  gt        lt TextView         android text  Location          android layout width  match parent          android layout height  wrap content    gt    lt  LinearLayout gt    Create FragmentOne class  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

[android] Android TabLayout Android Design

Examples related to android

Examples related to android-design-library