Android Custom Actionprovider Toolbar Implementation menu Little Red dot _android

Source: Internet
Author: User
Tags int size

Several goals for today:
1. Custom Actionprovider
2. Toolbar Actionbar custom Menu
3. Toolbar Actionbar The right side menu to add a corner mark (Toolbar actionbar menu add Little Red dots)
The source code is at the end of the article.

--------------------------------------------------------------------------------

Effect Preview

Customizing the menu does not affect any effects of native Md. You can control properties such as text and colors that are displayed externally.

Requirements Description and Analysis

Usually we customize the titlebar, and we can implement many custom effects. But then toolbar came out really good, so we all use toolbar but we want to give the menu button on the right to achieve such a badgeview effect (such as the red dot above) How to do?

See this request did not play after actionprovider students may panic, but please follow me to analyze the composition of this menu: a imageview display icon, a textview display number, TextView also has a rounded background (can be any shape or color). Then you can't use the menu.xml of the system to do this, so to customize the menu, someone might think that a custom view,but is not needed.

We usually write the menu in the Menu.xml is probably as follows:

<?xml version= "1.0" encoding= "Utf-8"?> <menu xmlns:android=
"http://schemas.android.com/apk/res/" Android "
   xmlns:app=" Http://schemas.android.com/apk/res-auto ">
  <item
    android:id=" @+id/menu_ Pic "
    android:title=" Zhangjie's blog
    app:showasaction= "always"/>
</menu>

In fact, this menu item has a Android:actionproviderclass property, this property can be used to customize the content shown here (View), the value of this property is a complete class name, For example Com.yanzhenjie.XXOOProvider such, and this xxooprovider needs to inherit Actionprovider, the concrete operation also all is completes in the Actionprovider.

First inherit Actionprovider

Here we have to sit down for special instructions, because toolbar is support, so we're going to use support under the Actionprovider class, This class is under SUPPORT.V4, it is compatible with toolbar and Actionbar, so we can customize this Actionprovider class to be free to use in toolbar and Actionbar.

Because we want to implement the corner, this class name Badgeactionprovider, inherit Actionprovider need to implement Oncreateactionview () method:

