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:

1. Each single pattern can hold 8 blocks (2 rows by 4 columns = 8 blocks).
2. 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)
3. 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