Android onAnimationEnd remove View (self) not removing - java

I'm trying to animate a card flip and then fling it away with an animation. For the most part I've completed that. The problem is I can't get the card to reliably be removed.
Question: How can I reliably delete a View after animation on it is complete? (also I'm using AnimationSet, so this may change things)
Here is what my code looks like.
flingCardAway(the problem area)
private void flingCardAway(){
final View cardContainer = findViewById(R.id.card_container);
ViewCompat.setTranslationZ(cardContainer, 1.0f);
AnimationSet anim = new AnimationSet(true);
RotateAnimation rotate1 = new RotateAnimation(0,-45, Animation.RELATIVE_TO_SELF,0.5f , Animation.RELATIVE_TO_SELF,0.5f );
rotate1.setStartOffset(100);
rotate1.setDuration(500);
anim.addAnimation(rotate1);
TranslateAnimation trans1 = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, -0.1f, Animation.RELATIVE_TO_PARENT, -0.1f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f);
trans1.setDuration(600);
anim.addAnimation(trans1);
AlphaAnimation opacity1 = new AlphaAnimation(1.0f, 0.0f);
opacity1.setDuration(400);
opacity1.setStartOffset(200);
anim.addAnimation(opacity1);
cardContainer.setAnimation(anim);
cardContainer.setVisibility(View.VISIBLE);
anim.setAnimationListener(new Animation.AnimationListener(){
#Override
public void onAnimationStart(Animation arg0) {
}
#Override
public void onAnimationRepeat(Animation arg0) {
}
#Override
public void onAnimationEnd(Animation arg0) {
final View cardContainer2 = findViewById(R.id.card_container);
((ViewGroup)cardContainer2.getParent()).removeView(cardContainer2);
}
});
}
Full class for reference
Study.java
package com.example.trevorwood.biggles.study;
import android.content.Context;
import android.content.Intent;
import android.graphics.Color;
import android.graphics.PorterDuff;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.support.v4.view.ViewCompat;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.RotateAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.FrameLayout;
import android.widget.LinearLayout;
import com.example.trevorwood.biggles.R;
public class Study extends AppCompatActivity {
LinearLayout mFlipCardLinearLayout;
LinearLayout mCardFlippedButtons;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_study);
Intent intent = getIntent();
// String value = intent.getStringExtra("key");
Toolbar toolbar = (Toolbar) findViewById(R.id.study_toolbar);
toolbar.setTitleTextColor(Color.WHITE);//0xAARRGGBB
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
mFlipCardLinearLayout = (LinearLayout) findViewById(R.id.flip_card_linear_layout);
mCardFlippedButtons = (LinearLayout) findViewById(R.id.card_flipped_buttons);
final Drawable upArrow = getResources().getDrawable(R.drawable.ic_back_arrow);
upArrow.setColorFilter(getResources().getColor(R.color.colorWhite), PorterDuff.Mode.SRC_ATOP);
getSupportActionBar().setHomeAsUpIndicator(upArrow);
makeNewCard();
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
// Respond to the action bar's Up/Home button
case android.R.id.home:
onBackPressed();
return true;
}
return super.onOptionsItemSelected(item);
}
#Override
public void onBackPressed() {
super.onBackPressed();
}
public void onCardClick(View view) {
flipCard();
}
public void onCardFlippedButtonsClick(View view) {
Integer numberPressed;
switch (view.getId()){
case R.id.color_button_1:numberPressed = 1;break;
case R.id.color_button_2:numberPressed = 2;break;
case R.id.color_button_3:numberPressed = 3;break;
case R.id.color_button_4:numberPressed = 4;break;
case R.id.color_button_5:numberPressed = 5;break;
default:numberPressed = 0;
}
saveCardStats(numberPressed);
flingCardAway();
resetForNewCard();
makeNewCard();
}
private void flipCard() {
FrameLayout cardFrame = (FrameLayout) findViewById(R.id.card_frame);
Integer childCount = cardFrame.getChildCount();
Log.d("Simple","childCount: "+childCount);
View cardContainer = findViewById(R.id.card_container);
View cardFace = findViewById(R.id.card_front);
View cardBack = findViewById(R.id.card_back);
FlipAnimation flipAnimation = new FlipAnimation(cardFace, cardBack);
if (cardFace.getVisibility() == View.GONE) {
mFlipCardLinearLayout.setVisibility(View.VISIBLE);
mCardFlippedButtons.setVisibility(View.GONE);
flipAnimation.reverse();
}else{
mFlipCardLinearLayout.setVisibility(View.GONE);
mCardFlippedButtons.setVisibility(View.VISIBLE);
}
cardContainer.startAnimation(flipAnimation);
}
private void saveCardStats(Integer numberPressed){
}
private void flingCardAway(){
final View cardContainer = findViewById(R.id.card_container);
ViewCompat.setTranslationZ(cardContainer, 1.0f);
AnimationSet anim = new AnimationSet(true);
RotateAnimation rotate1 = new RotateAnimation(0,-45, Animation.RELATIVE_TO_SELF,0.5f , Animation.RELATIVE_TO_SELF,0.5f );
rotate1.setStartOffset(100);
rotate1.setDuration(500);
anim.addAnimation(rotate1);
TranslateAnimation trans1 = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, -0.1f, Animation.RELATIVE_TO_PARENT, -0.1f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f);
trans1.setDuration(600);
anim.addAnimation(trans1);
AlphaAnimation opacity1 = new AlphaAnimation(1.0f, 0.0f);
opacity1.setDuration(400);
opacity1.setStartOffset(200);
anim.addAnimation(opacity1);
cardContainer.setAnimation(anim);
cardContainer.setVisibility(View.VISIBLE);
anim.setAnimationListener(new Animation.AnimationListener(){
#Override
public void onAnimationStart(Animation arg0) {
}
#Override
public void onAnimationRepeat(Animation arg0) {
}
#Override
public void onAnimationEnd(Animation arg0) {
final View cardContainer2 = findViewById(R.id.card_container);
((ViewGroup)cardContainer2.getParent()).removeView(cardContainer2);
}
});
}
private void resetForNewCard(){
mFlipCardLinearLayout.setVisibility(View.VISIBLE);
mCardFlippedButtons.setVisibility(View.GONE);
}
private void makeNewCard(){
FrameLayout cardFrame = (FrameLayout) findViewById(R.id.card_frame);
Integer childCount = cardFrame.getChildCount();
Log.d("Simple","childCount: "+childCount);
LayoutInflater inflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
inflater.inflate(R.layout.study_card, cardFrame);
}
}
FlipAnimation.java (not as important, just a reference)
package com.example.trevorwood.biggles.study;
import android.graphics.Camera;
import android.graphics.Matrix;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.Transformation;
public class FlipAnimation extends Animation {
private Camera camera;
private View fromView;
private View toView;
private float centerX;
private float centerY;
private boolean forward = true;
/**
* Creates a 3D flip animation between two views.
*
* #param fromView First view in the transition.
* #param toView Second view in the transition.
*/
public FlipAnimation(View fromView, View toView) {
this.fromView = fromView;
this.toView = toView;
setDuration(300);
setFillAfter(false);
setInterpolator(new AccelerateDecelerateInterpolator());
}
public void reverse() {
forward = false;
View switchView = toView;
toView = fromView;
fromView = switchView;
}
#Override
public void initialize(int width, int height, int parentWidth, int parentHeight) {
super.initialize(width, height, parentWidth, parentHeight);
centerX = width / 2;
centerY = height / 2;
camera = new Camera();
}
#Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
// Angle around the y-axis of the rotation at the given time
// calculated both in radians and degrees.
final double radians = Math.PI * interpolatedTime;
float degrees = (float) (180.0 * radians / Math.PI);
// Once we reach the midpoint in the animation, we need to hide the
// source view and show the destination view. We also need to change
// the angle by 180 degrees so that the destination does not come in
// flipped around
if (interpolatedTime >= 0.5f) {
degrees -= 180.f;
fromView.setVisibility(View.GONE);
toView.setVisibility(View.VISIBLE);
}
if (forward)
degrees = -degrees; //determines direction of rotation when flip begins
final Matrix matrix = t.getMatrix();
camera.save();
camera.translate(0, 0, Math.abs(degrees)*6);
camera.getMatrix(matrix);
camera.rotateY(degrees);
camera.getMatrix(matrix);
camera.restore();
matrix.preTranslate(-centerX, -centerY);
matrix.postTranslate(centerX, centerY);
}
}
I saw this, it helped but didn't solve my problem. End animation event android
I saw this too, but am not sure how to implement it into my own project. android animation is not finished in onAnimationEnd
The google docs all point to this link but this isn't reliable under rapid clicks.

