Nokia S40 custom header bar - java-me

I'm building a custom header bar for Nokia S40, in LWUIT.
I've found 2 issues.
My Form has a BorderLayout and I've added the header bar (Container) in the NORTH. This container doesn't fill the width of the Form, as the CategoryBar does. I try with BoxLayout but I get the same result. I want that my custom header bar looks like the native CategoryBar, full width and visible over the rest of the Components.
Second issue.
I set my app to full screen using Display.getInstance().setForceFullScreen(true); and I've lost all the back Commandsof my app. Any idea?

You cannot change "headers" color if you are using Nokia S40. The color will be follow the mobile phone color theme.
The only way is using full screen, and draw ourself the Headers.

In my application it's work:
protected void createTitle(Form f) {
Container titleContainer = f.getTitleArea();
titleContainer.removeAll();
titleContainer.setLayout(new BorderLayout());
titleContainer.addComponent(BorderLayout.CENTER, titleBarContainer);
titleContainer.addComponent(BorderLayout.EAST, labelLogo);
}

Related

Android UI alignment issues when supporting kitkat

I have been struggling to find a reliable solution to solve an issue from the past two weeks.
In our android app, we make use of a back ground image. There are some borders in this image in which we have to place different views.
The application needs to be supported from 4.0 to current latest version.
The issues I am facing are listed below.
The app when installed on devices with navigation bar looks perfect, but when run on devices without navigation bar the alignment is disturbed.
What did I try?
I tried checking if the OS version is 18 (4.3) and according to that created two layouts for each activity and installed.
The code is here
if (DEVICE_API_VERSION > 17) {
setContentView(R.layout.layoutwithnavigationbar);
} else {
setContentView(R.layout.layoutnonavigationbar);
}
But there are devices like samsung galaxy note II, which are upgradable to 4.4.2 and have no navigation bar.
Then I tried out the following proceedure.
boolean hasBackKey = KeyCharacterMap.deviceHasKey(KeyEvent.KEYCODE_BACK);
boolean hasHomeKey = KeyCharacterMap.deviceHasKey(KeyEvent.KEYCODE_HOME);
boolean hasMenuKey = ViewConfiguration.get(mContext).hasPermanentMenuKey();
System.out.println("has back key . . . . "+hasBackKey);
System.out.println("has home key . . . . "+hasHomeKey);
System.out.println("has menu key . . . . " + hasMenuKey);
if(hasHomeKey || hasBackKey) {
setContentView(R.layout.layoutnonavigationbar);
} else {
setContentView(R.layout.layoutwithnavigationbar);
}
But again I had no luck.
In sony xperia sl which is 4.1.2 version of android, xhdpi, no navigation bar picks the layout perfectly, but in sony xperia m2, returns hasBackKey as true even if it is having a navigation bar and has no hardware menu buttons, and picks up layout with no navigation bar and layout looks ugly. Even tried few more things like resource id of navigation bar but in htc one s which has hardware buttons and no navigation bar, has a resource id for navigation bar. so it didn't work. I got the resource id as shown below.
int resourceId = resources.getIdentifier("navigation_bar_height",
"dimen", "android");
Did anyone have this problem?
Am I doing any thing silly or missing any thing?
What I am looking for?
1) My app should work from 4.0 to latest version.
2) If any device got navigation bar it can either be made completely transparent and use screen below that too, so that UI is not affected or any other better solution is also fine.
3) Want to know if there is any standard way to know if the device has a navigation bar or uses hardware buttons?
4) How can I make the navigation bar transparent in devices prior to Kitkat.
Note : App only is in landscape mode. Even tried transparent Navigation bar themes but they are only supported in kitkat. I am using values-hdpi,values-xhdpi, ect to get the UI aligned in different devices.
Please help me find a solution.
Finally after a lot of research I could not find a reliable solution. I don't know if it is the standard way of doing but it served my purpose. I used the answer in the stackoverflow question. get real size of screen
Got the display size of the screen as well using the following
DisplayMetrics displayMetrics = new DisplayMetrics();
d.getMetrics(displayMetrics);
int displayHeight = displayMetrics.heightPixels;
int displayWidth = displayMetrics.widthPixels;
if real width and display width are same it means device does not have a navigation bar, else device has a navigation bar. Accordingly I am setting appropriate layouts. I am concerned only with width as my app only runs in landscape mode.

