How can I implement the layout (or view) that will place images most rationally in 3:4, 1:1 or 4:3 area. Images order is important; images may be cropped. For example:
2 tall pictures:
5 wide pictures:
...and so on...
I can't comment your question to say that your examples don't appear in your question. But I would like to propose using this library AndroidMosaicLayout to display your images in mosaic pattern.
Actually this library enables using 90 different patterns consists of 4 basic shapes (small square, big square which is 4 small squares, vertical rectangle and horizontal rectangle, both rectangle consists of 2 small square).
You have to define the pattern you need using an array describing that pattern, this array of size 8, so each pattern the basic gird forming it consists of 8 small squares.
For example, if you want to get the following patter:
----------- ----------- ----------- -----------
| | | |
| | img 2 | img 3 |
| vert. | small | horiz. horiz. |
| | | |
| img 1 | --------- | --------- | --------- |
| | | |
| | img 4 | img 5 |
| vert. | horiz. horiz. | small |
| | | |
---------- ----------- ----------- -----------
You need to define pattern by setting the role for each square of the main 8 square shaping the entire pattern. So for this shape the pattern will be like this:
BLOCK_PATTERN pattern[] = {
BLOCK_PATTERN.VERTICAL, BLOCK_PATTERN.SMALL, BLOCK_PATTERN.HORIZONTAL, BLOCK_PATTERN.HORIZONTAL,
BLOCK_PATTERN.VERTICAL, BLOCK_PATTERN.HORIZONTAL, BLOCK_PATTERN.HORIZONTAL, BLOCK_PATTERN.SMALL
};
Related
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).
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
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.
I want to combine an image with text and make it a button.
--------------------
| |
| IMG 2 People |
| |
--------------------
Any ideas? Where 2 People is dynamic text
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 |
+----+