I have a customview , inside it , i have one view slide up and down , when slide i draw fade background like this :
#Override
protected void dispatchDraw(Canvas canvas) {
canvas.drawARGB(alpha, 0, 0, 0);
super.dispatchDraw(canvas);
}
It work with my device android 4.2.2 but with android 4.4.2 or google nexus one android 2.3.7 ,it so bad.
2 images below show in my device 4.2.2(slide in and slide out):
http://imgur.com/p6i9gw8
http://imgur.com/9Sdzy7v
and 2 images below show in google nexus one android 2.3.7(slide in and slide out):
http://imgur.com/ZGKiRJi
http://imgur.com/Uf3vRdb
As you can see, in 2 image first, fade draw correct , and in other, it look bad.
Complete code for this view is :
public class SlideView extends ViewGroup {
private static final int MAXDURATIONSLIDE = 500;
protected View content;
private int childHeight;
private int childOffset;
private int childWidth;
private int alpha;
private Fillinger fillinger;
public ISlide getSlideChangeListener() {
return slideListener;
}
public void setSlideChangeListener(ISlide slideChangeListener) {
this.slideListener = slideChangeListener;
}
private ISlide slideListener;
public SlideView(Context context) {
super(context);
init(context, null);
}
private void init(Context context, AttributeSet attrs) {
if(attrs!=null){
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.SlideView);
try {
int contentLayoutId = a.getResourceId(R.styleable.SlideView_slideView, 0);
DebugLog.d(contentLayoutId);
setContent(contentLayoutId);
} finally {
a.recycle();
}
}
fillinger = new Fillinger(context);
}
public SlideView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context,attrs);
}
#Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
final int width = r - l;
final int height = b - t;
DebugLog.d("width "+width+" height "+height);
childOffset = height;
content.layout(0, childOffset, childWidth, childOffset + childHeight);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width = getDefaultSize(0, widthMeasureSpec);
int height = getDefaultSize(0, heightMeasureSpec);
measureChild(content, widthMeasureSpec, height);
childHeight = content.getMeasuredHeight();
childWidth = content.getMeasuredWidth();
DebugLog.d("childWidth "+childWidth+" childHeight "+childHeight);
setMeasuredDimension(width, height);
}
public void setContent(int resId) {
View view = LayoutInflater.from(getContext()).inflate(resId, this,false);
setContent(view);
}
public void setContent(View v) {
if (content != null)
removeView(content);
content = v;
addView(content);
}
private void moveViewByY(int diffY) {
childOffset += diffY;
alpha = (int) (Math.abs((getHeight()-childOffset)*255/(childHeight))*0.5f);
content.layout(0, childOffset, childWidth, childOffset + childHeight);
if(slideListener!=null){
slideListener.onSlide(childOffset,childHeight);
}
}
#Override
protected void dispatchDraw(Canvas canvas) {
canvas.drawARGB(alpha, 0, 0, 0);
super.dispatchDraw(canvas);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
if(isIn()&&touchOutSide(event)){
toogle();
return true;
}
return false;
}
private boolean touchOutSide(MotionEvent event) {
final float x = event.getX();
final float y = event.getY();
if(x<content.getLeft()||x>content.getRight()||y<content.getTop()||y>content.getBottom()){
return true;
}
return false;
}
public void hide(){
if(isIn()){
fillinger.startScroll(content.getTop(),getHeight(),childHeight,MAXDURATIONSLIDE);
}
}
public void show(){
if(!isIn()){
fillinger.startScroll(content.getTop(),getHeight()-childHeight,childHeight,MAXDURATIONSLIDE);
}
}
public void toogle(){
fillinger.cancleAnimation();
if(isIn()){
hide();
}else{
show();
}
}
public boolean isIn(){
return content.getTop()<getHeight();
}
public class Fillinger implements Runnable {
private static final String tag = "Fillinger";
private Scroller mScroller;
private int lastY;
private boolean more;
private int currentY;
private int diffY;
public Fillinger(Context context) {
mScroller = new Scroller(context);
}
public void startScroll(float startY, float endY, float maxDistance, int maxDurationForFling) {
int duration = (int) Math.min(Math.abs((endY - startY)) / maxDistance * maxDurationForFling, maxDurationForFling);
lastY = (int) startY;
if(slideListener!=null){
slideListener.onStartSlide();
}
mScroller.startScroll(0, (int) startY, 0, -(int) (endY - startY), duration);
setDrawingCacheEnabled(true);
post(this);
}
public void cancleAnimation(){
removeCallbacks(this);
}
#Override
public void run() {
more = mScroller.computeScrollOffset();
currentY = mScroller.getCurrY();
diffY = lastY - currentY;
moveViewByY(diffY);
lastY = currentY;
if (more) {
post(this);
}else{
setDrawingCacheEnabled(false);
if(slideListener!=null){
slideListener.onSlideFinish(isIn());
}
}
}
}
}
What i missing?
Sorry for my bad english.
Thanks all.
Edit: finally , i must call invalidate in moveViewByY method like this
private void moveViewByY(int diffY) {
childOffset += diffY;
alpha = (int) (Math.abs((getHeight()-childOffset)*255/(childHeight))*0.5f);
content.layout(0, childOffset, childWidth, childOffset + childHeight);
invalidate();
if(slideListener!=null){
slideListener.onSlide(childOffset,childHeight);
}
}
I dont know why , may be invalidate , view tree redraw and old canvas cleared.
Expect best solution, thanks .
Related
In one of my apps I have created a circular view with multiple colors,In which I want to set click listener on each color arch
Below is the image and code for drawing that view
Custom view class code
public class CircularStatusView extends View {
private static final float DEFAULT_PORTION_WIDTH = 10;
private static final int DEFAULT_PORTION_SPACING = 5;
private static final int DEFAULT_COLOR = Color.parseColor("#D81B60");
private static final float DEFAULT_PORTIONS_COUNT = 1;
private static final float START_DEGREE =-90;
private float radius;
private float portionWidth = DEFAULT_PORTION_WIDTH;
private int portionSpacing = DEFAULT_PORTION_SPACING;
private int portionColor = DEFAULT_COLOR;
private float portionsCount = DEFAULT_PORTIONS_COUNT;
private RectF mBorderRect = new RectF();
private Paint paint;
private SparseIntArray portionToUpdateMap = new SparseIntArray();
private Context context;
public CircularStatusView(Context context) {
super(context);
init(context, null, -1);
}
private void init(Context context, AttributeSet attrs, int defStyle) {
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CircularStatusView, defStyle, 0);
if (a != null) {
portionColor = a.getColor(R.styleable.CircularStatusView_portion_color, DEFAULT_COLOR);
portionWidth = a.getDimensionPixelSize(R.styleable.CircularStatusView_portion_width, (int) DEFAULT_PORTION_WIDTH);
portionSpacing = a.getDimensionPixelSize(R.styleable.CircularStatusView_portion_spacing, DEFAULT_PORTION_SPACING);
portionsCount = a.getInteger(R.styleable.CircularStatusView_portions_count, (int) DEFAULT_PORTIONS_COUNT);
a.recycle();
}
paint = getPaint();
}
public CircularStatusView(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
init(context, attrs, -1);
}
public CircularStatusView(Context context, #Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs, defStyleAttr);
}
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mBorderRect.set(calculateBounds());
radius = Math.min((mBorderRect.height() - portionWidth) / 2.0f, (mBorderRect.width() - portionWidth) / 2.0f);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
float radius = this.radius;
float center_x = mBorderRect.centerX();
float center_y = mBorderRect.centerY();
final RectF oval = getOval(radius, center_x, center_y);
float degree = 360 / portionsCount;
float percent = 100 / portionsCount;
for (int i = 0; i < portionsCount; i++) {
paint.setColor(getPaintColorForIndex(i));
float startAngle = START_DEGREE + (degree * i);
canvas.drawArc(oval, (getSpacing() / 2) + startAngle, getProgressAngle(percent) - getSpacing(), false, paint);
}
}
private int getPaintColorForIndex(int i) {
if (portionToUpdateMap.indexOfKey(i) >= 0) { //if key is exists
return portionToUpdateMap.get(i);
} else {
return portionColor;
}
}
#NonNull
private RectF getOval(float radius, float center_x, float center_y) {
final RectF oval = new RectF();
oval.set(center_x - radius,
center_y - radius,
center_x + radius,
center_y + radius);
return oval;
}
#NonNull
private Paint getPaint() {
Paint paint = new Paint();
paint.setColor(portionColor);
paint.setStyle(Paint.Style.STROKE);
paint.setAntiAlias(true);
paint.setStrokeWidth(portionWidth);
paint.setStrokeCap(Paint.Cap.BUTT);
return paint;
}
private int getSpacing() {
return portionsCount == 1 ? 0 : portionSpacing;
}
private RectF calculateBounds() {
int availableWidth = getWidth() - getPaddingLeft() - getPaddingRight();
int availableHeight = getHeight() - getPaddingTop() - getPaddingBottom();
int sideLength = Math.min(availableWidth, availableHeight);
float left = getPaddingLeft() + (availableWidth - sideLength) / 2f;
float top = getPaddingTop() + (availableHeight - sideLength) / 2f;
return new RectF(left, top, left + sideLength, top + sideLength);
}
private float getProgressAngle(float percent) {
return percent / (float) 100 * 360;
}
public void setPortionsCount(int portionsCount) {
this.portionsCount = (float) portionsCount;
}
public void setPortionSpacing(int spacing) {
portionSpacing = spacing;
}
public void setPortionWidth(float portionWidth) {
this.portionWidth = portionWidth;
}
public void setCustomPaint(Paint paint) {
this.paint = paint;
}
public void setPortionsColor(int color) {
this.portionColor = color;
portionToUpdateMap.clear();
invalidate();
}
public void setPortionColorForIndex(int index, int color) {
if (index > portionsCount - 1) {
throw new IllegalArgumentException("Index is Bigger than the count!");
} else {
Log.d("3llomi", "adding index to map " + index);
portionToUpdateMap.put(index, color);
invalidate();
}
}
}
and in my activity class
CircularStatusView circularStatusView = findViewById(R.id.circular_status_view);
circularStatusView.setPortionsCount(6);
for (int i=0; i<AppConstants.outerCircleColors.length; i++){
circularStatusView.setPortionColorForIndex(i,Color.parseColor(AppConstants.outerCircleColors[i]));
How I can set click listener on each color arch in this view? Can someone help me out in this?
You can get the pixel from the CircularStatusView, By using OnTouchListener:
CircularStatusView view = ((CircularStatusView)v);
Bitmap bitmap = ((BitmapDrawable)view.getDrawable()).getBitmap();
int pixel = bitmap.getPixel(x,y);
You can just compare the pixel to a different color. Like...
if(pixel == Color.RED){
//It's Red Color
}
You can create an interface listener for onTouch events. Check the onTouch co-ordinates. Depending on their position you can send back the touched part index to the interface listener.
Dummy code:
public class CircularStatusView extends View {
private StatusViewTouchListener listener;
...
..
.
public void setOnClickListener(StatusViewTouchListener listener) {
this.listener = listener;
}
public interface StatusViewTouchListener {
public void onStatusViewTouch(int index);
}
#Override
public boolean onTouchEvent(MotionEvent ev) {
int indexOfTouchedColor;
// Check the touch points and determine in which color part it exists.
listener.onStatusViewTouch(indexOfTouchedColor);
return true;
}
}
Implement the listener where where you are using the view and set it to the View.
public class yourActivity extends Activity implements StatusViewTouchListener {
...
..
.
CircularStatusView circularStatusView = findViewById(R.id.circular_status_view);
circularStatusView.setPortionsCount(6);
for (int i=0; i<AppConstants.outerCircleColors.length; i++){
circularStatusView.setPortionColorForIndex(i,Color.parseColor(AppConstants.outerCircleColors[i]));
circularStatusView.setOnClickListener(this);
...
..
#Override
public void onStatusViewTouch(int index) {
// Perform your action based on the index of the color
}
}
I am making android custom view, which is supposed to be loading animation(spinning arc), my view allows developer to set background color and top color.
The problem is that when I draw light colored arc on top of black arc I can see just a little bit of those black pixels around my top arc.
This problem doesn't occur when anti aliasing is off, but that is not an option because it's just ugly then.
I have tried drawing it on bitmap but it doesn't help.
My temporary solution is to make top arc 1px wider than bottom arc, but I have this moment when I swap colors for cool animation and then it can be seen if you look closely.
custom_view
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
import com.example.basil.expensemanager.R;
public class MyProgress extends View {
private int mxSize, mySize;
private Paint mPaint;
private Paint incomeAmountCirlce;
private Paint expenseAmountCirlce;
private Paint innerCirclePaint;
private Paint txtviewCirclePaint;
private float finishedStrokeWidth;
private float unfinishedStrokeWidth;
private float sweepAngle;
private int textColor;
private int expenseColor;
private int incomeColor;
private int strokeWidth;
private int textSize;
private String textContent;
private RectF finishedOuterRect = new RectF();
private RectF unfinishedOuterRect = new RectF();
public MyProgress(Context context) {
super(context);
/* init();*/
}
public MyProgress(Context context, AttributeSet attrs) {
super(context, attrs);
/* init();*/
}
public MyProgress(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
/* init();*/
}
public int getTextColor() {
return textColor;
}
public void setTextColor(int textColor) {
this.textColor = textColor;
}
public float getFinishedStrokeWidth() {
return finishedStrokeWidth;
}
public void setFinishedStrokeWidth(float finishedStrokeWidth) {
this.finishedStrokeWidth = finishedStrokeWidth;
}
public float getUnfinishedStrokeWidth() {
return unfinishedStrokeWidth;
}
public void setUnfinishedStrokeWidth(float unfinishedStrokeWidth) {
this.unfinishedStrokeWidth = unfinishedStrokeWidth;
}
public String getTextContent() {
return textContent;
}
public void setTextContent(String textContent) {
this.textContent = textContent;
}
public int getTextSize() {
return textSize;
}
public void setTextSize(int textSize) {
this.textSize = textSize;
}
public float getSweepAngle() {
return sweepAngle;
}
public void setSweepAngle(float sweepAngle) {
this.sweepAngle = sweepAngle;
}
public int getIncomeColor() {
return incomeColor;
}
public void setIncomeColor(int incomeColor) {
this.incomeColor = incomeColor;
}
public Integer getExpenseColor() {
return expenseColor;
}
public void setExpenseColor(int expenseColor) {
this.expenseColor = expenseColor;
}
public int getStrokeWidth() {
return strokeWidth;
}
public void setStrokeWidth(int strokeWidth) {
this.strokeWidth = strokeWidth;
}
public void init() {
txtviewCirclePaint = new Paint();
txtviewCirclePaint.setColor(getResources().getColor(getTextColor()));
txtviewCirclePaint.setTextSize(getTextSize());
txtviewCirclePaint.setFakeBoldText(true);
txtviewCirclePaint.setAntiAlias(true);
incomeAmountCirlce = new Paint();
incomeAmountCirlce.setColor(getResources().getColor(getIncomeColor()));
incomeAmountCirlce.setStyle(Paint.Style.STROKE);
incomeAmountCirlce.setAntiAlias(true);
finishedStrokeWidth = getFinishedStrokeWidth();
incomeAmountCirlce.setStrokeWidth(finishedStrokeWidth);
expenseAmountCirlce = new Paint();
expenseAmountCirlce.setColor(getResources().getColor(getExpenseColor()));
expenseAmountCirlce.setStyle(Paint.Style.STROKE);
expenseAmountCirlce.setAntiAlias(true);
unfinishedStrokeWidth = getUnfinishedStrokeWidth();
expenseAmountCirlce.setStrokeWidth(unfinishedStrokeWidth);
innerCirclePaint = new Paint();
innerCirclePaint.setColor(getResources().getColor(R.color.cardview_light_background));
innerCirclePaint.setAntiAlias(true);
}
#Override
protected synchronized void onDraw(Canvas canvas) {
super.onDraw(canvas);
float delta = Math.max(finishedStrokeWidth, unfinishedStrokeWidth);
finishedOuterRect.set(delta, delta, getWidth() - delta, getHeight() - delta);
unfinishedOuterRect.set(delta, delta, getWidth() - delta, getHeight() - delta);
float innerCircleRadius = (getWidth() - Math.min(finishedStrokeWidth, unfinishedStrokeWidth) + Math.abs(finishedStrokeWidth - unfinishedStrokeWidth)) / 2f;
canvas.drawCircle(getWidth() / 2.0f, getHeight() / 2.0f, innerCircleRadius, innerCirclePaint);
canvas.drawArc(finishedOuterRect, 270, getSweepAngle(), false, incomeAmountCirlce);
canvas.drawArc(unfinishedOuterRect, 270 + getSweepAngle(), 360 - getSweepAngle(), false, expenseAmountCirlce);
float textHeight = txtviewCirclePaint.descent() + txtviewCirclePaint.ascent();
canvas.drawText(getTextContent(), (getWidth() - txtviewCirclePaint.measureText(getTextContent())) / 2.0f, (getWidth() - textHeight) / 2.0f, txtviewCirclePaint);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int parentWidth = MeasureSpec.getSize(widthMeasureSpec);
int parentHeight = MeasureSpec.getSize(heightMeasureSpec);
this.setMeasuredDimension(parentWidth / 2, parentHeight / 2);
// bounds.set(0, 0, MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.getSize(heightMeasureSpec));
new RectF().set(0, 0, parentWidth / 4, parentHeight / 4);
}
}
i have done this on one of my project for showing total income and expense in progress bar hope this may help you , if you feel any difficulty comment below
In you activity use this to init view
public void init_decorate_progressbar() {
float val = calcalute_progressbar_data();
String totalPercent = "";
totalPercent = "" + (val / 3.6);
myProgressBar.invalidate();
myProgressBar.setExpenseColor(R.color.royalGreenDark);
myProgressBar.setIncomeColor(R.color.royalGreen);
myProgressBar.setFinishedStrokeWidth(30);
myProgressBar.setUnfinishedStrokeWidth(30);
myProgressBar.setTextColor(R.color.colorPrimaryDark);
myProgressBar.setTextSize(30);
if (totalPercent.equalsIgnoreCase("NaN")) {
myProgressBar.setSweepAngle(0);
myProgressBar.setTextContent("0%");
expenseMarkerLayout.setVisibility(View.GONE);
incomeMarkerLayout.setVisibility(View.GONE);
} else {
myProgressBar.setSweepAngle(val);
int incom = calculateIncomePercent();
myProgressBar.setTextContent("" + incom + "%");
txtIncomePercentMarker.setText("" + incom + "%");
int ex = calculateExpensePercent();
txtExpensePercentMarker.setText("" + ex + "%");
}
myProgressBar.init();
}
in your activity XML
<com.example.basil.expensemanager.SupportClasses.MyProgress
android:id="#+id/myProgressBar"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_centerHorizontal="true"
android:layout_below="#id/main_header"
android:layout_marginBottom="#dimen/activity_horizontal_margin"
android:layout_marginTop="#dimen/activity_horizontal_margin"
android:max="100"
android:progress="0" />
I use a Custom Calendar View using
Viewpager - FragmentStateAdapter - Fragment - Viewgroup -view
I can get first fragment and second fragment when I swipe page, but third fragment doesn't show anything. so I debug and get draw() method doesn't call on View class.
I use Invalidate(), setWillNotDraw(false) but it doesn't work.
I saw in the log that fragment cycle operates fine. I don't know what the problem is.
Here is my code:
FragmentActivity
public class FindClassFragmentActivity extends FragmentActivity {
private static final int COUNT_PAGE = 12;
ViewPager mViewPager;
CalendarFragmentStatePagerAdapter calendarAdapter;
ImageButton previous;
ImageButton next;
TextView presentMonth;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.findclass_main_layout);
mViewPager = (ViewPager) findViewById(R.id.viewpager);
previous = (ImageButton) findViewById(R.id.previous_month);
next = (ImageButton) findViewById(R.id.next_month);
presentMonth = (TextView) findViewById(R.id.present_month);
calendarAdapter = new CalendarFragmentStatePagerAdapter(getSupportFragmentManager());
mViewPager.setAdapter(calendarAdapter);
// mViewPager.setOffscreenPageLimit(24);
}
public void PrevOrNext(View v) {
switch (v.getId()) {
case R.id.previous_month :
break;
case R.id.next_month :
break;
}
}
}
FragmentStatePagerAdapter
public class CalendarFragmentStatePagerAdapter extends FragmentStatePagerAdapter {
private HashMap<Integer, MonthFragment> monthMap;
private int numOfMonth;
public CalendarFragmentStatePagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public int getCount() {
return 24;
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
Log.e("solme6", "instantiateItem : " + position );
return super.instantiateItem(container, position);
}
#Override
public Fragment getItem(int position) {
return MonthFragment.newInstance(position);
}
}
CalendarMonthView
public class CalendarMonthView extends ViewGroup {
private final int mScreenWidth;
private final int mWidthDate;
private int mDateOfWeek; // 1일의 요일
private int mDefaultTextSize = 40;
private int mTextColor = Color.BLUE;
public static String[] DAY_OF_WEEK = null;
public CalendarMonthView(Context context, AttributeSet attrs) {
super(context, attrs);
mScreenWidth = getResources().getDisplayMetrics().widthPixels;
mWidthDate = mScreenWidth / 7;
DAY_OF_WEEK = getResources().getStringArray(R.array.day_of_week);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int count = getChildCount();
Log.e("solme",Integer.toString(count));
int maxHeight = 0;
int childState = 0;
int childViewFullWidth = 0;
int childViewFullheight = 0;
for(int i=0; i < count; i++) {
final View child = getChildAt(i);
getChildAt(i).setWillNotDraw(false);
if (child.getVisibility() == GONE) {
continue;
}
childViewFullWidth = child.getMeasuredWidth();
childViewFullheight = child.getMeasuredHeight();
measureChild(child, widthMeasureSpec, heightMeasureSpec); // 자식의 크기 측정.
childState = combineMeasuredStates(childState, child.getMeasuredState());
}
setMeasuredDimension(childViewFullWidth, childViewFullheight);
LayoutParams params = getLayoutParams();
params.height = getMeasuredHeight();
params.height = maxHeight;
}
#Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
final int count = getChildCount();
int curLeft = 0; // 왼쪽 스타트 지점 값.
int curTop = 0;
int eachCellWidth, eachCellHeight;
int curDayHeight;
final int childWidth = this.getMeasuredWidth(); // 1440
final int childHeight = this.getMeasuredHeight(); //2355
for (int i = 0; i < count; i++) {
View child = getChildAt(i);
if (child.getVisibility() == GONE)
return;
child.measure(MeasureSpec.makeMeasureSpec(childWidth, MeasureSpec.AT_MOST), MeasureSpec.makeMeasureSpec(childHeight, MeasureSpec.AT_MOST));
eachCellWidth = mWidthDate;
curDayHeight = 100;
eachCellHeight = (getMeasuredHeight() - curDayHeight) / 6;
if (i < 7) {
child.layout(curLeft, curTop, curLeft + eachCellWidth, curTop + curDayHeight);
curLeft += eachCellWidth;
if (curLeft + eachCellWidth >= childWidth) {
curLeft = 0;
curTop += curDayHeight;
}
} else {
if (i == 7) {
curLeft = (mDateOfWeek - 1) * eachCellWidth;
}
child.layout(curLeft, curTop, curLeft + eachCellWidth, curTop + eachCellHeight);
curLeft += eachCellWidth;
if (curLeft + eachCellWidth >= childWidth) {
curLeft = 0;
curTop += eachCellHeight;
}
}
}
}
#Override
protected void onDraw(Canvas canvas) {
Log.e("solme6", "CalendarMonthView : onDraw");
super.onDraw(canvas);
}
#Override
public void draw(Canvas canvas) {
Log.e("solme6", "CalendarMonthView : draw");
super.draw(canvas);
}
#Override
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
}
private Paint makePaint(int color) {
Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
p.setColor(color);
p.setTextSize(mDefaultTextSize);
return p;
}
public void initCalendar(int dayOfWeek, int maxDateOfMonth) {
mDateOfWeek = dayOfWeek;
}
}
CalendarcellView
public class CalendarCellView extends View {
Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
Paint mPaintTextWhite = new Paint(Paint.ANTI_ALIAS_FLAG);
Paint mPaintBackground = new Paint(Paint.ANTI_ALIAS_FLAG);
Paint mPaintBackgroundToday = new Paint(Paint.ANTI_ALIAS_FLAG);
Paint mPaintBackgroundEvent = new Paint(Paint.ANTI_ALIAS_FLAG);
private int dayOfWeek = -1;
private boolean isStaticText = false;
private long millis;
private Rect rect;
private boolean isTouchMode;
private int dp11;
private int dp16;
private boolean hasEvent = false;
private int[] mColorEvents;
private final float RADIUS = 100f;
public CalendarCellView(Context context) {
super(context);
initialize(context);
Log.e("solme6", "CalendarCellView : constructor");
}
public CalendarCellView(Context context, AttributeSet attrs) {
super(context, attrs);
initialize(context);
}
private void initialize(Context context) {
dp11 = (int) dp2px(getContext(), 11);
dp16 = (int) dp2px(getContext(), 16);
mPaint.setColor(Color.BLACK);
mPaint.setTextSize(dp11);
mPaint.setTextAlign(Paint.Align.CENTER);
mPaintTextWhite.setColor(Color.WHITE);
mPaintTextWhite.setTextSize(dp11);
mPaintTextWhite.setTextAlign(Paint.Align.CENTER);
mPaintBackground.setColor(ContextCompat.getColor(getContext(), R.color.colorPrimaryDark));
mPaintBackgroundToday.setColor(ContextCompat.getColor(getContext(), R.color.today));
mPaintBackgroundEvent.setColor(ContextCompat.getColor(getContext(), R.color.colorPrimary));
setPadding(30, 0, 30, 0);
}
public float dp2px(Context context, float dp) {
return dp * context.getResources().getDisplayMetrics().density;
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
Log.e("solme6","CalendarCellView : onMeasure");
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
#Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
Log.e("solme6", "CalendarCellView : onLayout");
super.onLayout(changed, left, top, right, bottom);
}
#Override
protected void dispatchDraw(Canvas canvas) {
Log.e("solme6", "CalendarCellView : dispatchDraw");
}
#Override
public void draw(Canvas canvas) {
Log.e("solme6", "CalendarCellView : draw");
super.draw(canvas);
}
#Override
protected void onDraw(Canvas canvas) {
Log.e("solme6", "CalendarCellView : onDraw");
super.onDraw(canvas);
int xPos = (canvas.getWidth() / 2);
int yPos = (int) ((canvas.getHeight() / 2) - ((mPaint.descent() + mPaint.ascent()) / 2));
Calendar calendar = Calendar.getInstance();
calendar.setTimeInMillis(millis);
set
CalendarMonthView calendarView = (CalendarMonthView) getParent();
if (calendarView.getParent() instanceof ViewPager) {
ViewGroup parent = (ViewPager) calendarView.getParent();
CalendarCellView tagView = (CalendarCellView) parent.getTag();
if (!isStaticText && tagView != null && tagView.getTag() != null && tagView.getTag() instanceof Long) {
long millis = (long) tagView.getTag();
if (isSameDay(millis, this.millis)) {
// RectF rectF = new RectF(xPos - dp16, getHeight() / 2 - dp16, xPos + dp16, getHeight() / 2 + dp16);
// canvas.drawRoundRect(rectF, RADIUS, RADIUS, mPaintBackground);
}
}
}
if (!isStaticText && isToday(millis)) {
RectF rectF = new RectF(xPos - dp16, getHeight() / 2 - dp16, xPos + dp16, getHeight() / 2 + dp16);
canvas.drawRoundRect(rectF, RADIUS, RADIUS, mPaintBackgroundToday);
}
if (isStaticText) {
// 요일 표시
canvas.drawText(CalendarMonthView.DAY_OF_WEEK[dayOfWeek], xPos, yPos, mPaint);
} else {
// 날짜 표시
if (isToday(millis)) {
canvas.drawText(calendar.get(Calendar.DATE) + "", xPos, yPos, mPaintTextWhite);
} else {
canvas.drawText(calendar.get(Calendar.DATE) + "", xPos, yPos, mPaint);
}
}
if (hasEvent) {
mPaintBackgroundEvent.setColor(getResources().getColor(mColorEvents[0]));
RectF rectF = new RectF(xPos - 5, getHeight() / 2 + 20, xPos + 5, getHeight() / 2 + 30);
canvas.drawRoundRect(rectF, RADIUS, RADIUS, mPaintBackgroundToday);
}
}
private boolean isToday(long millis) {
Calendar cal1 = Calendar.getInstance();
return isSameDay(cal1.getTimeInMillis(), millis);
}
public void setDate(long millis) {
this.millis = millis;
setTag(millis);
}
public void setDayOfWeek(int dayOfWeek) {
this.dayOfWeek = dayOfWeek;
isStaticText = true;
}
public void setEvent(int... resid) {
hasEvent = true;
mColorEvents = resid;
}
public boolean isSameDay(long millis1, long millis2) {
Calendar cal1 = Calendar.getInstance();
Calendar cal2 = Calendar.getInstance();
cal1.setTimeInMillis(millis1);
cal2.setTimeInMillis(millis2);
Log.d("hatti.calendar", "" + cal1.get(Calendar.YEAR) + "" + cal1.get(Calendar.MONTH) + "" + cal1.get(Calendar.DATE) + " VS " +
cal2.get(Calendar.YEAR) + "" + cal2.get(Calendar.MONTH) + "" + cal2.get(Calendar.DATE));
return (cal1.get(Calendar.YEAR) == cal2.get(Calendar.YEAR) && cal1.get(Calendar.MONTH) == cal2.get(Calendar.MONTH) && cal1.get(Calendar.DATE) == cal2.get(Calendar.DATE));
}
public boolean isStaticText() {
return isStaticText;
}
}
Is there anything I should do for add Fragment on Adapter?
in your pager adapter,
#Override
public int getItemPosition(Object object) {
return POSITION_NONE;
}
I am trying to develop custom progress bar or view, where I can pass in section value and it will create a section in that and then I will fill as per my requirements.
I tired Progress bar with divider but it not in round one ..
Looking for some thing like this
Edit:-
i have edited code as per my need but it not able to do like given image
public class DashedCircularProgress extends RelativeLayout {
public DashedCircularProgress(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}
public DashedCircularProgress(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs);
}
/**
* All the children must have a max height and width, never bigger than the internal circle
*
* #param changed
* #param left
* #param top
* #param right
* #param bottom
*/
#Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
final int count = getChildCount();
int maxWidth = getWidth() / 2;
int maxHeight = getHeight() / 2;
for (int i = 0; i < count; i++) {
final View child = getChildAt(i);
int mesaureWidth = child.getMeasuredWidth();
int measureHeight = child.getMeasuredWidth();
ViewGroup.LayoutParams layoutParams = child.getLayoutParams();
child.setTranslationY(padingTop);
RelativeLayout.LayoutParams relativeLayoutParams =
(RelativeLayout.LayoutParams) child.getLayoutParams();
relativeLayoutParams.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);
child.setLayoutParams(relativeLayoutParams);
if (mesaureWidth > maxWidth) {
layoutParams.width = maxWidth;
}
if (measureHeight > maxHeight) {
layoutParams.height = maxHeight;
}
}
}
private void init(Context context, AttributeSet attributeSet) {
setWillNotDraw(false);
TypedArray attributes = context.obtainStyledAttributes(attributeSet,
R.styleable.DashedCircularProgress);
initAttributes(attributes);
initPainters();
initValueAnimator();
}
private void initAttributes(TypedArray attributes) {
externalColor = attributes.getColor(R.styleable.DashedCircularProgress_external_color,
externalColor);
internalBaseColor = attributes.getColor(R.styleable.DashedCircularProgress_base_color,
internalBaseColor);
progressColor = attributes.getColor(R.styleable.DashedCircularProgress_progress_color,
progressColor);
max = attributes.getFloat(R.styleable.DashedCircularProgress_max, max);
duration = attributes.getInt(R.styleable.DashedCircularProgress_duration, duration);
}
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
progressPainter.onSizeChanged(h, w);
// externalCirclePainter.onSizeChanged(h, w);
internalCirclePainter.onSizeChanged(h, w);
//iconPainter.onSizeChanged(h, w);
animateValue();
}
private void initPainters() {
progressPainter = new ProgressPainterImp(progressColor, min, max);
//externalCirclePainter = new ExternalCirclePainterImp(externalColor);
internalCirclePainter = new InternalCirclePainterImp(internalBaseColor);
//iconPainter = new IconPainter(image);
}
private void initValueAnimator() {
valueAnimator = new ValueAnimator();
valueAnimator.setInterpolator(interpolator);
valueAnimator.addUpdateListener(new ValueAnimatorListenerImp());
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//externalCirclePainter.draw(canvas);
internalCirclePainter.draw(canvas);
progressPainter.draw(canvas);
//iconPainter.draw(canvas);
invalidate();
}
public void setValue(float value) {
this.value = value;
if (value <= max || value >= min) {
animateValue();
}
}
private void animateValue() {
if (valueAnimator != null) {
valueAnimator.setFloatValues(last, value);
valueAnimator.setDuration(duration);
valueAnimator.start();
}
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec + heightNormalittation);
}
public void setOnValueChangeListener(OnValueChangeListener valueChangeListener) {
this.valueChangeListener = valueChangeListener;
}
public void setInterpolator(Interpolator interpolator) {
this.interpolator = interpolator;
if (valueAnimator != null) {
valueAnimator.setInterpolator(interpolator);
}
}
public float getMin() {
return min;
}
public void setMin(float min) {
this.min = min;
progressPainter.setMin(min);
}
public float getMax() {
return max;
}
public void setMax(float max) {
this.max = max;
progressPainter.setMax(max);
}
private class ValueAnimatorListenerImp implements ValueAnimator.AnimatorUpdateListener {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
Float value = (Float) valueAnimator.getAnimatedValue();
progressPainter.setValue(value);
if (valueChangeListener != null) {
valueChangeListener.onValueChange(value);
}
last = value;
}
}
public interface OnValueChangeListener {
void onValueChange(float value);
}
public void setIcon(int drawable) {
}
public void reset() {
last = min;
}
public int getProgressColor() {
return progressColor;
}
public void setProgressColor(int progressColor) {
this.progressColor = progressColor;
progressPainter.setColor(progressColor);
}
public int getInternalBaseColor() {
return internalBaseColor;
}
public void setInternalBaseColor(int internalBaseColor) {
this.internalBaseColor = internalBaseColor;
internalCirclePainter.setColor(progressColor);
}
public int getExternalColor() {
return externalColor;
}
public void setExternalColor(int externalColor) {
this.externalColor = externalColor;
// externalCirclePainter.setColor(externalColor);
}
public int getDuration() {
return duration;
}
public void setDuration(int duration) {
this.duration = duration;
}
}
I would like to know if there is any simple solution to creating an overlay where an element would get highlighted.
So the final result would look something like this:
I would like to avoid using ShowcaseViewLibrary from variety of reason (it doesn't have the look I need, it's no longer supported etc.).
I thought about using FrameLayout but I am not sure how to achieve the highlighted existing element. Also putting the arrows or bubbles to the elements so they connect precisely.
A quick and easy way would be to make a copy of the Activity you want to demonstrate with overlays added and just show that. It's what I do and it works fine.
/**
* Created by Nikola D. on 10/1/2015.
*/
#TargetApi(Build.VERSION_CODES.HONEYCOMB)
public class ShowCaseLayout extends ScrimInsetsFrameLayout {
private static final long DEFAULT_DURATION = 1000;
private static final int DEFAULT_RADIUS = 100;
private Paint mEmptyPaint;
private AbstractQueue<Pair<String, View>> mTargetQueue;
private int mLastCenterX = 600;
private int mLastCenterY = 100;
private ValueAnimator.AnimatorUpdateListener mAnimatorListenerX = new ValueAnimator.AnimatorUpdateListener() {
#TargetApi(Build.VERSION_CODES.HONEYCOMB)
#Override
public void onAnimationUpdate(ValueAnimator animation) {
mLastCenterX = (int) animation.getAnimatedValue();
setWillNotDraw(false);
postInvalidate();
}
};
private ValueAnimator.AnimatorUpdateListener mAnimatorListenerY = new ValueAnimator.AnimatorUpdateListener() {
#TargetApi(Build.VERSION_CODES.HONEYCOMB)
#Override
public void onAnimationUpdate(ValueAnimator animation) {
mLastCenterY = (int) animation.getAnimatedValue();
setWillNotDraw(false);
postInvalidate();
}
};
private ValueAnimator mCenterAnimatorX;
private ValueAnimator mCenterAnimatorY;
private boolean canRender = false;
private OnAttachStateChangeListener mAttachListener = new OnAttachStateChangeListener() {
#Override
public void onViewAttachedToWindow(View v) {
canRender = true;
}
#TargetApi(Build.VERSION_CODES.HONEYCOMB_MR1)
#Override
public void onViewDetachedFromWindow(View v) {
canRender = false;
removeOnAttachStateChangeListener(this);
}
};
private long mDuration = DEFAULT_DURATION;
private int mRadius = (int) DEFAULT_RADIUS;
private Interpolator mInterpolator = new LinearOutSlowInInterpolator();
private ValueAnimator mRadiusAnimator;
private ValueAnimator.AnimatorUpdateListener mRadiusAnimatorListener = new ValueAnimator.AnimatorUpdateListener() {
#TargetApi(Build.VERSION_CODES.HONEYCOMB)
#Override
public void onAnimationUpdate(ValueAnimator animation) {
mRadius = (int) animation.getAnimatedValue();
}
};
private TextView mDescriptionText;
private Button mGotItButton;
private OnClickListener mExternalGotItButtonlistener;
private OnClickListener mGotItButtonClickListener = new OnClickListener() {
#Override
public void onClick(View v) {
setNextTarget();
if (mExternalGotItButtonlistener != null) {
mExternalGotItButtonlistener.onClick(v);
}
}
};
private Animator.AnimatorListener mAnimatorSetListener = new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
setNextTarget();
invalidate();
//mDescriptionText.layout(mTempRect.left, mTempRect.bottom + mTempRect.bottom, mDescriptionText. );
}
};
private Rect mTempRect;
private Paint mBackgroundPaint;
private Bitmap bitmap;
private Canvas temp;
private int mStatusBarHeight = 0;
public ShowCaseLayout(Context context) {
super(context);
setupLayout();
}
public ShowCaseLayout(Context context, AttributeSet attrs) {
super(context, attrs);
setupLayout();
}
public ShowCaseLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
setupLayout();
}
public void setTarget(View target, String hint) {
mTargetQueue.add(new Pair<>(hint, target));
}
#TargetApi(Build.VERSION_CODES.JELLY_BEAN)
private void setupLayout() {
mTargetQueue = new LinkedBlockingQueue<>();
setWillNotDraw(false);
mBackgroundPaint = new Paint();
int c = Color.argb(127, Color.red(Color.RED), Color.blue(Color.RED), Color.green(Color.RED));
mBackgroundPaint.setColor(c);
mEmptyPaint = new Paint();
mEmptyPaint.setColor(Color.TRANSPARENT);
mEmptyPaint.setStyle(Paint.Style.FILL);
mEmptyPaint.setAntiAlias(true);
mEmptyPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
if (!ViewCompat.isLaidOut(this))
addOnAttachStateChangeListener(mAttachListener);
else canRender = true;
mDescriptionText = new TextView(getContext());
mGotItButton = new Button(getContext());
mGotItButton.setText("GOT IT");
mGotItButton.setOnClickListener(mGotItButtonClickListener);
addView(mGotItButton, generateDefaultLayoutParams());
//ViewCompat.setAlpha(this, 0.5f);
}
#Override
protected LayoutParams generateDefaultLayoutParams() {
return new FrameLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (!canRender) return;
temp.drawRect(0, 0, canvas.getWidth(), canvas.getHeight(), mBackgroundPaint);
temp.drawCircle(mLastCenterX, mLastCenterY, mRadius, mEmptyPaint);
canvas.drawBitmap(bitmap, 0, 0, null);
}
#TargetApi(Build.VERSION_CODES.M)
private void animateCenterToNextTarget(View target) {
int[] locations = new int[2];
target.getLocationInWindow(locations);
int x = locations[0];
int y = locations[1];
mTempRect = new Rect(x, y, x + target.getWidth(), y + target.getHeight());
int centerX = mTempRect.centerX();
int centerY = mTempRect.centerY();
int targetRadius = Math.abs(mTempRect.right - mTempRect.left) / 2;
targetRadius += targetRadius * 0.05;
mCenterAnimatorX = ValueAnimator.ofInt(mLastCenterX, centerX).setDuration(mDuration);
mCenterAnimatorX.addUpdateListener(mAnimatorListenerX);
mCenterAnimatorY = ValueAnimator.ofInt(mLastCenterY, centerY).setDuration(mDuration);
mCenterAnimatorY.addUpdateListener(mAnimatorListenerY);
mRadiusAnimator = ValueAnimator.ofInt(mRadius, targetRadius);
mRadiusAnimator.addUpdateListener(mRadiusAnimatorListener);
playTogether(mCenterAnimatorY, mCenterAnimatorX, mRadiusAnimator);
}
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
bitmap.eraseColor(Color.TRANSPARENT);
temp = new Canvas(bitmap);
}
#TargetApi(Build.VERSION_CODES.HONEYCOMB)
private void playTogether(ValueAnimator... animators) {
AnimatorSet set = new AnimatorSet();
set.setInterpolator(mInterpolator);
set.setDuration(mDuration);
set.playTogether(animators);
set.addListener(mAnimatorSetListener);
set.start();
}
public void start(Activity activity) {
if (getParent() == null) {
attachLayoutToWindow(activity);
}
setNextTarget();
}
private void setNextTarget() {
Pair<String, View> pair = mTargetQueue.poll();
if (pair != null) {
if (pair.second != null)
animateCenterToNextTarget(pair.second);
mDescriptionText.setText(pair.first);
}
}
private void attachLayoutToWindow(Activity activity) {
FrameLayout rootLayout = (FrameLayout) activity.findViewById(android.R.id.content);
rootLayout.addView(this);
}
public void hideShowcaseLayout() {
}
public void setGotItButtonClickistener(OnClickListener mExternalGotItButtonlistener) {
this.mExternalGotItButtonlistener = mExternalGotItButtonlistener;
}
public TextView getDescriptionTextView() {
return mDescriptionText;
}
public void setDescriptionTextView(TextView textView) {
mDescriptionText = textView;
}
}
Please note that this code is incomplete and is under development, you should tweak it according your needs.
This layout will draw a circle around the View over its Rect.
Instead of drawing the circle you could drawRect to the Rect bounds of the target view or drawRoundRect if the View's Rect and background drawable Rect are complementary.
Drawing the line (drawLine()) should be from the target view:
startX = (rect.right - rect.left)/2;
startY = rect.bottom;
endX = startX;
endY = startY + arbitraryLineHeight;
if the endY is larger than the layout height you should be drawing it upwards rect.top - arbitraryLineHeight, otherwise you draw it as it is.
arbitraryLineHeight could be descriptionViewRect.top which makes it more dynamic, instead of using a constant value.