AndroidMosaicLayout
AndroidMosaicLayout is android layout to display group of views in more that 90 different patterns.
What is AndroidMosaicLayout?
It is UI layout library for android. It displays a group of views and view groups (Images, Text, Layout...) in beautiful decoration. It offers a lot of patters (90 different pattern) that can you use.
NOTE: To use the android studio example, you need to obtain your API key for the image services https://pixabay.com
How to use the AndroidMosaicLayout?
You can choose a specific patterns from the different options you have. OR don't choose any pattern and let the layout choose its patterns randomly. If you decided to choose a pattern or more, you have to follow the following notes:
- Each single pattern can hold 8 blocks (2 rows by 4 columns = 8 blocks).
- There are only 4 types of blocks can be contained in the layout pattern
- BIG SQUARE (4 inner cells)
- SMALL SQUARE (1 inner cell)
- HORIZONTAL RECTANGLE (2 inner cells aligned horizontally)
- VERTICAL RECTANGLE (2 inner cells aligned vertically)
- Reading the patter is from left to right then top to bottom.
- Example 1: 8 small blocks
----------- ----------- ----------- -----------
| | | | |
| img 1 | img 2 | img 3 | img 4 |
| small | small | small | small |
| | | | |
| --------- | --------- | --------- | --------- |
| | | | |
| img 5 | img 6 | img 7 | img 8 |
| small | small | small | small |
| | | | |
----------- ----------- ----------- -----------
As you notice in the previous table, the layout contains on small squares only. Then the layout pattern should be written as:
BLOCK_PATTERN pattern[] = {
BLOCK_PATTERN.SMALL, BLOCK_PATTERN.SMALL, BLOCK_PATTERN.SMALL, BLOCK_PATTERN.SMALL,
BLOCK_PATTERN.SMALL, BLOCK_PATTERN.SMALL, BLOCK_PATTERN.SMALL, BLOCK_PATTERN.SMALL
};
- Example 2: 1 big block and 4 small blocks
----------- ----------- ----------- -----------
| | | |
| | img 2 | img 3 |
| big big | small | small |
| | | |
| img 1 | --------- | --------- |
| | | |
| | img 4 | img 5 |
| big big. | small | small |
| | | |
----------- ----------- ----------- -----------
As you notice in the previous table, image 1 occupies 4 inner cells creating a big block in the layout. Then the layout pattern should be written as:
BLOCK_PATTERN pattern[] = {
BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG, BLOCK_PATTERN.SMALL, BLOCK_PATTERN.SMALL,
BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG, BLOCK_PATTERN.SMALL, BLOCK_PATTERN.SMALL
};
- Example 3: 1 vertical block, 2 small blocks and 2 horizontal blocks
----------- ----------- ----------- -----------
| | | |
| | img 2 | img 3 |
| vert. | small | horiz. horiz. |
| | | |
| img 1 | --------- | --------- | --------- |
| | | |
| | img 4 | img 5 |
| vert. | horiz. horiz. | small |
| | | |
---------- ----------- ----------- -----------
As you notice in the previous table, image 1 occupies 2 inner cells vertically, images 3 and 4 occupies 2 inner cells horizontally/ Then the layout pattern should be written as:
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
};
##You can design the layout in 90 different patterns!
How to use the library:
After your patterns have been selected. Now is the time to start coding using the MosaicLayout library.
- Assign your layout into your activity:
<com.adhamenaya.views.MosaicLayout
android:id="@+id/mosaic_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</com.adhamenaya.views.MosaicLayout>
- Initialize the layout and its patterns:
MosaicLayout mMosaicLayout = (MosaicLayout) findViewById(R.id.mosaic_layout);
MyAdapter mAdapater = mAdapater = new MyAdapter(getApplicationContext());
- Choose you layout patters mode. You have 3 modes:
- Don't selected and patterns and let the layout choose patters from a 90 possible options randomly.
mMosaicLayout.chooseRandomPattern(true);- Select a group of patterns to be used in your layout; and choose them to be displayed in the order you assigned them to the layout.
BLOCK_PATTERN pattern1[] = { BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG, BLOCK_PATTERN.SMALL, BLOCK_PATTERN.SMALL, BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG, BLOCK_PATTERN.HORIZONTAL, BLOCK_PATTERN.HORIZONTAL }; BLOCK_PATTERN pattern2[] = { BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG }; mMosaicLayout.addPattern(pattern1); mMosaicLayout.addPattern(pattern2); mMosaicLayout.chooseRandomPattern(false);- Select a group of patterns to be used in your layout; and choose them to be displayed randomly in the layout.
BLOCK_PATTERN pattern1[] = { BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG, BLOCK_PATTERN.SMALL, BLOCK_PATTERN.SMALL, BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG, BLOCK_PATTERN.HORIZONTAL, BLOCK_PATTERN.HORIZONTAL }; BLOCK_PATTERN pattern2[] = { BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG }; mMosaicLayout.addPattern(pattern1); mMosaicLayout.addPattern(pattern2); mMosaicLayout.chooseRandomPattern(true); - Set the adapter of the data to the layout:
mMosaicLayout.setAdapter(mAdapater);
##License
MIT