add my custom CircleImageViews inside CircleLayout

[hardikJoshi123]

Hello, thanks for great library. I want to achieve following in android :

https://www.youtube.com/watch?v=QB-K_maFoYw

I started with your library. But when i added my wheel images childs are not arranged properly. Here is output screenshot :

https://www.dropbox.com/s/2nxykthqkwy0uot/Wheel.mp4?dl=0

Here is my code :

`<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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" android:orientation="vertical">

<com.szugyi.circlemenu.view.CircleLayout
    android:id="@+id/circle_layout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_above="@+id/imgspin"
    android:layout_gravity="center_horizontal"
    android:layout_marginBottom="-500dp"
    android:foregroundGravity="bottom"
    circle:isRotating="true">

    <com.szugyi.circlemenu.view.CircleImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/local"
        circle:isRotating="false" />

    <com.szugyi.circlemenu.view.CircleImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/onlineretailers"
        circle:isRotating="false" />

    <com.szugyi.circlemenu.view.CircleImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/fashion"
        circle:isRotating="false" />

    <com.szugyi.circlemenu.view.CircleImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/foodrestaurants"
        circle:isRotating="false" />

    <com.szugyi.circlemenu.view.CircleImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:src="@drawable/groupsavings"
        circle:isRotating="false" />

    <com.szugyi.circlemenu.view.CircleImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/homeauto"
        circle:isRotating="false" />

    <com.szugyi.circlemenu.view.CircleImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/holidaysales"
        circle:isRotating="false" />

    <com.szugyi.circlemenu.view.CircleImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/realestate"
        circle:isRotating="false" />

    <com.szugyi.circlemenu.view.CircleImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/b2b"
        circle:isRotating="false" />

    <com.szugyi.circlemenu.view.CircleImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/healthbeauty"
        circle:isRotating="false" />

    <com.szugyi.circlemenu.view.CircleImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/trialsoffers"
        circle:isRotating="false" />

    <com.szugyi.circlemenu.view.CircleImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/flashsales"
        circle:isRotating="false" />

    <com.szugyi.circlemenu.view.CircleImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/travelvacation"
        circle:isRotating="false" />

    <com.szugyi.circlemenu.view.CircleImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/dailydeals"
        circle:isRotating="false" />

</com.szugyi.circlemenu.view.CircleLayout>

Please help. Thanks in advance. `

[szugyi]

This library is only rotating the child views position around a center pivot point of the CircleLayout. In order to create the effect seen in the video you have linked, you would need to rotate the childes around their own pivot point so they are always pointing to the center of the CircleLayout.

You need to fork this repo, and play around inside the setChildAngles method, where the position of the CircleLayout's children is calculated based on the rotation angle. You can rotate the childs individually there, to always point to the center.

[hardikJoshi123]

Thanks for very fast reply. Can you please help for this issue ? I trying research which you posted.

[hardikJoshi123]

There are various angles defined inside setChildAngles() method.

left = Math
                    .round((float) (((circleWidth / 2.0) - childWidth / 2.0) + radius
                            * Math.cos(Math.toRadians(localAngle))));
            top = Math
                    .round((float) (((circleHeight / 2.0) - childHeight / 2.0) + radius
                            * Math.sin(Math.toRadians(localAngle))));

I need to calculate center variable same like above, right?

[szugyi]

Correct. localAngle is the angle between the first child position to the current child item, in degrees, between 0 and 360. I think you can use it directly on the child item as the rotation degree, and you should be done basically. https://developer.android.com/reference/android/view/View.html#setRotation(float)

[hardikJoshi123]

Aha.! Ok. Actually I am not much familiar with angles here. But trying. I hope i will understand code after some research.

[hardikJoshi123]

Can you please provide some hints for setting angles to childs ?

[szugyi]

Try calling child.setRotation(localAngle);

after this line child.layout(left, top, left + childWidth, top + childHeight);

[hardikJoshi123]

Thanks for this. Now my menu images are in center facing angles. does CircleLayout orientation and behaviour same as RelativeLayout?

Like I placed 3 ImageViews inside CircleLayout like bellow :

`<com.szugyi.circlemenu.view.CircleLayout android:id="@+id/circle_layout" android:layout_width="fill_parent" android:layout_height="fill_parent" circle:isRotating="true">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/holidaysales"
        circle:isRotating="false" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/travelvacation"
        circle:isRotating="false" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/dailydeals"
        circle:isRotating="false" />

</com.szugyi.circlemenu.view.CircleLayout> `

And It looks like following :

While i placed two ImageViews. In Studio xml preview it shows this :

And when i run app, it shows this :

Not sure how childs will placed inside Circlelayout.

[szugyi]

That is strange. It is working fine with the sample app. Maybe the images you are using are too big, I am not sure what is going on with them. Try dragging your finger slowly on the screen and see if you can figure out what is going on with the rotation. It is possible that you have to set the pivot point for the imageView-s yourself. See: https://developer.android.com/reference/android/view/View.html#setPivotX(float)

[hardikJoshi123]

Yea not sure whats wrong, yes I think its because of images which i want to add. Still i want to add ImageView in center of circle. Not sure this library fits as what i want to achieve. Need to debug and work on many factors.

[BongJaeChoi]

@hardikJoshi123 hey i same isssue. Simple problem. Roatate the Image! like below image

[BongJaeChoi]

it works. and It is easy to place the image in the center of the circle. You can use RelativeLayout as the parent layout.

[hardikJoshi123]

Hey @BongJaeChoi thank you so much for help. Can you please share some part of code as well?

Thanks!

[nsuthar20]

Hey @BongJaeChoi Can you please share your customized CircleLayout code.