CODEWITHSUNDEEP
csscodenameone
Dominik Reinert
Dominik Reinert

Reputation: 896

how to customize the look of a Tab for Android in codename one?

I am using the CSS Plugin for codename one and I am trying to customize the look of Tabs.

Here is my entry for the Tab:

Tab {
    background: none;
    cn1-background-type: none;
    color: white;
    background-color: #005EA8;
    font-weight: bold;
    font-size: x-large;
}

Tab.selected {
    background: none;
    cn1-background-type: none;
    color: white;
    background-color: #005EA8;
    text-decoration: underline;
    font-weight: bold;
    font-size: x-large;
}

This works perfectly for IOS, see here:

enter image description here

But not at all for android:

enter image description here

I have already tried by overriding all the styles, unselected, selected, disabled and pressed . I also tried by customizing TabbedPane and Tabs, but that did not work as expected either.

What am I missing here? Additionally, the size (height) should be the same on both devices, which is not the case for now. Another point I could not figure out is, how to stretch the tabs onto screen size?

Upvotes: 1

Views: 157

Answers (2)

steve hannah
steve hannah

Reputation: 4716

The Android native theme defines a default background color of #f0f0f0 on ALL styles. This is an annoyance when you are trying to create themes that look the same across all platforms. Luckily, I think this is the only style that it defines in default so you can easily combat it by explicitly setting your own default background color for your theme.

In CSS, you can define a default background with 

* {
    background-color: transparent;
}

Alternatively, just keep this default in mind, and explicitly set the background color for any style you are defining.

Upvotes: 1

Shai Almog
Shai Almog

Reputation: 52770

You need to override the border and declare it to be "empty". I'm not sure how something like that is done in the CSS syntax as I don't use that myself.

Upvotes: 0

Related Questions