Custom View – Circular view fills bottom to top like water – part2(5 parts)

Hi, this is part 2, while searching for a requirement I came across this at SO post. This is attractive, and thought why not I can make a view like this. It is nothing but view which fills from bottom to top like water fills in a container.
Screenshot_2014-09-27-19-52-18Do you like it?! concept behind is same as this view.

1) After extending a View class, I believe methods executed in following order(correct me if I am wrong!)
Constructor(with Context) -> Constructor(with Context and AttributeSet)(a special constructor gets executed when layout is inflated) -> onSizeChanged() etc…

2) More about onSizeChanged()

@Override
	protected void onSizeChanged(int w, int h, int oldw, int oldh) {
		super.onSizeChanged(w, h, oldw, oldh);
		
		centerPoint.x = getWidth() / 2;
		centerPoint.y = getHeight() / 2;
		
		radius = Math.min(getWidth(), getHeight()) / 2;
		circleRect.set(centerPoint.x - radius, centerPoint.y - radius, centerPoint.x + radius, centerPoint.y + radius);
		
		setPaths();
	}

x,y co ordinates marks to the middle of the screen and radius is decided based on minimum of width and height of screen(in order to fit both in portrait and landscape mode). A rect is set with left,top,right,bottom co ordinate values and then setPaths(setting x,y,startAngle and sweepAngle to Path).

3) Here is setPaths()

private void setPaths() {
		
		float y = centerPoint.y + radius - (2 * radius * value / 100 - 1);
        float x = centerPoint.x - (float) Math.sqrt(Math.pow(radius, 2) - Math.pow(y - centerPoint.y, 2));

        float angle = (float) Math.toDegrees(Math.atan((centerPoint.y - y) / (x - centerPoint.x)));
        float startAngle = 180 - angle;
        float sweepAngle = 2 * angle - 180;

        mPath.rewind();
        mPath.addArc(circleRect, startAngle, sweepAngle);
        mPath.close();
	}

where mPath – instance of Path,circleRect – a rect. I am trying to understand the maths behind this.

4) Inside onDraw() path and circle needs to be drawn.

@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		
		mPaint.setDither(true);
		mPaint.setColor(Color.LTGRAY);
		mPaint.setStyle(Paint.Style.STROKE);
		mPaint.setStrokeWidth(15);
		
		mFillPaint.setColor(Color.parseColor("#33b5e5"));
		mFillPaint.setStyle(Paint.Style.FILL_AND_STROKE);
		mFillPaint.setStrokeWidth(5);
		
		canvas.drawPath(mPath,mFillPaint);
		canvas.drawCircle(centerPoint.x, centerPoint.y, radius, mPaint);
	}

5) And hence from Activity call this method at regular interval of time. This method sets the value, path and invalidates the view.

//	values to be sent from activity
	public void setFillValue(int value) {
		adjustValues(value);
		setPaths();
		invalidate();
	}

6) A runnable in Activity is as below,

Runnable runnable = new Runnable() {
		
		@Override
		public void run() {
			if(value <= 60){
				((TextView) findViewById(R.id.percentText)).setText(String.valueOf(value));
				bottomTopCircularView.setFillValue(value++);
				myHandler.postDelayed(this, 20);
			}
		}
	};

For source code github.

Enjoy! and Happy coding !!

Advertisements

Embedding Video in an Android app!

I was in need of embedding video in an app. Its pretty simple refer this.
Go ahead with my blog or else refer the link provided.
1) Create a res/raw/ folder
2) Paste video inside raw/ folder.
3) Create a layout file activity_main.xml

<RelativeLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.wordpress.smdaudhilbe.aembeddingvideoinapp.MainActivity"
    tools:ignore="MergeRootFrame" >

    <VideoView
        android:id="@+id/videoView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" />

</RelativeLayout>

4)

public class MainActivity extends Activity {

	private VideoView videoView;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		videoView = (VideoView)findViewById(R.id.videoView1);
		
//    refer Video
		String fileName = "android.resource://" + getPackageName() + "/" + R.raw.moto_x_review_2014;
		videoView.setVideoURI(Uri.parse(fileName));

//    start video
		videoView.start();
	}
}

Here screenshots,

Screenshot_2014-09-23-20-03-09

and
Screenshot_2014-09-23-20-03-46

Thats it! no need of any special permissions in manifest at all.
Source code is available at github.
Enjoy! Happy Coding!!!

CustomView – Circular ring which rotates based on given percentage – part 1(5 parts)

Hi, Welcome to part 1, Again after sometime in one of my project there was need to implement a circular view that increases its size based on the given percentage something like this discussed in SO. After a lot of research I made a widget (custom view) what I exactly needed. Here am going to discuss that in short and simple way.

1) extend a View class

public class CustomCircularRingView extends View

2) inside onDraw(), draw a gray circle as below

// Thin circle
canvas.drawCircle(width / 2, height / 2, radius, mPaint);

3) set four sides of created rect as below

// Thin circle
box.set(getWidth() / 2 - radius, getHeight() / 2 - radius, getWidth() / 2 + radius, getHeight() / 2 + radius);

4) set sweep angle and draw an arc as given below

float sweep = 360 * percent * 0.01f;
canvas.drawArc(box, 90, sweep, false, mPaint);

So simple, only trick is changing the “percent” variable at regular intervals.

5) method which changes the “percent” periodically is

public void changePercentage(int value) {
actualPercent = value;
}

I made periodic calls to this method from MainActivity by putting it inside a runnable as like below,

Runnable runnable = new Runnable() {

@Override
public void run() {

if (percent <= 80) {
((TextView) findViewById(R.id.percentText)).setText(String.valueOf(percent));
myView.changePercentage(percent++);
myView.invalidate();
handler.postDelayed(this, 10);
}
}
};

You can get source code of this project at gitHub.
Screen shot
Screenshot_2014-09-15-18-18-56

 

Stay tune for part 2 very soon.

Enjoy! Happy coding..!