Android Layout doesn't fit into contiguous rectangles - android

I am a new Android developer, and though I have spent a LOT of time reading through the official developer guide/reference (as well has hours of guessing/checking), I'm still stumped about the best way to do my layout. I am creating a board game, and here is an image of the game board. On that board, the game pieces live on (and move between) the small inner hexes. From my limited understanding of Android development, I'm thinking I need to make each small hex a view. And the overall board layout would be a stacking together of these small hex images to form the board shape. The end result would look exactly like the gameBoard image I linked above. IMPORTANT: I want the game board to be on the bottom of the screen, with game info (players, scores, etc.) at the top. For now I am focusing on a portrait layout...I'll deal with landscape mode later.
The trouble I'm having is figuring out how to do the layout. I want to use XML tags for this portion of the layout, because the board itself will never change during the game play. Only the game pieces will move around on the static board. I have spent hours so far researching and trying different layout types, and combinations of different layouts...nothing I've tried gives me that board design. As you can see from the board image, the hexes don't line up into nice rows/columns. I think this is why I am struggling to get my small hex views to look like the board. Any ideas? Or am I going about this in the wrong way altogether?

You say the board will not change, then why don't you use a single (vector) image to represent the whole board? I am not sure if android supports SVG though

Related

Backgound/Text resizing issue

I have a screen design where the text is above the wave.
This is the original design.
but when I try to do it in different Android screen size, I get this
The text is not part of the background.
Does anyone have any suggestion on how to work around this issue? Should I make the text part of the background?
If this is a rather design-orientated question, then I want to share my thoughts:
Embedding text into images is something that I as a developer would try to avoid. This got several reasons:
Text embedded in images cannot be scaled using the built-in Android text size option. When using a regular TextView, it is recommended to specify the text size using sp standing for scalable pixels, which take the user preference for Android-wide text size into account. See this question for more details.
Text embedded in images cannot be found by the Android Accessibility framework (for example, Text-To-Speech for blind people).
Images that have text embedded are really bad to maintain from a developer perspective. You need to provide several resolutions, several languages, and optionally different images for bright or night mode in Android. This leads to a huge amount of resources that is unhandy.
You need to carefully test and configure images with included text, because there might be devices with unusual resolution leading to distorted images or text.
I'd personally prefer using a regular TextView for the text and let the surrounding layout handle the position of the TextView. ConstraintLayout is really flexible doing that. You could also just use two or three different layouts to separately configure in each layout on how the TextView should be positioned. Depending on your development framework, Android could even automatically pick the right layout, depending on the device size.
Hope this gives you an idea.

Direction to take with Android Graphics

I am looking at making a simple game. Without giving out the entire story, I need to draw two pieces of fruit (with arms and legs), who do different movements. They can do a few different actions (less than 5) and they also react to each others actions.
I'd like it to look simple. Very 2D, kids sort of graphics. Maybe shaded, but nice bright happy colours.
Let's say an action is to 'throw ball'. I'd like to see a semi smooth arm action. Smooth if possible.
So, I found a tutorial, which used sprites, and a PNG with 3 different states of a person walking. So, very basic. And I was able to make it walk across the screen, leading each part of the PNG for each state, and iterating through that over and over again, while moving the image.
I got pretty happy with my progress, and would like to base my game on that sort of model - but ... is using sprites, and loading areas of the PNG to make the image move correct? My PNG would be large if I want maybe 20 images just to throw the ball.
But if that's the right way to go, then great! It seems you can go with OpenGL and all that, but that's for 3D graphics right? Using sprites, and a few PNG with images would be OK for perforamnce and all that?
OpenGL is a valid choice for 2D or 3D, you shouldn't have any performance issues.
It will work fine for your game, and would likely be much smoother than trying to use android animations, which are not hardware accelerated on Android 2.x.

In PlayN, what size should I set for the screen to my game?