This worked for me. Even though if you were to think about it, it probably shouldn't work. (It 100% would not work if converted to JavaScript, as the view is being removed before the animation has ended.) Perhaps somebody with more Android experience can explain why this works.
My hypothesis on why this works (please keep in mind, this is just a guess): is that Android's animations actually turn the view into something else entirely, while the original view is turned transparent. Then when the animation is ended, the animation view is deleted and the original view is turned back to visible.
private void flingCardAway(){
View cardContainer = findViewById(R.id.card_container);
ViewCompat.setTranslationZ(cardContainer, 1.0f);
AnimationSet anim = new AnimationSet(true);
RotateAnimation rotate1 = new RotateAnimation(0,-45, Animation.RELATIVE_TO_SELF,0.5f , Animation.RELATIVE_TO_SELF,0.5f );
rotate1.setStartOffset(10);
rotate1.setDuration(500);
anim.addAnimation(rotate1);
TranslateAnimation trans1 = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, -0.2f, Animation.RELATIVE_TO_PARENT, -0.0f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f);
trans1.setDuration(100);
anim.addAnimation(trans1);
TranslateAnimation trans2 = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, -0.1f, Animation.RELATIVE_TO_PARENT, -0.1f, Animation.RELATIVE_TO_PARENT, 0.0f, Animation.RELATIVE_TO_PARENT, 0.0f);
trans2.setStartOffset(100);
trans2.setDuration(100);
anim.addAnimation(trans2);
AlphaAnimation opacity1 = new AlphaAnimation(1.0f, 0.0f);
opacity1.setDuration(300);
opacity1.setStartOffset(300);
anim.addAnimation(opacity1);
cardContainer.setAnimation(anim);
mCardFrame.removeAllViews();
}

