8 Answers

• Accepted Answer

  I've made it quickly and it looks ugly, spend sometime on styling it.

  var ui = Ti.UI,
      win = ui.currentWindow;
  
  var label = ui.createLabel({
      text: "30",
      textAlign: "center",
      height: 25,
      width: 25,
      font: {
          fontWeight: "light",
          fontSize: 14
      },
      backgroundColor: "red",
      borderColor: "white",
      color: "white",
      borderRadius: 10,
      borderWidth: 3,
      top: -10,
      right: 5
  });
  
  var bar = ui.createTabbedBar({
      labels:["One","Two", "Three"],
      backgroundColor:'#336699",
      bottom:0,
      style:ui.iPhone.SystemButtonStyle.BAR,
      height:50
  });
  
  bar.add(label);
  win.add(bar);
  

• Im guessing that's a no then?

• Have you had a look at the KitchenSink examples? I know that they atleast included some badge stuff in the dashboard view example.

  View here: https://github.com/appcelerator/KitchenSink/blob/master/KitchenSink/Resources/examples/dashboard.js

  Hope that helps.

• if you can't add badge to the individual buttons from Ti API, it's trivial to code this functionality:

  1- the badge is red gradiet label with say 2px border and say 5px border radius and text color white
  2- the button right hand side equals to (tabbedbar width / buttons number) - badge width
  3- hide and show the badge when needed

  btw i didn't do this before, but if i have to i'll :)

• Sorry if i gave you false information.

  I havent had time to actually try this myself but iam positive it should be possible to use badges on tabbars and buttons..

  Third time is the charm?

  In Kitchen Sink look at:
  Base UI > Tabs > Toggle Tab Badge

  Quick look at the code here:
  https://github.com/appcelerator/KitchenSink/blob/master/KitchenSink/Resources/examples/tabs.js

• i'm running against the same problem, tried numerous things but w/o anly luck.

• just create the badge view using a regular Ti.UI.View, and add it to the window with a higher zIndex… them you need to position it properly over the tabbed bar (shouldn't be hard, just get the width and divide it properly by the number of buttons inside the bar for horizontal positioning).

• If you run Kitchen Sink you will see that there is a badge in the dashboard view example.

  If you check the code out: https://github.com/appcelerator/KitchenSink/blob/master/KitchenSink/Resources/examples/dashboard.js

  You will see that there is a code snippet for the badge, something like this:

  var item = Titanium.UI.createDashboardItem({
  image:'image.png',
  selectedImage:'selectedimage.png',
  label:'label text',
  badge:10
  });
  data.push(item);
  
  var dashboard = Titanium.UI.createDashboardView();
  win.add(dashboard);
  

  That is not the complete code but notice the "badge:10" thingy…