TL;DR Version of Question:
For a portrait-oriented smartphone game that occupies the full screen with a 500x500 unit board at center, what should the values be for screenWidth and screenHeight in the following line of code?
graphics().setSize(screenWidth, screenHeight);
Extended Version of Question:
To simplify, assume my game is a board game with a square board at the center of the screen. These are the parameters I'm trying to work within:
Ultimately, I'm targeting mobile phones, but I plan to beta test my
device as a HTML5 web app (hence the appeal of PlayN). I want the web
app dimensions to be the same as the mobile app.
I want the orientation to be portrait.
The board will be 500x500 units. In my pygame prototype, I just mapped the units to screen pixels. But looking at the Android Screen Support docs, I realized I need to put a little more thought into this approach.
I'd like the game board at the center of the screen. Since orientation will be portrait, I expect it to more-or-less fill in the screen horizontally. The additional vertical real estate will be used for game information, but it will be pretty minimal so I have some flexibility here.
I suppose this is a more general game-dev/geometry question. I haven't quite wrapped my head around the concept of density-independent pixels yet, so while I work on that, I thought I'd put this out there, as it seems like a pretty fundamental question.
A few references I've consulted so far:
Android Screen Support Docs
PlayN Code Sample (Google Presentation Slide)
PlayN-Sample Cute Game Source

Possible to control positioning in Android precisely using XML

I wanted to know if it was possible to precisely position widgets on Android using XML files? From my experiments, precise position seems impossible via XML. Programmatically, I'm able to position things perfectly based on the device width and height. However, using XML and dip values, things seem to fall apart. Here's one example of what I mean.
Mark Murphy, on an article, wrote:
Some developers, perhaps those coming from the "drag-and-drop" school
of UI development, think first and foremost about the positions of
widgets. They think that they want certain widgets to be certain fixed
sizes at certain fixed locations. They get frustrated with Android
layout manager (containers) and may gravitate to the deprecated
AbsoluteLayout as a way to design UIs they way they used to.
That rarely works well even on desktops, as can be seen by
applications that do not handle window resizing very well. Similarly,
it will not work on mobile devices, particularly Android, with its
range of screen sizes and resolutions.
Instead of thinking about positions, think about rules. You need to
teach Android the "business rules" about where widgets should be sized
and placed, with Android then interpreting those rules based upon what
the device's screen actually supports in terms of resolution.
source
This leads me to believe that precise positioning is difficult with XML files. This is important for my app because I'm laying out widgets on a background image so that these widgets need to be placed exactly on a particular area so that the overall UI looks good. The aspect ratio needs to be preserved across resolutions. Can I do all this using XML files?
Thanks! Any help is greatly appreciated!
Yes you are able to pixel by pixel position your views using an absolute layout.
Last time I checked, which was a while ago, those drag and drop interfaces actually created one for you. (Actually just checking for the link seems that this class has been deprecated.)
However, I highly advise against using them. The reason is because you are coding for so many different screen sizes that providing pixel by pixel dimensions will certainly cause problems across devices.
What I would recommend is using a RelativeLayout. I actually use this type of layout for everything that I can. It lets you put your items to right of, or above and below other elements. This combined with padding and margin options in DIP (density independent pixels) should let you create anything that you want. And it should look nice on most devices.

Android Development- Creating a board game

Im trying to plan out the best way to develop a sample game. I would like to create a board game that act like words with friends (not game rules). For example, I want the board to be a six sided board that has a set number of game tiles. When a game piece (like a checker or ball) is placed on it, i would like to have that piece "snap" to the closest location. My question is, what is the best way to do design the board? Should this be done as a background image? Or draw the board live? If so, how do i create the "snap to" and register when a piece is on the board? I also want to make sure that the board is drawn to the correct dimensions for different phones.
Thanks for any suggestions
jason
This is probably a bit to broad of a question for SO. But I'll give it a go.
Little bit of preface, I have not personally attempted what you are trying. So please do not take what I suggest as what you must do.
If I were you I would create a GameBoard object and a GamePiece object. Put everything to do with making and holding information for the board in the GameBoard class. Whether you draw your board in java, or start with a graphic and build from there depends on a few different things. How specialized would you like the board to look?(you'll have more control if you start with a graphic if you want to make it fancy) If you're just looking for a grid of lines and nothing fancy I'd think you'd be fine to just draw it from java. Do you ever want to use more/less than 6 rows/columns? If you want to use a different number it may be easier to do that when the time comes if you do your drawing from java rather than from a stored graphic. Your game board will also need to be able to keep track of which pieces are on it and where they are.
As for the snap-to: You'll be creating a touch listener that allows you to drag a GamePiece along under your finger. inside of the Finger_Up event in your listener you'll check the piece's current Rect against the Rect's on the GameBoard and drop into whichever slot it intersects most. Fair warning while you are creating your touch listener you're going to have to use some very nitty gritty linear algebra to take raw motion events from the touch screen and tell it where to draw the piece next.

Categories

Resources