androidandroid-layoutandroid-imageviewandroid-custom-viewandroid-custom-attributes

How to create hexagonal view menu in android


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.

enter image description here


Solution

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