Adaptative radius on CardView - java

I have a problem , I hope you will bring me some informations.
In order to have a circular VideoView , I put it in a CardView
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/cardVideo"
app:cardCornerRadius="180dp"
android:background="#000">
<com.twilio.video.VideoView
android:id="#+id/videoView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="visible" />
</android.support.v7.widget.CardView>
But the problem is that I'm building my application on multiple tablet and the cardCornerRadius isn't adapted to screen size , 180dp is too big for a 8 inch tablet so my VideoView appears in DIAMONDS see :
and for example in a 10 inch tablet it's a perfect circle :
I tried to get device inches programmatically and use setRadius() depend on it but it's not perfect and I don't think that it's the correct way.
What can I do to find the good corner radius adapted to tablet ? Thanks

Ok, I found your answer:
Add this class in your project
package com.example.myapplication;
import android.content.Context;
import android.graphics.*;
import android.util.AttributeSet;
import android.widget.FrameLayout;
public class RoundedCornerLayout extends FrameLayout {
private Path path = new Path();
public RoundedCornerLayout(Context context) {
super(context);
}
public RoundedCornerLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public RoundedCornerLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
// compute the path
float halfWidth = w / 2f;
float halfHeight = h / 2f;
float centerX = halfWidth;
float centerY = halfHeight;
path.reset();
path.addCircle(centerX, centerY, Math.min(halfWidth, halfHeight), Path.Direction.CW);
path.close();
}
#Override
protected void dispatchDraw(Canvas canvas) {
int save = canvas.save();
canvas.clipPath(path);
super.dispatchDraw(canvas);
canvas.restoreToCount(save);
}
}
and put your VideoView inside it. like here :
<com.example.myapplication.RoundedCornerLayout
android:layout_width="100dp"
android:layout_height="100dp">
// place your VideoView
<ImageView
android:layout_width="match_parent"
android:src="#color/colorPrimary"
android:layout_height="match_parent"/>
</com.example.myapplication.RoundedCornerLayout>
references : 1 2

Related

Custom circular image progress bar with transparent background

