CODEWITHSUNDEEP
csscodenameone
Dominik Reinert
Dominik Reinert

Reputation: 895

Codename one: Why does the android button have a different appearance than the IOS button

I am currently styling my App with the css plugin for codename one and I cannot figure out why the default look of the Button is different for android and IOS.

In IOS it looks like this:

Button in IOS

In Android it looks like this:

Button in Android

It should look like it does in IOS for all devices.

In the Css file, I have this entry for Button:

Button {
    cn1-derive: Button;
    background-color: #005EA8;
    color: white;
}

Button.unselected {
    cn1-derive: Button.unselected;
    background-color: #005EA8;
    color: white;
}

Button.pressed {
    cn1-derive: Button.pressed;
    background-color: white;
    color: #005EA8;
}

Its not just the Login Button that should look like this, but All buttons. None of the Buttons looks like they should on Android, but all look like it in IOS.

In Addition, as you might notice, the look changes on click. In IOS this works as expected, In Android the text color changes on click to #0005ea8, but the background is still this grey.

What am I missing here?

Upvotes: 1

Views: 450

Answers (1)

steve hannah
steve hannah

Reputation: 4716

This is one of the ugly parts of CSS meets CN1 themes. The problem is that your CSS theme is being applied over top of the CN1 native theme. Any properties that you set on Button will override whatever those properties were in the native theme, but there are other properties of Button from the native theme that you are not overriding.

Further, CN1 styles offer three ways to set the "background" of the component. In ascending order of priority, they are:

  1. Background color
  2. Background (image)
  3. Border (9-piece borders effectively set the entire background).

If you apply two of these in the same style, then the one lower on the list (higher in number) will take priority. E.g. if you set both the background color and a 9-piece border, then you won't see the background color at all - you'll just see the 9-piece border.

So what is happening here is that you've set the background color for your button in CSS, but the native theme likely set a background image, or a 9-piece border on the Button style which is still overriding your settings.

There are a couple of solutions to your problem:

Solution 1: Override the other "background" properties

Set border: none (to ensure that you override any 9-piece border) (or set border to something). And specify the cn1-background-type: none to ensure that there isn't an image background being applied to it:

Button {
    background-color: #005EA8;
    color: white;
    border: none;
    cn1-background-type: none;
}

NOTE: You also don't need to specify cn1-derive: Button because your style name actually is Button.

Solution 2: Create your Own Button classes from the ground up

If you don't want the baggage of the native theme, just create your own style, and set it exactly how you want.

e.g.

MyButton {
    ...
}

And in your Java code:

btn.setUIID("MyButton");

Upvotes: 4

Related Questions