How can you display upside down text with a textview in Android?
In my case I have a 2 player game, where they play across from each other. I want to display test to the second player oriented to them.
This was the solution I implemented after AaronMs advice
The class that does the overriding, bab.foo.UpsideDownText
package bab.foo;
import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.widget.TextView;
public class UpsideDownText extends TextView {
//The below two constructors appear to be required
public UpsideDownText(Context context) {
super(context);
}
public UpsideDownText(Context context, AttributeSet attrs)
{
super(context, attrs);
}
#Override
public void onDraw(Canvas canvas) {
//This saves off the matrix that the canvas applies to draws, so it can be restored later.
canvas.save();
//now we change the matrix
//We need to rotate around the center of our text
//Otherwise it rotates around the origin, and that's bad.
float py = this.getHeight()/2.0f;
float px = this.getWidth()/2.0f;
canvas.rotate(180, px, py);
//draw the text with the matrix applied.
super.onDraw(canvas);
//restore the old matrix.
canvas.restore();
}
}
And this is my XML layout:
<bab.foo.UpsideDownText
android:text="Score: 0"
android:id="#+id/tvScore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
>
</bab.foo.UpsideDownText>
in the xml file add:
android:rotation = "180"
in the respective element to display text upside down.
for example:
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="TextView"
android:rotation="180"/>
I haven't tried doing this myself, but I think it should work.
Override the view's onDraw method, call it's super passing in the canvas, then after call the rotate method on the canvas passed to it, passing in either 180 or Math.PI, depending on whether it works in degrees or radians.
the below code is working perfectly (thanks by the way). try to add the missing constructor. if it is not working my the problem is android version main is 2.1
package p.c;
import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.util.Log;
import android.widget.TextView;
public class TextViewUD extends TextView {
public TextViewUD(Context context) {
super(context);
// TODO Auto-generated constructor stub
}
public TextViewUD(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
}
public TextViewUD(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
// TODO Auto-generated constructor stub
}
#Override
protected void onDraw(Canvas canvas) {
canvas.save();
float py = this.getHeight()/2.0f;
float px = this.getWidth()/2.0f;
Log.d("testUD", String.format("w: %d h: %d ", this.getWidth(), this.getHeight()));
Log.d("testUD", String.format("w: %f h: %f ", py, px));
canvas.rotate(180, px, py);
super.onDraw(canvas);
canvas.restore();
}
}
Related
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
Is it possible to make the TextInputLayout label to show above the left drawable of an EditText perpendicularly when user focuses or types in the EditText.
Here is the xml of the EditText:
<android.support.design.widget.TextInputLayout
android:id="#+id/completion_date_layout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:orientation="horizontal">
<EditText
android:id="#+id/etTaskDate"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="#string/title_completion_date"
android:inputType="text"
android:drawableLeft="#drawable/ic_date"
android:paddingBottom="15dp"
android:drawablePadding="5dp"
android:textSize="#dimen/fields_text_size"/>
</android.support.design.widget.TextInputLayout>
Here is the desired output:
Here is the output that I am getting:
Thanks to Java's member access model and Google's developers who left a small loophole it could be achieved with a simple subclassing which repeats a minimum of the original code:
package android.support.design.widget;
import android.content.Context;
import android.graphics.Rect;
import android.util.AttributeSet;
public final class TextInputLayoutEx extends TextInputLayout {
private final int mDefaultPadding = __4DP__;
private final Rect mTmpRect = new Rect();
public TextInputLayoutEx(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
if (isHintEnabled() && mEditText != null) {
final Rect rect = mTmpRect;
ViewGroupUtils.getDescendantRect(this, mEditText, rect);
mCollapsingTextHelper.setCollapsedBounds(
rect.left + mDefaultPadding, getPaddingTop(),
rect.right - mDefaultPadding, bottom - top - getPaddingBottom());
mCollapsingTextHelper.recalculate();
}
}
}
Here we put a new class to the same package which opens an access to the mCollapsingTextHelper with a package-level visibility and then repeat part of the code from the original onLayout method which manages field name positioning. The __4DP__ value is 4dp value converted to pixels, I'm pretty sure everyone has an utility method for this.
In your xml layout just switch from the android.support.design.widget.TextInputLayout to android.support.design.widget.TextInputLayoutEx so your layout looks like this:
<android.support.design.widget.TextInputLayoutEx
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Mobile">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_phone_black_24dp"
android:drawablePadding="4dp"/>
</android.support.design.widget.TextInputLayoutEx>
And the result is
At the moment it works for com.android.support:design:25.3.1
I have made a workaround regarding this issue. It may be a bit unreliable but it works on my end.
Here is the code:
String spacer=" ";
EditText myEditText= (EditText)findViewById(R.id.myEditText);
myEditText.setText(spacer + "Today");
myEditText.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_calendar, 0, 0, 0);
What I did here was placing a spacer before the text inside the editText, then add the drawable left programatically.
But make sure to remove those spaces before fetching the contents of the editText:
String title = myEditText.getText().toString().substring(8);
This means i cropped the 8 spaces before the word "Today".
You can use animation and frame_layout to animate the left icon, try this link, may be helpful for you.
You can try this custom class: find here
and then just change in xml
com.mycompany.myapp.CustomTextInputLayout
import android.content.Context;
import android.graphics.Rect;
import android.support.design.widget.TextInputLayout;
import android.util.AttributeSet;
import java.lang.reflect.Field;
import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;
public class CustomTextInputLayout extends TextInputLayout {
private Object collapsingTextHelper;
private Rect bounds;
private Method recalculateMethod;
public CustomTextInputLayout(Context context) {
this(context, null);
}
public CustomTextInputLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CustomTextInputLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
#Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
adjustBounds();
}
private void init() {
try {
Field cthField = TextInputLayout.class.getDeclaredField("mCollapsingTextHelper");
cthField.setAccessible(true);
collapsingTextHelper = cthField.get(this);
Field boundsField = collapsingTextHelper.getClass().getDeclaredField("mCollapsedBounds");
boundsField.setAccessible(true);
bounds = (Rect) boundsField.get(collapsingTextHelper);
recalculateMethod = collapsingTextHelper.getClass().getDeclaredMethod("recalculate");
}
catch (NoSuchFieldException | IllegalAccessException | NoSuchMethodException e) {
collapsingTextHelper = null;
bounds = null;
recalculateMethod = null;
e.printStackTrace();
}
}
private void adjustBounds() {
if (collapsingTextHelper == null) {
return;
}
try {
bounds.left = getEditText().getLeft() + getEditText().getPaddingLeft();
recalculateMethod.invoke(collapsingTextHelper);
}
catch (InvocationTargetException | IllegalAccessException | IllegalArgumentException e) {
e.printStackTrace();
}
}
}
What I am trying to achieve is to make an arc shaped seekbar. I know there are plenty of libraries I could use to achieve this, but I am just trying my hands on custom made views.
I have encountered couple of problems:
I have a class which extends SeekBar, and I have implemented onDraw and onMeasure methods as well, but I am not able to view that in layout editor in eclipse, here is the code for the custom view class:
package com.custom.android.views;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Path.Direction;
import android.graphics.PathMeasure;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.SeekBar;
import android.widget.Toast;
public class CustomSeekBar extends SeekBar {
public CustomSeekBar(Context context) {
super(context);
// TODO Auto-generated constructor stub
}
public CustomSeekBar(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public CustomSeekBar(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
public void draw(Canvas canvas) {
// TODO Auto-generated method stub
super.draw(canvas);
}
#Override
protected synchronized void onMeasure(int widthMeasureSpec,
int heightMeasureSpec) {
// TODO Auto-generated method stub
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
Here is my layout 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.custom.android.views.CustomSeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/seekBar"/>
</RelativeLayout>
If I use canvas class to draw an arc or any shape, would that be a good starting point?
What exactly is wrong with the eclipse adt and how could I use the onDraw method to give shape to that seekbar?
Drawing a ProgressBar with any shape, is pretty easy. With the SeekBar you have some complexity, since you have to achieve 3 diferent things:
Draw the line
Draw the draggable thumb, if you want.
Handle the user interaction
You have to think of it as an arc that is draw inside a rectangle. So point 3 could be easy: just let the user move the finger in a horizontal line, or exactly over the arc, but considering only the x coordinate of the touch event. What does this mean, in short? ok, good news: you dont have to do anything, since thats the normal behavior of the base SeekBar.
For the second point, you can choose an image for the handler, and write it in the corresponding position with a little maths. Or you can forget the handler for know, and just draw the seek bar as a line representing the full track, and another line over it representing the progress. When you have this working, if you want you can add the handler.
And for the first point, this is the main one, but its not hard to achieve. You can use this code:
UPDATE: I made some improvements in the code
public class ArcSeekBar extends SeekBar {
public ArcSeekBar(Context context, AttributeSet attrs) {
super(context, attrs);
}
public ArcSeekBar(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
private Paint mBasePaint;
private Paint mProgressPaint;
private RectF mOval = new RectF(5, 5, 550, 550);
private int defaultmax = 180;
private int startAngle=180;
private int strokeWidth=10;
private int trackColor=0xFF000000;
private int progressColor=0xFFFF0000;
public void setOval(RectF mOval) {
this.mOval = mOval;
}
public void setStartAngle(int startAngle) {
this.startAngle = startAngle;
}
public void setStrokeWidth(int strokeWidth) {
this.strokeWidth = strokeWidth;
}
public void setTrackColor(int trackColor) {
this.trackColor = trackColor;
}
public void setProgressColor(int progressColor) {
this.progressColor = progressColor;
}
public ArcSeekBar(Context context) {
super(context);
mBasePaint = new Paint();
mBasePaint.setAntiAlias(true);
mBasePaint.setColor(trackColor);
mBasePaint.setStrokeWidth(strokeWidth);
mBasePaint.setStyle(Paint.Style.STROKE);
mProgressPaint = new Paint();
mProgressPaint.setAntiAlias(true);
mProgressPaint.setColor(progressColor);
mProgressPaint.setStrokeWidth(strokeWidth);
mProgressPaint.setStyle(Paint.Style.STROKE);
setMax(defaultmax);// degrees
}
#Override
protected void onDraw(Canvas canvas) {
canvas.drawArc(mOval, startAngle, getMax(), false, mBasePaint);
canvas.drawArc(mOval, startAngle, getProgress(), false, mProgressPaint);
invalidate();
//Log.i("ARC", getProgress()+"/"+getMax());
}
}
Of course, you can and you should make everything configurable, be means of the contructor, or with some setters for the start and end angles, dimensions of the containing rectangle, stroke widths, colors, etc.
Also, note that the arc is drawn from 0 to getProgress, being this number an angle relative to the x axis, growing clocwise, so, if it go from 0 to 90 degrees, it will be something like:
Of course you can change this: canvas.drawArc get any number as an angle, and it is NOT treated as module 360, but you can do the maths and have it starting and ending in any point you want.
In my example the beggining is in the 9 of a clock, and it takes 180 degrees, to the 3 in the clock.
UPDATE
I uploaded a running example to github
I'd like to animate the drawing of a path, i.e. to have it progressively appear on the screen. I am using the canvas and my best guess so far is to use an ObjectAnimator to take care of the animation. However, I cannot figure out how to actually draw the corresponding segment of the path in the onDraw() method. Is there a method that would allow to do this? Would I need to involve path effects for that?
Edit: Using a DashPathEffect and setting its "on" and "off" intervals in the animation to cover the part of the path we want to draw for that step seems to work here, but it requires allocating a new DashPathEffect for every step of the animation. I will leave the question open in case there is a better way.
Answering my own question, as I figured out a satisfying way to do that.
The trick is to use an ObjectAnimator to progressively change the current length of the stroke, and a DashPathEffect to control the length of the current stroke. The DashPathEffect will have its dashes parameter initially set to the following:
float[] dashes = { 0.0f, Float.MAX_VALUE };
First float is the length of the visible stroke, second length of non-visible part. Second length is chosen to be extremely high. Initial settings thus correspond to a totally invisible stroke.
Then everytime the object animator updates the stroke length value, a new DashPathEffect is created with the new visible part and set to the Painter object, and the view is invalidated:
dashes[0] = newValue;
mPaint.setPathEffect(new DashPathEffect(dashes, 0));
invalidate();
Finally, the onDraw() method uses this painter to draw the path, which will only comprise the portion we want:
canvas.drawPath(path, mPaint);
The only drawback I see is that we must create a new DashPathEffect at every animation step (as they cannot be reused), but globally this is satisfying - the animation is nice and smooth.
package com.nexoslav.dashlineanimatedcanvasdemo;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.DashPathEffect;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.animation.LinearInterpolator;
import androidx.annotation.Nullable;
public class CustomView extends View {
float[] dashes = {30, 20};
Paint mPaint;
private Path mPath;
private void init() {
mPaint = new Paint();
mPaint.setColor(Color.BLACK);
mPaint.setStrokeWidth(10f);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setPathEffect(new DashPathEffect(dashes, 0));
mPath = new Path();
mPath.moveTo(200, 200);
mPath.lineTo(300, 100);
mPath.lineTo(400, 400);
mPath.lineTo(1000, 200);
mPath.lineTo(1000, 1000);
mPath.lineTo(200, 400);
ValueAnimator animation = ValueAnimator.ofInt(0, 100);
animation.setInterpolator(new LinearInterpolator());
animation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
Log.d("bla", "bla: " + valueAnimator.getAnimatedValue());
mPaint.setPathEffect(new DashPathEffect(dashes, (Integer) valueAnimator.getAnimatedValue()));
invalidate();
}
});
animation.setDuration(1000);
animation.setRepeatMode(ValueAnimator.RESTART);
animation.setRepeatCount(ValueAnimator.INFINITE);
animation.start();
}
public CustomView(Context context) {
super(context);
init();
}
public CustomView(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public CustomView(Context context, #Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
public CustomView(Context context, #Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init();
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawPath(mPath, mPaint);
}
}
As far as I know, the only way is to start with an empty path and have a runnable that appends points to the path at defined intervals, until it is completed.
Does anyone knows if its possible to make the RatingBar go from right-to-Left instead of left to right, or have an idea how to do it?
You can use android:rotation="180" in your Ratingbar to rotate it
i used this way on my read-only Ratingbars, i dont know if this will effect interacting with the Ratingbar.
Use attribute android:scaleX="-1"
OR
package com.example.selection;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.RatingBar;
public class InvertRatingBar extends RatingBar {
public InvertRatingBar(Context context) {
super(context);
}
public InvertRatingBar(Context context, AttributeSet attrs) {
super(context, attrs);
}
public InvertRatingBar(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
int width = this.getMeasuredWidth();
event.setLocation(width - event.getX(), event.getY());
return super.onTouchEvent(event);
}
#Override
protected synchronized void onDraw(Canvas canvas) {
int width = this.getMeasuredWidth();
Matrix matrix = canvas.getMatrix();
matrix.preTranslate(width, 0);
matrix.preScale(-1.f, 1);
canvas.setMatrix(matrix);
super.onDraw(canvas);
}
}
You have to customize the RatingBar..
However you just have to play tricks with displaying RatingBar Images & then some sort of reverse calculations.
Trick will be displaying reverse Images in RatingBar.. swap selected and unselected images in RatingBar.
Allow user to rate on RatingBar. You have to swap selected and unselected calculations. I mean you have to do reverse calculations.
Complete Working example of custom RatingBar on StackOverflow answered by me only.
Download RatingBar icons from here : http://developer.android.com/guide/practices/ui_guidelines/icon_design.html