BadgeView+weixinUi

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/top1" />
    <include layout="@layout/top2" />

    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>

top1.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@drawable/top1_bg"
    android:paddingLeft="12dp"
    android:paddingRight="12dp" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:gravity="center"
        android:orientation="horizontal" >

        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/actionbar_icon" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="12dp"
            android:text="微信"
            android:textColor="#d3d3d3"
            android:textSize="18sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:orientation="horizontal" >

        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/actionbar_search_icon" />

        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/actionbar_add_icon" />

        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/actionbar_more_icon" />
    </LinearLayout>

</RelativeLayout>

top2.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="40dp"
    android:background="#eee"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="37dp"
        android:orientation="horizontal" >

        <LinearLayout
            android:id="@+id/id_ll_chat"
            android:layout_width="3dp"
            android:orientation="horizontal"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="center" >

            <TextView
                android:id="@+id/id_tv_chat"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="聊天"
                android:textColor="#008000" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="3dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="center" >

            <TextView
                android:id="@+id/id_tv_friend"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#000000"
                android:text="发现" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="3dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="center" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#000000"
                android:id="@+id/id_tv_contact"
                android:text="通讯录" />
        </LinearLayout>
    </LinearLayout>

    <ImageView
        android:id="@+id/id_iv_tabline"
        android:layout_width="100dp"
        android:layout_height="3dp"
        android:background="@drawable/tabline" />

</LinearLayout>

tab01.xml   tab02.xml   tab03.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="match_parent"
    android:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is first Tab"
        android:textSize="22sp"
        android:textStyle="bold" />

</LinearLayout>

MainActivity

package com.example.weixinui;

import java.util.ArrayList;
import java.util.List;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.Display;
import android.view.ViewGroup.LayoutParams;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends FragmentActivity {
	private ViewPager mViewPager;
	private FragmentPagerAdapter mAdapter;
	private List<Fragment> mDatas;

	private TextView mChatTextView;
	private TextView mFriendTextView;
	private TextView mContactTextView;
	private LinearLayout mChatLinearLayout;
	private BadgeView mBadgeView;

	private ImageView mTabline;
	private int mScreen1_3;

	private int mCurrentPageIndex;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);

		initTabLine();
		initView();
	}

	private void initTabLine() {
		mTabline = (ImageView) findViewById(R.id.id_iv_tabline);
		Display display = getWindow().getWindowManager().getDefaultDisplay();
		DisplayMetrics outMetrics = new DisplayMetrics();
		display.getMetrics(outMetrics);
		mScreen1_3 = outMetrics.widthPixels / 3;
		LayoutParams lp = mTabline.getLayoutParams();
		lp.width = mScreen1_3;
		mTabline.setLayoutParams(lp);
	}

	private void initView() {
		mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
		mChatTextView = (TextView) findViewById(R.id.id_tv_chat);
		mFriendTextView = (TextView) findViewById(R.id.id_tv_friend);
		mContactTextView = (TextView) findViewById(R.id.id_tv_contact);
		mChatLinearLayout = (LinearLayout) findViewById(R.id.id_ll_chat);

		mDatas = new ArrayList<Fragment>();

		ChatMainTabFragment tab01 = new ChatMainTabFragment();
		FriendMainTabFragment tab02 = new FriendMainTabFragment();
		ContactMainTabFragment tab03 = new ContactMainTabFragment();

		mDatas.add(tab01);
		mDatas.add(tab02);
		mDatas.add(tab03);

		mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {

			@Override
			public int getCount() {
				return mDatas.size();
			}

			@Override
			public Fragment getItem(int arg0) {
				return mDatas.get(arg0);
			}
		};
		mViewPager.setAdapter(mAdapter);

		mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
			@Override
			public void onPageSelected(int position) {
				resetTextView();
				switch (position) {
				case 0:
					if (mBadgeView != null) {
						mChatLinearLayout.removeView(mBadgeView);
					}
					mBadgeView = new BadgeView(MainActivity.this);
					mBadgeView.setBadgeCount(7);
					mChatLinearLayout.addView(mBadgeView);

					mChatTextView.setTextColor(Color.parseColor("#008000"));
					break;
				case 1:
					mFriendTextView.setTextColor(Color.parseColor("#008000"));
					break;
				case 2:
					mContactTextView.setTextColor(Color.parseColor("#008000"));
					break;

				}

				mCurrentPageIndex = position;

			}

			@Override
			public void onPageScrolled(int position, float positionOffset,
					int positionOffsetPx) {
				Log.e("TAG", position + " , " + positionOffset + " , "
						+ positionOffsetPx);

				LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) mTabline
						.getLayoutParams();

				if (mCurrentPageIndex == 0 && position == 0)// 0->1
				{
					lp.leftMargin = (int) (positionOffset * mScreen1_3 + mCurrentPageIndex
							* mScreen1_3);
				} else if (mCurrentPageIndex == 1 && position == 0)// 1->0
				{
					lp.leftMargin = (int) (mCurrentPageIndex * mScreen1_3 + (positionOffset - 1)
							* mScreen1_3);
				} else if (mCurrentPageIndex == 1 && position == 1) // 1->2
				{
					lp.leftMargin = (int) (mCurrentPageIndex * mScreen1_3 + positionOffset
							* mScreen1_3);
				} else if (mCurrentPageIndex == 2 && position == 1) // 2->1
				{
					lp.leftMargin = (int) (mCurrentPageIndex * mScreen1_3 + (positionOffset - 1)
							* mScreen1_3);
				}
				mTabline.setLayoutParams(lp);

			}

			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub

			}
		});

	}

	protected void resetTextView() {
		mChatTextView.setTextColor(Color.BLACK);
		mFriendTextView.setTextColor(Color.BLACK);
		mContactTextView.setTextColor(Color.BLACK);
	}

}

