Technology moves fast! ⚡ Don't get left behind.🚶 Subscribe to our mailing list to keep up with latest and greatest in open source projects! 🏆


Subscribe to our mailing list

AndroidMosaicLayout

[UNMAINTAINED]: AndroidMosaicLayout is android layout to display group of views as grid consists of different asymmetric patterns (90 different patterns).

Subscribe to updates I use AndroidMosaicLayout


Statistics on AndroidMosaicLayout

Number of watchers on Github 469
Number of open issues 2
Average time to close an issue 3 months
Main language Java
Open pull requests 0+
Closed pull requests 0+
Last commit almost 2 years ago
Repo Created almost 4 years ago
Repo Last Updated over 1 year ago
Size 2.36 MB
Organization / Authoradhamenaya
Contributors1
Page Updated
Do you use AndroidMosaicLayout? Leave a review!
View open issues (2)
View AndroidMosaicLayout activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating AndroidMosaicLayout for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

AndroidMosaicLayout

AndroidMosaicLayout is android layout to display group of views in more that 90 different patterns.

screenshots

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

AndroidMosaicLayout open issues Ask a question     (View All Issues)
  • over 3 years How can I do add in row adapter recyclerview?
  • over 3 years gradle
AndroidMosaicLayout list of languages used
Other projects in Java