I have circular picture of timer:
I want to create circular progress bar which would consist of this picture, which would make it slowly empty like a clock until full disappearance (like an animation).
for example, after half of the time I will define it's appear as:
Right now I'm doing it in this way:
I put the timer image as image on the screen, and over it I put regular circle progress bar with color as the background color which hides the image (and so I get the desired effect).
but now I have problem when I have few colors in the background of the app, because I can't to make the progress bar with the same color as the background, so I looking for new way to make it, like custom progress bar that consist from the timer image with transparent background.
please help me how to change my code to get it:
ProgressBar XML:
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:progress="100"
android:rotation="90"
style="?android:progressBarStyleHorizontal"
android:progressDrawable="#drawable/prog_blue"/>
Prog_blue (the drawable of the progressBar) - blue is the background color of the app:
<?xml version="1.0" encoding="utf-8"?>
<scale
android:fromDegrees="270"
android:pivotX="50%"
android:pivotY="50%"
xmlns:android="http://schemas.android.com/apk/res/android">
<shape
android:shape="ring"
android:innerRadiusRatio="2.7"
android:thickness="23dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#color/prog_blue"
android:endColor="#color/prog_blue"
android:type="sweep"
android:useLevel="false"/>
</shape>
</scale>
you can create custom View To achieve that
here My Code :
ClockProgressBar.java
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
public class ClockProgressBar extends View {
Paint tickPaint;
private int shortTickLen=10;
private int longTickLen=20;
private int finalWidth=0;
private int finalHeight=0;
private int r=0;
private Path ticksPath;
int tickNumbers=60;
private ValueAnimator animator;
public ClockProgressBar(Context context) {
super(context);
ini();
}
public ClockProgressBar(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
ini();
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
drawIntervals(canvas);
}
void drawIntervals(Canvas canvas){
double cX = getX()+finalWidth/2;
double cY = getY()+finalHeight/2;
ticksPath=new Path();
for ( int i=1; i<= tickNumbers; i++){
int len = shortTickLen;
if ( i % 15 == 0 ){
len = longTickLen;
}else if ( i % 5 == 0 ){
len = longTickLen;
}
double di = (double)i;
double angleFrom12 = di/60.0*2.0*Math.PI;
double angleFrom3 = Math.PI/2.0-angleFrom12;
ticksPath.moveTo(
(float)(cX+Math.cos(angleFrom3)*r),
(float)(cY-Math.sin(angleFrom3)*r)
);
ticksPath.lineTo(
(float)(cX+Math.cos(angleFrom3)*(r-len)),
(float)(cY-Math.sin(angleFrom3)*(r-len))
);
}
canvas.drawPath(ticksPath,tickPaint);
}
void ini(){
tickPaint=new Paint();
tickPaint.setStrokeCap(Paint.Cap.BUTT);
tickPaint.setStrokeJoin(Paint.Join.ROUND);
tickPaint.setAntiAlias(true);
tickPaint.setStyle(Paint.Style.STROKE);
tickPaint.setStrokeWidth(8);
tickPaint.setStrokeMiter(2f);
tickPaint.setColor(Color.BLACK);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
finalWidth = getMeasuredWidth() / 2;
finalHeight = getMeasuredWidth() / 2;
r = (finalWidth / 2);
setMeasuredDimension(finalWidth, finalHeight );
}
public void startAnimation(){
animator = ValueAnimator.ofInt(60, 0);
animator.setDuration(5000);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
public void onAnimationUpdate(ValueAnimator animation) {
tickNumbers= (int) animation.getAnimatedValue();
invalidate();
}
});
animator.setRepeatCount(Integer.MAX_VALUE);
animator.start();
}
public void stopAnimation(){
if (animator!=null){
animator.cancel();
}
setVisibility(GONE);
}
}
and use it in xml
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<<Your Package Name>.ClockProgressBar
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/progress"/>
</LinearLayout>
and call it in you activity and use startAnimation() and stopAnimation() to show and dismiss the View
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ClockProgressBar progressBar=findViewById(R.id.progress);
progressBar.startAnimation();
}
}
final result:
hope it helps

How to show 2 camera preview side by side?[For cardboard apps]

