Android: How to place arrow keys (using images) - android

Just like in many games, I want to do something similar in my app. A set of arrow keys on the bottom left part of the screen so you can control the app.
The thing is, each arrow would be an image. But how to position each of them and how to handle the size is what's confusing me.
Why? Because I don't want to use fixed images, I want them to adjust (scale and move) automatically depending on the screen size.
Any tip on how to handle this?
EDIT:
What I have tried so far was to use a gridlayout, but in a xml layout I can't make the cells work with percentages nor using relative values.
So yeah, as far as I can get is to align that gridlayout on the bottom-left, I get the images look like one of the answers below but I can't adjust the size of each image to look relative to each different screen....
Currently, in a small screen you would see the images HUGE.
And in a big screen you would see 'em ok

I haven't tried this but it seems pretty simply. Just use a TableLayout and then fill the cells you want with the respective button.
___________________
| | | |
| | Up | |
|______|______|_____|
| | | |
| Left | Down |Right|
|______|______|_____|

Related

Drawable center-crop with XML

I want to put an image as a launch screen. Since I don't want to use a layout to do that (that would make useless to use a launch screen because of launch time) I want to put a windowBackground using an xml drawable.
Unfortunately I cannot find anything able to emulate the ImageView CENTER_CROP inside a drawable and the "bitmap" xml tag seems not having that property.
Since I cannot execute any code (because of the origin of the launch screen that must be immediate), I am wondering if it is possible to define a new xml to put in a drawable xml file. In that way, I could develop a new XML Drawable to achieve the result.
Thanks
I was having a problem with setting the windowBackground through XML as well and came across your post. I know this is pretty old now, but just in case someone else comes across your question, have you seen the "clip" options in the gravity setting?
android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
"fill_vertical" | "center_horizontal" | "fill_horizontal" |
"center" | "fill" | "clip_vertical" | "clip_horizontal"]
Here's a link: https://developer.android.com/guide/topics/resources/drawable-resource.html#Bitmap

Showing narrow lists on android tablets

I'm working on an android app with a number of lists containing tweets/user bios which currently expand to the full width of the device.
E.g.:
--------------------------------------
Hello, My name is Tom and I am trying
to make a nice UI
reply
--------------------------------------
Hello, My you are awesome and I am
hoping you will be able to help
reply
--------------------------------------
When looking at these in landscape mode, especially on tablets, the list stretches to the full width of the tablet, causing the content to stretch also, making it hard to read.
|--------------------------------------------------------------------------------|
|Hello, My name is Tom and I am trying to make a nice UI |
| reply |
|--------------------------------------------------------------------------------|
|Hello, My you are awesome and I am hoping you will be able to help |
| reply |
|--------------------------------------------------------------------------------|
I want to add margin down each side of the list, and a border between the list and the margin, while keeping the rest of the app full-width.
|--------------------------------------|
|Hello, My name is Tom and I am trying |
|to make a nice UI |
| reply |
|--------------------------------------|
|Hello, My you are awesome and I am |
|hoping you will be able to help |
| reply |
|--------------------------------------|
Simple enough, except that when I use margin, touch events beyond the border do not effect the list. This means if a user is trying to scroll while touching the margins, the list does not scroll.
An alternative solution is to use padding, which allows scroll, but then I cannot add a border.
Any ideas?
You can use layout_weight along with empty elements, and a RelativeLayout to achieve the same effects as margins.

Using Android SDK to make menu driven game

I'm working on an Android game and at the moment I'm using libgdx using the table layout.
I would like to give Android SDK a try since my game is menu driven and the Android API seems to have a lot of the widgets that I need for my game.
One of my screen is divided into 4 areas (Landscape orientation).
I would like area 1 to span 1 column and be scroll-able like a list view but display a list of custom widgets (Very similar to a contact card where there is picture and right next to it there is information displayed).
I would like area 2 to span 2 columns and it will be similar to area 1 but the widget class is different than the widget used in area 1.
I would like area 3 to span 2 columns and it will be similar to the android home screen where there is a grid full of icons that can be scrolled up and down.
And finally I would like area 4 to span one column and be split into 3 rows to hold 3 different unique widgets.
I would like for all the screen space to be used so that on higher screen the content gets stretched and in smaller screen it gets stretched down.
Something like this (Hopefully it will display properly):
----------------------------
| == | ==== | ++++ | [] |
| == | ==== | ++++ | [] |
| == | ==== | ++++ | [] |
----------------------------
Which layout will allow me to accomplish this? I was thinking GridLayout or TableLayout.
Will Android API allow me to "theme" or "style" the widgets to provided an user interface that is consistent across multiple android versions?
I know Android lets me "theme" an activity and "style" widgets but will that cause the layout to break or android will scale my custom images? I'm planning on having my images split by screen density (if that makes sense).
If someone could point me in the right direction or share their experience with developing a game for Android using Android APIs instead of a game engine or framework that would be great.
Thank you for your time.

