Looking for some Android layout advice - android

I have an issue where I need to add several (>20) to a layout at run time and the buttons can be 2 different widths and 2 different heights. I dont know the exact size of these buttons at design time as the minimum size will be determined by the device screen. So I thought I would use Linear Layout and use weights to manage the size of the buttons but you can only layout in one direction at a time, where I need the buttons to be able to double their size in either direction see below ascii art. I also looked at relative layout but I would need to specify the size of the buttons at design time which I don't as each user could have different layouts based on which buttons they want to emphasise.
<code>
+--------+
| | single size button
| |
+--------+
+--------+--------+
| | double width single height
| |
+--------+--------+
+--------+
| |
| | double height single width
+ +
| |
| |
+--------+
+--------+--------+
| |
| | double height double width
+ +
| |
| |
+--------+--------+
</code>
With that in mind this is a possible layout
<code>
+--------+ +--------+ +--------+--------+ +--------+
| | | | | | | |
| | | | | | | |
+--------+ +--------+ +--------+--------+ + +
+--------+ +--------+-+--------+ | |
| | | | | |
| | | | | |
+--------+ +-------------------+ +--------+
</code>
So I can't determine a way of building a layout that is this flexible and was wondering if you could tell me if building this layout can only be done in code rather than a more efficient and reusable xml based layout?
Regards
Damien

RecyclerView with StaggeredGridLayout from new Lollipop API. These classes are available in support library.
They let to make something like this,
it supports horizontal and vertical scroll, had be used like ListView and It can had be filled dynamically.
Or use any libraries, that you can find by key word - twowayview

Related

Disable clipping of a scaled view?

