I want to have a simple animation on my custom view.
I used the objectanimator but the custom view did not move.
When I try this with another object (like a textview) it works.
Below is my code. z1 is the custom view that I'd like to move.
public class FinalActivity extends Activity {
MyViewX z1;
TextView t1;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_final);
z1 = (MyViewX) findViewById(R.id.xview);
t1 = (TextView) findViewById(R.id.textView1);
}
#Override
public void onWindowFocusChanged(boolean hasFocus) {
if(hasFocus){
ObjectAnimator animation = ObjectAnimator.ofFloat(z1, "translationX", 100f);
animation.setDuration(5000);
animation.start();
}
}
}
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5sp"
tools:context=".FrmActivity" >
<com.test.game.myviewx
android:id="#+id/xview"
android:layout_width="200dp"
android:layout_height="200dp"
/>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="72dp"
android:layout_marginTop="173dp"
android:text="TextView" />
</RelativeLayout>
public class MyViewX extends View
{
public MyViewX(Context context) {
super(context);
// TODO Auto-generated constructor stub
}
public MyViewX(Context context, AttributeSet attributeset) {
super(context);
// TODO Auto-generated constructor stub
}
#Override
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
Resources res = getResources();
Bitmap bitmap = BitmapFactory.decodeResource(res, R.drawable.base1);
int x=80;
int y=80;
int radius=40;
Paint paint=new Paint();
// Use Color.parseColor to define HTML colors
paint.setColor(Color.parseColor("#CD5C5C"));
canvas.drawCircle(x,x, radius, paint);
canvas.drawBitmap(bitmap, 0, 0, paint);
}
}
the code does not crash and seems to run but the circle and the bitmap in the custom view does not move.
what am I missing ?
I see one issue when you create constructor of your myviewx
please edit it
public class myviewx extends View {
public myviewx(Context context) {
super(context);
}
public myviewx(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
}
public myviewx(Context context, #Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Resources res = getResources();
Bitmap bitmap = BitmapFactory.decodeResource(res, R.drawable.base1);
int x = 80;
int y = 80;
int radius = 40;
Paint paint = new Paint();
// Use Color.parseColor to define HTML colors
paint.setColor(Color.parseColor("#CD5C5C"));
canvas.drawCircle(x, x, radius, paint);
canvas.drawBitmap(bitmap, 0, 0, paint);
}
}
Related
I've searched for this question (the title) and I've got this:
A Rect created in a view class and passed into a fragment, but unfortunately it didn't work, I don't see the rectangle in fragment 1 when i run it.
what am i doing wrong, and Thank You in advance
public class Rectangle extends View {
public Rectangle(Context context) {
super(context);
}
#Override
public void onDraw(Canvas canvas ) {
Rect rectangle = new Rect(200, 200, 200, 200);
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(Color.RED);
canvas.drawRect(rectangle, paint);
super.onDraw(canvas);
}
}
public class FragmentOne extends Fragment {
RelativeLayout relativeLayout;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
View myInflatedView= inflater.inflate(R.layout.fragment_one_layout,container,false);
relativeLayout = (RelativeLayout) myInflatedView.findViewById(R.id.Frag1);
relativeLayout.addView(new Rectangle(getActivity()));
return myInflatedView;
}
}
XML for fragment 1:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="#+id/Frag1"
android:layout_height="match_parent"
android:background="#000">
<com.redot.puzzle1.Rectangle
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</RelativeLayout>
You problem is Rect rectangle = new Rect(200, 200, 200, 200);
The left-top coordinate is the same as the right-bottom coordinate .So it will not display in the layout.
Just change it in your code and try it .
Try this in your code .
public class Rectangle extends View {
public Rectangle(Context context) {
super(context);
}
public Rectangle(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
}
public Rectangle(Context context, #Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(Color.RED);
canvas.drawRect(400,200,800,600,paint);
}
}
Then
<com.redot.puzzle1.Rectangle
android:layout_width="match_parent"
android:layout_height="match_parent"/>
How can i make a layout look like following snap in the case i don't want to use background image.
Create a nine patch image of a single image. Following link is helpful to you for generate nine patch image.
https://romannurik.github.io/AndroidAssetStudio/nine-patches.html
You can create an ImageView like that triangle and put it in the place you need.
Have a look how you can create triangle using xml: Android triangle (arrow) defined as an XML shape
Or even you can create a TextView:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="▼"/>
and put it in the place.
Unicode for the triangle: link
Use below code in Relative Layout. Hope it helps you.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableRight="#drawable/triangleImage"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"/>
You can also draw custom view:
public class MyBackground extends View{
private Path path = new Path();
private Paint paint = new Paint();
public MyBackground(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MyBackground(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
paint.setColor(Color.WHITE);
paint.setStyle(Paint.Style.FILL);
paint.setAntiAlias(true);
}
public MyBackground(Context context) {
this(context, null);
}
#Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.GRAY);
int triangleSide = getWidth() / 10; // triangle is 1/10-th of side
int offsetFromRightSide = triangleSide;
int startX = getWidth() - triangleSide - offsetFromRightSide;
path.reset();
path.moveTo(startX, 0);
path.lineTo(startX + triangleSide/2, triangleSide/2);
path.lineTo(startX + triangleSide, 0);
canvas.drawPath(path, paint);
}
}
and use it like 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:background="#drawable/background"
tools:context=".MainActivity">
<your.package.name.MyBackground
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
Or there is one more "code way". Create custom background Drawable
public class Background extends Drawable {
private Path path = new Path();
private Paint paint = new Paint();
public Background(){
paint.setColor(Color.WHITE);
paint.setStyle(Paint.Style.FILL);
paint.setAntiAlias(true);
}
#Override
public void draw(Canvas canvas) {
int triangleSide = getBounds().width() / 10; // triangle is 1/10-th of side
int offsetFromRightSide = triangleSide;
int startX = getBounds().width() - triangleSide - offsetFromRightSide;
path.reset();
path.moveTo(startX, 0);
path.lineTo(startX + triangleSide/2, triangleSide/2);
path.lineTo(startX + triangleSide, 0);
canvas.drawColor(Color.GRAY);
canvas.drawPath(path, paint);
}
#Override public void setAlpha(int alpha) {}
#Override public void setColorFilter(ColorFilter cf) {}
#Override public int getOpacity() {return 0;}
}
And use it like this:
RelativeLayout layout = (RelativeLayout) findViewById(R.id.root);
layout.setBackgroundDrawable(new Background());
I am trying to redraw the custom view in onCreate() method
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
circleView = (CircleView)findViewById(R.id.circleView);
circleView.setCircle(100, 100, 25);
circleView.wrapView();
}
and custom view is :
public class CircleView extends View
{
private Paint paint = null;
private int x = 50;
private int y = 50;
private int radius = 50;
public CircleView(Context context, AttributeSet attrs)
{
super(context, attrs);
init();
}
public CircleView(Context context)
{
super(context);
init();
}
private void init()
{
paint = new Paint();
}
public void setCircle(int x, int y, int radius)
{
this.x = x;
this.y = y;
this.radius = radius;
init();
this.invalidate();
}
#Override
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
paint.setColor(Color.WHITE);
canvas.drawCircle(x, y, radius, paint);
Log.e("", "radius : " + radius);
}
public void setColor(int color)
{
paint.setColor(color);
}
public void wrapView()
{
this.setLayoutParams(new RelativeLayout.LayoutParams(radius*2, radius*2));
this.invalidate();
}
}
and xml is:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/layoutMain"
>
<com.pep1439.view.CircleView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/circleView" />
</RelativeLayout>
i just want to resize the circle, but failed. Help me to draw circle with any radius. How to do this. Its working fine if i use default values. It draws the circle when i remove the line circleView.setCircle(100, 100, 25);. I want to adjust circle at run time.
thanks.
You set x and y to 100 and radius to 25. Then you resize your view to radius*2, which is 50, so in the end you're drawing a circle of radius 25 at position 100,100 on a view that is only 50x50 in size. In other words: You draw your circle outside the area of your view.
is it possible to change the color of the underline from a EditText dynamically?
Like the effect, when i focus it, then it turns into blue.
Hope you understand what i want to do.
Create your own customized EditText control.
Here's an example that I made just for you:
When selected, you just have to change mPaint.setColor(Color.GREEN); to another color
public class CustomEditText extends EditText {
private Rect mRect;
private Paint mPaint;
int widthMsSize;
int heightMsSize;
// we need this constructor for LayoutInflater
public CustomEditText(Context context, AttributeSet attrs) {
super(context, attrs);
mPaint = new Paint();
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(5);
mPaint.setColor(Color.GREEN);
System.out.println("constructor");
}
protected void onMeasure(final int widthMeasureSpec,
final int heightMeasureSpec) {
// Extract the Ms (MesaureSpec) parameters
widthMsSize = MeasureSpec.getSize(widthMeasureSpec);
heightMsSize = MeasureSpec.getSize(heightMeasureSpec);
System.out.println("on measure");
// Satisfy contract by calling setMeasuredDimension
setMeasuredDimension(widthMsSize,
heightMsSize);
}
protected void onDraw(Canvas canvas) {
canvas.drawLine(5, heightMsSize - 10, widthMsSize - 5, heightMsSize - 10, mPaint); //draw underline
canvas.drawLine(8, heightMsSize - 10, 8, heightMsSize - 20, mPaint); //draw left corner
canvas.drawLine(widthMsSize - 8, heightMsSize - 10, widthMsSize - 8, heightMsSize - 20, mPaint); //draw right corner
super.onDraw(canvas);
}
}
main.xml
<LinearLayout 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:orientation="vertical" >
<com.example.testanimationfadeinfadeout.CustomEditText
android:id="#+id/textedit"
android:layout_width="228dp"
android:layout_height="41dp"
android:ems="10"
android:hint="color is changed" />
</LinearLayout>
public static void setEditTextUnderlineColor(final EditText editText, final int focusedColor, final int unfocusedColor) {
editText.setOnFocusChangeListener(new View.OnFocusChangeListener() {
#Override
public void onFocusChange(View v, boolean hasFocus) {
if (hasFocus) {
editText.getBackground().setColorFilter(focusedColor, PorterDuff.Mode.SRC_ATOP);
return;
}
editText.getBackground().setColorFilter(unfocusedColor, PorterDuff.Mode.SRC_ATOP);
}
});
editText.getBackground().setColorFilter(unfocusedColor, PorterDuff.Mode.SRC_ATOP);
To customize edit Text I did the following way. It worked for me pretty simple way.
public class CardNumberText extends EditText {
boolean isFocus;
Paint mPaint;
Rect mRect;
int widthSize, heightSize;
public CardNumberText(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
initStyle();
}
private void initStyle() {
mRect = new Rect();
mPaint = new Paint();
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setColor(Color.parseColor("#B3B3B3"));
}
public CardNumberText(Context context, AttributeSet attrs) {
super(context, attrs);
initStyle();
}
public CardNumberText(Context context) {
super(context);
initStyle();
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Rect rect = mRect;
Paint paint = mPaint;
if (isFocus) {
mPaint.setStrokeWidth(3.0f);
mPaint.setColor(Color.parseColor("#80CBC4"));
} else {
mPaint.setStrokeWidth(1.5f);
mPaint.setColor(Color.parseColor("#B3B3B3"));
}
for (int i = 0; i < getLineCount(); i++) {
int baseline = getLineBounds(i, rect);
canvas.drawLine(rect.left, baseline + 20, rect.right, baseline,
paint);
}
}
#Override
protected void onFocusChanged(boolean focused, int direction,
Rect previouslyFocusedRect) {
super.onFocusChanged(focused, direction, previouslyFocusedRect);
if (focused) {
isFocus = true;
} else {
isFocus = false;
}
}
}
I am in search of methodology for rotating a button. without using animations..!
I don't want use animations because of this.
if any body has any idea please help me.
xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:id="#+id/ll" android:gravity="center_vertical">
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="#string/hello" />
<com.mind.RotateButton android:layout_width="100dp" android:gravity="center_vertical"
android:layout_height="100dp" android:id="#+id/ll1">
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Button" android:id="#+id/but" />
</com.mind.RotateButton>
</LinearLayout>
code
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Button btn = (Button) findViewById(R.id.but);
btn.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
Toast.makeText(getApplicationContext(), "Hello", Toast.LENGTH_SHORT).show();
}
});
}
Thanks in advance.......!
extend Button class:
public class RotateButton extends Button{
public RotateButton(Context context) {
super(context);
}
public RotateButton(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
protected void onDraw(Canvas canvas) {
canvas.save();
canvas.rotate(45, getWidth() / 2, getHeight() / 2);
super.onDraw(canvas);
canvas.restore();
}
}
and in your layout:
<com.samples.myapp.ui.RotateButton
android:layout_height="wrap_content" android:id="#+id/MyBtn"
android:padding="5dip" android:textColor="#color/darkGreen"
android:textSize="16dip" android:text="TextView"
android:layout_width="wrap_content"></com.samples.myapp.ui.RotateButton>
----------------------------------------------------------------------
edit:
Another approach: design a rotatable LinearLayout and put your controls in it. LinearLayout can be rotated completely:
package org.mabna.order.ui;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.util.AttributeSet;
import android.view.MotionEvent;
public class RotateLinearLayout extends LinearLayout{
private Matrix mForward = new Matrix();
private Matrix mReverse = new Matrix();
private float[] mTemp = new float[2];
public RotateLinearLayout(Context context) {
super(context);
}
public RotateLinearLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
protected void dispatchDraw(Canvas canvas) {
canvas.rotate(180, getWidth() / 2, getHeight() / 2);
mForward = canvas.getMatrix();
mForward.invert(mReverse);
canvas.save();
canvas.setMatrix(mForward); // This is the matrix we need to use for
// proper positioning of touch events
super.dispatchDraw(canvas);
canvas.restore();
invalidate();
}
#Override
public boolean dispatchTouchEvent(MotionEvent event) {
event.setLocation(getWidth() - event.getX(), getHeight() - event.getY());
return super.dispatchTouchEvent(event);
}
}
Using ideas from breceivemail answer I made rotate layout that actually works. It's designed to hold single view, it will dispatch touch events correctly but no padding or margins are supported in this realization. Also it's only supports angles like 90, 180, 270 etc. Layout size will just match the size of it's child after rotation.
public class RotateLayout extends ViewGroup {
public static class LayoutParams extends ViewGroup.LayoutParams {
public int angle;
public LayoutParams(Context context, AttributeSet attrs) {
super(context, attrs);
final TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.RotateLayout_Layout);
angle = a.getInt(R.styleable.RotateLayout_Layout_layout_angle, 0);
}
public LayoutParams(ViewGroup.LayoutParams layoutParams) {
super(layoutParams);
}
}
public RotateLayout(Context context) {
super(context);
}
public RotateLayout(Context context, AttributeSet attrs) {
super(context, attrs);
setWillNotDraw(false);
}
public View getView() {
return view;
}
#Override
protected void onFinishInflate() {
super.onFinishInflate();
view = getChildAt(0);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
final LayoutParams layoutParams = (LayoutParams) view.getLayoutParams();
if(angle != layoutParams.angle) {
angle = layoutParams.angle;
angleChanged = true;
}
if(Math.abs(angle % 180) == 90) {
measureChild(view, heightMeasureSpec, widthMeasureSpec);
setMeasuredDimension(
resolveSize(view.getMeasuredHeight(), widthMeasureSpec),
resolveSize(view.getMeasuredWidth(), heightMeasureSpec));
}
else {
measureChild(view, widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(
resolveSize(view.getMeasuredWidth(), widthMeasureSpec),
resolveSize(view.getMeasuredHeight(), heightMeasureSpec));
}
}
#Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
if(changed || angleChanged) {
layoutRectF.set(0, 0, r - l, b - t);
layoutTransitionMatrix.setRotate(angle, layoutRectF.centerX(), layoutRectF.centerY());
layoutTransitionMatrix.mapRect(layoutRectFRotated, layoutRectF);
layoutRectFRotated.round(viewRectRotated);
angleChanged = false;
}
view.layout(viewRectRotated.left, viewRectRotated.top, viewRectRotated.right, viewRectRotated.bottom);
}
#Override
protected void dispatchDraw(Canvas canvas) {
canvas.save();
canvas.rotate(-angle, getWidth() / 2f, getHeight() / 2f);
super.dispatchDraw(canvas);
canvas.restore();
}
#Override
public ViewParent invalidateChildInParent(int[] location, Rect dirty) {
invalidate();
return super.invalidateChildInParent(location, dirty);
}
#Override
public boolean dispatchTouchEvent(MotionEvent event) {
touchPoint[0] = event.getX();
touchPoint[1] = event.getY();
layoutTransitionMatrix.mapPoints(childTouchPoint, touchPoint);
event.setLocation(childTouchPoint[0], childTouchPoint[1]);
return super.dispatchTouchEvent(event);
}
#Override
public ViewGroup.LayoutParams generateLayoutParams(AttributeSet attrs) {
return new RotateLayout.LayoutParams(getContext(), attrs);
}
#Override
protected boolean checkLayoutParams(ViewGroup.LayoutParams layoutParams) {
return layoutParams instanceof RotateLayout.LayoutParams;
}
#Override
protected ViewGroup.LayoutParams generateLayoutParams(ViewGroup.LayoutParams layoutParams) {
return new RotateLayout.LayoutParams(layoutParams);
}
private View view;
private int angle;
private final Matrix layoutTransitionMatrix = new Matrix();
private final Rect viewRectRotated = new Rect();
private final RectF layoutRectF = new RectF();
private final RectF layoutRectFRotated = new RectF();
private final float[] touchPoint = new float[2];
private final float[] childTouchPoint = new float[2];
private boolean angleChanged = true;
}
attrs.xml (add this file to res/values folder)
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="RotateLayout_Layout">
<attr name="layout_angle" format="integer" />
</declare-styleable>
</resources>
Usage example:
<com.you.package.name.RotateLayout
xmlns:app="http://schemas.android.com/apk/res/com.you.package.name"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_angle="-90"
android:text="Rotated Button"/>
</com.you.package.name.RotateLayout>