Database Users

Howto make nicer GUIs with VS2008, C#, WinMob SDK 6

Hi.
I was playing a little bit using VS2008 and Windows Mobile 6 SDK to create my own mobile application in C#.
But what really is annoying is the missing ability of creating 'nice' UIs.
For example G-Alarm (http://forum.xda-developers.com/showthread.php?t=422362) looks much nicer then a 'simple app'.
How are those apps be done?
Or is it raw graphic programming?
Any tips appreciated.
Please get me on the road. ;-)
Regards,
AtzeX

You can use images to create nice UI's. You can make nice images with photoshop or paint.net

Sure, but that would mean, that the UI is static.
What about some dynamic, like buttons and the effects when hovering over them etc.?
Is this all done by combining different images?
Is there somewhere a sample-application demonstrating that technics?
Or is there any toolbox what they use?

AtzeX said:
Sure, but that would mean, that the UI is static.
What about some dynamic, like buttons and the effects when hovering over them etc.?
Is this all done by combining different images?
Is there somewhere a sample-application demonstrating that technics?
Or is there any toolbox what they use?
Click to expand...
Click to collapse
H-overs are usually just 2 pictures .

...not to forget the pressed state.
So, do I really have to become a graphic artist thatfore?
No other way/tricks/(common)libraries?

In what I've done, use a picturebox rather than a button, and then change the image on the mousedown/mouseup events.
If you like the button styles of a particular thing (e.g. the Diamond/Opal/whatevers volume control), I'd extract the image, resize it and you're good to go.
Obviously ask the relevant owners permission first!
Attached is the Jade volume control button (I have it in transparent, but it's a large file... I'll upload it somewhere else if wanted) which may be of use as a simple On/Off button.

l3v5y said:
In what I've done, use a picturebox rather than a button, and then change the image on the mousedown/mouseup events.
If you like the button styles of a particular thing (e.g. the Diamond/Opal/whatevers volume control), I'd extract the image, resize it and you're good to go.
Obviously ask the relevant owners permission first!
Attached is the Jade volume control button (I have it in transparent, but it's a large file... I'll upload it somewhere else if wanted) which may be of use as a simple On/Off button.
Click to expand...
Click to collapse
so they aren´t released yet ?!? OMG, xda is hacking out every piece of software but no complete diamond gfx-pack ?
would be really great, I´d like to modify them and use them for some own projects.

Thanks l3v5y!
But unfortunately I will have no time left in the next weeks, because I will be away.
But I will try and respond when I'm back.
Regards,
AtzeX