I am trying to build a Cardboard android application that shows 2 camera view side by side.
[Just like the camera view works for VRCinema Android app.]
So I studies the Cardboard code from GitHub, made some modification and so far I am able to use the imageView to replicate the same image side by side.
and the Code so far looks like this.
AndroidManifest.XML
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.google.vrtoolkit.cardboard.samples.treasurehunt" >
<uses-permission android:name="android.permission.NFC" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-feature android:name="android.hardware.camera" android:required="false" />
<uses-feature android:name="android.hardware.camera.autofocus" android:required="false" />
<uses-feature android:name="android.hardware.camera.front" android:required="false" />
<uses-sdk android:minSdkVersion="14"/>
<uses-feature android:glEsVersion="0x00020000" android:required="true" />
<application
android:allowBackup="true"
android:icon="#drawable/ic_launcher"
android:label="#string/app_name" >
<activity
android:screenOrientation="landscape"
android:name=".MainActivity"
android:label="#string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
common_ui.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ui_layout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<com.google.vrtoolkit.cardboard.CardboardView
android:id="#+id/cardboard_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true" />
<com.google.vrtoolkit.cardboard.samples.treasurehunt.CardboardOverlayView
android:id="#+id/overlay"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_centerInParent="true" />
</RelativeLayout>
CardboardOverlayView.java
package com.google.vrtoolkit.cardboard.samples.treasurehunt;
import android.content.Context;
import android.graphics.Color;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
/**
* Contains two sub-views to provide a simple stereo HUD.
*/
public class CardboardOverlayView extends LinearLayout {
private static final String TAG = CardboardOverlayView_bkp1.class.getSimpleName();
private final CardboardOverlayEyeView mLeftView;
private final CardboardOverlayEyeView mRightView;
private AlphaAnimation mTextFadeAnimation;
public CardboardOverlayView(Context context, AttributeSet attrs) {
super(context, attrs);
setOrientation(HORIZONTAL);
LayoutParams params = new LayoutParams(
LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT, 1.0f);
params.setMargins(0, 0, 0, 0);
mLeftView = new CardboardOverlayEyeView(context, attrs);
mLeftView.setLayoutParams(params);
addView(mLeftView);
mRightView = new CardboardOverlayEyeView(context, attrs);
mRightView.setLayoutParams(params);
addView(mRightView);
// Set some reasonable defaults.
setDepthOffset(0.016f);
setColor(Color.rgb(150, 255, 180));
setVisibility(View.VISIBLE);
mTextFadeAnimation = new AlphaAnimation(1.0f, 0.0f);
mTextFadeAnimation.setDuration(5000);
}
public void show3DToast(String message) {
setText(message);
setTextAlpha(1f);
mTextFadeAnimation.setAnimationListener(new EndAnimationListener() {
#Override
public void onAnimationEnd(Animation animation) {
setTextAlpha(0f);
}
});
startAnimation(mTextFadeAnimation);
}
public void show3DImage() {
setImg();
}
private abstract class EndAnimationListener implements Animation.AnimationListener {
#Override public void onAnimationRepeat(Animation animation) {}
#Override public void onAnimationStart(Animation animation) {}
}
private void setDepthOffset(float offset) {
mLeftView.setOffset(offset);
mRightView.setOffset(-offset);
}
//---------------------------------------------------------------------------------------------
private void setImg(){
mLeftView.imageView.setImageResource(R.drawable.mona_lisa);
mRightView.imageView.setImageResource(R.drawable.mona_lisa);
}
//------------------------------------------------------------------------------------------
private void setText(String text) {
mLeftView.setText(text);
mRightView.setText(text);
}
private void setTextAlpha(float alpha) {
mLeftView.setTextViewAlpha(alpha);
mRightView.setTextViewAlpha(alpha);
}
private void setColor(int color) {
mLeftView.setColor(color);
mRightView.setColor(color);
}
/**
* A simple view group containing some horizontally centered text underneath a horizontally
* centered image.
*
* This is a helper class for CardboardOverlayView.
*/
private class CardboardOverlayEyeView extends ViewGroup {
private final ImageView imageView;
private final TextView textView;
private float offset;
public CardboardOverlayEyeView(Context context, AttributeSet attrs) {
super(context, attrs);
imageView = new ImageView(context, attrs);
imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
imageView.setAdjustViewBounds(true); // Preserve aspect ratio.
addView(imageView);
textView = new TextView(context, attrs);
textView.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 14.0f);
textView.setTypeface(textView.getTypeface(), Typeface.BOLD);
textView.setGravity(Gravity.CENTER);
textView.setShadowLayer(3.0f, 0.0f, 0.0f, Color.DKGRAY);
addView(textView);
}
public void setColor(int color) {
//imageView.setColorFilter(color);
textView.setTextColor(color);
}
public void setText(String text) {
textView.setText(text);
}
public void setTextViewAlpha(float alpha) {
textView.setAlpha(alpha);
}
public void setOffset(float offset) {
this.offset = offset;
}
#Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
// Width and height of this ViewGroup.
final int width = right - left;
final int height = bottom - top;
// The size of the image, given as a fraction of the dimension as a ViewGroup. We multiply
// both width and heading with this number to compute the image's bounding box. Inside the
// box, the image is the horizontally and vertically centered.
final float imageSize = 1.0f;
// The fraction of this ViewGroup's height by which we shift the image off the ViewGroup's
// center. Positive values shift downwards, negative values shift upwards.
final float verticalImageOffset = -0.07f;
// Vertical position of the text, specified in fractions of this ViewGroup's height.
final float verticalTextPos = 0.52f;
// Layout ImageView
float imageMargin = (1.0f - imageSize) / 2.0f;
float leftMargin = (int) (width * (imageMargin + offset));
float topMargin = (int) (height * (imageMargin + verticalImageOffset));
imageView.layout(
(int) leftMargin, (int) topMargin,
(int) (leftMargin + width * imageSize), (int) (topMargin + height * imageSize));
// Layout TextView
leftMargin = offset * width;
topMargin = height * verticalTextPos;
textView.layout(
(int) leftMargin, (int) topMargin,
(int) (leftMargin + width), (int) (topMargin + height * (1.0f - verticalTextPos)));
}
}
}
MainActivity.Java
package com.google.vrtoolkit.cardboard.samples.treasurehunt;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.content.pm.PackageManager;
import android.graphics.Bitmap;
import android.hardware.Camera;
import android.net.Uri;
import android.os.Bundle;
import android.os.Vibrator;
import android.util.Log;
import android.widget.ImageView;
import com.google.vrtoolkit.cardboard.*;
import javax.microedition.khronos.egl.EGLConfig;
import java.nio.FloatBuffer;
/**
* A Cardboard sample application.
*/
public class MainActivity extends CardboardActivity implements CardboardView.StereoRenderer {
private static final int CAMERA_REQUEST = 1888;
private static final String TAG = "MainActivity";
private static final int CAPTURE_IMAGE_ACTIVITY_REQ = 0;
Uri fileUri = null;
ImageView photoImage = null;
private static final float CAMERA_Z = 0.01f;
private static final float TIME_DELTA = 0.3f;
private static final float YAW_LIMIT = 0.12f;
private static final float PITCH_LIMIT = 0.12f;
// We keep the light always position just above the user.
private final float[] mLightPosInWorldSpace = new float[]{0.0f, 2.0f, 0.0f, 1.0f};
private final float[] mLightPosInEyeSpace = new float[4];
private static final int COORDS_PER_VERTEX = 3;
private final WorldLayoutData DATA = new WorldLayoutData();
private FloatBuffer mFloorVertices;
private FloatBuffer mFloorColors;
private FloatBuffer mFloorNormals;
private FloatBuffer mCubeVertices;
private FloatBuffer mCubeColors;
private FloatBuffer mCubeFoundColors;
private FloatBuffer mCubeNormals;
private int mGlProgram;
private int mPositionParam;
private int mNormalParam;
private int mColorParam;
private int mModelViewProjectionParam;
private int mLightPosParam;
private int mModelViewParam;
private int mModelParam;
private int mIsFloorParam;
private float[] mModelCube;
private float[] mCamera;
private float[] mView;
private float[] mHeadView;
private float[] mModelViewProjection;
private float[] mModelView;
private float[] mModelFloor;
private int mScore = 0;
private float mObjectDistance = 12f;
private float mFloorDepth = 20f;
private Vibrator mVibrator;
private CardboardOverlayView mOverlayView;
public MainActivity() {
}
/**
* Sets the view to our CardboardView and initializes the transformation matrices we will use
* to render our scene.
* //#param savedInstanceState
*/
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.common_ui);
CardboardView cardboardView = (CardboardView) findViewById(R.id.cardboard_view);
cardboardView.setRenderer(this);
setCardboardView(cardboardView);
mModelCube = new float[16];
mCamera = new float[16];
mView = new float[16];
mModelViewProjection = new float[16];
mModelView = new float[16];
mModelFloor = new float[16];
mHeadView = new float[16];
mVibrator = (Vibrator) getSystemService(Context.VIBRATOR_SERVICE);
mOverlayView = (CardboardOverlayView) findViewById(R.id.overlay);
mOverlayView.show3DToast("Pull the magnet when you find an object.");
mOverlayView.show3DImage();
}
#Override
public void onRendererShutdown(){Log.i(TAG, "onRendererShutdown");
}
#Override
public void onSurfaceChanged(int width, int height) {
Log.i(TAG, "onSurfaceChanged");
}
/**
* Creates the buffers we use to store information about the 3D world. OpenGL doesn't use Java
* arrays, but rather needs data in a format it can understand. Hence we use ByteBuffers.
*
* #param config The EGL configuration used when creating the surface.
*/
#Override
public void onSurfaceCreated(EGLConfig config) {
Log.i(TAG, "onSurfaceCreated");
}
/**
* Prepares OpenGL ES before we draw a frame.
*
* #param headTransform The head transformation in the new frame.
*/
#Override
public void onNewFrame(HeadTransform headTransform) {
}
/**
* Draws a frame for an eye. The transformation for that eye (from the camera) is passed in as
* a parameter.
*
* #param transform The transformations to apply to render this eye.
*/
#Override
public void onDrawEye(EyeTransform transform) {
}
#Override
public void onFinishFrame(Viewport viewport) {
}
}
Points I have noticed:
I don't want an intent, I need the camera preview so that later I can
do other things with it like taking a picture.
If I try to replace the imageView with surfaceView I hit an error "rendering problem class could not be found : CardboardOverlayView.java" in common_ui.xml. But the file is there and it's a known and reported bug.
The other way I can think of doing it is capture and save image every second and update 2 image view's with the image. However I'm
not sure if that's the right way to do it or how to do it.
I have also checked all the links that are available in stack overflow since last 3 days. The closest to my question was Android multuple camera preview - but it's not quite exactly solves my question.
I have also gone through the Android - Camera documentation and learned about how they are using cameraPreview and surfaceView.
So my question is what do I need to do now to be able to see the CameraPreview [or the surfaceView that holds the CameraPreview] instead of the Imageview so that I cam provide live camera feed like a split screen in landscape mode?
I hope the question is detailed enough.Still if you need any further info, just ask.
Basically you need to draw the camera into an OpenGL texture and show the texture.
I wrote two versions of this here, feel free to modify the code and add pull requests:
https://github.com/Sveder/CardboardPassthrough
I updated #Mikle code to work with the new GoogleVR SDK:
https://github.com/SalahEddin/DJI-Vision/commit/45fe28302d96ef4b1cd07472997d9feb1da5d009

