pic:
How should I do to custom the specific seekbar like the pic?
I think the point is:
When finger is moving on the seekbar, how to present a suspended view showing the progress.
There are some views which layer is same level to parent view of seekbar, these views are near the seekbar, would these views overlap the suspended view?
Take a look at this answer: 13887556
It could be a good starting point.
Try to extend SeekBar and override onMeasure() and onDraw methods():
#Override
protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (labelBackground != null)
{
viewWidth = getMeasuredWidth();
barHeight = getMeasuredHeight();// returns only the bar height (without the label);
setMeasuredDimension(viewWidth, barHeight + labelBackground.getHeight());
}
}
#Override
protected synchronized void onDraw(Canvas canvas)
{
if (labelBackground != null)
{
barBounds.left = getPaddingLeft();
barBounds.top = labelBackground.getHeight() + getPaddingTop();
barBounds.right = barBounds.left + viewWidth - getPaddingRight() - getPaddingLeft();
barBounds.bottom = barBounds.top + barHeight - getPaddingBottom() - getPaddingTop();
progressPosX = barBounds.left + ((float) this.getProgress() / (float) this.getMax()) * barBounds.width();
labelPos.x = (int) progressPosX - labelOffset;
labelPos.y = getPaddingTop();
progressDrawable = getProgressDrawable();
progressDrawable.setBounds(barBounds.left, barBounds.top, barBounds.right, barBounds.bottom);
progressDrawable.draw(canvas);
labelTextPaint.getTextBounds(labelText, 0, labelText.length(), labelTextRect);
canvas.drawBitmap(labelBackground, labelPos.x, labelPos.y, labelBackgroundPaint);
canvas.drawText(labelText, labelPos.x + labelBackground.getWidth() / 2 - labelTextRect.width() / 2, labelPos.y + labelBackground.getHeight() / 2 + labelTextRect.height() / 2, labelTextPaint);
thumbX = (int) progressPosX - getThumbOffset();
thumbDrawable.setBounds(thumbX, barBounds.top, thumbX + thumbDrawable.getIntrinsicWidth(), barBounds.top + thumbDrawable.getIntrinsicHeight());
thumbDrawable.draw(canvas);
} else
{
super.onDraw(canvas);
}
Related
I am trying to draw a circle progress bar around an circle image. I have tried to create my own "CircleImageView" Class which extends "ImageView"
my onDraw() method
protected void onDraw(Canvas canvas) {
canvas.drawCircle(mCenter[0], mCenter[1], mRadius, ringPaint);
progress = 30; //for testing
float angle = 360 * progress / maxProgress;
canvas.drawArc(mOval, mStartAngle, angle, false, progressPaint);
super.onDraw(canvas);
}
onMeasure method()
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
final int height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
final int width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
final int min = Math.min(width, height);
setMeasuredDimension(width, height);
// Get image matrix values and place them in an array
float[] f = new float[9];
getImageMatrix().getValues(f);
// Extract the scale values using the constants (if aspect ratio maintained, scaleX == scaleY)
final float scaleX = f[Matrix.MSCALE_X];
final float scaleY = f[Matrix.MSCALE_Y];
// Get the drawable (could also get the bitmap behind the drawable and getWidth/getHeight)
final Drawable d = getDrawable();
final int origW = d.getIntrinsicWidth();
final int origH = d.getIntrinsicHeight();
// Calculate the actual dimensions
final int actW = Math.round(origW * scaleX);
final int actH = Math.round(origH * scaleY);
Log.e("DBG", "[" + origW + "," + origH + "] -> [" + actW + "," + actH + "] & scales: x=" + scaleX + " y=" +
scaleY);
mCenter = new int[]{width / 2, height / 2};
mRadius = (int) mCenter[0] - actW - progressStrokeWidth / 2;
mOval.set(mCenter[0] - mRadius, mCenter[1] - mRadius, mCenter[0] + mRadius, mCenter[1] + mRadius); //mOval is an instance of RectF
}
init() method
private void init(Context context, AttributeSet attrs) {
mContext = context;
TypedArray typedArray = mContext.obtainStyledAttributes(attrs, R.styleable.CircleProgressAttr);
progressStrokeWidth = typedArray.getInteger(R.styleable.CircleProgressAttr_progressRingSize, 20);
mRingColor = typedArray.getInt(R.styleable.CircleProgressAttr_progressRingColor, R.color.ringColor);
mProgressColor = typedArray.getInt(R.styleable.CircleProgressAttr_progressColor, R.color.tab_underline_color);
mStartAngle = -90;
maxProgress = 100;
mOval = new RectF();
ringPaint = new Paint();
progressPaint = new Paint();
ringPaint.setColor(mRingColor);
ringPaint.setStyle(Paint.Style.STROKE);
ringPaint.setStrokeWidth(progressStrokeWidth);
ringPaint.setAntiAlias(true);
progressPaint.setColor(mProgressColor);
progressPaint.setStyle(Paint.Style.STROKE);
progressPaint.setStrokeWidth(progressStrokeWidth);
progressPaint.setAntiAlias(true);
}
I have inserted the CircleView into a RelativeLayout with the following XML-code
<com.kevinwang.simpleplayer.CircleImageView
android:id="#+id/cd_img"
android:src="#drawable/cd01"
android:layout_above="#id/play_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="center"/>
I ran the app, but the progressbar didn't show, is there anything wrong with my code ?
Following is code of onDraw function. It draws the circle and functions properly, but when I output circle coordinates in LOGCAT I don't see anything. I have imported the "android.Util.Log" as well,
Log.d command not showing in Logcat.
#Override
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
int pl = getPaddingLeft();
int pr = getPaddingRight();
int pt = getPaddingTop();
int pb = getPaddingBottom();
int usableWidth = w - (pl + pr);
int usableHeight = h - (pt + pb);
int radius = Math.min(usableWidth, usableHeight) / 2;
int cx = pl + (usableWidth / 2);
int cy = pt + (usableHeight / 2);
paint.setColor(circleColor);
//canvas.drawCircle(w, h, (radius * 1.5f), paint);
Log.d("CIRCLE DRAW", "Circle coordinates are as ");// +
//"X: "+ w +
//"Y: "+ h);
}
I am trying to make a native Android version of http://arapaho.nsuok.edu/~deckar01/Zvis.html
So, I made a custom View that draws all the squares needed. Of course, this drawing ends up taking 10s of seconds once the number becomes large enough to make the Canvas start drawing thousands of squares.
Is there a better way to do this? It seems like there is something obvious I am not thinking of doing/using.
The onDraw method of the View is below, in case that helps. Any ideas?
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
final int number = mNumber;
final float tileWidth, tileHeight;
/*mTileWidth = mWW / (number - 1);
mTileHeight = mHH / (number - 1);*/
// make them squares
if (mWW <= mHH) {
tileWidth = tileHeight = mWW / (number - 1);
} else {
tileWidth = tileHeight = mHH / (number - 1);
}
mWhiteTextPaint.setTextSize(48f / 72 * tileWidth);
mBlackTextPaint.setTextSize(48f / 72 * tileWidth);
float currX = getPaddingLeft();
float currY = getPaddingTop();
for (int i = 1; i <= number - 1; i++) {
mBackgroundPaint.setColor(getBackgroundColor(i, number));
canvas.drawRect(currX, currY, currX + tileWidth,
currY + tileHeight,
mBackgroundPaint);
final String text = String.valueOf(i);
canvas.drawText(text,
currX + tileWidth / 2 - mWhiteTextPaint.measureText(text) / 2,
currY + tileHeight * 0.9f, mWhiteTextPaint);
currX += tileWidth;
}
currX = getPaddingLeft();
currY += tileHeight;
for (int i = 2; i <= number - 1; i++) {
for (int j = 1; j <= number - 1; j++) {
final int num = (j == 1) ? i : (i * j) % number;
mBackgroundPaint.setColor(getBackgroundColor(num, number));
canvas.drawRect(currX, currY, currX + tileWidth,
currY + tileHeight,
mBackgroundPaint);
final String text = String.valueOf(num);
if (num == 0) {
canvas.drawText(text,
currX + tileWidth / 2 - mBlackTextPaint.measureText(text) / 2,
currY + tileHeight * 0.9f, mBlackTextPaint);
} else {
canvas.drawText(text,
currX + tileWidth / 2 - mWhiteTextPaint.measureText(text) / 2,
currY + tileHeight * 0.9f, mWhiteTextPaint);
}
currX += tileWidth;
}
currX = getPaddingLeft();
currY += tileHeight;
}
if (mOnDrawFinishedListener != null) {
mOnDrawFinishedListener.onDrawFinished(number);
}
}
As #CarCzar already said, you could draw everything in a separate thread into a bitmap and then on the UI thread you only draw that bitmap on the screen. Alternatively you could use OpenGL. That's usually used for more dynamic things like games. The thing is that OpenGL runs in a separate graphic thread and therefore will not block your UI.
I am creating a custom analog clock with images for hour, second, minute hands. The clock works fine but only problem is the anchoring of the hands. Below is an image of the clock attached. The hour, minute hands are anchored at the center which makes the clock look bad. All the hands should be anchored at the edges so that it looks more realistic and readable. Can someone suggest something. My custom view is attached here.
package com.example.submission_customclock;
import android.annotation.TargetApi;
import android.content.Context;
import android.content.Intent;
import android.content.IntentFilter;
import android.content.BroadcastReceiver;
import android.content.res.Resources;
import android.graphics.Canvas;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.os.CountDownTimer;
import android.os.Handler;
import android.text.format.Time;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.widget.RemoteViews.RemoteView;
import java.util.TimeZone;
/**
* This widget display an analogic clock with two hands for hours and
* minutes.
*
* #attr ref android.R.styleable#AnalogClock_dial
* #attr ref android.R.styleable#AnalogClock_hand_hour
* #attr ref android.R.styleable#AnalogClock_hand_minute
*/
#RemoteView
public class AnalogClock extends View {
private Time mCalendar;
private static final String DEBUGTAG = "FA";
private Drawable mHourHand;
private Drawable mMinuteHand;
private Drawable mSecondHand;
private Drawable mDial;
private Drawable mDial_frame;
private int mDialWidth;
private int mDialHeight;
private boolean mAttached;
private final Handler mHandler = new Handler();
private float mMinutes;
private float mHour;
private boolean mChanged;
public AnalogClock(Context context) {
this(context, null);
}
public AnalogClock(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
Context mContext;
public AnalogClock(Context context, AttributeSet attrs,
int defStyle) {
super(context, attrs, defStyle);
Resources r = context.getResources();
mContext=context;
Log.d(AnalogClock.DEBUGTAG,"Analog clock started");
mDial = r.getDrawable(R.drawable.clock4);
mDial_frame = r.getDrawable(R.drawable.clock_frame);
mHourHand = r.getDrawable(R.drawable.hour_hand);
mMinuteHand = r.getDrawable(R.drawable.minute_hand);
mSecondHand = r.getDrawable(R.drawable.second_hand);
mCalendar = new Time();
mDialWidth = mDial.getIntrinsicWidth();
mDialHeight = mDial.getIntrinsicHeight();
}
#Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
if (!mAttached) {
mAttached = true;
IntentFilter filter = new IntentFilter();
filter.addAction(Intent.ACTION_TIME_TICK);
filter.addAction(Intent.ACTION_TIME_CHANGED);
filter.addAction(Intent.ACTION_TIMEZONE_CHANGED);
getContext().registerReceiver(mIntentReceiver, filter, null, mHandler);
}
// NOTE: It's safe to do these after registering the receiver since the receiver always runs
// in the main thread, therefore the receiver can't run before this method returns.
// The time zone may have changed while the receiver wasn't registered, so update the Time
mCalendar = new Time();
// Make sure we update to the current time
onTimeChanged();
counter.start();
}
#Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
if (mAttached) {
counter.cancel();
getContext().unregisterReceiver(mIntentReceiver);
mAttached = false;
}
}
#TargetApi(Build.VERSION_CODES.HONEYCOMB)
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
float hScale = 1.0f;
float vScale = 1.0f;
if (widthMode != MeasureSpec.UNSPECIFIED && widthSize < mDialWidth) {
hScale = (float) widthSize / (float) mDialWidth;
}
if (heightMode != MeasureSpec.UNSPECIFIED && heightSize < mDialHeight) {
vScale = (float )heightSize / (float) mDialHeight;
}
float scale = Math.min(hScale, vScale);
Log.d(AnalogClock.DEBUGTAG,"onMeasure params: " + widthSize + " "
+ heightSize + " " + hScale + " " + vScale + " " + scale);
try {
setMeasuredDimension(resolveSizeAndState((int) (mDialWidth * scale), widthMeasureSpec, 0),
resolveSizeAndState((int) (mDialHeight * scale), heightMeasureSpec, 0));
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mChanged = true;
}
boolean mSeconds=false;
float mSecond=0;
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
boolean changed = mChanged;
if (changed) {
mChanged = false;
}
boolean seconds = mSeconds;
if (seconds ) {
mSeconds = false;
}
int availableWidth = this.getMeasuredWidth();
int availableHeight = this.getMeasuredHeight();
int x = availableWidth / 2;
int y = availableHeight / 2;
final Drawable dial = mDial;
final Drawable dial_frame = mDial_frame;
int w = dial.getIntrinsicWidth();
int h = dial.getIntrinsicHeight();
boolean scaled = false;
// Log.d(AnalogClock.DEBUGTAG,"onDraw params: " + availableWidth +" "+ availableHeight + " " +
// x + " " + y + " " + w + " "+ h + " " + changed);
if (availableWidth < w || availableHeight < h) {
scaled = true;
//float scale = Math.min((float) availableWidth / (float) w,
// (float) availableHeight / (float) h);
canvas.save();
float scale1 = (float) 0.6;
float scale2 = (float) 0.8;
// Log.d(AnalogClock.DEBUGTAG,"scale params: " + scale1 + " " + scale2);
canvas.scale(scale1, scale2, x, y);
}
if (changed) {
//Log.d(AnalogClock.DEBUGTAG,"Bounds params: " + (x - (w / 2)) + " " + (y - (h / 2)) + " " + ( x + (w / 2)) + " " + (y + (h / 2)));
dial.setBounds(x - (w / 2), y - (h / 2), x + (w / 2), y + (h / 2));
//dial_frame.setBounds(x - (w / 2), y - (h / 2), x + (w / 2), y + (h / 2));
//Log.d(AnalogClock.DEBUGTAG,"Bounds params: " + (x - (w / 2 + w/10)) + " " + (y - (h / 2 + h/10)) + " " + ( x + (w / 2 + w/10)) + " " +
// (y + (h / 2 + h/10)));
dial_frame.setBounds(x - (w/2 + w/10), y - (h/2 + h/10), x + (w/2 + w/10), y + (h/2 + h/10));
}
dial.draw(canvas);
dial_frame.draw(canvas);
canvas.save();
canvas.rotate(mHour / 12.0f * 180.0f, x, y);
final Drawable hourHand = mHourHand;
if (changed) {
w = hourHand.getIntrinsicWidth();
h = hourHand.getIntrinsicHeight();
hourHand.setBounds(x - (w / 2), y - (h / 2), x + (w / 2), y + (h / 2));
}
hourHand.draw(canvas);
canvas.restore();
canvas.save();
canvas.rotate(mMinutes / 60.0f * 180.0f, x, y);
final Drawable minuteHand = mMinuteHand;
if (changed) {
w = minuteHand.getIntrinsicWidth();
h = minuteHand.getIntrinsicHeight();
minuteHand.setBounds(x - (w / 2), y - (h / 2), x + (w / 2), y + (h / 2));
}
minuteHand.draw(canvas);
canvas.restore();
canvas.save();
canvas.rotate(mSecond, x, y);
if (seconds) {
w = mSecondHand.getIntrinsicWidth();
h = mSecondHand.getIntrinsicHeight();
mSecondHand.setBounds(x - (w / 2), y - (h / 2), x + (w / 2), y + (h / 2));
}
mSecondHand.draw(canvas);
canvas.restore();
if (scaled) {
canvas.restore();
}
}
MyCount counter = new MyCount(10000, 1000);
public class MyCount extends CountDownTimer{
public MyCount(long millisInFuture, long countDownInterval) {
super(millisInFuture, countDownInterval);
}
#Override
public void onFinish() {
counter.start();
}
#Override
public void onTick(long millisUntilFinished) {
mCalendar.setToNow();
int second = mCalendar.second;
mSecond=6.0f*second;
mSeconds=true;
//mChanged = true;
AnalogClock.this.invalidate();
}
}
private void onTimeChanged() {
mCalendar.setToNow();
int hour = mCalendar.hour;
int minute = mCalendar.minute;
int second = mCalendar.second;
mMinutes = minute + second / 60.0f;
mHour = hour + mMinutes / 60.0f;
mChanged = true;
}
private final BroadcastReceiver mIntentReceiver = new BroadcastReceiver() {
#Override
public void onReceive(Context context, Intent intent) {
if (intent.getAction().equals(Intent.ACTION_TIMEZONE_CHANGED)) {
String tz = intent.getStringExtra("time-zone");
mCalendar = new Time(TimeZone.getTimeZone(tz).getID());
}
onTimeChanged();
invalidate();
}
};
}
your problem is with specific dimensions for clock_frame ,minute_hand,hour_hand and second_hand in drawable folder.for example if you take 240 x 240 clockframe the you should takeminute_hand,hour_hand and second_hand as 19 x 240 and these hands should start from top and end with exactly center position of clock_frame with comparition.if u want more fashionable you can end up with slightly distance from exactly center position of clock_frame
Simplest way is to set hands bitmaps the same size as dial and rotate to 12 o clock.
I am trying to implement a segmentated radio button from here: https://github.com/makeramen/android-segmentedradiobutton but I need to set the image programmatically and not in XML.
This is the source of the custom RadioButton:
public class CenteredImageButton extends RadioButton {
Drawable image;
public CenteredImageButton(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray a = context.obtainStyledAttributes(attrs,
R.styleable.CompoundButton, 0, 0);
image = a.getDrawable(1);
setButtonDrawable(android.R.id.empty);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (image != null) {
image.setState(getDrawableState());
// scale image to fit inside button
int imgHeight = image.getIntrinsicHeight();
Log.d("IMAGEHEIGHT", "imageWidth is " + imgHeight);
int imgWidth = image.getIntrinsicWidth();
Log.d("IMAGEWIDTH", "imageWidth is " + imgWidth);
int btnWidth = getWidth();
Log.d("BUTTONWIDTH", "buttonWidth is " + btnWidth);
int btnHeight = getHeight();
Log.d("BUTTONHEIGHT", "buttonHeight is " + btnHeight);
float scale;
if (imgWidth <= btnWidth && imgHeight <= btnHeight) {
scale = 1.0f;
} else {
scale = Math.min((float) btnWidth / (float) imgWidth,
(float) btnHeight / (float) imgHeight);
}
Log.d("SCALE", "scale is " + scale);
int dx = (int) ((btnWidth - imgWidth * scale) * 0.5f + 0.5f);
Log.d("DX", "dx is " + dx);
int dy = (int) ((btnHeight - imgHeight * scale) * 0.5f + 0.5f);
Log.d("DY", "dy is " + dy);
image.setBounds(dx, dy, (int) (dx + imgWidth * scale),
(int) (dy + imgHeight * scale));
image.draw(canvas);
}
}
I am setting the drawable in another file like this:
private void setButtonImageProperties(RadioButton button,Drawable drawable){
button.setGravity(Gravity.CENTER);
Resources resources = this.context.getResources();
float dipValue = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
60, resources.getDisplayMetrics());
float dipValue1 = TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, 80, resources.getDisplayMetrics());
button.setMinHeight((int) dipValue);
button.setMinWidth((int) dipValue1);
button.setButtonDrawable(drawable);
}
Please anyone, advise. I really need helping hand. Thanks.
You pretty much need to add a setImage method to CenteredImageButton:
public void setImage(Drawable newImage) {
image = newImage;
}
And just call it later in your main code:
button.setImage(drawable);
See this Gist to see the method inline: https://gist.github.com/1470789
I also noticed you changed the name of my class from CenteredRadioImageButton to CenteredImageButton. If you're not actually using this for the RadioButton-like behavior, I would suggest using a standard ImageButton
(I am the maintainer of SegmentedRadioButton)