Is it possible to make pictures/pictureboxes transparent???
I want to embed png files containing transparency information
I tried so long but couldn`t find out....
thx

ya, welcome to the .net mobile world lol. I've been trying to come up with some nicer guis on my own for a few weeks now, with little luck due to poor documentation/examples and understanding of the gdi drawing capabilities.
if possible, please keep us (me) updated on what you find or code. there's just so little open source or documentation in the .net mobile world (it seems to me at least) for creating any controls (other than odl's) that try to move themselves away from the standard look and feel of the textboxes, comboboxes, etc.

I was wondering if the xFlib libraries could be used to create apps... http://www.xflib.net/
Then why would I want to use XFlib ???
XFlib has been designed following a few principles : completely free library, very simple to use, and with good enough performance to allow you to do your games without too much technical knowledge…
It all started when we, at the XFTeam, decided to do some PocketPC development. There were already tons of solutions out there, like using .Net, but pretty much everything was Windows-based, which was a problem for the Linux users That's where CEGCC came in to help : it provided us with a great free cross-platform compiler for ARM PocketPC !
We have been strongly influenced by GBA/NDS development, so the library was also designed with strong analogies to the old school 2D consoles : manage your sprites, bitmap layers, tiled backgrounds, text, etc…
Click to expand...
Click to collapse

Nice site for creating buttons:
http://cooltext.com/Buttons

Transparency and Custom controls
Transparency is a pain in the but with .net. The only way I was able to get it to work was by making unsafe system calls by add using "System.Runtime.InteropServices;"
and call Alphablend from the coredll.dll file.
[DllImport("coredll.dll")]
extern public static Int32 AlphaBlend(IntPtr hdcDest,
Int32 xDest,
Int32 yDest,
Int32 cxDest,
Int32 cyDest,
IntPtr hdcSrc,
Int32 xSrc,
Int32 ySrc,
Int32 cxSrc,
Int32 cySrc,
BlendFunction blendFunction);
Not only is it a pain but it seemed to slow down my animations significantly.
or using the native .NET GDI you can do this the following way:
this method olny makes an exact color transparent but you can't set transparency values.
System.Drawing.Imaging.ImageAttributes attr = new System.Drawing.Imaging.ImageAttributes();
// "this sets your transparent color, the color you want to disappear"
attr.SetColorKey(Color.White, Color.White);
e.DrawImage(bmp, dstRect, 0, 0, bmp.Width, bmp.Height, GraphicsUnit.Pixel, attr);
the code above is an incomplete segment that would display a bitmap named bmp with the exact color white gone.
I can post an example in C# if people want it. But basically for a unique look, I don't use any windows controls. I make a buffered picture the size of the display and bitblit the images off screen and switch them in like in a video game rendering. I draw how each control should look and then monitor mouse location and click locations to determine what control is being interacted with and what images to switch them out with.
I release a custom UI replacement program called FlipSlide here http://forum.xda-developers.com/showthread.php?t=385036 there is source code available from http://sourceforge.net/projects/flipslide/ for this that uses these techniques.
hope that helps somebody.

AtzeX said:
Hi.
I was playing a little bit using VS2008 and Windows Mobile 6 SDK to create my own mobile application in C#.
But what really is annoying is the missing ability of creating 'nice' UIs.
For example G-Alarm (http://forum.xda-developers.com/showthread.php?t=422362) looks much nicer then a 'simple app'.
How are those apps be done?
Or is it raw graphic programming?
Any tips appreciated.
Please get me on the road. ;-)
Regards,
AtzeX
Click to expand...
Click to collapse
You can read this article: Building Graphically Advanced Applications with the .NET Compact Framework 3.5

thx for your help chetstriker
i will download the sourcecode and try to figure it out...

[Q] Designing an Android App UI?

Hello!
How would I go about designing a UI for an application? Would I be able to design a UI in photoshop and export it to the Android SDK?
Any links/tutorials/videos would be appreciated

To work in photoshop you would need some templates, like size specifications according to the device your are making the application for e.g. is it hd or ld etc. Plus there is a nice application you can use as well http://www.droiddraw.org/

likuidfire said:
To work in photoshop you would need some templates, like size specifications according to the device your are making the application for e.g. is it hd or ld etc. Plus there is a nice application you can use as well http://www.droiddraw.org/
Click to expand...
Click to collapse
Where would I get a template or a size specification?
Thanks

Google provides guidelines for that. Google for "Android User Interface Guidelines".

[Q] Good Android layout creator

Hey, i created an Android card game and i got the coding part nailed down, but the layout part i'm still trying to improve, the current layout seems unprofessional (and the layout creator that comes with the SDK kinda sucks), is there some way to make a great looking layout for my app? Any tricks for the Layout Creator of the SDK or any other tools?
My app is this: https://play.google.com/store/apps/details?id=com.rtt3ch.suecaonline

DarknessWarrior said:
Hey, i created an Android card game and i got the coding part nailed down, but the layout part i'm still trying to improve, the current layout seems unprofessional (and the layout creator that comes with the SDK kinda sucks), is there some way to make a great looking layout for my app? Any tricks for the Layout Creator of the SDK or any other tools?
My app is this: https://play.google.com/store/apps/details?id=com.rtt3ch.suecaonline
Click to expand...
Click to collapse
There are no good wyswig layout editor IMHO, for example, the eclipse graphical editor should be used more like a way to get a quick sneak-peak at what the xml code you're writing will look like than a way to actually generate the UI.
I can recommend some resources that really helped me improve the UI of my app :
Read the Design Guidelines thoroughly, once you're done reading, read them again^^ : http://developer.android.com/design/index.html
watch some Android Design in Action videos, gives a lot of inspiration, and there might be an episode specifically about your app's purpose (it's a weekly show held by Google engineers Roman Nurik, Adam Kosh & Nick Butcher, working on the Android Team, and they often do redesigns of existing apps or treat a specific type of app and the design it should have) : http://www.youtube.com/watch?v=2....
Take a look at the great open source custom views & libraries showcased on : http://androidviews.net
Use the Android Assets Studio to generate custom icons, 9patchs, framed screenshots etc... : http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html
Use the Action Bar Style Generator to create a custom action bar theme that suits your branding/color palette : http://jgilfelt.github.io/android-actionbarstylegenerator/
Use the Holo Colors generator to get all the Holo-compliant variants of a defined color (i.e : for button states - pressed/selected) : http://android-holo-colors.com/
Watch some Dev.Bytes videos, they are short and straight to the point, and always about implementing some custom animations and effects to jazz-up your app (again, held by Chet Haase & Nick Butcher, engineers at Google) : http://www.youtube.com/watch?v=XNF...
Take a look at Cyril Mottier's blog : http://cyrilmottier.com/
Nadav Fima's blog : http://nadavfima.com/
Join the Android Design community on Google+, ask for advice & show your designs/mock-ups to get feedback : https://plus.google.com/communities/113499773637471211070
Hope that gets you going, good luck

Android layout is the bane of my existence. Especially when you're trying to get things to work across 10 inch, 7 inch tablets and phone screens.
A lot of the time things just don't work like you'd expect them to. Practice a lot, google a lot and you'll build up your own bag of tricks to handle things, like using empty frame layout to pad things and when to (and when NOT to) use layout weights and layout margins.
Don't trust the software preview in the IDE, or even the simulator. Always test on actual devices and try to test on as many devices as you can.
Wish I could be of more help, but android's layout is a *****.

[Q] Drawing Shapes/Spirals and Filling

Hi everyone,
I'm looking for some general advice regarding drawing shapes, lines intersecting those shapes, and filling the space in between.
A little background, I'm creating an app for my son where patterns of geometric shapes are shown. When they are interacted with it would be nice to be able to change colour / animate in some way.
I have created the basic framework for the app - activities, layout, menus and the like. I now need to think about actual functionality.
Looking online I have read some resources on canvases and OpenGL. Both look as though there would be a considerable learning curve, so I'm reaching out for some advice ahead of that.
Many thanks,
Peter :laugh:

Canvas is really pretty easy - just give it a try.
For example you could implement classes for each Object Type (Rectangle, Circle) and save the data (colour, x/y-position,...) in it. Then code a draw(Canvas onto) for that classes.
Kind Regards

Thanks, I'll give it a go with that

petedunc88 said:
Thanks, I'll give it a go with that
Click to expand...
Click to collapse
Yeah, you won't need OpenGL for that.
You could also have a look at 2D graphics engines. They simplify things a lot.

[Q] Screen View - Java ADT Eclipse

Hello, I am developing my very first app using the latest Android bundle (SDK + Eclipse included). I also installed LibGDx since it will be a game. Upon following some tutorials online it dawned on me, how the hell can I SEE what I'm doing? Meaning I have no room/screen view. So when I render an object onto the screen I just have to wing it when it comes to where it should start on the screen. This is obviously not a good way to make games, its kinda tedious. Precise placement of objects as in "Angry Birds" will be very hard. I'm well aware of emulation but that only shows things after the fact. There has to be a way to do it, maybe a plugin or something? Being able to drag/drop and interact with objects on this screen w/out code would also help a lot. Much thanks!

Eclipse shows the layouts at runtime. You don't have to run it on the emulator each time to manage layouts. Double click on the layout file and it will open in a side view. At the bottom, there will be 2 options, viz Layout.xml and Graphical Layout. Choose Graphical Layout.

EatHeat said:
Eclipse shows the layouts at runtime. You don't have to run it on the emulator each time to manage layouts. Double click on the layout file and it will open in a side view. At the bottom, there will be 2 options, viz Layout.xml and Graphical Layout. Choose Graphical Layout.
Click to expand...
Click to collapse
Thanks for replying, but I should've mentioned that I'm aware of this. This view only shows things I drag and drop onto from the same window. It doesn't show anything rendered in the code from other classes. So anything important like the main characters aren't there. Is there perhaps some way to make them show up in here?

Android3000 said:
Thanks for replying, but I should've mentioned that I'm aware of this. This view only shows things I drag and drop onto from the same window. It doesn't show anything rendered in the code from other classes. So anything important like the main characters aren't there. Is there perhaps some way to make them show up in here?
Click to expand...
Click to collapse
Layouts managed by code isn't showed. Only the xml layouts are show up.

EatHeat said:
Layouts managed by code isn't showed. Only the xml layouts are show up.
Click to expand...
Click to collapse
This is what bothers me. How in the world am I suppose to develop complex levels and what not without being able to see placement of things live? I can't imagine trying to make angry birds or something like that by only having coordinates and no visuals. So there isn't any add-on or plugin that can provide such capabilities?

There isn't any official visual level editor by LibGDX.
But maybe you find an Editor that saves your level in xml or sth. and you can parse that xml in ur LibGDX-App. I wrote my own Level-Editor specially for my LibGDX-Game and it wasn't so hard to code.
Regards

Android3000 said:
This is what bothers me. How in the world am I suppose to develop complex levels and what not without being able to see placement of things live? I can't imagine trying to make angry birds or something like that by only having coordinates and no visuals. So there isn't any add-on or plugin that can provide such capabilities?
Click to expand...
Click to collapse
Not that I know of. You can just create the whole layout in xml to get it correct first. Then use those coordinates in your code accordingly.

Apparently various types of 3rd party apps do exist for this task . Thanks for the help guys.

just try another game engine