ChatMainTabFragment   FriendMainTabFragment   ContactMainTabFragment

package com.example.weixinui;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

@SuppressLint("NewApi")
public class ContactMainTabFragment extends Fragment
{
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState)
	{
		return inflater.inflate(R.layout.tab03, container, false);
	}
}

BadgeView

/*
 * BadgeView.java
 * BadgeView
 * 
 * Copyright (c) 2012 Stefan Jauker.
 * https://github.com/kodex83/BadgeView
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 * http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package com.example.weixinui;

import android.content.Context;
import android.graphics.Color;
import android.graphics.Typeface;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.RoundRectShape;
import android.util.AttributeSet;
import android.util.Log;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.FrameLayout.LayoutParams;
import android.widget.TabWidget;
import android.widget.TextView;

public class BadgeView extends TextView {

	private boolean mHideOnNull = true;

	public BadgeView(Context context) {
		this(context, null);
	}

	public BadgeView(Context context, AttributeSet attrs) {
		this(context, attrs, android.R.attr.textViewStyle);
	}

	public BadgeView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);

		init();
	}

	private void init() {
		if (!(getLayoutParams() instanceof LayoutParams)) {
			LayoutParams layoutParams = new LayoutParams(
					android.view.ViewGroup.LayoutParams.WRAP_CONTENT,
					android.view.ViewGroup.LayoutParams.WRAP_CONTENT,
					Gravity.RIGHT | Gravity.TOP);
			setLayoutParams(layoutParams);
		}

		// set default font
		setTextColor(Color.WHITE);
		setTypeface(Typeface.DEFAULT_BOLD);
		setTextSize(TypedValue.COMPLEX_UNIT_SP, 11);
		setPadding(dip2Px(5), dip2Px(1), dip2Px(5), dip2Px(1));

		// set default background
		setBackground(9, Color.parseColor("#d3321b"));

		setGravity(Gravity.CENTER);

		// default values
		setHideOnNull(true);
		setBadgeCount(0);
	}

	@SuppressWarnings("deprecation")
	public void setBackground(int dipRadius, int badgeColor) {
		int radius = dip2Px(dipRadius);
		float[] radiusArray = new float[] { radius, radius, radius, radius,
				radius, radius, radius, radius };

		RoundRectShape roundRect = new RoundRectShape(radiusArray, null, null);
		ShapeDrawable bgDrawable = new ShapeDrawable(roundRect);
		bgDrawable.getPaint().setColor(badgeColor);
		setBackgroundDrawable(bgDrawable);
	}

	/**
	 * @return Returns true if view is hidden on badge value 0 or null;
	 */
	public boolean isHideOnNull() {
		return mHideOnNull;
	}

	/**
	 * @param hideOnNull
	 *            the hideOnNull to set
	 */
	public void setHideOnNull(boolean hideOnNull) {
		mHideOnNull = hideOnNull;
		setText(getText());
	}

	/*
	 * (non-Javadoc)
	 * 
	 * @see android.widget.TextView#setText(java.lang.CharSequence,
	 * android.widget.TextView.BufferType)
	 */
	@Override
	public void setText(CharSequence text, BufferType type) {
		if (isHideOnNull()
				&& (text == null || text.toString().equalsIgnoreCase("0"))) {
			setVisibility(View.GONE);
		} else {
			setVisibility(View.VISIBLE);
		}
		super.setText(text, type);
	}

	public void setBadgeCount(int count) {
		setText(String.valueOf(count));
	}

	public Integer getBadgeCount() {
		if (getText() == null) {
			return null;
		}

		String text = getText().toString();
		try {
			return Integer.parseInt(text);
		} catch (NumberFormatException e) {
			return null;
		}
	}

	public void setBadgeGravity(int gravity) {
		FrameLayout.LayoutParams params = (LayoutParams) getLayoutParams();
		params.gravity = gravity;
		setLayoutParams(params);
	}

	public int getBadgeGravity() {
		FrameLayout.LayoutParams params = (LayoutParams) getLayoutParams();
		return params.gravity;
	}

	public void setBadgeMargin(int dipMargin) {
		setBadgeMargin(dipMargin, dipMargin, dipMargin, dipMargin);
	}

	public void setBadgeMargin(int leftDipMargin, int topDipMargin,
			int rightDipMargin, int bottomDipMargin) {
		FrameLayout.LayoutParams params = (LayoutParams) getLayoutParams();
		params.leftMargin = dip2Px(leftDipMargin);
		params.topMargin = dip2Px(topDipMargin);
		params.rightMargin = dip2Px(rightDipMargin);
		params.bottomMargin = dip2Px(bottomDipMargin);
		setLayoutParams(params);
	}

	public int[] getBadgeMargin() {
		FrameLayout.LayoutParams params = (LayoutParams) getLayoutParams();
		return new int[] { params.leftMargin, params.topMargin,
				params.rightMargin, params.bottomMargin };
	}

	public void incrementBadgeCount(int increment) {
		Integer count = getBadgeCount();
		if (count == null) {
			setBadgeCount(increment);
		} else {
			setBadgeCount(increment + count);
		}
	}

	public void decrementBadgeCount(int decrement) {
		incrementBadgeCount(-decrement);
	}

	/*
	 * Attach the BadgeView to the TabWidget
	 * 
	 * @param target the TabWidget to attach the BadgeView
	 * 
	 * @param tabIndex index of the tab
	 */
	public void setTargetView(TabWidget target, int tabIndex) {
		View tabView = target.getChildTabViewAt(tabIndex);
		setTargetView(tabView);
	}

	/*
	 * Attach the BadgeView to the target view
	 * 
	 * @param target the view to attach the BadgeView
	 */
	public void setTargetView(View target) {
		if (getParent() != null) {
			((ViewGroup) getParent()).removeView(this);
		}

		if (target == null) {
			return;
		}

		if (target.getParent() instanceof FrameLayout) {
			((FrameLayout) target.getParent()).addView(this);

		} else if (target.getParent() instanceof ViewGroup) {
			// use a new Framelayout container for adding badge
			ViewGroup parentContainer = (ViewGroup) target.getParent();
			int groupIndex = parentContainer.indexOfChild(target);
			parentContainer.removeView(target);

			FrameLayout badgeContainer = new FrameLayout(getContext());
			ViewGroup.LayoutParams parentLayoutParams = target
					.getLayoutParams();

			badgeContainer.setLayoutParams(parentLayoutParams);
			target.setLayoutParams(new ViewGroup.LayoutParams(
					ViewGroup.LayoutParams.MATCH_PARENT,
					ViewGroup.LayoutParams.MATCH_PARENT));

			parentContainer.addView(badgeContainer, groupIndex,
					parentLayoutParams);
			badgeContainer.addView(target);

			badgeContainer.addView(this);
		} else if (target.getParent() == null) {
			Log.e(getClass().getSimpleName(), "ParentView is needed");
		}

	}

	/*
	 * converts dip to px
	 */
	private int dip2Px(float dip) {
		return (int) (dip
				* getContext().getResources().getDisplayMetrics().density + 0.5f);
	}
}