Menus are a common user interface component in many types of applications. To provide a familiar and consistent user experience, you should use the Menu APIs to present user actions and other options in your activities.
Although the design and user experience for some menu items have changed, the semantics to define a set of actions and options is still based on the Menu APIs.
A
ViewGroup is a special view that can contain other views (called children.) The view group is the base class for layouts and views containers. This class also defines the ViewGroup.LayoutParams class which serves as the base class for layouts parameters.
void onLayout (boolean changed, int left, int top, int right, int bottom) method is called from layout when this view should assign a size and position to each of its children. Derived classes with children should override this method and call layout on each of their children.
void onMeasure (int widthMeasureSpec, int heightMeasureSpec) method measure the view and its content to determine the measured width and the measured height. This method is invoked by measure(int, int) and should be overridden by subclasses to provide accurate and efficient measurement of their contents.
When overriding this method, you must call setMeasuredDimension(int, int) to store the measured width and height of this view. Failure to do so will trigger an IllegalStateException, thrown by measure(int, int). Calling the superclass' onMeasure(int, int) is a valid use.
The base class implementation of measure defaults to the background size, unless a larger size is allowed by the MeasureSpec. Subclasses should override onMeasure(int, int) to provide better measurements of their content.
If this method is overridden, it is the subclass's responsibility to make sure the measured height and width are at least the view's minimum height and width (getSuggestedMinimumHeight() and getSuggestedMinimumWidth()).
Using these two methods we can create our circular view and add the child views in the layout arranging into circular layout. Finally, we can have circular menu UI which can give attractive look and feel to out applications.
Refer the below link for complete sample code:-
Download Sample Code
Have a look on few code snippets,
//activity_cicularmenu2.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <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:gravity="center_vertical"
android:background="#590100"
android:orientation="horizontal" >
<circlemenulayout.CircleMenuLayout
android:id="@+id/id_menulayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="100dp"
android:background="@drawable/circle_bg3" >
<RelativeLayout
android:id="@id/id_circle_menu_item_center"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/tv_circlemenu"
android:textSize="25sp"
android:textStyle="bold"
android:textColor="#a5f406"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"/>
</RelativeLayout>
</circlemenulayout.CircleMenuLayout>
</LinearLayout>
|
//circle_menu_item.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="@+id/id_circle_menu_item_image"
android:layout_width="wrap_content"
android:visibility="gone"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/id_circle_menu_item_text"
android:layout_width="wrap_content"
android:visibility="gone"
android:layout_height="wrap_content"
android:textColor="@android:color/white"
android:text="text"
android:textSize="16sp" />
</LinearLayout>
|
//CircleActivity.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
| package com.example.harshalbenake.circularlayout;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.RotateAnimation;
import android.widget.TextView;
import android.widget.Toast;
import circlemenulayout.CircleMenuLayout;
import circlemenulayout.CircleMenuLayout.OnMenuItemClickListener;
/**
* <pre>
* </pre>
*/
public class CircleActivity extends Activity {
private CircleMenuLayout mCircleMenuLayout;
private String[] mItemTexts = new String[]{"Item 0", "Item 1", "Item 2", "Item 3",
"Item 4", "Item 5", "Item 6"};
private int[] mItemImgs = new int[]{
R.drawable.ic_launcher,
R.drawable.ic_launcher,
R.drawable.ic_launcher,
R.drawable.ic_launcher,
R.drawable.ic_launcher,
R.drawable.ic_launcher,
R.drawable.ic_launcher};
private TextView mtv_circlemenu;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_cicularmenu2);
mCircleMenuLayout = (CircleMenuLayout) findViewById(R.id.id_menulayout);
mtv_circlemenu = (TextView) findViewById(R.id.tv_circlemenu);
mCircleMenuLayout.setMenuItemIconsAndTexts(mItemImgs, mItemTexts);
mCircleMenuLayout.setOnMenuItemClickListener(new OnMenuItemClickListener() {
@Override
public void itemClick(final View view, int pos) {
mtv_circlemenu.setText(mItemTexts[pos]);
Animation rotateAnimation = new RotateAnimation(0, 360, view.getWidth() / 2, view.getHeight() / 2);
rotateAnimation.setDuration(250);
view.startAnimation(rotateAnimation);
}
@Override
public void itemCenterClick(View view) {
Toast.makeText(CircleActivity.this, "Middle Item Clicked", Toast.LENGTH_SHORT).show();
}
});
}
}
|
//CircleMenuLayout.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
| package circlemenulayout;
import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.ImageView;
import android.widget.TextView;
import com.example.harshalbenake.circularlayout.R;
public class CircleMenuLayout extends ViewGroup {
private int mRadius;
private static final float RADIO_DEFAULT_CHILD_DIMENSION = 1 / 4f;
private float RADIO_DEFAULT_CENTERITEM_DIMENSION = 1 / 3f;
private static final float RADIO_PADDING_LAYOUT = 1 / 12f;
private static final int FLINGABLE_VALUE = 300;
private static final int NOCLICK_VALUE = 3;
private int mFlingableValue = FLINGABLE_VALUE;
private float mPadding;
private double mStartAngle = 0;
private String[] mItemTexts;
private int[] mItemImgs;
private int mMenuItemCount;
private float mTmpAngle;
private long mDownTime;
private boolean isFling;
private int mMenuItemLayoutId = R.layout.circle_menu_item;
public CircleMenuLayout(Context context, AttributeSet attrs) {
super(context, attrs);
setPadding(0, 0, 0, 0);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int resWidth = 0;
int resHeight = 0;
int width = MeasureSpec.getSize(widthMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
if (widthMode != MeasureSpec.EXACTLY
|| heightMode != MeasureSpec.EXACTLY) {
resWidth = getSuggestedMinimumWidth();
resWidth = resWidth == 0 ? getDefaultWidth() : resWidth;
resHeight = getSuggestedMinimumHeight();
resHeight = resHeight == 0 ? getDefaultWidth() : resHeight;
} else {
resWidth = resHeight = Math.min(width, height);
}
setMeasuredDimension(resWidth, resHeight);
mRadius = Math.max(getMeasuredWidth(), getMeasuredHeight());
final int count = getChildCount();
int childSize = (int) (mRadius * RADIO_DEFAULT_CHILD_DIMENSION);
int childMode = MeasureSpec.EXACTLY;
for (int i = 0; i < count; i++) {
final View child = getChildAt(i);
if (child.getVisibility() == GONE) {
continue;
}
int makeMeasureSpec = -1;
if (child.getId() == R.id.id_circle_menu_item_center) {
makeMeasureSpec = MeasureSpec.makeMeasureSpec(
(int) (mRadius * RADIO_DEFAULT_CENTERITEM_DIMENSION),
childMode);
} else {
makeMeasureSpec = MeasureSpec.makeMeasureSpec(childSize,
childMode);
}
child.measure(makeMeasureSpec, makeMeasureSpec);
}
mPadding = RADIO_PADDING_LAYOUT * mRadius;
}
public interface OnMenuItemClickListener {
void itemClick(View view, int pos);
void itemCenterClick(View view);
}
private OnMenuItemClickListener mOnMenuItemClickListener;
/**
*
* @param mOnMenuItemClickListener
*/
public void setOnMenuItemClickListener(
OnMenuItemClickListener mOnMenuItemClickListener) {
this.mOnMenuItemClickListener = mOnMenuItemClickListener;
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int layoutRadius = mRadius;
// Laying out the child views
final int childCount = getChildCount();
int left, top;
// menu item
int cWidth = (int) (layoutRadius * RADIO_DEFAULT_CHILD_DIMENSION);
float angleDelay = 360 / (getChildCount() - 1);
for (int i = 0; i < childCount; i++) {
final View child = getChildAt(i);
if (child.getId() == R.id.id_circle_menu_item_center)
continue;
if (child.getVisibility() == GONE) {
continue;
}
mStartAngle %= 360;
float tmp = layoutRadius / 2f - cWidth / 2 - mPadding;
left = layoutRadius
/ 2
+ (int) Math.round(tmp
* Math.cos(Math.toRadians(mStartAngle)) - 1 / 2f
* cWidth);
top = layoutRadius
/ 2
+ (int) Math.round(tmp
* Math.sin(Math.toRadians(mStartAngle)) - 1 / 2f
* cWidth);
child.layout(left, top, left + cWidth, top + cWidth);
mStartAngle += angleDelay;
}
View cView = findViewById(R.id.id_circle_menu_item_center);
if (cView != null) {
cView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (mOnMenuItemClickListener != null) {
mOnMenuItemClickListener.itemCenterClick(v);
}
}
});
int cl = layoutRadius / 2 - cView.getMeasuredWidth() / 2;
int cr = cl + cView.getMeasuredWidth();
cView.layout(cl, cl, cr, cr);
}
}
private float mLastX;
private float mLastY;
private AutoFlingRunnable mFlingRunnable;
@Override
public boolean dispatchTouchEvent(MotionEvent event) {
float x = event.getX();
float y = event.getY();
// Log.e("TAG", "x = " + x + " , y = " + y);
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mLastX = x;
mLastY = y;
mDownTime = System.currentTimeMillis();
mTmpAngle = 0;
if (isFling) {
removeCallbacks(mFlingRunnable);
isFling = false;
return true;
}
break;
case MotionEvent.ACTION_MOVE:
float start = getAngle(mLastX, mLastY);
float end = getAngle(x, y);
// Log.e("TAG", "start = " + start + " , end =" + end);
if (getQuadrant(x, y) == 1 || getQuadrant(x, y) == 4) {
mStartAngle += end - start;
mTmpAngle += end - start;
} else
{
mStartAngle += start - end;
mTmpAngle += start - end;
}
requestLayout();
mLastX = x;
mLastY = y;
break;
case MotionEvent.ACTION_UP:
float anglePerSecond = mTmpAngle * 1000
/ (System.currentTimeMillis() - mDownTime);
// Log.e("TAG", anglePrMillionSecond + " , mTmpAngel = " +
// mTmpAngle);
if (Math.abs(anglePerSecond) > mFlingableValue && !isFling) {
post(mFlingRunnable = new AutoFlingRunnable(anglePerSecond));
return true;
}
if (Math.abs(mTmpAngle) > NOCLICK_VALUE) {
return true;
}
break;
}
return super.dispatchTouchEvent(event);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
return true;
}
/**
*
* @param xTouch
* @param yTouch
* @return
*/
private float getAngle(float xTouch, float yTouch) {
double x = xTouch - (mRadius / 2d);
double y = yTouch - (mRadius / 2d);
return (float) (Math.asin(y / Math.hypot(x, y)) * 180 / Math.PI);
}
/**
*
* @param x
* @param y
* @return
*/
private int getQuadrant(float x, float y) {
int tmpX = (int) (x - mRadius / 2);
int tmpY = (int) (y - mRadius / 2);
if (tmpX >= 0) {
return tmpY >= 0 ? 4 : 1;
} else {
return tmpY >= 0 ? 3 : 2;
}
}
/**
*
* @param resIds
*/
public void setMenuItemIconsAndTexts(int[] resIds, String[] texts) {
mItemImgs = resIds;
mItemTexts = texts;
if (resIds == null && texts == null) {
throw new IllegalArgumentException("IllegalArgumentException");
}
mMenuItemCount = resIds == null ? texts.length : resIds.length;
if (resIds != null && texts != null) {
mMenuItemCount = Math.min(resIds.length, texts.length);
}
addMenuItems();
}
/**
*
* @param mMenuItemLayoutId
*/
public void setMenuItemLayoutId(int mMenuItemLayoutId) {
this.mMenuItemLayoutId = mMenuItemLayoutId;
}
/**
*/
private void addMenuItems() {
LayoutInflater mInflater = LayoutInflater.from(getContext());
for (int i = 0; i < mMenuItemCount; i++) {
final int j = i;
View view = mInflater.inflate(mMenuItemLayoutId, this, false);
ImageView iv = (ImageView) view
.findViewById(R.id.id_circle_menu_item_image);
TextView tv = (TextView) view
.findViewById(R.id.id_circle_menu_item_text);
if (iv != null) {
iv.setVisibility(View.VISIBLE);
iv.setImageResource(mItemImgs[i]);
iv.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (mOnMenuItemClickListener != null) {
mOnMenuItemClickListener.itemClick(v, j);
}
}
});
}
if (tv != null) {
tv.setVisibility(View.VISIBLE);
tv.setText(mItemTexts[i]);
}
addView(view);
}
}
/**
*
* @param mFlingableValue
*/
public void setFlingableValue(int mFlingableValue) {
this.mFlingableValue = mFlingableValue;
}
/**
*
* @param mPadding
*/
public void setPadding(float mPadding) {
this.mPadding = mPadding;
}
/**
*
* @return
*/
private int getDefaultWidth() {
WindowManager wm = (WindowManager) getContext().getSystemService(
Context.WINDOW_SERVICE);
DisplayMetrics outMetrics = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(outMetrics);
return Math.min(outMetrics.widthPixels, outMetrics.heightPixels);
}
public class AutoFlingRunnable implements Runnable {
private float angelPerSecond;
public AutoFlingRunnable(float velocity) {
this.angelPerSecond = velocity;
}
public void run() {
if ((int) Math.abs(angelPerSecond) < 20) {
isFling = false;
return;
}
isFling = true;
mStartAngle += (angelPerSecond / 30);
angelPerSecond /= 1.0666F;
postDelayed(this, 30);
requestLayout();
}
}
}
|
Refer the below link for complete sample code:-
