android - Using Sliding Tabs with Toolbar -


i've started change using actionbaractivity appcompatactivity, i've started using toolbar instead of standard actionbar.

however, in 1 of activities has swiping tab type of layout, following line seems deprecated:

actionbar.setnavigationmode(actionbar.navigation_mode_tabs); 

although have looked @ other answers on stack overflow regarding this, there built-in way of changing support using toolbar. if so, explain how go changing it? how deprecated methods ontabselected changed?

also, i've noticed google play music app has looks extended toolbar/section underneath tabs (see this image talking about). how able have type of layout?

thanks in advance.

so after few days of lots of research, , looking through github, managed solve problem.

steps updating actionbar tabs toolbar tabs using appcompatactivity:


update: after friday 29th may 2015:

thankfully, using tablayout toolbar has become simpler since announcement of android design support library in google i/o 2015.
no longer need download custom view classes, , google should have done long time ago.

from android developers' blogspot post on android design support library:

tabs:

switching between different views in app via tabs not new concept material design , equally @ home top level navigation pattern or organizing different groupings of content within app (say, different genres of music).

the design library’s tablayout implements both fixed tabs, view’s width divided equally between of tabs, scrollable tabs, tabs not uniform size , can scroll horizontally. tabs can added programmatically:

tablayout tablayout = ...;
tablayout.addtab(tablayout.newtab().settext("tab 1"));

however, if using viewpager horizontal paging between tabs, can create tabs directly pageradapter’s getpagetitle() , connect 2 using setupwithviewpager(). ensures tab selection events update viewpager , page changes update selected tab.


prior google i/o 2015:

firstly, downloaded slidingtablayout.java , slidingtabstrip.java files google's i/o conference app on github. these views used in tab layout, created folder other java activities called 'view' , placed them there.

next, edited activity layout .xml bit this:

<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:ads="http://schemas.android.com/apk/res-auto"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     tools:context="com.mycompany.myapp.myactivity" >      <!-- toolbar tabs underneath -->     <linearlayout android:id="@+id/detail_headerbar"         style="@style/headerbar"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:orientation="vertical">          <include android:id="@+id/detail_toolbar" layout="@layout/toolbar" />          <com.mycompany.myapp.view.slidingtablayout             android:id="@+id/sliding_tabs"             android:background="?attr/colorprimary"             android:layout_width="match_parent"             android:layout_height="wrap_content" />     </linearlayout>      <!-- viewpager (which had used before) ,           responsible swiping change layouts -->     <android.support.v4.view.viewpager         android:id="@+id/view_pager"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_below="@id/detail_headerbar"         android:layout_above="@+id/detail_adview" />      <!-- had adview in layout,          not necessary creating tab layouts -->     <com.google.android.gms.ads.adview         android:id="@+id/detail_adview"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_alignparentbottom="true"         ads:adsize="smart_banner"         ads:adunitid="@string/banner_ad_unit_id" >     </com.google.android.gms.ads.adview>  </relativelayout> 

the line references toolbar (<include android:id="@+id/detail_toolbar" layout="@layout/toolbar" />), referencing following layout (for aren't sure how use toolbar yet):

<android.support.v7.widget.toolbar     xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     android:id="@+id/toolbar"     android:layout_height="wrap_content"     android:layout_width="match_parent"     android:minheight="?attr/actionbarsize"     android:background="?attr/colorprimary"     app:theme="@style/themeoverlay.appcompat.dark.actionbar"     app:popuptheme="@style/themeoverlay.appcompat.light" /> 

and in both of .xml layout files above, ?attr/colorprimary, refers primary colour of app (which had defined in style).

also, in first layout, style had mentioned @style/headerbar refers following:

<style name="headerbar">     <item name="android:background">?colorprimary</item>     <item name="android:elevation">4dp</item>     <!-- may have override in v21 version of file --> </style> 

before started setting layouts in java, had make sure change package names in slidingtablayout.java , slidingtabstrip.java corresponding placed. in case, used: package com.mycompany.myapp.view; in both of these files.

now, in activity (which extending appcompatactivity), first added following in oncreate method:

toolbar toolbar = (toolbar) findviewbyid(r.id.detail_toolbar); setsupportactionbar(toolbar); 

this reponsible displaying toolbar.

then setup viewpager , slidingtablayout parts:

mviewpager = (viewpager) findviewbyid(r.id.view_pager); mviewpager.setadapter(new viewpageradapter(getsupportfragmentmanager()));  mslidingtablayout = (slidingtablayout) findviewbyid(r.id.sliding_tabs); mslidingtablayout.setselectedindicatorcolors(getresources().getcolor(r.color.tab_line));    mslidingtablayout.setdistributeevenly(true); mslidingtablayout.setviewpager(mviewpager); 

the colour 'tab_line' colour had declared in color.xml colour of tab line indicator. note variables above global defined in activity:

slidingtablayout mslidingtablayout; viewpager mviewpager; 

the final thing setup viewpageradapter had called eariler. responsible changing page depending on tab selected. used following:

public class viewpageradapter extends fragmentpageradapter {      public viewpageradapter(fragmentmanager fm) {         super(fm);     }      @override     public int getcount() {         // returns number of tabs         return 3;     }      @override     public fragment getitem(int position) {         // returns new instance of fragment         switch (position) {             case 0:                 return new fragmentone();             case 1:                 return new fragmenttwo();             case 2:                 return new fragmentthree();         }         return null;     }      @override     public charsequence getpagetitle(int position) {         locale l = locale.getdefault();         switch (position) {             case 0:                 return getstring(r.string.title_section1).touppercase(l);             case 1:                 return getstring(r.string.title_section2).touppercase(l);             case 2:                 return getstring(r.string.title_section3).touppercase(l);         }         return null;     } } 

i hope thorough enough answer having same trouble did, when switching actionbaractivity appcompatactivity , starting use toolbar instead of actionbar. if there unclear, feel free comment below.


Comments

Popular posts from this blog

asp.net mvc - SSO between MVCForum and Umbraco7 -

Python Tkinter keyboard using bind -

ubuntu - Selenium Node Not Connecting to Hub, Not Opening Port -