How to implement BeeHive View in Android

Last updated Jan 30, 2022

In this example, we will see how to create BeeHive View in Android Studio using Java language. The BeeHive view is a view that appears like a honeycomb and has several hexagonal frames.

Implementation

Step 1. Create a new Project in android studio.

Go to File > New > New Project > Empty Activity > Next > Enter Name > Select Language Java > Finish.

 

Step 2. Open your project and add dependencies into app level  build.gradle ( Module:app) file.

 

implementation 'com.nostra13.universalimageloader:universal-image-loader:1.9.4'
implementation 'com.mostafagazar:customshapeimageview:1.0.4'

  
Step 3. Go  to  AndroidManifest.xml file and add the permission of Internet

<uses-permission android:name="android.permission.INTERNET" />

   

Step 4. Open activity_main.xml and add the following code

 

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="10dp"
    android:paddingTop="10dp">

    <LinearLayout
        android:id="@+id/l_root"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".MainActivity">
    </LinearLayout>
</FrameLayout>


Step 5. Create a new class for storing the image url and add the following

 app > java > package name > right-click > New > Java class (ImageUrl) > enter name > OK

 

The code of ImageUrl.java  file :

public class ImagesUrl {
    public static final String[] IMAGEURLS={
            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSa1sjJFmPQiHm0QBL_k6oxOL1ov2LvnriDAw&usqp=CAU",
            "https://i.pinimg.com/564x/e9/de/17/e9de175ab3987752fc5d2f49e729d391.jpg",
            "https://icons.iconarchive.com/icons/google/noto-emoji-people-face/1024/10135-boy-light-skin-tone-icon.png",
            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTKC3g0Ce32Jfxypb9t-KjcfbJ6oZOUCDFrYA&usqp=CAU",
            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSmcBIbmP6D2QXQoXyEzZqkPuxDWFLCjYc40A&usqp=CAU",
            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTA1ex7y5sJf7RcvxwlHPhfGxEoS0qknjnoBQ&usqp=CAU",
            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSekJBSJPfDESTHcDw5cUlp2O3bmJ7zjMp5Wg&usqp=CAU",
            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTdyenRV1-qC8IV2Utxfm8VQhrXtpVRvpUZ2Q&usqp=CAU",
            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQX9iSSdnDdhfRK-H8o4M0XfQxagijAQT83AQ&usqp=CAU",
    };
}