Related

PinView Subsampling Scale ImageView ERROR

Hey guys I'm trying to use this library (https://github.com/davemorrissey/subsampling-scale-image-view) and I tried out the example mentioned about PinView but I don't get the map displayed nor any Marker. ( the error says cannot cast Subsampling ImageView as PinView how do you solve this ?
MainActivity.java
package com.ascot.mxiv.mapzone;
import android.graphics.PointF;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import com.davemorrissey.labs.subscaleview.SubsamplingScaleImageView;
import com.davemorrissey.labs.subscaleview.ImageSource;
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
PinView imageView = findViewById(R.id.imageView);
imageView.setImage(ImageSource.resource(R.drawable.completemap1).tilingDisabled());
imageView.setPin(new PointF(460f, 320f));
}
}
PinView.java ( no changes made other than the import test.T.drawable as i dont understand it ) and help would be appreciated :D .
import android.content.Context;
import android.graphics.*;
import android.util.AttributeSet;
import android.widget.Toast;
import com.davemorrissey.labs.subscaleview.SubsamplingScaleImageView;
//import com.davemorrissey.labs.subscaleview.test.R.drawable;
public class PinView extends SubsamplingScaleImageView {
private final Paint paint = new Paint();
private final PointF vPin = new PointF();
private PointF sPin;
private Bitmap pin;
Context context;
public PinView(Context context) {
this(context, null);
this.context = context;
}
public PinView(Context context, AttributeSet attr) {
super(context, attr);
this.context = context;
initialise();
}
public void setPin(PointF sPin) {
this.sPin = sPin;
initialise();
invalidate();
}
private void initialise() {
float density = getResources().getDisplayMetrics().densityDpi;
pin = BitmapFactory.decodeResource(this.getResources(), R.drawable.marker);
float w = (density/420f) * pin.getWidth();
float h = (density/420f) * pin.getHeight();
pin = Bitmap.createScaledBitmap(pin, (int)w, (int)h, true);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// Don't draw pin before image is ready so it doesn't move around during setup.
if (!isReady()) {
return;
}
paint.setAntiAlias(true);
if (sPin != null && pin != null) {
sourceToViewCoord(sPin, vPin);
float vX = vPin.x - (pin.getWidth()/2);
float vY = vPin.y - pin.getHeight();
canvas.drawBitmap(pin, vX, vY, paint);
Toast.makeText(context,"works ? ", Toast.LENGTH_SHORT).show();
}
}
}
The problem is your in your layout, you should use PinView instead of SubsamplingScaleImageView as shown in the snippet below.
..
<com.example.myapp.PinView
android:id="#+id/floorplan_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

Every time I try to change a property of my paint (thickness or color), it changes existing paint that's already on the Canvas (android) (java)

