Vertical TextView taking too much space in Android

Question

I am trying to create something like the following using LinearLayout and TableLayout:

enter image description here

I am stuck on Vertical Text, though. It is taking more space than it should take after rotation.

The following is the XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/tv_CONSEQUENCES"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:rotation="-90"
        android:text="CONSEQUENCES"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TableLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent" >

        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

        </TableRow>

        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

        </TableRow>
         <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

        </TableRow>
         <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <Button
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button" />

        </TableRow>
    </TableLayout>

</LinearLayout>

and the output is like this:

enter image description here

The vertical text is taking more space than it should need, and not all of the text is appearing. :(

Take a look at that post http://stackoverflow.com/questions/2888780/is-it-possible-to-write-vertically-in-a-textview-in-android good luck — An-droid, Jun 12 '13 at 07:31
The accepted answer is the duplicate I just flagged. This question should be closed. — Trenton McKinney, Apr 23 '21 at 04:36

score 20 · Answer 1 · edited Jan 17 '14 at 07:19

20

You can use code below:

android:rotation="270"

edited Jan 17 '14 at 07:19

Ben Trengrove

8,191
3
40
58

answered Jan 17 '14 at 06:59

quangson91

1,044
1
16
30

this cause whole TextView including its background to be rotated, this might not be desirable – frogatto Feb 14 '14 at 16:02
Yes, So the best way is Custom TextView vertical. You can use this example I've search on google: http://www.pocketmagic.net/2010/12/android-vertical-textview-custom-angle-text/ I hope help you :) – quangson91 Feb 17 '14 at 02:51
it still takes that extra space – Prabs Feb 20 '17 at 07:27
4

@Prabs add minus margin values to remove extra space. like `android:layout_marginLeft="-20dp" android:layout_marginRight="-10dp"` – Chathura Wijesinghe Oct 04 '17 at 07:02

score 13 · Answer 2 · answered Nov 09 '16 at 17:02

None of the solutions worked for me but I found this blog post by Mark Allison: https://blog.stylingandroid.com/verticaltext-part-1/

public class VerticalTextView extends TextView
{
    final boolean topDown;

    public VerticalTextView( 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 = false;
        }
        else
        {
            topDown = true;
        }
    }

    @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();
    }
}

The rotation is done by the gravity. So be sure to set this in your xml:

<com.stylingandroid.verticaltext.VerticalTextView
    style="@style/verticalTextStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="bottom|right"
    android:text="@string/text" />

Incase the view looks like change android:gravity="bottom|right" to android:gravity="bottom|center" — Goodlife, Nov 08 '17 at 14:08
its crashing on android Pie. java.lang.IllegalArgumentException: Invalid Region.Op - only INTERSECT and DIFFERENCE are allowed — AKASH WANGALWAR, Mar 04 '19 at 12:16

score 1 · Answer 3 · answered Jan 22 '19 at 22:25

    val textPaint = Paint(Paint.ANTI_ALIAS_FLAG)
    textPaint.textSize=toPx(16)
    textPaint.color=Color.parseColor("#FFFFFF")
    canvas.save()
    canvas.translate(50F, 60F)
    canvas.rotate(90F)
    canvas.drawPaint(textPaint)
    canvas.drawText("YourText", 0F,0F, textPaint)
    canvas.restore()

Pre_hacker · Answer 4 · 2019-09-28T07:34:36.510

Here is a hack to create vertical text view. So the scenario was I need to show a static tag on the right side of the screen. so I just used "\n" for the new line as my text was less.

android:text="A\nC\nT\nI\nO\nN"

You can check the image I've attached. although it's not suggested if you showing data from Dynamically.

<TextView
    android:id="@+id/tv_action"
    android:layout_width="20dp"
    android:layout_height="126dp"
    android:background="@drawable/bg_red_left_rcorner"
    android:gravity="center"
    android:padding="2dp"
    android:textStyle="bold"
    android:text="A\nC\nT\nI\nO\nN"
    android:textColor="@color/white"
    app:layout_anchor="@+id/drawer_layout"
    app:layout_anchorGravity="end|center" />

score 0 · Answer 5 · answered Jun 12 '13 at 07:49

0

Put all the Text view in Linear Layout and try to give proper Layout weight to solve your problem

answered Jun 12 '13 at 07:49

hm7

1
1

score 0 · Answer 6 · answered Aug 25 '15 at 04:49

0

        android:rotation="-90"
        android:layout_gravity="center"

Worked for me.

answered Aug 25 '15 at 04:49

Luke Allison

3,118
3
24
40

score 0 · Answer 7 · answered Jun 28 '18 at 07:26

0

in .xml file just put

<TextView> 
 android:layout_width="wrap content"
 android:layout_height="wrap content"
 android:rotation="270"
</TextView>

answered Jun 28 '18 at 07:26

amad durrani

52
11

score -1 · Answer 8 · answered Jun 12 '13 at 07:32

-1

why not put padding?so it will go in the center of your screen.just try it out if you like

answered Jun 12 '13 at 07:32

Giant

1,619
7
33
67

score -2 · Answer 9 · answered Jun 12 '13 at 07:54

-2

If you want to reproduce your image I would use a GridView or a TableLayout with no buttons, just set the proper listeners if you need to do any action. This way you can set fixed heights and widths.

answered Jun 12 '13 at 07:54

Neron T

369
2
8

Vertical TextView taking too much space in Android

9 Answers9

Linked