How could I go about overriding the Button class to draw the text upside down? The formatting of other libraries I'm using screw up when the button itself it rotated, but I need the text flipped.
I'm not familiar with the onDraw method, and I'm not sure how I could make a subclass for this.
Any help is appreciated, thanks!
You can use the rotation attribute in your button something like this:
<Button
android:id="#+id/test_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text button"
android:rotation="180"/>
Or if you prefer using a custom button, you can create it something like this:
public class FlippedTextButton extends Button {
public FlippedTextButton(Context context) {
super(context);
}
public FlippedTextButton(Context context, AttributeSet attrs) {
super(context, attrs);
}
public FlippedTextButton(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onDraw(Canvas canvas) {
canvas.save();
float y = this.getHeight() / 2.0f;
float x = this.getWidth() / 2.0f;
canvas.rotate(180, x, y);
super.onDraw(canvas);
canvas.restore();
}
}
Then you can use it with:
<!-- Change to your class package name. -->
<com.example.flippedtext.FlippedTextButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Flipped text"/>
Here is the sample project on github: https://github.com/isnotmenow/FlippedText
Related
Just a newbie here.
Is it possible to draw a line over a layout?
I have an XML file(activity_main) and it contains a layout which is ImageLayout that I took from github. The layout contains an image and several buttons.
What I want to do is to draw a line between two points on the layout. In order to draw a line, people usually create a Draw class and extends View. On the MainActivity, they would setContent the Draw class. I have already setContent my XML file. How would I draw a line from this point?
EDIT:
I heard about the class Path, I think it is better than using onDraw because I would be connecting(drawing lines between) several points in my layout.
Enlighten me about it if you could
Subclass the container ViewGroup and override its dispatchDraw() method. I am providing example of subclassed LinearLayout, however, this would work with any other ViewGroup.
public class MyLinearLayout extends LinearLayout {
private Paint paint;
public MyLinearLayout(Context context) {
super(context);
initPaint();
}
public MyLinearLayout(Context context, AttributeSet attrs) {
super(context, attrs);
initPaint();
}
public MyLinearLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initPaint();
}
private void initPaint() {
paint = new Paint();
paint.setColor(Color.RED);
paint.setStrokeWidth(10);
}
#Override
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
canvas.drawLine(0, 0, canvas.getWidth(), canvas.getHeight(), paint);
}
}
Use this in your layout to do an horizontal line:
android:layout_width="fill_parent"
android:layout_height="2dp"
android:background="#c0c0c0"/>
I'm trying to create a custom LinearLayout that can rotate all children in the layout by a set angle. That is, I want to rotate the entire canvas and the children, not the children individually.
I need to support API Level 10, so android:rotate which was introduced in API Level 11 will not help me here.
I've been looking around and think I need to do something along the lines of this code below, but with this code nothing gets rotated.
Any ideas on what I'm missing here?
public class RotationLayout extends LinearLayout {
public RotationLayout(Context context) {
super(context);
init();
}
public RotationLayout(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public RotationLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
private void init() {
setWillNotDraw(false);
}
#Override
protected void onDraw(Canvas canvas) {
canvas.save();
canvas.rotate(350,0,0);
super.onDraw(canvas);
canvas.restore();
}
}`
I tried your code with a few changes.
In the onCreate(Bundle) of an activity class, I initialized the RotationLayout:
RotationLayout rl = new RotationLayout(this);
ImageView iv = new ImageView(this);
iv.setImageDrawable(getResources().getDrawable(R.drawable.some_drawable));
rl.addView(iv);
setContentView(rl);
And the view was indeed rotated 350 degrees(or 10 degrees counter-clockwise) around (0,0). This was what I changed:
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.rotate(350,0,0);
}
From notes on Canvas.save() (Link):
Saves the current matrix and clip onto a private stack. Subsequent
calls to translate,scale,rotate,skew,concat or clipRect,clipPath will
all operate as usual, but when the balancing call to restore() is
made, those calls will be forgotten, and the settings that existed
before the save() will be reinstated.
I'm rotating an ImageView with postRotate(float degrees, float px, float py), setting px and py to a few differnt values including (0,0) and (imgView.getHeight(),imgView.getWidth()) but it refuses to rotate around any other point than the center. I'm wondering whether it's got anything to do with the fact that my gravity is center in the LinearLayout?
My layout:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center">
<ImageView
android:id="#+id/imageTraj"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="matrix"
android:src="#drawable/impactangle" />
How I'm rotating the image:
matrix.postRotate(degrees,imageView.getHeight(),imageView.getWidth());
imageView.setImageBitmap(Bitmap.createBitmap(imageScaled, 0, 0,
imageScaled.getWidth(), imageScaled.getHeight(), matrix, true));
PS I've noticed there are a few similar questions, but none of them have suitable answers.
I am using a custom ImageView where I set the angle rotation.
public class CompassImage extends ImageView {
private float angleRotation;
public CompassImage(Context context) {
super(context);
}
public CompassImage(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CompassImage(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public void setAngleRotation(float angleRotation) {
this.angleRotation = angleRotation;
invalidate();
}
#Override
protected void onDraw(Canvas canvas) {
Rect clipBounds = canvas.getClipBounds();
canvas.save();
canvas.rotate(angleRotation, clipBounds.exactCenterX(), clipBounds.exactCenterY());
super.onDraw(canvas);
canvas.restore();
}
}
If you play around with clipBounds you may find that helpful.
A slight "hack", you could probably adjust the image size using something like Paint.net or Gimp, depending on your OS. That would make the image appear to spin on another point. This solution would be pointless if you are planning on using a lot of images though. This is a spinning cube tutorial using opengl.
I am trying to create ViewGroup based on FrameLayout that might be rotated 90 degrees CW / CCW and it still will be working correctly
So far my results are not so sucesful. So far it looks like that ( left side before rotation, right after; sorry for bright red )
Layout for Activity
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.TestProject.RotatedFrameLayout
android:id="#+id/container"
android:layout_centerInParent="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00F"/>
</RelativeLayout>
RotatedFrameLayout
public class RotatedFrameLayout extends FrameLayout {
private boolean firstMeasure = true;
public RotatedFrameLayout( Context context ) {
super( context );
init();
}
public RotatedFrameLayout( Context context, AttributeSet attrs ) {
super( context, attrs );
init();
}
public RotatedFrameLayout( Context context, AttributeSet attrs, int defStyle ) {
super( context, attrs, defStyle );
init();
}
private void init() {
setRotation( 90f );
}
#Override
protected void onMeasure( int widthMeasureSpec, int heightMeasureSpec ) {
super.onMeasure( heightMeasureSpec, widthMeasureSpec );
}
}
Some extra info
I don't want to use Animation rotation because buttons aren't clickable that way
I don't want to use landscape mode because in landscape on screen navigation buttons took a lot of space on Nexus 7 ( this is the main reason why I am trying to greate that rotated
It seems that only left and right side of the screen are out of bounds
It is quite hard to do and I think it is not worth doing. But if you really want to do this you need:
pass to ViewGroup correct size dimentions (swap width and height).
rotate ViewGroup canvas 90 degrees.
At this point everything should look fine, but touch events not working properly.
intercept all touch events and swap x and y. Then pass fixed events to ViewGroup.
I dont have any code samples and have never seen any ) This way should work, we did scale transformations with fragments where we had to fix touch events coordinates when fragment was scaled.
I havent tested it heavily but this works:
public class RotatedFrameLayout extends FrameLayout {
public RotatedFrameLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
public RotatedFrameLayout(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public RotatedFrameLayout(Context context) {
super(context);
init();
}
#SuppressLint("NewApi")
private void init() {
setPivotX(0);
setPivotY(0);
setRotation(90f);
}
#SuppressLint("NewApi")
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(heightMeasureSpec, widthMeasureSpec);
setTranslationX(getMeasuredHeight());
}
}
I am new to android. Now I generated two ImageView in my Android XML file. I want to use canvas to draw two circles in each view. But the problem is, how can I deal with the coordinates? How can I know the coordinates? And how can I center them? Thanks!
ImageViews are for displaying image files, normally. If you want to draw your view yourself, you create your own View and override the onDraw method. Here is a class that draws a big red circle inside itself:
public class CircleView extends View {
public CircleView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public CircleView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CircleView(Context context) {
super(context);
}
#Override
protected void onDraw(Canvas canvas) {
Paint red = new Paint();
red.setColor(0xffff0000);
int height = getHeight();
int width = getWidth();
int radius = width < height ? width/2 : height/2;
canvas.drawCircle(width/2, height/2, radius, red);
}
}
You cannnot draw cirlces in an ImageView. You can only draw a circle in a bitmap and apply that bitmap to an ImageView.
Or you can create custom views and draw directly on their canvas.
In both cases you need to find the size of these views after they are created. Then you will know the coordinates as the 0,0 starts in the top left corner.