I'm trying to create a simple drawing app that allows you to draw on a canvas, and you're able to change the color and thickness of it. The problem that's occurring is that every time I try to change the color or thickness of the paint, it changes ALREADY existing paint that's on the canvas. I understand why it's not working, but I just don't know how to fix it and where exactly the problem lies.
CanvasView Class
package samkough.com.painter;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.MotionEvent;
import android.view.View;
import java.util.ArrayList;
public class CanvasView extends View
{
/*
* When the user touches the screen and moves their finger to draw,
* we will use a Path to trace their drawing action on the canvas.
* Both the canvas and the drawing on top of it are represented by Paint
* objects. The initial paint color corresponds to the first color
* in the palette we created last time, which will be initially selected
* when the app launches. Finally we declare variables for the canvas
* and bitmap - the user paths drawn with drawPaint will be drawn onto
* the canvas, which is drawn with canvasPaint.
* */
//drawing paint
private Paint paint = new Paint();
// canvas paint
private Paint canvasPaint = new Paint();
//drawing path
private Path path = new Path();
// canvas
private Canvas canvas = new Canvas();
//canvas bitmap
private Bitmap canvasBitmap;
// brush size and pixel size
private float brushSize, pixelAmount;
public CanvasView(Context context, AttributeSet attrs)
{
// Setting the anti-alias, stroke join and cap styles will make the user's drawings appear smoother.
super(context, attrs);
paint.setAntiAlias(true);
paint.setStrokeWidth(5);
paint.setColor(Color.BLACK);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStrokeCap(Paint.Cap.ROUND);
}
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh)
{
super.onSizeChanged(w, h, oldw, oldh);
canvasBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
canvas = new Canvas(canvasBitmap);
}
#Override
protected void onDraw(Canvas drawCanvas)
{
drawCanvas.drawBitmap(canvasBitmap, 0, 0, canvasPaint);
drawCanvas.drawPath(path, paint);
}
#Override
public boolean onTouchEvent(MotionEvent e)
{
// get the coords of the touch event
float eventX = e.getX();
float eventY = e.getY();
switch (e.getAction()) {
case MotionEvent.ACTION_DOWN:
// set a new starting point
path.moveTo(eventX, eventY);
path.reset();
path.moveTo(eventX, eventY);
return true;
case MotionEvent.ACTION_MOVE:
// connect the points
path.lineTo(eventX, eventY);
break;
default:
return false;
}
// makes you view repaint and call ondraw
invalidate();
return true;
}
public void clearCanvas()
{
path.reset();
invalidate();
}
public void setStrokeWidth(float f)
{
pixelAmount = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, f, getResources().getDisplayMetrics());
brushSize = pixelAmount;
paint.setAntiAlias(true);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStrokeCap(Paint.Cap.ROUND);
paint.setStrokeWidth(brushSize);
invalidate();
}
public void setColor(int p)
{
paint.setAntiAlias(true);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStrokeCap(Paint.Cap.ROUND);
paint.setColor(p);
invalidate();
}
}
MainActivity Class
package samkough.com.painter;
import android.app.Activity;
import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.ImageButton;
import com.samkough.painter.R;
public class MainActivity extends Activity {
private CanvasView canvasView;
private int orange;
private int purple;
private float strokeWidth;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
canvasView = (CanvasView) findViewById(R.id.canvasView);
orange = Color.rgb(250, 128, 0);
purple = Color.rgb(128, 0, 128);
strokeWidth = 0;
// REGULAR BUTTONS: save, about, reset
Button saveB = (Button) findViewById(R.id.saveButton);
Button aboutB = (Button) findViewById(R.id.aboutButton);
Button resetB = (Button) findViewById(R.id.resetButton);
// IMAGE BUTTONS: red, blue, green, yellow, black, purple, orange, erase, brush thickness plus, brush thickness minus
ImageButton redIb = (ImageButton) findViewById(R.id.redButton);
ImageButton blueIb = (ImageButton) findViewById(R.id.blueButton);
ImageButton greenIb = (ImageButton) findViewById(R.id.greenButton);
ImageButton yellowIb = (ImageButton) findViewById(R.id.yellowButton);
ImageButton blackIb = (ImageButton) findViewById(R.id.blackButton);
ImageButton purpleIb = (ImageButton) findViewById(R.id.purpleButton);
ImageButton orangeIb = (ImageButton) findViewById(R.id.orangeButton);
ImageButton eraseIb = (ImageButton) findViewById(R.id.eraseButton);
ImageButton plusIb = (ImageButton) findViewById(R.id.plusButton);
ImageButton minusIb = (ImageButton) findViewById(R.id.minusButton);
minusIb.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v)
{
strokeWidth -= 2;
canvasView.setStrokeWidth(strokeWidth);
}
});
plusIb.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
strokeWidth += 2;
canvasView.setStrokeWidth(strokeWidth);
}
});
eraseIb.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
canvasView.setColor(Color.TRANSPARENT);
}
});
orangeIb.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
canvasView.setColor(orange);
}
});
purpleIb.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
canvasView.setColor(purple);
}
});
blackIb.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
canvasView.setColor(Color.BLACK);
}
});
yellowIb.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
canvasView.setColor(Color.YELLOW);
}
});
greenIb.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
canvasView.setColor(Color.GREEN);
}
});
blueIb.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
canvasView.setColor(Color.BLUE);
}
});
redIb.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
canvasView.setColor(Color.RED);
}
});
saveB.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
}
});
aboutB.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Intent intent = new Intent(getApplicationContext(), AboutActivity.class);
startActivity(intent);
}
});
resetB.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
canvasView.clearCanvas();
}
});
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
You have created canvas, but you are not using that to draw anything on it. So essentially, the line drawCanvas.drawBitmap(canvasBitmap, 0, 0, canvasPaint); doesn't do anything.
What you need to do instead is draw the path on the canvas. Then draw the canvasBitmap using drawCanvas. This way you can maintain a single path and a single paint instead of multiple ones.
#Override
protected void onDraw(Canvas drawCanvas)
{
canvas.drawPath(path, paint);
drawCanvas.drawBitmap(canvasBitmap, 0, 0, canvasPaint);
}
When you do the above, each time the user draw's a new path, the canvasBitmap will hold all the old paths in it. So each time the onDraw is called, only the new path is drawn.
Always remember: It's a bad practice to create multiple PAINT objects. Try to reuse the Paint object as much as possible.
In CanvasView.java, this line
private Paint paint = new Paint();
declares one paint object for the whole class, and this line
private Path path = new Path();
declares one path object for the whole class.
When onDraw is called, your whole canvas area is being redrawn. That means that
drawCanvas.drawPath(path, paint);
is drawing the entire path that has been added since the activity was created with whatever the current value of paint is.
One way of working around this is to have a list of Path objects and a list of Paint objects. The first element of the Path list would store the first path that was drawn--say, everything drawn up until the point when they change paint. The first element of the paint list would store the corresponding paint that was used. Whenever the user changes the paint and begins painting, you'll need to create a new Path object, and add it and the new Paint object to the lists.
Once you have lists of the paths and the paints they were drawn with, you can do something like this in onDraw:
for (int i = 0; i < paths.size(); i++) {
Path path = paths.get(i);
Paint paint = paints.get(i);
drawCanvas.drawPath(path, paint);
}

