How to fix TextView move far left and right when rotated?

Question

I want to make TextView align to left and right edges of window screen. The expect result will look like this

expected result

but the actual result look like this

actual result

Here is my XML...

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

    <FrameLayout
        android:id="@+id/cameraPreview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="@color/grey_700"
        android:text="TEST TEXT TEST TEXT"
        android:textColor="@color/white"
        android:textSize="35sp" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="@color/grey_700"
        android:text="TEST TEXT TEST TEXT"
        android:textColor="@color/white"
        android:textSize="35sp"
        />


    <TextView
        android:id="@+id/text3"

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/grey_700"
        android:rotation="270"
        android:text="TEST TEXT TEST TEXT"
        android:textColor="@color/white"
        android:textSize="35sp"
        android:layout_alignBottom="@+id/text4"
        android:layout_alignParentStart="true"
        />

    <TextView
        android:id="@+id/text4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/grey_700"
        android:rotation="90"
        android:text="TEST TEXT TEST TEXT"
        android:textColor="@color/white"
        android:textSize="35sp"
        android:layout_centerVertical="true"
        android:layout_alignParentEnd="true"
        />
</RelativeLayout>

It seem like that when I rotate the textview, only the textview I rotated will move far left and far right.

Do you have any ideas how to make 2 text view on the left and right align as expect result?

Thank you!

score 5 · Accepted Answer · edited May 23 '17 at 11:57

I found a custom vertical TextView in this answer that you can use and keep the backgrounds:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:id="@+id/cameraContainer"
             android:layout_width="match_parent"
             android:layout_height="match_parent">
    <FrameLayout
        android:id="@+id/cameraPreview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:background="@color/grey_700"
        android:text="TEST TEXT TEST TEXT"
        android:textColor="@color/white"
        android:textSize="35sp"/>
    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_gravity="bottom"
        android:background="@color/grey_700"
        android:text="TEST TEXT TEST TEXT"
        android:textColor="@color/white"
        android:textSize="35sp"/>
    <com.app.views.VerticalTextView
        android:id="@+id/text3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical|left"
        android:gravity="bottom|center_horizontal"
        android:text="TEST TEXT TEST TEXT"
        android:background="@color/grey_700"
        android:textColor="@color/white"
        android:textSize="35sp"/>
    <com.app.views.VerticalTextView
        android:id="@+id/text4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical|right"
        android:gravity="top|center_horizontal"
        android:text="TEST TEXT TEST TEXT"
        android:background="@color/grey_700"
        android:textColor="@color/white"
        android:textSize="35sp"/>
</FrameLayout>

/*VerticalTextView.java*/
package com.app.views;

import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.Gravity;
import android.widget.TextView;

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 boolean setFrame(int l, int t, int r, int b) {
        return super.setFrame(l, t, l + (b - t), t + (r - l));
    }

    @Override
    public void draw(Canvas canvas) {
        if (topDown) {
            canvas.translate(getHeight(), 0);
            canvas.rotate(90);
        } else {
            canvas.translate(0, getWidth());
            canvas.rotate(-90);
        }
        canvas.clipRect(0, 0, getWidth(), getHeight(), android.graphics.Region.Op.REPLACE);
        super.draw(canvas);
    }
}

I use vertical textviews a lot and use a method similar to this. — Suragch, Apr 20 '15 at 00:31
Thank you @Gero. It works and the text view doesn't lose its background. :) — myNameCoad, Apr 20 '15 at 12:17
In ScrollView the text view disappear when view go out of screen. what to do about it ? — Waqar Khan, Dec 19 '19 at 19:23

Gero · Answer 2 · 2015-04-20T00:25:27.640

You could trick the layout by using a square TextView, but you need to get rid of the backgrounds...

Try out this:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/cameraContainer"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
    <FrameLayout
        android:id="@+id/cameraPreview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    <TextView
        android:id="@+id/text1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:background="@color/grey_700"
        android:text="TEST TEXT TEST TEXT"
        android:textColor="@color/white"
        android:textSize="35sp"/>
    <TextView
        android:id="@+id/text2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_gravity="bottom"
        android:background="@color/grey_700"
        android:text="TEST TEXT TEST TEXT"
        android:textColor="@color/white"
        android:textSize="35sp"/>
    <com.app.views.TextViewSquareW
        android:id="@+id/text3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:gravity="center_horizontal"
        android:rotation="270"
        android:text="TEST TEXT TEST TEXT"
        android:textColor="@color/grey_700"
        android:textSize="35sp"/>
    <com.app.views.TextViewSquareW
        android:id="@+id/text4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:gravity="center_horizontal"
        android:rotation="90"
        android:text="TEST TEXT TEST TEXT"
        android:textColor="@color/grey_700"
        android:textSize="35sp"/>
</FrameLayout>

/*TextViewSquareW.java*/
package com.app.views;

import android.annotation.TargetApi;
import android.content.Context;
import android.os.Build;
import android.util.AttributeSet;
import android.widget.TextView;

public class TextViewSquareW extends TextView {
    public TextViewSquareW(Context context) {
        super(context);
    }

    public TextViewSquareW(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public TextViewSquareW(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public TextViewSquareW(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

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

when using a square, it works but losing background :( but thanks! — myNameCoad, Apr 19 '15 at 12:23

How to fix TextView move far left and right when rotated?

2 Answers2

Linked