Elad Katz - Cool Stories

Monday, May 4, 2009

Overcoming the AbsoluteLayout deprecation, Part I

Hello constant readers :)
As you have probably read in the previous post, I've been having some problems with the new 1.5 SDK, one of which was to get the AbsoluteLayout removed from my project since it has been deprecated...
Now as I showed you before, I have two instances of it in my project - one for the thrown cards (in the middle of the screen) and one for the player hand (bottom of the screen).
The reason that I used the Absolute Layout for the thrown cards was that I needed to show cards that were overlapping. Now even as I was writing it, I thought to myself that using absolute layout would be a bad idea - why? because unlike the Iphone, the android system is not limited to one device and one screen size - at this time, there are NetBooks with 12" screens with a resolution of 1024X768 that can run android as well as more than 10(!!!) new devices scheduled to come out this or next year. So that means you cant count on absolute positioning by pixels because they can change and the game should work on all of them...


Android Netbook

So the mistake came back to bite me in the ass, and I needed to fix it, only question is how???
After making a few inquiries (1,2) it was pretty clear what I had to do - make a custom layout - and once again the question remained how...
I was starting to read up on that but have decided that before I'm going to go head first into a world of unknown pain, I'm gonna play around with the properties of the layouts I know.
Here is the process in pictures:







My first attempt:
I decided I'm going to use a FrameLayout instead of my AbsLay and add left padding for each card, thus creating an overlap...
what I got was kinda weird (Isn't it always in UI?)
The cards got smaller as the padding got bigger.
so I had to scratch that idea...



Attempt 2:
Tried using left margin instead of padding - that didn't work, all that happened was that all the cards were on the same location - you could say that they were overlapping at 100% :)
scratch that too...



Attempt 3:
Switched to LinearLayout and gave it some left margins - notice what happened there? the margins made the cards seem further apart instead of overlapping - and when you think about it - it makes sense - so what did i do? see attempt 4 below...

1 - one card on the table


2- several cards on the table


Attempt 4:
You guessed it!
I used negative values...
as you can see - that got me a little closer but not quite there yet...
for some reason - the first card had almost no overlapping and it seemed like the overlapping between the last two cards was exactly what i was looking for
so I was encouraged and made some more attempts...



Attempt 5 :
here I tried reversing the order of the margins - so the card were now arranged in ascending negative margin order - I got the exact opposite of the previous attempt...
wanna guess what I did next?
I'll give you a hint - in attempt 4 I used descending negative values between cards and in 5, ascending...
guess!




Attempt 6.1
Perfect, almost...
Here I used a constant negative left margin (of 10 pixels)
only problem was that I also sized the frame that contains all the cards with the sum of the cards images so it won't shrink the cards on the right and left of it and for it cropped the right of that King card there...



Attempt 6.2
So I gave it a little extra - what do I mean?
The cards were 72px wide each, I have 5 cards and a margin of 10 for each card so it should have been 72+10+10+10+10 = 112
it worked with 130 :)
good enough for me :D
so there you have it, success, sorta.

So I managed to do it without creating a new Layout, but next I'm going to have to change the layout for the bottom cards, will I be able to do that without creating a new layout? It's gonna be fun finding out!
Stick around for more, and comment if you like it or if you feel something is missing!
See you soon
Elad Katz

3 comments:

  1. as usual, you can have a look at the code @ http://code.google.com/p/bestcardgameever-android/

    ReplyDelete
  2. Elad.. congratulations... it appears a good work, i will see your source code and try to develop anything that help you wit your project... i work with windows phone

    ReplyDelete
  3. hey where can I have a look at your layout code
    thanks in advance

    ReplyDelete