How to implement 3d effect zooming in viewpager android

I need help regarding the viewpager. Basically I have a viewpager contained in a page container:
package com.example.CustomViews;
/**
* Created by imrankhan on 4/29/2015.
*/
import android.content.Context;
import android.graphics.Camera;
import android.graphics.Matrix;
import android.graphics.Point;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.Transformation;
import android.widget.FrameLayout;
import android.widget.ImageView;
import com.example.imrankhan.newlawdojo.DashboardActivity;
import com.example.imrankhan.newlawdojo.QuizActivity;
import com.example.imrankhan.newlawdojo.R;
/**
* PagerContainer: A layout that displays a ViewPager with its children that are outside
* the typical pager bounds.
*/
public class PageContainer extends FrameLayout implements ViewPager.OnPageChangeListener {
private ViewPager mPager;
boolean mNeedsRedraw = false;
private Camera mCamera = new Camera();
private int mMaxRotationAngle = 60;
private int mMaxZoom = -120;
public PageContainer(Context context) {
super(context);
init();
}
public PageContainer(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public PageContainer(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
private void init() {
//Disable clipping of children so non-selected pages are visible
setClipChildren(false);
//Child clipping doesn't work with hardware acceleration in Android 3.x/4.x
//You need to set this value here if using hardware acceleration in an
// application targeted at these releases.
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
#Override
protected void onFinishInflate() {
try {
mPager = (ViewPager) getChildAt(0);
mPager.setOnPageChangeListener(this);
} catch (Exception e) {
throw new IllegalStateException("The root child of PagerContainer must be a ViewPager");
}
}
public ViewPager getViewPager() {
return mPager;
}
private Point mCenter = new Point();
private Point mInitialTouch = new Point();
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
mCenter.x = w / 4;
mCenter.y = h / 4;
}
#Override
public boolean onTouchEvent(MotionEvent ev) {
//We capture any touches not already handled by the ViewPager
// to implement scrolling from a touch outside the pager bounds.
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
mInitialTouch.x = (int)ev.getX();
mInitialTouch.y = (int)ev.getY();
default:
ev.offsetLocation(mCenter.x - mInitialTouch.x, mCenter.y - mInitialTouch.y);
break;
}
return mPager.dispatchTouchEvent(ev);
}
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//Force the container to redraw on scrolling.
//Without this the outer pages render initially and then stay static
if (mNeedsRedraw) invalidate();
}
#Override
public void onPageSelected(int position) {
View v =this.getViewPager().getChildAt(position);
}
private void transformImageBitmap(View child, Transformation t, int rotationAngle) {
mCamera.save();
final Matrix imageMatrix = t.getMatrix();;
final int imageHeight = child.getLayoutParams().height;;
final int imageWidth = child.getLayoutParams().width;
final int rotation = Math.abs(rotationAngle);
mCamera.translate(0.0f, 0.0f, 100.0f);
if ( rotation < mMaxRotationAngle ) {
float zoomAmount = (float) (mMaxZoom + (rotation * 1.5));
mCamera.translate(0.0f, 0.0f, zoomAmount);
}
mCamera.rotateY(rotationAngle);
mCamera.getMatrix(imageMatrix);
imageMatrix.preTranslate(-(imageWidth/2), -(imageHeight/2));
imageMatrix.postTranslate((imageWidth/2), (imageHeight/2));
mCamera.restore();
}
#Override
public void onPageScrollStateChanged(int state) {
mNeedsRedraw = (state != ViewPager.SCROLL_STATE_IDLE);
}
}
on onPageSelected event I got the view I need to zoom in when selected and zoom out after selecting another item. Please help me out. I added an image to give you an idea what I want.
http://i.stack.imgur.com/xtE89.png

