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">

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:

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

Avatar.png Hexagon.png

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

OUTPUT

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