Layout for representing images in a circle

Question

I need to set up the different ImageViews for the different smileys in the image below. Which layout should I use to achieve this.

two muppets http://imageshack.com/a/img836/5170/lwcg.png

Thanks in advance!

Answer 1

I think your best bet would be to create your own view and do this in the onDraw method.

Answer 2

This is similar to a circular layout. check here for tutorial.

and there is also a library. check this too.

Answer 3

you can use this layouts. for circle_effect.xml

<gradient
    android:angle="270"
    android:endColor="#ffffff"
    android:startColor="#ffffff" />

<stroke
    android:width="10dp"
    android:color="#cdcdcd" /></shape>

For main

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:layout_marginBottom="20dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginTop="20dp"
    android:background="@drawable/circle_effect"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <ImageView
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_centerInParent="true"
            android:background="@drawable/man" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="-10dp" >

        <ImageView
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="60dp"
            android:background="@drawable/man" />

        <ImageView
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_alignParentRight="true"
            android:layout_marginRight="60dp"
            android:background="@drawable/man" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp" >

        <ImageView
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="18dp"
            android:background="@drawable/man" />

        <ImageView
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_alignParentRight="true"
            android:layout_marginRight="18dp"
            android:background="@drawable/man" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp" >

        <ImageView
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_alignParentLeft="true"
            android:background="@drawable/man" />

        <ImageView
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_alignParentRight="true"
            android:background="@drawable/man" />
    </RelativeLayout>
</LinearLayout>

i created only half portion.