Adding Circular ImageView in circularMenu

Question

I want to add the circular imageview in the middle of the ciruclarMenu https://i.stack.imgur.com/MPXAA.png .Here's the xml code:

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

            xmlns:circle="http://schemas.android.com/apk/res-auto"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context=".SampleActivity" >

            <com.example.logan.rotatingwheelcontrol.CircleLayout
                android:id="@+id/circle_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_above="@+id/selected_textView"
                android:layout_gravity="center_horizontal" >

                <include layout="@layout/menu_items" />
            </com.example.logan.rotatingwheelcontrol.CircleLayout>

            <TextView
                android:id="@+id/selected_textView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:layout_alignParentBottom="true"
                android:layout_centerHorizontal="true"
                android:layout_marginBottom="50dp"
                android:textAppearance="?android:attr/textAppearanceLarge" />

        </RelativeLayout>

Here's the menu_items code :

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:circle="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.example.logan.rotatingwheelcontrol.CircleImageView
        android:id="@+id/main_calendar_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/circle"
        android:elevation="2dp"
        android:src="@drawable/ic_calendar"
        circle:name="@string/calendar" />

    <com.example.logan.rotatingwheelcontrol.CircleImageView
        android:id="@+id/main_cloud_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/circle"
        android:elevation="2dp"
        android:src="@drawable/ic_cloud"
        circle:name="@string/cloud" />


    <com.example.logan.rotatingwheelcontrol.CircleImageView
        android:id="@+id/main_mail_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/circle"
        android:elevation="2dp"
        android:src="@drawable/ic_mail"
        circle:name="@string/mail" />

    <com.example.logan.rotatingwheelcontrol.CircleImageView
        android:id="@+id/main_key_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/circle"
        android:src="@drawable/ic_key"
        circle:name="@string/key" />

    <com.example.logan.rotatingwheelcontrol.CircleImageView
        android:id="@+id/main_profile_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/circle"
        android:elevation="2dp"
        android:src="@drawable/ic_profile"
        circle:name="@string/profile" />

    <com.example.logan.rotatingwheelcontrol.CircleImageView
        android:id="@+id/main_tap_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/circle"
        android:elevation="2dp"
        android:src="@drawable/ic_tag"
        circle:name="@string/tag" />

</merge>

I am using this repository to make the circular menu "https://github.com/szugyi/Android-CircleMenu" What Changes i need to do in above code to do this. I am new in android,Any help would be apperciated.

Thanks

@Logan Do u want to try this lib? https://github.com/Ramotion/circle-menu-android https://github.com/ImangazalievM/CircleMenu — Lokesh Desai, Jan 10 '18 at 05:07
@LokeshDesai yes i tried that lib but All I want to add image in the centre of given circle menu. — Logan, Jan 11 '18 at 13:07

score 0 · Answer 1 · answered Jan 11 '18 at 14:40

It can be done with a trick. Just add an additional relative layout to your xml by aligning it to the same position where CircleLayout is placed. Then add the Circular Image view at the center of this relative layout.

With this changes your XML layout will look like following:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:circle="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".SampleActivity">

<com.example.logan.rotatingwheelcontrol.CircleLayout
    android:id="@+id/circle_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/selected_textView"
    android:layout_gravity="center_horizontal" >

    <include layout="@layout/menu_items" />
</com.example.logan.rotatingwheelcontrol.CircleLayout>

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@id/circle_layout"
    android:layout_alignLeft="@id/circle_layout"
    android:layout_alignRight="@id/circle_layout"
    android:layout_alignTop="@id/circle_layout">

    <com.example.logan.rotatingwheelcontrol.CircleImageView
        android:id="@+id/center_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/circle"
        android:layout_centerInParent="true"
        android:elevation="2dp"
        android:src="@drawable/ic_cloud" />

</RelativeLayout>

<TextView
    android:id="@+id/selected_textView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="50dp"
    android:textAppearance="?android:attr/textAppearanceLarge" />

To listen to the click event of the center image, you need to add the following code in your activity.

CircleImageView centerImageView = (CircleImageView) findViewById(R.id.center_image);
    centerImageView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(getApplicationContext(), "Center Image View Clicked", Toast.LENGTH_SHORT).show();
        }
    });

Adding Circular ImageView in circularMenu

1 Answers1