Step 6. Now go to MainActivity.java file and add the following code

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private static final Integer[ ] INVISIBLE = {1,2,6,10,11,19,20,25,29,30};// this array have cell number that hide in view
    private static final Integer[ ] INEMPTY = {4,5,9,15,16,21,26,28};// cell number that visible but it has no image(empty cell)
    private static final Integer[ ] NORMAL = {3,7,8,12,13,14,17,18,22,23,24,27};// normal cells

    private LinearLayout l_root;
    private List photoViewList;// each cell view
    DisplayImageOptions options;

    private final static ImageLoader imageLoader = ImageLoader.getInstance();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initImageLoader(this);

        photoViewList=new ArrayList<>();
        options = new DisplayImageOptions.Builder()
                .imageScaleType(ImageScaleType.EXACTLY)
                .showStubImage(R.drawable.avatar)
                .showImageForEmptyUri(R.drawable.avatar)
                .cacheOnDisk(true).build();

        l_root =(LinearLayout)findViewById(R.id.l_root);
        l_root.setOrientation(LinearLayout.VERTICAL);


        Display display = getWindowManager().getDefaultDisplay();
        Point size = new Point();
        display.getSize(size);
        int width = size.x;  // device screen width

        //int height = size.y;
        addView(width);
        addImage();
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);//Menu Resource, Menu
        return true;
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.item1:
                Intent browserIntent = new Intent(Intent.ACTION_VIEW, Uri.parse("https://github.com/NishaJain24/BeeHiveAndroid"));
                startActivity(browserIntent);
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }
    @Override
    public void onClick(View v) {
        String url=v.getTag().toString();
        if (!url.equalsIgnoreCase("-1")){
            Toast.makeText(MainActivity.this,url,Toast.LENGTH_SHORT).show();
        }
    }

    /** ini universal image loader**/
    public static void initImageLoader(Context context) {
        // This configuration tuning is custom. You can tune every option, you may tune some of them,
        // or you can create default configuration by
        // ImageLoaderConfiguration.createDefault(this);
        // method.
        ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(context)
                .threadPriority(Thread.NORM_PRIORITY - 2)
                .denyCacheImageMultipleSizesInMemory()
                .diskCacheFileNameGenerator(new Md5FileNameGenerator())
                .tasksProcessingOrder(QueueProcessingType.LIFO)
                //.writeDebugLogs() // Remove for release app
                .build();
        //Initialize ImageLoader with configuration.
        ImageLoader.getInstance().init(config);

    }

    /** add image to each normal cells in order**/
    private void addImage() {

        for (int i = 0; (i < ImagesUrl.IMAGEURLS.length && (i < photoViewList.size())); i++) {
            String image = ImagesUrl.IMAGEURLS[i];
            photoViewList.get(i).setVisibility(View.VISIBLE);
            photoViewList.get(i).setTag(image);
            photoViewList.get(i).setOnClickListener(MainActivity.this);

            final int finalI = i;
            imageLoader.loadImage(image,options, new ImageLoadingListener() {
                @Override
                public void onLoadingStarted(String s, View view) {

                }

                @Override
                public void onLoadingFailed(String s, View view, FailReason failReason) {

                }

                @Override
                public void onLoadingComplete(String s, View view, Bitmap bitmap) {
                    photoViewList.get(finalI).setImageBitmap(bitmap);
                }

                @Override
                public void onLoadingCancelled(String s, View view) {

                }
            });
        }

    }

    /** created beehive view here**/
    private void addView(int width){

        int margin=-(width/8)/4;
        width =(width+(width/16))/4;

        photoViewList.clear();
        for (int j=0;j<=5;j++) {
            LinearLayout ll = new LinearLayout(MainActivity.this);
            ll.setOrientation(LinearLayout.HORIZONTAL);
            //ll.setBackgroundColor(Color.BLUE);
            LinearLayout.LayoutParams llParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,
                    width);

            int marginLeft=(j%2 ==0)?(-(width/2)+margin):margin;
            int marginTop=(j !=0)?(-(width/5)):0;


            llParams.setMargins(marginLeft, marginTop, 0,0 );
            ll.setLayoutParams(llParams);

            for (int i=0;i<=5;i++) {
                int possition=j*5+i +1;

                FrameLayout l_farme = new FrameLayout(MainActivity.this);
                FrameLayout.LayoutParams frameParams = new FrameLayout.LayoutParams(width, width);
                FrameLayout.LayoutParams frameParams2 = new FrameLayout.LayoutParams(width-(width/10), width-(width/10));
                frameParams2.gravity = Gravity.CENTER;
                l_farme.setLayoutParams(frameParams);

                ImageView hexagon = new ImageView(MainActivity.this);
                hexagon.setScaleType(ImageView.ScaleType.CENTER_INSIDE);

                hexagon.setLayoutParams(frameParams);

                CustomShapeImageView photo=new CustomShapeImageView(MainActivity.this,R.drawable.avatar,
                        CustomShapeImageView.Shape.SVG,R.raw.hex);
                photo.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
                photo.setLayoutParams(frameParams2);

                hexagon.setImageResource(R.drawable.hexagon);
                photo.setVisibility(View.VISIBLE);
                l_farme.setVisibility(View.VISIBLE);
                hexagon.setVisibility(View.VISIBLE);
                if (Arrays.asList(INVISIBLE).contains(possition)){
                    l_farme.setVisibility(View.INVISIBLE);
                }else if (Arrays.asList(INEMPTY).contains(possition)){
                    photo.setVisibility(View.INVISIBLE);
                    l_farme.setVisibility(View.VISIBLE);
                }else if (Arrays.asList(NORMAL).contains(possition)){
                    l_farme.setVisibility(View.VISIBLE);
                    photo.setVisibility(View.INVISIBLE);
                    photo.setTag("-1");
                    photoViewList.add(photo);
                    //photo.setVisibility(View.VISIBLE);
                }

                l_farme.addView(photo);
                l_farme.addView(hexagon);
                ll.addView(l_farme);
            }
            l_root.addView(ll);
        }
    }

}

 

Step 7. We need a raw folder for store the image file in svg format

app > res  > new > Directory > Enter name (raw) > ENTER

The structure be like: 

Android BeeHive UI implementation

 

Step 8. Add a Avatar and hexagon image file inside drawable folder.

Android BeeHive layout        BeeHive


                       Avatar.png                                                      Hexagon.png


Step 9. Now run the app in your emulator, and get the following output.

OUTPUT

BeeHive


Conclusion: In this article we have covered how to implement BeeHive View in Android.
 

 

 

Download Source code