How to implement custom tabview in Android ViewPager? -
can ask how implement following layout using viewpager in android:
1) desired view
2)techniques/methods tried:
there activity viewpager , fragmentpageradapter return appropriate fragment each tab. have tried following answers/library:
custom viewpager tabs custom view, multiple fragment , layouts
viewpager in android fixed tabs @ bottom icon , text in each tab
http://viewpagerindicator.com/
i try set actionbarstyle in app theme, rules apply actionbar, not tab view of view pager.
<style name="mytheme" parent="android:theme.holo.light"> <item name="android:actionbarstyle">@style/mycustomactionbar</item> <item name="android:actionbartabstyle">@style/actionbartabstyle</item> <item name="android:actionbarsize">100dp</item> </style> <style name="actionbartabstyle" parent="@android:style/widget.holo.actionbar.tabview"> <item name="android:minheight">200dp</item> </style> <style name="mycustomactionbar" parent="@android:style/widget.holo.light.actionbar"> <item name="android:background">@color/white</item> <item name="android:height">100dp</item> </style> 3) current view:
this current tabview of viewpager, not looking:
4) xml layout:
activity layout:
<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" /> curent fragment layout:
<scrollview xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/new_deliver_scroll" > <linearlayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:paddingleft="@dimen/activity_horizontal_margin" android:paddingright="@dimen/activity_horizontal_margin" android:paddingtop="@dimen/activity_vertical_margin" android:paddingbottom="@dimen/activity_vertical_margin" android:background="@color/background_material_light" android:id="@+id/newdelivermain" > <linearlayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:id="@+id/new_deliver_main_linear" > <relativelayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margintop="20dp" android:orientation="horizontal" android:id="@+id/relative_layout_item_info" > <textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/item_desc" android:id="@+id/new_deliver_item_desc_text" android:textcolor="@color/app_blue" /> ...........
5) code create custom tabview in activity:
viewpageradapter = new senderviewpageradapter( getsupportfragmentmanager()); viewpager = (viewpager) findviewbyid(r.id.pager); viewpager.setadapter( viewpageradapter); actionbar = getactionbar(); actionbar.setnavigationmode(actionbar.navigation_mode_tabs); viewpager.setonpagechangelistener( new viewpager.simpleonpagechangelistener() { @override public void onpageselected(int position) { actionbar.setselectednavigationitem(position); } @override public void onpagescrolled(int arg0, float arg1, int arg2) { } @override public void onpagescrollstatechanged(int arg0) { } }); (int = 0; < viewpageradapter.getcount(); i++) { actionbar.tab newtab = actionbar.newtab(); newtab.setcustomview(r.layout.custom_actionbar); newtab.settablistener(this); textview title = (textview) newtab.getcustomview().findviewbyid(r.id.tab_title); imageview icon = (imageview)newtab.getcustomview().findviewbyid(r.id.tab_icon); title.settext(viewpageradapter.getpagetitle(i)); icon.setimageresource(icons[i]); actionbar.addtab(newtab); }
after several trials, temporarily stuck here. ideas, suggestions how implement desired view appreciated. thank much.
6) update
not work with:
icon.setlayoutparams(new linearlayout.layoutparams(linearlayout.layoutparams.match_parent, linearlayout.layoutparams.match_parent));
@refer @karaokyo answer: switch use radio button instead of action bar, works ok, few more customisations.
change image when check:
drawable top = getresources().getdrawable(r.drawable.image); button.setcompounddrawableswithintrinsicbounds(null, top , null, null); for radio button, hard change size of top image programatically, better resize image > take me 2 hours figure out.
there's not reason use action bar tabs if need customization. it's deprecated, there's that. if doing this, use radiogroup tabs:
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <radiogroup android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:id="@+id/tabs"> <radiobutton android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:drawabletop="@drawable/new_delivery" android:button="@null" android:text="new delivery" android:id="@+id/new_delivery" android:background="@drawable/checked_background_indicator" android:checked="true" style="?android:attr/borderlessbuttonstyle"/> <radiobutton android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:drawabletop="@drawable/job_history" android:button="@null" android:text="job history" android:id="@+id/job_history" android:background="@drawable/checked_background_indicator" style="?android:attr/borderlessbuttonstyle"/> <radiobutton android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:drawabletop="@drawable/track_delivery" android:button="@null" android:text="track delivery" android:id="@+id/track_delivery" android:background="@drawable/checked_background_indicator" style="?android:attr/borderlessbuttonstyle"/> </radiogroup> <android.support.v4.view.viewpager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/tabs" android:layout_alignparentbottom="true"/> </relativelayout> checked_background_indicator.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:drawable="@color/accent" /> </selector> and hook them listeners:
mtabs.setoncheckedchangelistener(new radiogroup.oncheckedchangelistener() { @override public void oncheckedchanged(radiogroup group, int checkedid) { switch (checkedid) { case r.id.new_delivery: mviewpager.setcurrentitem(0); break; case r.id.job_history: mviewpager.setcurrentitem(1); break; case r.id.track_delivery: mviewpager.setcurrentitem(2); } } }); mviewpager.addonpagechangelistener(new viewpager.onpagechangelistener() { @override public void onpagescrolled(int position, float positionoffset, int positionoffsetpixels) { } @override public void onpageselected(int position) { switch(position){ case 0: mtabs.check(r.id.new_delivery); break; case 1: mtabs.check(r.id.job_history); break; case 2: mtabs.check(r.id.track_delivery); break; } } @override public void onpagescrollstatechanged(int state) { } });
Comments
Post a Comment