i have created simple viewpager tabview. tabview has custom theme have designed.
the tabview looks this:
the layout xml file tabview:
<?xml version="1.0" encoding="utf-8"?> <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> the custom theme have created viewpager:
<?xml version="1.0" encoding="utf-8"?> <resources> <style name="theme.custom_tab_theme" parent="@android:style/theme.holo.light"> <item name="android:actionbaritembackground">@drawable/selectable_background_custom_tab_theme</item> <item name="android:popupmenustyle">@style/popupmenu.custom_tab_theme</item> <item name="android:dropdownlistviewstyle">@style/dropdownlistview.custom_tab_theme</item> <item name="android:actionbartabstyle">@style/actionbartabstyle.custom_tab_theme</item> <item name="android:actiondropdownstyle">@style/dropdownnav.custom_tab_theme</item> <item name="android:actionbarstyle">@style/actionbar.solid.custom_tab_theme</item> <item name="android:actionmodebackground">@drawable/cab_background_top_custom_tab_theme</item> <item name="android:actionmodesplitbackground">@drawable/cab_background_bottom_custom_tab_theme</item> <item name="android:actionmodeclosebuttonstyle">@style/actionbutton.closemode.custom_tab_theme</item> <item name="actionmenutextcolor">@color/white</item> <item name="android:actionmenutextcolor">@color/white</item> </style> <style name="textappearance"> <item name="android:textcolor">@android:color/white</item> </style> <style name="actionbar.solid.custom_tab_theme" parent="@android:style/widget.holo.light.actionbar.solid"> <item name="android:background">@drawable/ab_solid_custom_tab_theme</item> <item name="android:backgroundstacked">@drawable/ab_stacked_solid_custom_tab_theme</item> <item name="android:backgroundsplit">@drawable/ab_bottom_solid_custom_tab_theme</item> <item name="android:progressbarstyle">@style/progressbar.custom_tab_theme</item> </style> <style name="actionbar.transparent.custom_tab_theme" parent="@android:style/widget.holo.light.actionbar"> <item name="android:background">@drawable/ab_transparent_custom_tab_theme</item> <item name="android:progressbarstyle">@style/progressbar.custom_tab_theme</item> </style> <style name="popupmenu.custom_tab_theme" parent="@android:style/widget.holo.light.listpopupwindow"> <item name="android:popupbackground">@drawable/menu_dropdown_panel_custom_tab_theme</item> </style> <style name="dropdownlistview.custom_tab_theme" parent="@android:style/widget.holo.light.listview.dropdown"> <item name="android:listselector">@drawable/selectable_background_custom_tab_theme</item> </style> <style name="actionbartabstyle.custom_tab_theme" parent="@android:style/widget.holo.light.actionbar.tabview"> <item name="android:background">@drawable/tab_indicator_ab_custom_tab_theme</item> </style> <style name="dropdownnav.custom_tab_theme" parent="@android:style/widget.holo.light.spinner"> <item name="android:background">@drawable/spinner_background_ab_custom_tab_theme</item> <item name="android:popupbackground">@drawable/menu_dropdown_panel_custom_tab_theme</item> <item name="android:dropdownselector">@drawable/selectable_background_custom_tab_theme</item> </style> <style name="progressbar.custom_tab_theme" parent="@android:style/widget.holo.light.progressbar.horizontal"> <item name="android:progressdrawable">@drawable/progress_horizontal_custom_tab_theme</item> </style> <style name="actionbutton.closemode.custom_tab_theme" parent="@android:style/widget.holo.light.actionbutton.closemode"> <item name="android:background">@drawable/btn_cab_done_custom_tab_theme</item> </style> <!-- style referenced in light.darkactionbar based theme --> <style name="theme.custom_tab_theme.widget" parent="@android:style/theme.holo"> <item name="android:popupmenustyle">@style/popupmenu.custom_tab_theme</item> <item name="android:dropdownlistviewstyle">@style/dropdownlistview.custom_tab_theme</item> </style> </resources> now want customise tabview more include icons , change icons , text color of viewpager when selected.
something want achieve:
so, want 3 things:
- add picture tabs
- change picture , text color of tabs when selected
- change font style of tab text (remove bold , use custom font)
what should implement same? should custom theme modified?
i assume using tablayout design library (if aren't, should, it's rather easy use). class documentation explains how set viewpager, give tabs title , not icon. can add icons afterward:
tablayout tablayout = (tablayout) findviewbyid(...); // normal setup, text-only tabs tablayout.setupwithviewpager(viewpager); // add icons (int = 0; < tablayout.gettabcount(); i++) { tablayout.tab tab = tablayout.gettabat(i); tab.seticon(r.drawable.tab_icon); // different icon per tab } to colorize icons, can use state list drawables show different colored icon android:state_selected="true". can same thing text making color state list , same state attribute.
to make text not bold, can apply own text appearance tablayout. making style declaration (notice apply aforementioned color state list here):
<!-- textappearance.design.tab default used in design library --> <style name="tabtextappearance" parent="textappearance.design.tab"> <item name="android:textcolor">@color/tab_text_color_state_list</color> <item name="android:fontfamily">sans-serif</color> </style> then use in layout:
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" ... > <android.support.design.widget.tablayout android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="wrap_content" android:minheight="?android:attr/actionbarsize" app:tabtextappearance="@style/tabtextappearance" /> <android.support.v4.view.viewpager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> </linearlayout> 
Comments
Post a Comment