Android Custom Tabbar with Badgeview message prompt

At the earliest, I used the tab is at the bottom of the screen, and then slowly popular at the top of the screen, according to the user experience, the top is indeed better than the bottom, not only to prevent the press to return or home and other causes of misoperation, and tab title in the head is very conspicuous and eye-catching.

at first, friends recommend using Viewpageindicator, which can be GitHub There are examples, if you have no special needs, the basic can meet the requirements. According to the project requirements I used the viewpageindicator, and later the project asked for a message, just like iOS badge, so the viewpageindicator to modify, after the change, there is a situation

is badge, but the original tab to destroy, and then I follow the viewpageindicator way to write an example, plus badge also appeared this situation, estimated tabwidget not suitable for this mode (also may be my level is limited, Experts should have a way), and viewpageindicator more responsible, there are so many code and style, but also to introduce the library, Also have to delete the original Android-support-v4.jar, and so on, which will cause other problems, although can be resolved, but feel very troublesome, it is intended to rewrite one of their own, tabbar do not tabwidget, but their own custom layout tabbar.xml

<?xml version= "1.0"  encoding= "Utf-8"? ><linearlayout xmlns:android= "http// Schemas.android.com/apk/res/android "    android:layout_width=" Match_parent "     android:layout_height= "wrap_content"     android:orientation= "vertical"   >    <linearlayout        android:layout_ Width= "Match_parent"         android:layout_height= "Wrap_content"          android:orientation= "Horizontal"  >         <LinearLayout             android:id= "@+id/tab_first"              Android:layout_width= "Match_parent"              android:layout_height= "Wrap_content" &NBSP;&Nbsp;          android:layout_weight= "1"              android:background= "@drawable/tab_bg"              android:gravity= "Center"              android:orientation= "Horizontal"              android:padding= "10dip"  >             <TextView                 android:id= "@+id/text_first"                  android:layout_width= "Wrap_content"                  android:layout_height= "Wrap_ Content "&NBSP;&NBSP;&NBSP;&NBSP;&Nbsp;           android:gravity= "Center"                  android:text= "@string/ First "                android: Textcolor= "@color/green"                  android:textsize= "15SP"  />        </ linearlayout>        <linearlayout             android:id= "@+id/tab_second"              android:layout_width= "Match_parent"              android:layout_height= "Wrap_content"              android:layout_weight= "1"             android: background= "@drawable/tab_bg"             android: Clickable= "true"             android:gravity= " Center "             android:orientation=" Horizontal "            android:padding=" 10dip "             android:saveenabled= "false"  >             <TextView                 android:id= "@+id/text_second"                  android:layout_width = "Wrap_content"                 android:layout_height= "Wrap_content"                 android: gravity= "Center"                  android:text= "@string/second"                  android:textcolor= "@color/black"                  android:textsize= "15SP"  />         </LinearLayout>        <LinearLayout             android:id= "@+id/tab_third"              android:layout_width= "Match_parent"              android:layout_height= "Wrap_content"              android:layout_weight= "1"              android:background= "@drawable/tab_bg"              android:focusable= "false"              android:gravity= "Center"              android : orientation= "Horizontal"             android: padding= "10dip"  >            <textview                 android:id= "@+ Id/text_third "                 Android:layout_width= "WRAp_content "                 android:layout_height= "Wrap_content"                  android:gravity= "Center"                  android:text= "@string/third"                  android:textcolor= "@color/black"                  android:textsize= "15SP"  />         </linearlayout>    </linearlayout >    <imageview        android:id= "@+id/tab_ Under_line "        android:layout_width=" 200DP "         android:layout_height= "Wrap_content"         android:background= "@ Drawable/vpi__tab_selected_pressed_holo " >    </imageview></linearlayout >

overall layout in Activity_main.xml

<linearlayout xmlns:android= "http:// Schemas.android.com/apk/res/android "    xmlns:tools=" Http://schemas.android.com/tools "     android:layout_width= "Match_parent"     android:layout_height= " Match_parent "    android:orientation=" vertical " >    < include layout= "@layout/tabbar"/>        < Android.support.v4.view.viewpager        android:id= "@+id/viewpager"         android:layout_width= "Match_parent"          android:layout_height= "Match_parent" &NBSP;/></LINEARLAYOUT> 

Take a look first, there are three tab and three tab pages, including the badge

May be rough, we can modify their own, but the sense of self is almost the effect, generally enough

followed by initialization of a series of view, event bindings, adapter initialization, etc.

@Overrideprotected  void oncreate (bundle savedinstancestate)  {super.oncreate ( Savedinstancestate); Setcontentview (r.layout.activity_main);//Initialize screen width displaymetrics outmetrics =  new displaymetrics (); GetWindow (). Getwindowmanager (). Getdefaultdisplay (). Getmetrics (Outmetrics); screenwidth = outmetrics.widthpixels;//Initialize three pages firsttabfragment firsttabfragment = new  firsttabfragment (); Secondtabfragment secondtabfragment = new secondtabfragment (); Thirdtabfragment thirdtabfragment = new thirdtabfragment (); Fragments.add (firstTabFragment) ; Fragments.add (secondtabfragment); Fragments.add (thirdtabfragment); fragsize = fragments.size ();// Initialize top three tabfirsttab =  (linearlayout)  findviewbyid (R.id.tab_first);secondtab =  ( LinearLayout)  findviewbyid (R.id.tab_second);thirdtab =  (linearlayout)  findViewById ( R.id.tab_third);//tab Set Click event Firsttab.setonclicklisteneR (Tabclicklistener); Secondtab.setonclicklistener (Tabclicklistener); Thirdtab.setonclicklistener ( Tabclicklistener);//Initialize the tab-selected underscore Inittabunderline ();firsttext =  (TextView)  findviewbyid ( R.id.text_first);secondtext =  (TextView)  findviewbyid (R.id.text_second);thirdtext =  ( TextView)  findviewbyid (R.id.text_third);viewpager =  (Viewpager) Findviewbyid (R.id.viewpager); Pageradapter = new mypageadapter (Getsupportfragmentmanager ()); Viewpager.setadapter (PagerAdapter ); Viewpager.setonpagechangelistener (Pagechangelistener);//example  to the first tab plus badgebadgeview badge; Badge = new badgeview (Mainactivity.this, firsttab); Badge.settext ("1"); Badge.show ();}

Sets the current item of the Viewpager line.

Finally, the message reminder number badge, here is very simple, just get tab linearlayout, show Badgeview on LinearLayout, will not affect the previous layout

Example to the first tab plus Badgebadgeview Badge;badge = new Badgeview (mainactivity.this, Firsttab); Badge.settext ("1"); Badge.show ();

Language organization ability is not very good, but also look for understanding, but I also online query a lot of examples to write, thank you big God.

The specific content is to download the code to understand, the following release portal to GitHub

Source Code Portal

Android Custom Tabbar with Badgeview message prompt