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