how to remove default graphic assigned to a control (like buttons and checkboxes) before setting new graphic to that control in java fx scene builder?

i am making a java desktop application using javafx. For gui building i am using scene builder 2.0.
Everything is just perfect as expected just 1 thing. I want to customize the buttons. i want to assign a custom graphic to a button.
When i use [button.setgraphic(node)] , this statement set the new graphic to the button but default graphic of button also remains present as well.
I just want to remove the default graphic and then want to assign the new (custom) garaphic to a control like buttons and radio buttons in javafx. 1 thing again i must tell that i am using scene builder for building gui.
How can i achieve this ?
thanks in advance....
Below is the screen-shot of current occuring situation, .....
Here i have made a button using javafx scene builder , and then in the controller of the fxml file (.java file) i am trying to set the image (shown in orange box in snapshot) to that button by using setGraphics property of button ..... i just need that button to be of following shape ...
You'd better customize your button via CSS. Here goes tutorial. What you are trying to do is to modify button picture (which is empty by default). I guess this wasn't your exact purpose.
button.setGraphic(null)
// worked for me.

How to Create Header on j2me(java) screen

I want to create a Header on my j2me lcdui list Screen. How can I create it? When I click on my lcdui list screen, I will navigate to lcdui form screen, that time header will has to be same.
How can I create? I have used this class com.nokia.mid.ui.DirectUtils but failed.
You can insert an advertisement Image with empty String using List.insert.
list.insert(0, "", adImage);
But this image might be scrolled up if you have enough items in the list. If you need an advertisement image fixed under the title you might consider using LWUIT instead of LCDUI.

How to change Nokia full touch lwuit form header color

I want to to change the header color of nokia lwuit based full touch form and i have tried setTitleComponent method but it is not working. Please also check the following link
http://projects.developer.nokia.com/LWUIT_for_Series_40/wiki/UsingSeries40FullTouchFeatures
in which it is mentioned we cannot style the header but is it means we cannot change the bgcolor as well or put custom images in the header?
Note that when using LWUIT for Series 40 port, the default way of running LWUIT apps is a normal-size canvas in Series 40 full touch devices. Thus the Series 40 chrome shows on top of canvas. And there is no way of customising it (other than the title text).
If you want to provide branding elements to the title, the options are:
1. create an additional lable below the Series 40 headerbar
2. run the application in full-screen. We are planning to create a high-level API for this but currently it is already possible using the following trick:
((GameCanvas) (javax.microedition.lcdui.Display.getDisplay(this)).getCurrent()).setFullScreenMode(true);
In the latter option you will of course lose the Series 40 full touch layout.
Use lwuit source, you can change method visibility if required, this is example what i used to use gradient color
form.getTitleComponent().getStyle().setBackgroundType(Style.BACKGROUND_GRADIENT_LINEAR_VERTICAL);
form.getTitleComponent().getStyle().setBackgroundGradientEndColor(Color.GRADIENT_END);
form.getTitleComponent().getStyle().setBackgroundGradientStartColor(Color.GRADIENT_START);
form.getTitleComponent().getStyle().setFgColor(Color.WHITE);
form.getTitleComponent().getStyle().setPadding(10,10,0,0);
form.getTitleComponent().getStyle().setFont(font);
Here Color is my custom class that is used for color code, you can use your one.

LWUIT, How to create a custom label for form title

I want to know how to create a label that contains two icons, one on each side and set it as the title bar for the form element (LWUIT widgets).
Form has a function to get a titleArea then you can put some components what you want.
Form f = new Form();
Container c = f.getTitleArea();
Label iconLabel1 = new Label("leftIcon");//using Image
Label iconLabel2 = new Label("rightIcon");//using Image
c.addComponent(BorderLayout.WEST, iconLabel1);
c.addComponent(BorderLayout.EAST, iconLabel2);
You can just add a component to the north portion of the screen which is the recommended way that will work properly and won't break for newer versions of LWUIT/Codename One.
When you don't set a title it will just work and you can give it the Title UIID. LWUIT 1.5 and newer have a TitleArea container but I suggest you stay away from it since CodenameOne customizes it quite allot for iOS/Android 4.x etc.
Use the setTitleComponent(Label title) method.
EDIT :
Derive the Label class and implement the paint method where you can use the Graphics method to draw Images and texts. Also set the label's text position to Label.CENTER .

Resources