Circular Layout

Question

I want to develop following screen in Android.

I used CircleLayout but I am still not able to achieve desired output. See following code and screenshot.

<com.example.hl.CircleLayout         android:id="@+id/pie"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:background="@android:color/white"         custom:dividerWidth="5dp"         custom:innerCircle="@drawable/profile_pic_icon"         custom:innerRadius="50dp"         custom:layoutMode="pie"         custom:sliceDivider="@android:color/transparent" >          <RelativeLayout             android:id="@+id/appt_center_container"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:background="@drawable/appt_center_bg" >              <TextView                 android:id="@+id/one"                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:gravity="center"                 android:onClick="onClick"                 android:text="APP CENTER"                 android:textStyle="bold" />         </RelativeLayout>          <RelativeLayout             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:background="@drawable/meds_cabinet_bg" >              <TextView                 android:id="@+id/two"                 android:layout_width="match_parent"                 android:layout_height="match_parent"                 android:gravity="center"                 android:onClick="onClick"                 android:text="MEDS CABINET"                 android:textStyle="bold" />         </RelativeLayout>          <RelativeLayout             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:background="@drawable/check_in_bg" >              <TextView                 android:id="@+id/three"                 android:layout_width="match_parent"                 android:layout_height="match_parent"                 android:gravity="center"                 android:onClick="onClick"                 android:text="CHECK-IN"                 android:textStyle="bold" />         </RelativeLayout>          <RelativeLayout             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:background="@drawable/my_tracker_bg" >              <TextView                 android:id="@+id/four"                 android:layout_width="match_parent"                 android:layout_height="match_parent"                 android:gravity="center"                 android:onClick="onClick"                 android:text="MY TRACKERS"                 android:textStyle="bold" />         </RelativeLayout>          <RelativeLayout             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:background="@drawable/myaccount_bg" >              <TextView                 android:id="@+id/five"                 android:layout_width="match_parent"                 android:layout_height="match_parent"                 android:gravity="center"                 android:onClick="onClick"                 android:text="MY ACCOUNTS"                 android:textStyle="bold" />         </RelativeLayout>     </com.example.hl.CircleLayout> 

screenshot

Question:-

Is there any other library that can help developing the desired screen?

How to develop such screen using custom view? I mean what are steps to develop such custom view easily?

Answer 1

I have implemented a library for circular layout. Currently under development, basically meets need I think. Feel free to fork and develop.

https://github.com/ycagri/CircularLayout

End of Edit

You can use a custom layout given below. Number of items, inner radius and outer radius are defined in class. You can use those variables as custom layout attribute. The layout given below draws android launcher icon in the middle and around the circles. Titles are drawn below selection items.

Screenshot belongs to Nexus 7 device. Extra margin and padding can be defined to get better results on different screen resolutions.

public class CircleLayout extends View {  private final static int TOTAL_DEGREE = 360; private final static int START_DEGREE = -90;  private Paint mPaint; private RectF mOvalRect = null;  private int mItemCount = 5; private int mSweepAngle;  private int mInnerRadius; private int mOuterRadius; private Bitmap mCenterIcon; private int[] mColors = {Color.RED, Color.YELLOW, Color.GREEN, Color.BLUE, Color.CYAN}; private String[] mTitles = {"APPT CENTER", "MEDS CABINET", "CHECK-IN", "MY TRACKERS", "MY ACCOUNTS"};  public CircleLayout(Context context) {     this(context, null); }  public CircleLayout(Context context, AttributeSet attrs) {     this(context, attrs, 0); }  public CircleLayout(Context context, AttributeSet attrs, int defStyleAttr) {     super(context, attrs, defStyleAttr);      mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);     mPaint.setStrokeWidth(2);      mSweepAngle = TOTAL_DEGREE / mItemCount;      mInnerRadius = 125;     mOuterRadius = 400;      mCenterIcon = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher); }  @Override protected void onDraw(Canvas canvas) {      int width = getWidth();     int height = getHeight();      if (mOvalRect == null) {         mOvalRect = new RectF(width / 2 - mOuterRadius, height / 2 - mOuterRadius, width / 2 + mOuterRadius, height / 2 + mOuterRadius);     }      for (int i = 0; i < mItemCount; i++) {         int startAngle = START_DEGREE + i * mSweepAngle;         mPaint.setColor(mColors[i]);         mPaint.setStyle(Paint.Style.FILL);         canvas.drawArc(mOvalRect, startAngle, mSweepAngle, true, mPaint);          mPaint.setColor(Color.BLACK);         mPaint.setStyle(Paint.Style.STROKE);         canvas.drawArc(mOvalRect, startAngle, mSweepAngle, true, mPaint);          int centerX = (int) ((mOuterRadius + mInnerRadius) / 2 * Math.cos(Math.toRadians(startAngle + mSweepAngle / 2)));         int centerY = (int) ((mOuterRadius + mInnerRadius) / 2 * Math.sin(Math.toRadians(startAngle + mSweepAngle / 2)));         canvas.drawBitmap(mCenterIcon, width / 2 + centerX - mCenterIcon.getWidth() / 2, height / 2 + centerY - mCenterIcon.getHeight() / 2, null);          mPaint.setColor(Color.BLACK);         mPaint.setStyle(Paint.Style.FILL);         canvas.drawText(mTitles[i], width / 2 + centerX - mCenterIcon.getWidth() / 2, height / 2 + centerY + mCenterIcon.getHeight(), mPaint);     }      mPaint.setColor(Color.WHITE);     mPaint.setStyle(Paint.Style.FILL);     canvas.drawCircle(width / 2, height / 2, mInnerRadius, mPaint);     canvas.drawBitmap(mCenterIcon, width / 2 - mCenterIcon.getWidth() / 2, height / 2 - mCenterIcon.getHeight() / 2, null);      super.onDraw(canvas); } }