Canvas not update even I called invalidate()?

I want to create a custom view that animates some lines. so I created a class that extends View class. I called onDraw() & drawn on the canvas.
Here are some codes that I've approached so far.
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
p += 10;
canvas.drawLine(5, 5, p, 5, mPaint);
invalidate();
}
note that p & mPaint are instantiated at the constructor.
but, even I called invalidate() method, it doesn't update the canvas, i.e. doesn't animate the line.
so, how to solve this?
Are you sure it's not drawing? What colour is your Paint object?
I created a blank 4.4 android application, added this class:
package ca.kieve.playground;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
public class AnimView extends View {
private int p = 0;
private Paint mPaint;
public AnimView(Context context) {
super(context);
init();
}
public AnimView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
mPaint = new Paint();
mPaint.setColor(Color.RED);
mPaint.setStrokeWidth(10);
}
#Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
p += 1;
canvas.drawLine(5, 5, p, 5, mPaint);
invalidate();
}
}
and changed the activity_main.xml to this:
<RelativeLayout 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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="ca.kieve.playground.MainActivity" >
<ca.kieve.playground.AnimView
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
This draws with no issues.
remove
invalidate() form onDraw().
use
inavalidate() while you have done with your changes.

How to get a button to work with view in android [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have been trying to add a erase function to this drawing app. I was planning on it just simpily drawing white over where you move your finger. For some reason i cannot get the button to work. If i can get this button to work I will be able to add more colors ect.
(i have not done anything with Mainactivity)
package com.example.draw;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.os.Bundle;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
public class MainDrawingView extends View
{
private Paint paint = new Paint();
private boolean erase;
private Path path = new Path();
Button aButton;
public MainDrawingView(Context context, AttributeSet attrs)
{
super(context, attrs);
paint.setAntiAlias(true);
paint.setStrokeWidth(5f);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeJoin(Paint.Join.ROUND);
aButton = (Button) this.findViewById(R.id.button1);
aButton.setOnClickListener(new OnClickListener()
{
public void onClick(View v)
{
erase = !erase;
}
});
}
#Override
protected void onDraw(Canvas canvas)
{
canvas.drawPath(path, paint);
}
public boolean onTouchEvent(MotionEvent event)
{
if(erase) paint.setColor(Color.WHITE);
else paint.setColor(Color.BLACK);
// Get the coordinates of the touch event.
float eventX = event.getX();
float eventY = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// Set a new starting point
path.moveTo(eventX, eventY);
return true;
case MotionEvent.ACTION_MOVE:
// Connect the points
path.lineTo(eventX, eventY);
break;
default:
return false;
}
// Makes our view repaint and call onDraw
invalidate();
return true;
}
}
Activity_main<
<FrameLayout 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:background="#ffffff"
tools:context="com.example.draw.FullscreenActivity">
<!-- This is the view on which we will draw. -->
<view
android:layout_width="match_parent"
android:layout_height="match_parent"
class="com.example.draw.MainDrawingView"
android:id="#+id/single_touch_view"
android:layout_gravity="left|top"
android:background="#ffffff" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</FrameLayout>
It seems like your problem is that you're using the wrong types. Your erase variable is of type Paint:
private Paint erase = new Paint();
But in your code you're treating it like an int that represents a boolean.
if(erase != 0) { paint.setColor(Color.BLACK); }
if(erase == 0) { paint.setColor(Color.WHITE); }
...
erase = 1;
Secondly, you're never actually setting the onClickListener for your button. Also, the logic to set the color should all be moved into either your onTouch or the onClick method. You really should have:
public class MainDrawingView extends View
{
private Paint paint = new Paint();
private boolean erase;
private Path path = new Path();
Button aButton;
public MainDrawingView(Context context, AttributeSet attrs)
{
super(context, attrs);
paint.setAntiAlias(true);
paint.setStrokeWidth(5f);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeJoin(Paint.Join.ROUND);
aButton = (Button) this.findViewById(R.id.button1);
aButton.setOnClickListener(new OnClickListener()
{
public void onClick(View v)
{
erase = !erase;
}
});
}
#Override
protected void onDraw(Canvas canvas)
{
canvas.drawPath(path, paint);
}
public boolean onTouchEvent(MotionEvent event)
{
if(erase) paint.setColor(Color.WHITE);
else paint.setColor(Color.BLACK);
// Get the coordinates of the touch event.
float eventX = event.getX();
float eventY = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// Set a new starting point
path.moveTo(eventX, eventY);
return true;
case MotionEvent.ACTION_MOVE:
// Connect the points
path.lineTo(eventX, eventY);
break;
default:
return false;
}
// Makes our view repaint and call onDraw
invalidate();
return true;
}
}
It is possible that your view is not being created with the following constructor
Context context, AttributeSet attrs
It might be using a different default constructor that you have not overridden. Then nothing would get setup and you would not get any click behavior that your expecting from your listener.
It looks like you do not have your onCreate(Bundle savedInstances) method setup to to add the listener correctly.

