How to Rotate TextView 90 Degrees and display

Question

I am having a situation in Graph page where LinearLayout should display the TextView with 90 degrees rotated.

http://stackoverflow.com/questions/1258275/vertical-rotated-label-in-android checked this and solved my issue — sakshi, Jan 25 '12 at 15:42
It is possible to do this in XML as of API 11 (Android 3.0). http://stackoverflow.com/questions/3774770/sideways-view-with-xml-android — chobok, Aug 17 '13 at 06:22

score 70 · Answer 1 · answered Apr 29 '15 at 09:51

70

Try this::

<TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:rotation="-95"
                android:text="2" 
                />

answered Apr 29 '15 at 09:51

vijay

1,475
2
16
26

2

FYI. Its need Build.VERSION.SDK_INT >11 – MilapTank May 25 '16 at 08:32
26

problem in this approach is width size doesn't change. Any idea how to overcome this? – abh22ishek Jul 04 '17 at 11:10
@abh22ishek I figured a way around the width/height confusion issue. Basically I wrap the TextView in a RelativeLayout with negative margins. I'll post a full answer when I have time. – xjcl Jul 06 '20 at 23:58

score 42 · Accepted Answer · edited Oct 22 '14 at 05:06

The fastest and most convenient way is to Rotate by Animation

use rotate animation on your regular TextView like so.

rotateAnimation.xml:

<rotate  xmlns:android="http://schemas.android.com/apk/res/android"
           android:fromDegrees="0" 
           android:toDegrees="-90"
           android:pivotX="50%"
           android:duration="0"
           android:fillAfter="true" />

Java Code:

  TextView text = (TextView)findViewById(R.id.txtview);       
  text.setText("rotated text here");

  RotateAnimation rotate= (RotateAnimation)AnimationUtils.loadAnimation(this,R.anim.rotateAnimation);
  text.setAnimation(rotate);

This is good but not helped me a lot checked this http://stackoverflow.com/questions/1258275/vertical-rotated-label-in-android helped me a lot in my cse — sakshi, Jan 25 '12 at 15:41

score 17 · Answer 3 · edited Dec 02 '15 at 17:32

17

In android for any new view there is a method called setRotation(float) you can use it

textview.setRotation(float);

but please note that this method is Added in API level 11

so if you want to support it you can use this

if (Build.VERSION.SDK_INT < 11) {

    RotateAnimation animation = new RotateAnimation(oldAngel, newAngel);
    animation.setDuration(100);
    animation.setFillAfter(true);
    watermarkText.startAnimation(animation);
} else {

    watermarkText.setRotation(progress);
}

edited Dec 02 '15 at 17:32

TouchBoarder

6,422
2
52
60

answered Jan 14 '14 at 09:46

Simon K. Gerges

3,097
36
34

1

A little more explanation would be nice. – Avi Turner Jan 14 '14 at 10:29
I edited the answer for more info – Simon K. Gerges Jan 16 '14 at 13:57

score 12 · Answer 4 · edited May 23 '17 at 10:47

 <TextView 
            android:id="@+id/rotated_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:alpha=".3"
            android:background="@drawable/grey_capsule"
            android:gravity="center"
            android:textColor="@android:color/white"
            android:textSize="14sp"
            android:padding="4dp"
            android:layout_marginLeft="-50dp"
            android:rotation="-90"
            android:text="Andrew Coder" />

user7653815 · Answer 5 · 2017-05-06T09:52:21.863

[SOLVED] After a year of this being on my bucket list without any suitable answers on the forums I have finally sorted this!

The trick here is to hard-code the layout_width and layout_height of the TextView larger than the text will ever be - e.g. 100dp x 100dp.

Then place the TextView in a FrameLayout and turn clipping off for the FrameLayout android:clipChildren="false" and clip to padding off for the TextView android:clipToPadding="false":

TextView with hard-coded height and width

The TextView will now float in the FrameLayout. Use the TextView gravity settings to move the Text within it's boundary.

Then use the layout_gravity settings to move the boundary within the parent FrameLayout within it:

Here is an example of right and bottom aligned text rotated through -90 degrees:

Solution example

[UPDATE] Example XML for a frame view housing rotated text:

       <FrameLayout
            android:layout_width="@dimen/item_col_width_val"
            android:layout_height="match_parent"
            android:layout_weight="0.25"
            android:padding="@dimen/table_header_margin">
            <TextView
                android:layout_width="@dimen/table_title_row_height"
                android:layout_height="@dimen/table_title_row_height"
                android:layout_gravity="bottom|end"
                android:gravity="bottom"
                android:rotation="-90"
                android:text="@string/asm_col_title_in_stock"
                android:textColor="@color/colorGood" />
        </FrameLayout>

Please share your xml code so we can more quickly understand your explanation of your answer. — ProgDevCode, May 05 '17 at 19:43

score 0 · Answer 6 · answered Oct 09 '17 at 12:52

If you don't need animation then you can try a solution provided in a similar question. A text will be written from bottom to top.

It supports all basic TextView features:

text size
text color
text font
text padding
usage via XML

Main point is to override onDraw() and onMeasure() methods based on parameters of your text:

    @Override
    protected void onDraw(Canvas canvas)
    {
        super.onDraw(canvas);

        if (!this._text.isEmpty())
        {
            float textHorizontallyCenteredOriginX = this._measuredHeight / 2f;
            float textHorizontallyCenteredOriginY = this._ascent;

            canvas.translate(textHorizontallyCenteredOriginY, textHorizontallyCenteredOriginX);
            canvas.rotate(-90);
            canvas.drawText(this._text, 0, 0, this._textPaint);
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        try
        {
            this._textPaint.getTextBounds(this._text, 0, this._text.length(), this._textBounds);

            this._tempView = new TextView(getContext());
            this._tempView.setPadding(this._leftPadding, this._topPadding, this._rightPadding, this._bottomPadding);
            this._tempView.setText(this._text);
            this._tempView.setTextSize(TypedValue.COMPLEX_UNIT_PX, this._textSize);
            this._tempView.setTypeface(this._typeface);

            this._tempView.measure(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);

            this._measuredWidth = this._tempView.getMeasuredHeight();
            this._measuredHeight = this._tempView.getMeasuredWidth();

            this._ascent = this._textBounds.height() / 2 + this._measuredWidth / 2;

            setMeasuredDimension(this._measuredWidth, this._measuredHeight);
        }
        catch (Exception e)
        {
            setMeasuredDimension(widthMeasureSpec, heightMeasureSpec);
            Log.e(LOG_TAG, Log.getStackTraceString(e));
        }
    }

Please, take a look at Vertical (rotated) label in Android to see the full source code.

How to Rotate TextView 90 Degrees and display

6 Answers6

Linked