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
Post a Comment