Passing a variable to a Custom View Class from Actvity

I am testing drawing audio frequency into canvas using canvas.drawLine() method. I am able to do static draw into canvas. Basically I have a test app which has two buttons START and STOP and a Canvas where i am trying to draw the audio frequencies obtained from FFT. When i hit the START button it starts recording sound using AudioRecord class and collects data into buffer which i run through FFT to get the frequencies. This is in very early stage. Right now i am only trying to figure out how to pass these frequency values to onDraw method of my Custom View class. Here are the relevent codes starting from the layout.
activity_main.xml
<RelativeLayout 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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<com.example.testapp.WaveForm
android:id="#+id/waveForm1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginTop="78dp" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button1"
android:layout_alignBottom="#+id/button1"
android:layout_alignRight="#+id/waveForm1"
android:layout_marginRight="19dp"
android:text="STOP" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/waveForm1"
android:layout_alignParentTop="true"
android:text="START" />
</RelativeLayout>
I think its very starighforward. Here is my Custom View class
WaveForm.java
package com.example.testapp;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
public class WaveForm extends View {
private Paint mLinePaint;
float x ;
float y;
public WaveForm(Context context, AttributeSet attrs) {
super(context, attrs);
mLinePaint = new Paint();
mLinePaint.setStyle(Paint.Style.STROKE);
mLinePaint.setARGB(255, 0, 0, 255);
mLinePaint.setAntiAlias(true);
mLinePaint.setStrokeWidth(10);
x = 0.0f;
y = 0.0f;
}
#Override
protected void onDraw(Canvas canvas) {
//Instead of 50 here i would like to pass the value obtained from the Activity class
canvas.drawLine(x, 0, y, 50, mLinePaint);
y = y + 1.0f;
x = x + 1.0f;
super.onDraw(canvas);
}
}
As i mentioned in the comment in the onDraw method, i would like to pass the frequency value i obtained in the Activity instead of 50.
Finally here is my Activity:
MainActivity.java
package com.example.testapp;
import android.app.Activity;
import android.graphics.Canvas;
import android.media.AudioFormat;
import android.media.AudioRecord;
import android.media.MediaRecorder.AudioSource;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
public class MainActivity extends Activity {
boolean recording = false;
AudioRecord audioRecord;
double[] x;
double[] y;
double currentPoint = 0;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final View myInstance = (View) findViewById(R.id.waveForm1);
Button start = (Button) findViewById(R.id.button1);
start.setOnClickListener(new OnClickListener(){
#Override
public void onClick(View v) {
int sampleRateInHz=44100;
int channelConfig = AudioFormat.CHANNEL_IN_MONO;
int bufferSizeInBytes = AudioRecord.getMinBufferSize(sampleRateInHz, channelConfig, AudioFormat.ENCODING_PCM_16BIT);
audioRecord = new AudioRecord(AudioSource.MIC, sampleRateInHz, channelConfig, AudioFormat.ENCODING_PCM_16BIT, AudioRecord.getMinBufferSize(sampleRateInHz, channelConfig, AudioFormat.ENCODING_PCM_16BIT));
byte[] audioData = new byte[bufferSizeInBytes/4];
FFT myFFT = new FFT(audioData.length);
Canvas canvas = new Canvas();
recording = true;
audioRecord.startRecording();
while(recording) {
audioRecord.read(audioData,0, bufferSizeInBytes/4);
//convert to double here
for(int i=0; i<audioData.length; i++) {
x[i] = (double)audioData[i];
y[i] = 0;
}
double[] samples = myFFT.fft(x, y);
for(int i=0; i<samples.length; i++) {
currentPoint = samples[i];
myInstance.draw(canvas);
myInstance.invalidate();
}
}
}
});
Button stop = (Button) findViewById(R.id.button2);
stop.setOnClickListener(new OnClickListener(){
#Override
public void onClick(View v) {
recording = false;
audioRecord.stop();
}
});
}
}
The currentPoint variable is what i am trying to pass to the onDraw method. Thanks in advance for taking a look.
Create Getter/Setter for currentPoint variable inside WaveForm to get value from MainActivity before calling draw as:
public class WaveForm extends View {
private double currentPoint = 50;
public void setCurrentPoint(double currentPoint){
this.currentPoint=currentPoint;
}
public double getCurrentPoint(){
return this.currentPoint;
}
#Override
protected void onDraw(Canvas canvas) {
canvas.drawLine(x, 0, y, getCurrentPoint(), mLinePaint);
...
}
}
and from MainActivity set currentPoint value by calling setCurrentPoint method before calling onDraw:
for(int i=0; i<samples.length; i++) {
currentPoint = samples[i];
myInstance.setCurrentPoint(currentPoint);
myInstance.draw(canvas);
myInstance.invalidate();
}
Specify currentPoint as a static variable, and use MainActivity.currentPoint to get the value of the variable from your other class. Alternatively, just use a getter method that returns the variable.

Categories