Languages

Menu
Sites
Language
Customizing Toolbar(Tabbar) Widget

Hi everyone!
Do anyone know whether there's a way to customize a tabbar? For example, I need blue text (labels) inside of items of the tabbar. The tabbar must be white itself. 
I tried

evas_object_color_set(255, 255, 255, 100);

It makes the whole tabbar (with items) white, semi-transparent. When I change the last parameter a = 100 to 0 (or 255) and the label to red color I don't see anything, because the Widget is completely white (or transparent ). But I'd like to use both colors here. Has anyone faced such problem?

List

Responses

3 Replies
Carsten Haitzler

oh first your color is invalid. alpha is 100. it can NEVER be less than r, g, and b. there would be a complaint to stderr/logs about an invalid non-premultiplied color. 

https://developer.nvidia.com/content/alpha-blending-pre-or-not-pre

http://www.teamten.com/lawrence/graphics/premultiplication/

https://en.wikipedia.org/wiki/Alpha_compositing

for starters. this applies to all colors at the API level in efl (edc hides this math by using older style non-premultipled rgba). all colors for objects and rgba pixels follow premultiplied color rules.

second - this won't get you to set the color of text. the text is abstracted many layers down. this means from code you can't just run in and change the color as the color, styling, and more is controled by the theme. the theme is edje objects (.edj files). you can create edj files by editing edc text. it is possible to make your own styles of widgets in edc, compile an edj and ship it with your app. you now should add a theme overlay with this custom edj file of yours, then use your own custom style for widgets.

mytoolbar = elm_toolbar_add(win); // the usual creattion of the toolbar

Elm_Theme *mytheme = elm_theme_add(); // create a new custom thheme

elm_theme_overlay_add(mytheme, "/path/to/mycustom.edj"); // add your custom edj theme file to this theme as an overlay - items found first here

elm_object_theme_set(mytoolbar, mytheme); // make this toolbar use your new custom theme

elm_theme_free(mytheme); // free theme since you don't need it. it will be referenced by the toolbar widget and when toolbar is deleted the theme will actualyl be cleaned up - create only the minimum number of themes you need - dont create and free lots of them

// continue filling toolbar as normal

google for "toolbar.edc" - there is one provided by upstream efl's git repos and you should find one in tizen too. this edc file contains the theme defintion for the toolbar and its items.if you want to change just specific items, look for the elm/toolbar/item/default group - that is the default toolbar item. there are more. look at the one you want to be based off, and then make your own, replacing it with your own design - eg your own colors for the text, anc colors in different states (default, active/selected, disabled etc.). you can even make custom animation here, re-layout content and more. if you only keep the groups that you override/modify here, then the others will fall back to the default theme. add more groups to this custom edj file as you need them. look at this page - it'll explain more:

https://developer.tizen.org/documentation/guides/native-application/ui/ui-control/widget-preferences

Jean Yang

Hi, 

Just for you reference, in the IDE sample world clock smaple, there are image file customize as Toolbar(Tabbar) Widget button, I think that a good way practice.

Pavel Andreev

Wow, many thanks to you, guys!