The public class Badgeactionprovider the extends Actionprovider {public
  Badgeactionprovider (context) {
    super ( context);

  @Override public
  View Oncreateactionview () {return
    view;
  }
}

Custom layout: Badgeview to display

We see that the Oncreateactionview () class needs to return a view, which is the view we want to customize, so we then define the view that is displayed, Very simple is the beginning of the article analysis of a ImageView and a textview:

 <?xml version= "1.0" encoding= "Utf-8"?> <relativelayout "xmlns:android="
  /schemas.android.com/apk/res/android "android:layout_width=" wrap_content "android:layout_height=" Match_parent " android:background= "Actionbaritembackground" > <imageview android:id= "@+id/iv_icon" android:layout_width= "Wrap_content" android:layout_height= "Match_parent" android:layout_centerinparent= "true" android:scaleType= "ce Nter "/> <textview android:id= @+id/tv_badge" android:layout_width= "Wrap_content" Android:layout_heig ht= "Wrap_content" android:layout_alignparentend= "true" android:layout_alignparentright= "true" android:layout_m Argin= "2DP" android:background= "@drawable/circle_red" android:gravity= "center" android:text= "0" Android:te Xtcolor= "@android: Color/white" android:textsize= "12sp"/> </RelativeLayout> 

The only android:background= "? Actionbaritembackground" you need to explain in the above code is the click effect of the menu that references the default Toolbar/actionbar of the system. TextView's android:background= "@drawable/circle_red" is the round red background.

Combination of Actionprovider and custom layouts

The above inheritance is finished, the custom layout is also written, followed by the combination of the two:

public class Badgeactionprovider extends Actionprovider {private ImageView Mivicon;

  Private TextView Mtvbadge;
  Use to record which view is clicked, so that external can accept multiple menu clicks with a listener.
  private int clickwhat;

  Private Onclicklistener Onclicklistener;
  Public Badgeactionprovider {Super (context);
    @Override public View Oncreateactionview () {int size = GetContext (). Getresources (). Getdimensionpixelsize (

    Android.support.design.r.dimen.abc_action_bar_default_height_material);
    Viewgroup.layoutparams layoutparams = new Viewgroup.layoutparams (size, size);

    View view = Layoutinflater.from (GetContext ()). Inflate (R.layout.menu_badge_provider, NULL, FALSE);
    View.setlayoutparams (Layoutparams);
    Mivicon = (ImageView) View.findviewbyid (R.id.iv_icon);
    Mtvbadge = (TextView) View.findviewbyid (R.id.tv_badge);
    View.setonclicklistener (Onviewclicklistener);
  return view;
  //click to process. Private View.onclicklistener Onviewclicklistener = new View.oncLicklistener () {@Override public void OnClick (View v) {if (Onclicklistener!= null) onclicklistene
    R.onclick (Clickwhat);

  }
  };
  External setup listening.
    public void Setonclicklistener (int what, Onclicklistener onclicklistener) {this.clickwhat = what;
  This.onclicklistener = Onclicklistener;
  public interface Onclicklistener {void OnClick (int what);

 }
}

The only thing in the above code that has doubts:

int size = GetContext (). Getresources (). Getdimensionpixelsize (
Android.support.design.r.dimen.abc_action_bar_default_height_material);

This sentence is to read the height of the Toolbar/actionbar under the support, in order to make this menu high and wide system of the menu to achieve the same.

All right, here we go. The Actionprovider customization is basically over, adding a few more customization methods:

Set the icon. Public
void SetIcon (@DrawableRes int icon) {
  mivicon.setimageresource (icon);
}

Sets the number displayed. Public
void Setbadge (int i) {
  mtvbadge.settext (integer.tostring (i));
}

Sets the text. Public
void Settextint (@StringRes int i) {
  mtvbadge.settext (i);
}

Sets the text to display. Public
void SetText (Charsequence i) {
  mtvbadge.settext (i);
}

How to use custom Actionprovider

Now it's time to go back to the beginning of the article and fill in the full custom Actionprovider class name for the Android:actionproviderclass attribute, which was previously said to be a supprt class, so here's a little bit of a change:

<?xml version= "1.0" encoding= "Utf-8"?> <menu xmlns:android=
"http://schemas.android.com/apk/res/" Android "
  xmlns:app=" Http://schemas.android.com/apk/res-auto ">
  <item
    android:id=" @+id/menu_ Pic "
    android:title=" Zhangjie's blog
    app:actionproviderclass= "Com.yanzhenjie.BadgeActionProvider"
    app: showasaction= "Always"/>
</menu>

We noticed that this became app:actionproviderclass because the head of XML was introduced into the xmlnamespace.

Java Code Control custom menu

The above menu.xml is done, and the next step is to load the XML into our activity or fragment in Java code, where we take activity as an example and we inherit appcompatactivity.

First, when you load the menu, record the actionprovider we just customized:

Private Badgeactionprovider Mactionprovider;

@Override Public
Boolean oncreateoptionsmenu (Menu menu) {
  getmenuinflater (). Inflate (R.menu.menu_main, menu) ;

  MenuItem MenuItem = Menu.finditem (r.id.menu_delete);
  Mactionprovider = (badgeactionprovider) menuitemcompat.getactionprovider (menuItem);
  Mactionprovider.setonclicklistener (0, Onclicklistener);//Set Click Monitor. return
  true;
}

Special note: A lot of students here Setonclicklistener when the null pointer exception, the reason is app:actionproviderclass= "Com.yanzhenjie.BadgeActionProvider" The custom class name referenced in this code is wrong, you have to fill in your package name, do not copy the blog here.

Click here to set up the monitoring in the above also stressed that there is a pit to tell, we just did not provide a few methods to set the icon and text, can not be called directly in Oncreateoptionsmenu (), because the Actionprovider has not yet loaded initialization completed, So if we initialize icon and text dynamically, we need to be in onwindowfocuschanged ():

@Override public
void Onwindowfocuschanged (Boolean hasfocus) {
  super.onwindowfocuschanged (hasfocus);
  Mactionprovider.seticon (R.mipmap.ic_action_delete_small);
  Mactionprovider.seticon (r.mipmap.ic_action_picture);
}

Here also to explain, only in Oncreateoptionsmenu () can not be directly initialized, and so Oncreateoptionsmenu () method is done can be arbitrary call.

So now you're free to set the text and icons you want to display, so the goals we mentioned at the beginning of the article are all done,

SOURCE Download: Http://xiazai.jb51.net/201609/yuanma/AndroidActionProvider (jb51.net). rar

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.