Can't draw a triangle with OpenGL ES 2.0 on android

I was coding along with tutorials from developer.android.com about working with opengl and as I have faced some errors I tried to fix them but it didn't work out. I have created main activity in which when you press the button the intent opens an opengl activity which displays a black screen but it doesn't display the triangle. Can you tell me where the problem is?
This is my MainActivity class:
package com.eBook.test;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v7.app.ActionBarActivity;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Button;
public class MainActivity extends ActionBarActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final Button button = (Button)findViewById(R.id.button);
button.setOnClickListener(new OnClickListener() {
public void onClick(View v){
Intent intent = new Intent (MainActivity.this, OpenGLES20Activity.class);
startActivity(intent);
}
});
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
/**
* A placeholder fragment containing a simple view.
*/
public static class PlaceholderFragment extends Fragment {
public PlaceholderFragment() {
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_main, container,
false);
return rootView;
}
}
}
Everything seems ok with this, now here is my OpenGL Activity class:
package com.eBook.test;
import android.app.Activity;
import android.content.Context;
import android.opengl.GLSurfaceView;
import android.os.Bundle;
public class OpenGLES20Activity extends Activity {
private GLSurfaceView mGLView;
class MyGLSurfaceView extends GLSurfaceView {
public MyGLSurfaceView(Context context){
super(context);
// Create an OpenGL ES 2.0 context
setEGLContextClientVersion(2);
// Set the Renderer for drawing on the GLSurfaceView
setRenderer(new MyRenderer());
setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);
}
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Create a GLSurfaceView instance and set it
// as the ContentView for this Activity.
mGLView = new MyGLSurfaceView(this);
setContentView(mGLView);
}
#Override
protected void onPause() {
mGLView.onPause();
super.onPause();
}
#Override
protected void onResume() {
mGLView.onResume();
super.onResume();
}
}
That's my Renderer class:
package com.eBook.test;
import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;
import android.opengl.GLES20;
import android.opengl.GLSurfaceView;
public class MyRenderer implements GLSurfaceView.Renderer {
private Triangle mTriangle;
public void onSurfaceCreated(GL10 unused, EGLConfig config) {
// Set the background frame color
GLES20.glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
// initialize a triangle
mTriangle = new Triangle();
}
public void onDrawFrame(GL10 unused) {
// Redraw background color
mTriangle.draw();
GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);
}
public void onSurfaceChanged(GL10 unused, int width, int height) {
GLES20.glViewport(0, 0, width, height);
}
public static int loadShader(int type, String shaderCode){
// create a vertex shader type (GLES20.GL_VERTEX_SHADER)
// or a fragment shader type (GLES20.GL_FRAGMENT_SHADER)
int shader = GLES20.glCreateShader(type);
// add the source code to the shader and compile it
GLES20.glShaderSource(shader, shaderCode);
GLES20.glCompileShader(shader);
return shader;
}
}
And the Triangle class:
package com.eBook.test;
import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;
import android.opengl.GLES20;
public class Triangle {
private FloatBuffer vertexBuffer;
private int mProgram;
private int mPositionHandle;
private int mColorHandle;
// number of coordinates per vertex in this array
static final int COORDS_PER_VERTEX = 3;
static float triangleCoords[] = { // in counterclockwise order:
0.0f, 0.622008459f, 0.0f, // top
-0.5f, -0.311004243f, 0.0f, // bottom left
0.5f, -0.311004243f, 0.0f // bottom right
};
// Set color with red, green, blue and alpha (opacity) values
float color[] = { 0.63671875f, 0.76953125f, 0.22265625f, 1.0f };
private final String vertexShaderCode =
"attribute vec4 vPosition;" +
"void main() {" +
" gl_Position = vPosition;" +
"}";
private final String fragmentShaderCode =
"precision mediump float;" +
"uniform vec4 vColor;" +
"void main() {" +
" gl_FragColor = vColor;" +
"}";
public Triangle() {
int vertexShader = MyRenderer.loadShader(GLES20.GL_VERTEX_SHADER, vertexShaderCode);
int fragmentShader = MyRenderer.loadShader(GLES20.GL_FRAGMENT_SHADER, fragmentShaderCode);
mProgram = GLES20.glCreateProgram(); // create empty OpenGL ES Program
GLES20.glAttachShader(mProgram, vertexShader); // add the vertex shader to program
GLES20.glAttachShader(mProgram, fragmentShader); // add the fragment shader to program
GLES20.glLinkProgram(mProgram); // creates OpenGL ES program executables
// initialize vertex byte buffer for shape coordinates
ByteBuffer bb = ByteBuffer.allocateDirect(
// (number of coordinate values * 4 bytes per float)
triangleCoords.length * 4);
// use the device hardware's native byte order
bb.order(ByteOrder.nativeOrder());
// create a floating point buffer from the ByteBuffer
vertexBuffer = bb.asFloatBuffer();
// add the coordinates to the FloatBuffer
vertexBuffer.put(triangleCoords);
// set the buffer to read the first coordinate
vertexBuffer.position(0);
}
public void draw() {
// Add program to OpenGL ES environment
GLES20.glUseProgram(mProgram);
// get handle to vertex shader's vPosition member
mPositionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition");
// Enable a handle to the triangle vertices
GLES20.glEnableVertexAttribArray(mPositionHandle);
// Prepare the triangle coordinate data
int vertexStride = 3;
GLES20.glVertexAttribPointer(mPositionHandle, COORDS_PER_VERTEX,
GLES20.GL_FLOAT, false,
vertexStride, vertexBuffer);
// get handle to fragment shader's vColor member
mColorHandle = GLES20.glGetUniformLocation(mProgram, "vColor");
// Set color for drawing the triangle
GLES20.glUniform4fv(mColorHandle, 1, color, 0);
// Draw the triangle
int vertexCount = 6;
GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vertexCount);
// Disable vertex array
GLES20.glDisableVertexAttribArray(mPositionHandle);
}
}
I don't really know what value should vertexCount and vertexStride hold, logically thinking vertexCount should be 3 maybe, don't know about the vertexStride.
Clear the background before drawing the triangle ;)
public void onDrawFrame(GL10 unused) {
// Redraw background color
GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);
mTriangle.draw();
}

