Android rotate animation

21 12 2013

Here is how to make view infinetely rotate around its center:

1. Define animation in xml

Put this file in /res/anim:

<?xml version="1.0" encoding="utf-8"?>
<rotate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2500"
    android:interpolator="@android:anim/linear_interpolator"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="infinite"
    android:repeatMode="restart"
    android:toDegrees="360" >

</rotate>

2. Load animation in java file

I load it in onCreate and keep it as a class field. Thanks to that I can access rotateAnim field to start or stop animation:

Animation rotateAnimation = AnimationUtils.loadAnimation(getActivity(), R.anim.rotate);

3. Start / stop animation on view

Here is how to start and stop animation:

view.startAnimation(rotateAnimation);
view.clearAnimation();

Did I help you?
I manage this blog and share my knowledge for free sacrificing my time. If you appreciate it and find this information helpful, please consider making a donation in order to keep this page alive and improve quality

Donate Button with Credit Cards

Thank You!





Android triangle (arrow) defined as an XML shape

24 08 2013

Arrow icons are widely used in android applications. Some use cases are pagination, incrementing or decrementing numeric values or on next / previous buttons. The example of such arrow that I needed was gray triangle arrow like this one

tr

I decided to build such reusable arrow as an xml drawable, so that there is no need to generate plain graphic .png files each time. Thanks to it I can easily change the colour, size and arrow direction.

Source

I created arrow_up.xml file in drawables directory with contents:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <rotate
            android:fromDegrees="45"
            android:toDegrees="45"
            android:pivotX="-40%"
            android:pivotY="87%" >
            <shape
                android:shape="rectangle" >
                <stroke android:color="@color/transparent" android:width="10dp"/>
                <solid
                    android:color="@color/your_color_here" />
            </shape>
        </rotate>
    </item>
</layer-list>

The idea is to create rectangle shape (<shape/>), fill with gray solid color (<solid/>), rotate it 45 degrees (<rotate/>) and move it over X and Y axis (pivotX and pivotY) in a way that only half of the rectangle is visible (cut along the diagonal).

I also added thick border (<stroke/>) with transparent color. This is because my arrow is a button, so the invisible part around is needed to ease the click (it enlarges click detection area size).

How to use it

The usage is as simple as any other xml drawable shape. It is just enough to set it as view background. Here is button example:

<Button
	android:layout_width="70dp"
	android:layout_height="70dp"
	android:background="@drawable/arrow_up" />

If you need arrow pointing in other direction, you can just rotate it. Here is arrow down:

<Button
	android:layout_width="70dp"
	android:layout_height="70dp"
	android:rotation="180"
	android:background="@drawable/arrow_up" />

So comapred to png icon it is:

scalable, because you can change its size as you wish, without providing bigger or smaller png files for each screen density. And there is no ‘pixelization’ visible regardless of scale used
customizable, because you can easier adjust its color to better fit your UI or use it in other projectno need to regenerate png file and change it in project. Just change the xml attribute.

Quite tricky and nice :)

Did I help you?
I manage this blog and share my knowledge for free sacrificing my time. If you appreciate it and find this information helpful, please consider making a donation in order to keep this page alive and improve quality

Donate Button with Credit Cards

Thank You!





Android: button with rotated (vertical) text

13 10 2012

If you want to build button with vertical text like that:

Vertical Button

You can override standard button and its onDraw() method. There you have to rotate text before drawing it. Same thing can be done with TextView – since button actually is extended TextView.

1. Write your own Button implementation

Here is code that actually you can copy-paste to your poject:

public class VerticalButton extends Button{
	final boolean topDown;

	public VerticalButton(Context context, AttributeSet attrs){
		super(context, attrs);
		final int gravity = getGravity();
		if(Gravity.isVertical(gravity) && (gravity&Gravity.VERTICAL_GRAVITY_MASK) == Gravity.BOTTOM) {
			setGravity((gravity&Gravity.HORIZONTAL_GRAVITY_MASK) | Gravity.TOP);
			topDown = true;
		}else
			topDown = false;
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
		super.onMeasure(heightMeasureSpec, widthMeasureSpec);
		setMeasuredDimension(getMeasuredHeight(), getMeasuredWidth());
	}

	@Override
	protected void onDraw(Canvas canvas){
		TextPaint textPaint = getPaint(); 
		textPaint.setColor(getCurrentTextColor());
		textPaint.drawableState = getDrawableState();

		canvas.save();

		if(topDown){
			canvas.translate(getWidth(), 0);
			canvas.rotate(90);
		}else {
			canvas.translate(0, getHeight());
			canvas.rotate(-90);
		}

		canvas.translate(getCompoundPaddingLeft(), getExtendedPaddingTop());
		getLayout().draw(canvas);
		canvas.restore();
	}
}

As you see – there is topDown flag. Depending on it the text will be rotated left or right (read from top to down or from down to top). This flag is set depending on the gravity defined in your layout.xml (set grafity to BOTTOM or TOP to see difference).

2. Place vertical button in activity

Do it by drag and drop in graphical layout editor (choose Custom & Library Views – Vertical button will be visible here since it extends some standard android view):

Vertical Button in graphical editor

or write xml code in layout.xml:

<pl.looksok.utils.VerticalButton
    android:id="@+id/verticalButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/verticalButton" />

please notice that package name of VerticalButton.java has to be written here (pl.looksok.utils).

3. That’s all!

Note: This code was found somewhere in the Internet (I can’t claim credit) – I really don’t remember wherefrom I took it :)

Did I help you?
I manage this blog and share my knowledge for free sacrificing my time. If you appreciate it and find this information helpful, please consider making a donation in order to keep this page alive and improve quality

Donate Button with Credit Cards

Thank You!








%d bloggers like this: