Working hard on Android dialogs

Since more than tree weeks I’ve been busy working with a solution to the Android Dialog Issues that RF was born with. What issues, you might ask? Well, they look ugly and are quite small compared to the screen size available. The reason for this is that when I created RummyFight almost 9 years ago there was no good way to open a dialog with the perceived same size on different devices with different screens and resolutions.

And as a matter of fact: There still is no good way of doing it.
So I had to invent my own solution.

Step 1:
Replace all dialogs where there are no text inputs with a bitmap solution based on AndEngine. This way I can have pixel perfect control of where I place items, what they would look like, how they behave etc. For this to be possible I had to invent a whole new interface system with buttons, views, lables, images etc. Once everything looked ok I begun converting some dialogs. These are the first results:

Old Profile Dialog

New Profile Dialog

Old ProfileGalleryDialog

New ProfileGalleryDialog

I think you agree with me that the new dialogs look a LOT better. Unfortunately there is a lot of work left which leads me to the next step

Step 2:
Create a solution for all dialogs containing text inputs, html content and complex word wraps… with Emoji support!
The only way to do this without reinventing the wheel is to actually use the View components but since I really dislike the layout based system in Android where everything must be placed in relation to another object (Place button to the right of the text, below the headline etc) I decided to create my own coordinate based system meaning I will be able to place my buttons “10 pixels from the bottom, centered”.

So how will I solve this in a system where this isn’t really possible?
Well, this is what I’ve been doing for the last 2 weeks.

First, I had to find out how to convert pixels to screen coordinates so that a window covering 50% of the screen’s with will do that regardless if the screen is 800 pixels wide or 2400px. This wasn’t very difficult since I could get the device’s resolution and divide it by my “Game Resultion” (which is 800 by the way). So if I want to place a button at coordinate 100,200, I just have to multiply 100 with screenwidth/gamewidth to get the pixel coordinate.

Sure, I must also calculate if there are black borders at the sides or above/below the game to find the right coordinate but that’s not very hard either.

Then we have the font sizes. Regardless of what you might think the same solution is not possible to use with fonts. Sure, I still use the same function for it’s placement but the size of the font is more difficult to calculate since the user might have chosen another size for the device system font and I want RF to use the system fonts. So what did I do? Well, the first time a dialog is opened in RF, I create an invisible text object with 20 ‘M’ in it with the font size 50dp. I then check if the string is wider that half the screen. If so, reduce the size to 49 and check again… and again… and again until the string is half the screen size. Store that value and use it as a scaling factor for all other fonts.

Ugly as hell… but actually working 🙂

Now I mentioned there are no pixel perfect positioning system in Android layouts. Well, there actually are one: RelativeLayout.

You can place any object in that layout and set it’s leftmargin and topmargin to your chosen X and Y as long as you can convert your game coordinates to screen coordinates… which I now can.

Ugly as hell #2… but working really well.

Are we done now?
Well, unfortunately not. Since I have built my own dialog system for textviews I also have to handle everything regarding soft keyboard, vertical moving of the dialogs so that you can still press the buttons while the keyboard is visible etc. I also have to explicit hide the keyboard when the user closes a dialog.

But that’s ok. I have already done all that on the iOS version so I can use the same methods of thinking.

So, is that all for now?
Well, perhaps.

Next time I hope to have the replacement dialog for the chat window done. This is by far the most difficult dialog in the whole app since it’s using emojis, word wraps, spannable texts with different colors and a whole lot more.
Keep your fingers crossed.

0 Responses to “Working hard on Android dialogs”

  1. Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


%d bloggers like this: