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' |
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"?> <LinearLayout |
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 { |
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 LinearLayout l_root; private final static ImageLoader imageLoader = ImageLoader.getInstance(); @Override photoViewList=new ArrayList<>(); l_root =(LinearLayout)findViewById(R.id.l_root);
//int height = size.y; /** ini universal image loader**/ } /** add image to each normal cells in order**/ for (int i = 0; (i < ImagesUrl.IMAGEURLS.length && (i < photoViewList.size())); i++) { final int finalI = i; } @Override } @Override @Override } } /** created beehive view here**/ int margin=-(width/8)/4; photoViewList.clear(); int marginLeft=(j%2 ==0)?(-(width/2)+margin):margin;
for (int i=0;i<=5;i++) { FrameLayout l_farme = new FrameLayout(MainActivity.this); ImageView hexagon = new ImageView(MainActivity.this); hexagon.setLayoutParams(frameParams); CustomShapeImageView photo=new CustomShapeImageView(MainActivity.this,R.drawable.avatar, hexagon.setImageResource(R.drawable.hexagon); l_farme.addView(photo); } |
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.
<?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.
-->
|
Article Contributed By :
|
|
|
|
|
281 Views |
|