How to create hexagonal view menu in android

Question

I am intended to create a hexagonal view menu with icons as mentioned in the image below. I have tried to use the library from github for imageview but it doesn't suits me for my requirement, what i all need is the hexagon view with the click events in a particular hexagon area. The library gives hexagonal view for single image target, but considered for the hexagonal menu it fails to give the hexagon output(i.e. i couldnt able to align it properly in my layout).

Please help me with your suggestions for the improvement in layout or through code. Thanks in advance.

Answer 1

i have tried to create the layout that u required, using ImageViews, LinearLayout and applying the negative margin.

I am not sure if it is the ideal way to use, but i guess you can give it try if don't want go for canvas.

Please go through the below example...

<LinearLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"
    android:orientation="vertical">

  <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/hexa"
            android:visibility="invisible"/>
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/hexa"/>
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/hexa"
            android:visibility="invisible"/>

        </LinearLayout>



    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="-25dp">
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/hexa"
            android:layout_marginLeft="12.5dp"/>
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/hexa"
            android:visibility="invisible"
/>
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/hexa"
            android:layout_marginLeft="-25dp"/>

    </LinearLayout>




    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="-25dp">
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/hexa"
            android:visibility="invisible"/>
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/hexa"/>
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/hexa"
            android:visibility="invisible"/>

    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="-25dp">
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/hexa"
            android:layout_marginLeft="12.5dp"/>
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/hexa"
            android:visibility="invisible"
            />
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/hexa"
            android:layout_marginLeft="-25dp"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="-25dp">
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/hexa"
            android:visibility="invisible"/>
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/hexa"/>
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/hexa"
            android:visibility="invisible"/>

    </LinearLayout>
</LinearLayout>

here drawable/hexa is single white hexagonal png image.

Hope it helps...