I'm creating a game that will have a map (an image) with some features (other images) on top. So far I'm using a subclassed View and draw everything in an onDraw method, but I'd like to keep the images as ImageView-s, so that I can animate them (fade-in when creating, move, etc) with Android built-in methods.
So I have the following structure:
FrameLayout (match_parent)
AbsoluteLayout (match_parent)
map: ImageView
feature1: ImageView
...
Since the map is larger than a viewport, I want to apply a scale to it. While it's possible to apply the same scale to each individual image, I'd like to keep the coordinates of all the feature images relative to a canonical size of the map and apply the master scale in a single place, namely AbsoluteLayout. The problem is that when I set scaleX and scaleY, the child images are clipped: the only part showing is that which would be shown if the scale wasn't applied.
This is what it looks like without applied scale:
device screen
,--------------.
| ############ | #####
| #........... | .....
| #........... | imaginary map continues
| #........... | .....
| #...big map. | .....
| #........... | .....
| #........... | .....
| #........... | .....
| #........... | .....
| #........... | .....
`--------------'
#........... .....
#........... .....
When I apply scale, I see this: the same part of map is visible, but scaled.
,--------------.
| #### |
| #... |
| #... |
| #... |
| |
| |
| |
| |
| |
| |
`--------------'
And I want to achieve this:
,--------------.
| ############ |
| #..........# |
| #..scaled..# |
| #...map....# |
| #..........# |
| #..........# |
| ############ |
| |
| |
| |
`--------------'
Ie apply scale to the containing layout, but make it draw the "overflow", not clip it.
Is there an easy way to do this?
This answer has what I need: just set setClipChildren(false) on the outer container (the FrameLayout).

Screen size and content dependant layouts

I would to inflate different layout for every screen size (different rows in list view), but for normal size I have to use two row layouts. Currently I'm checking the screen size, and if size is normal then I check once again which row inflate. Is there any better way to do this?
For example:
small
+---------+
| TITLE |
+---------+
| IMAGE |
+---------+
| CONTENT |
+---------+
normal 1
+---------+
| TITLE |
+---------+
| IMAGE |
+---------+
| CONTENT |
+---------+
or normal 2
+---------+--------+
| TITLE | IMAGE |
+---------+--------+
| CONTENT |
+---------+
You can use different layout file versions. For example, you're default layout is this:
+---------+
| TITLE |
+---------+
| IMAGE |
+---------+
| CONTENT |
+---------+
You'll save it in res/layout/my_layout.xml.
Then you want another layout for screens wider than 400dp:
+---------+--------+
| TITLE | IMAGE |
+---------+--------+
| CONTENT |
+---------+
You'll have to save it at res/layout-w400dp/my_layout.xml.
The file names must be the same, "w" means width (you can use "h" for height).
In your Java code, you propably don't have to change anything as long as you use the same ids for the same views in different layouts (e. g. R.id.title, R.id.image and R.id.content).

Different columns for sections in a table-like layout

Is there an existing layout in android where I can do the following:
header
| A | BB | CC |
| A | BB | CC |
header
| AAA | B | C |
| AAA | B | C |
header
| A | B | C | D |
| A | B | C | D |
I mean, different column widths and/or wifferent columns count for each section (headers could be hand made out of modified rows, but if there's any way of achieving this too it would be excellent).
I'm trying to reproduce something I did in iOS, but I only know the basics of android. Here's a screenshot of the desired result.
I think I could do it with linear layouts and a lot of custom logic, but I'm hoping there's a better solution.
Thanks!
It sounds like three different GridViews would be appropriate for this kind of layout. You could add your own custom TextViews as headers to each.

How to make the VideoView to be played in different layouts flawlessly when the orientation changes?

Say in portrait mode i made my screen divided into 2x1 matrix (2 VideoViews), so that two videos can be played simultaneously.
-------------------
| |
| |
| VV1 |
| |
-------------------
| |
| |
| VV2 |
| |
-------------------
Now, when i rotate the mobile to landscape, the screen will need to get divided into 2x2 matrix(4 VideoViews).
----------------------------------------------
| | |
| | |
| VV1 | VV2 |
| | |
----------------------------------------------
| | |
| | |
| VV3 | VV4 |
| | |
----------------------------------------------
So, in this case, when changing from portrait to landscape, i want below points needs to be achieved.
Neeeds to change the layout dynamically without any interruption in
the videos.(From 2 Videoview to 4 Videoview).
The Video should play flawlessly. Should not do pause and play
during orientation.
If you ppl advise me to use "configChanges="orientation"", how can i
handle the layout during orientation???
Thanks in advance
Using Fragments might be a solution. It does retain its state on orientation changes if you choose (so you won't lose instance objects), but also it recreates the layout, so you would be able to change current layout.

Combining SurfaceView with other Views such as TextView and Buttons

I'm totally new to android programming (just did some tutorials/read the dev guides etc.) and as every newbie I want to do a useless game :-).
Currently I'm struggling with the layout of different views. Similar to the example I've made a class which extends a SurfaceView and put that into a FrameLayout. Around this SurfaceView I want to have other View's like Buttons & TextViews.
Something like this:
-----------------------------------------------
| TextView | SurfaceView | TextView |
| | | |
------------ ------------
| | | TextView |
| | | |
| | ------------
| | | TextView |
| | | |
| | ------------
| | | |
| | | |
-----------------------------------------------
| Button Button |
-----------------------------------------------
I've managed to do something like this with a FrameLayout and RelativeLayouts (sticking the TextViews at the edges of the screen) but I'd like to better control the size of the SurfaceView as it should be a multiple in width and height of the object(s) I'll be drawing in it. I've tried setting layout_width and layout_height to some dp values but when I start painting at 0,0 it's still at the very top-left corner (where the TextView is..).
So, what's the best practice to achieve a layout as above? Using what layout? Or should I better draw my text inside the draw() function of my SurfaceView instead?
Layouts are the right way to combine OpengGL content with buttons, labels and other type of view objects. You can combine layouts inside other layouts... so you may build your screen step by step combining Linear Layouts or whatever you prefer.
For example, you can use a Relative layout to setup the buttons (b1, b2) and the rest of the screen:
+-----------+
| Zone 1 |
+-----+-----+
| b1 | b2 |
+-----+-----+
Then inside Zone 1, you can use a Horizontal Linear Layout for the 3 main columns
+----+----+----+
| c1 | c2 | c3 |
+----+----+----+
Inside of c2 you can place the SurfaceView, and in c1 the text label
Inside c3 will be a new Vertical Linear layout to display the text labels.
+----+
| t1 |
+----+
| t2 |
+----+
| t3 |
+----+

Categories

Resources