Update Canvas and holder

I am starting with canvas and i need help.
I want to represent real times coordinates in a "room". First when i create surfaceholder i draw the "room" and works fine. My idea is represents differents point in this room.
This is my activity:
package com.example.grafica;
import android.annotation.TargetApi;
import android.app.Activity;
import android.content.res.Configuration;
import android.graphics.Point;
import android.os.Build;
import android.os.Bundle;
import android.util.Log;
import android.view.Display;
import android.view.KeyEvent;
import android.view.LayoutInflater;
import android.view.SurfaceView;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.widget.FrameLayout;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TableLayout;
import android.widget.TextView;
#TargetApi(Build.VERSION_CODES.HONEYCOMB_MR2)
public class MainActivity extends Activity {
private LayoutInflater myInflater = null;
private TextView tx1, tx2, tx3, tx4, tx5, tx6, tx7;
float ancho = (float) 5.20;
float largo = (float) 3.50;
private TableLayout table, table2;
private LinearLayout.LayoutParams params, params2;
private MySurface surface;
#Override
protected void onCreate(Bundle savedInstanceState) {
Log.i("telo", "oncreate");
super.onCreate(savedInstanceState);
if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT) {
setContentView(R.layout.activity_main);
myInflater = LayoutInflater.from(this);
View overView = myInflater.inflate(R.layout.segundacapa, null);
this.addContentView(overView, new LayoutParams(
LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
}
if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE) {
setContentView(R.layout.activity_main);
myInflater = LayoutInflater.from(this);
View overView = myInflater.inflate(R.layout.segundacapaland, null);
this.addContentView(overView, new LayoutParams(
LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
}
surface =(MySurface)findViewById(R.id.surface);
tx1 = (TextView) findViewById(R.id.textView2);
tx2 = (TextView) findViewById(R.id.textView3);
tx3 = (TextView) findViewById(R.id.textView4);
tx4 = (TextView) findViewById(R.id.textView5);
tx5 = (TextView) findViewById(R.id.textView7);
tx6 = (TextView) findViewById(R.id.textView8);
tx7 = (TextView) findViewById(R.id.textView9);
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x;
int height = size.y;
if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT) {
table = (TableLayout) findViewById(R.id.table);
params = (LinearLayout.LayoutParams) table.getLayoutParams();
float ratio = ancho / largo;
float aux = width / ratio;
params.topMargin = (int) aux + 20;
surface.xini = 20;
surface.yini = 20;
surface.xend = width - 20;
surface.yend = aux;
}
if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE) {
table2 = (TableLayout) findViewById(R.id.table2);
params2 = (LinearLayout.LayoutParams) table2.getLayoutParams();
float ratio = largo / ancho;
float aux = width / ratio;
params2.leftMargin = (int) (width * ratio) + 20;
surface.xini = 20;
surface.yini = 20;
surface.xend = width * ratio;
surface.yend = height - 220;
}
surface.ini();
surface.update();
}
#Override
public boolean onKeyDown(int keyCode, KeyEvent evento) {
return super.onKeyDown(keyCode, evento);
}
}
And this my surface class:
package com.example.grafica;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
public class MySurface extends SurfaceView implements SurfaceHolder.Callback {
private Paint pincel = new Paint();
private Canvas canvas;
public float xini = 0;
public float yini = 0;
public float xend = 0;
public float yend = 0;
public float coordinatex =(float) 2.50;
public float coordinatety=(float) 1.75;
private SurfaceHolder holder;
public MySurface(Context context, AttributeSet attr) {
super(context,attr);
}
public void ini(){
getHolder().addCallback(this);
}
public void update(){
holder.lockCanvas();
pincel.setColor(Color.BLUE);
pincel.setStrokeWidth(25);
canvas.drawPoint(100, 100, pincel);
holder.unlockCanvasAndPost(canvas);
}
#Override
public void surfaceChanged(SurfaceHolder arg0, int arg1, int arg2, int arg3) {
// TODO Auto-generated method stub
}
#Override
public void surfaceCreated(SurfaceHolder arg0) {
holder = arg0;
canvas = arg0.lockCanvas();
canvas.drawColor(Color.WHITE);
pincel.setColor(Color.BLACK);
pincel.setStrokeWidth(8);
pincel.setStyle(Style.STROKE);
RectF rect = new RectF();
rect.set(xini, yini, xend, yend);
canvas.drawRect(rect, pincel);
pincel.setColor(Color.RED);
pincel.setStrokeWidth(25);
canvas.drawPoint(xini, yend, pincel);
pincel.setColor(Color.BLUE);
pincel.setStrokeWidth(25);
canvas.drawPoint(xend, yend, pincel);
pincel.setColor(Color.GREEN);
pincel.setStrokeWidth(25);
canvas.drawPoint(xini, yini, pincel);
pincel.setColor(Color.YELLOW);
pincel.setStrokeWidth(25);
canvas.drawPoint(xend, yini, pincel);
arg0.unlockCanvasAndPost(canvas);
}
#Override
public void surfaceDestroyed(SurfaceHolder arg0) {
Log.e("surfaceDestroyed ", "Hilo detenido ");
}
#Override
public void onDraw(Canvas canvas) {
}
}
In conclussion, with surface.ini(); i call to SurfaceCreated and draw the room, and my idea is that with surface.upddate(); represents a point in this room. It is possible reuse same canvas and holder? how?
I read something about invalidate() function, could be help me? how use this function?
thanks
You'll need a thread to manage the view redrawing effect :
From run method either :
Code your drawing method
Call directly onDraw
Here is an example Example on how to subclass and use SurfaceView

Categories