Make layout look good on all devices

I am using an emulator to build my first android app. When I publish my app on my phone with the realease .apk, I don't have the desired results.
<Button
android:text="Log In"
android:layout_width="match_parent"
android:layout_height="100px"
android:layout_marginTop="482px"
android:id="#+id/loginButton"
android:background="#76988F"
/>
What I want is for someone to explain how you can set buttons or any other interface controls to look alike on any devices. All devices are different so let's say I put the margins like this in my XAML and boot up the emulator, I'm going to see the following interface :
-----------------------
| |
| |
| |
| |
| |
| |
| |
| |
| MyButton |
-----------------------
But when I boot it on my device, the button will appear elsewhere :
-----------------------
| |
| |
| |
| MyButton |
| |
| |
| |
| |
| |
-----------------------
Probably because according to the device I'm on and the emulator I tried before, the margin of x pixels won't take me to the same place. How can I make these controls stay on a good place on all devices ?
It is kind of hard to search for that information because I don't have the name of the way to let elements stay in a fixed place.
Because there are many devices with so many different screen sizes, resolutions, etc., probably the main thing you have to avoid is using absolute positions when placing layout elements. The Android SDK has some powerful structures to avoid absolute positioning (i.e. LinearLayout, RelativeLayout), so try working with them and instead of defining positions like "12dp", use the correct combination of layout_width, layout_height (wrap_content or match_parent) and layout_weight, which can help you to place layout elements without specifying absolute positions.
Seeing your code the first thing i thought is
Do not use hard coded pixel values in your application code.
You should refer to Best Practices. As the doc says
For performance reasons and to keep the code simpler, the Android system uses pixels as the standard unit for expressing dimension or coordinate values. That means that the dimensions of a view are always expressed in the code using pixels, but always based on the current screen density. For instance, if myView.getWidth() returns 10, the view is 10 pixels wide on the current screen, but on a device with a higher density screen, the value returned might be 15. If you use pixel values in your application code to work with bitmaps that are not pre-scaled for the current screen density, you might need to scale the pixel values that you use in your code to match the un-scaled bitmap source.
Another mistake you made is working with px. Indeed, screens have different densities, and pixels have different sizes depending on this density. So you'll probably prefer using dp, a density dependent measure unit. As for your text sizes you'll have to use sp.
when you use this attribution android:layout_marginTop="482px", you shouldn't use px.
You should use dp.

How to achieve a scrabble-like effect in Android views

We have an idea for a game running under Android and I've been playing around with the views a bit but cannot come up with something adequate.
The idea of the game is a fixed size matrix, and each cell in that matrix can hold a tile similar to Scrabble tiles.
By that I mean there's a letter on the tile and a score. The letter takes up most of the tile and the score is a little bit of text in the corner (no critiques on my graphical skills, this isn't the final product):
+---------+ +---------+
| # | | #### |
| # # | | # # |
| # # | | #### |
| ##### | | # # |
| # # | | #### |
| 17| | 22|
+---------+ +---------+
Unlike Scrabble, the score of a tile is not related to its letter value so we need to be able to populate tiles with an arbitrary letter and score.
I've been using textviews and trying to turn them into a grid with borders around each cell (with a background image) but I can't seem to get views within views working, which I believe I need to ensure the border surrounds both textviews.
I've tried to use a table with each cell also a table, containing the letter and score. But I can't get a satisfactory result.
The number of letter/score combos will be quite high so I'm loathe to create images for each possible tile.
Has anyone else come across a similar problem, and what's the best way to solve it?
You will be quickest creating the letters only (not combinations)
Create a view called TileView which implements imageview and draw the score on the tile corner using the 2d methods described in the developer guide.
I think im misunderstanding something...
But its a simple customView with a Textview that can be styled, in a relative layout and on bottom right of parent another TextView with another styled textView.
Then you can add this component to each tile of your game.
For the tile you can use your asset as background or define it in an xml.

Categories

Resources