Rotated text in AppWidget

Question

I have a layout for an App Widget which has a 3x3 grid of rotated TextViews:

<LinearLayout
    style="@style/WidgetButtonLayout"
    android:id="@+id/widget_buttons_text_port" >

    <LinearLayout style="@style/WidgetButtonRow">
        <TextView
            style="@style/WidgetButton.Text"
            android:rotation="-90"
            android:id="@+id/upperLeft_text_port" />
        <TextView
            style="@style/WidgetButton.Text"
            android:rotation="-90"
            android:id="@+id/upperMiddle_text_port" />
        <TextView
            style="@style/WidgetButton.Text"
            android:rotation="-90"
            android:id="@+id/upperRight_text_port" />
    </LinearLayout>

    <LinearLayout style="@style/WidgetButtonRow">
        <TextView
            style="@style/WidgetButton.Text"
            android:rotation="-90"
            android:id="@+id/middleLeft_text_port" />
        <TextView
            style="@style/WidgetButton.Text"
            android:rotation="-90"
            android:id="@+id/middleMiddle_text_port" />
        <TextView
            style="@style/WidgetButton.Text"
            android:rotation="-90"
            android:id="@+id/middleRight_text_port" />
    </LinearLayout>

    <LinearLayout style="@style/WidgetButtonRow">
        <TextView
            style="@style/WidgetButton.Text"
            android:rotation="-90"
            android:id="@+id/lowerLeft_text_port" />
        <TextView
            style="@style/WidgetButton.Text"
            android:rotation="-90"
            android:id="@+id/lowerMiddle_text_port" />
        <TextView
            style="@style/WidgetButton.Text"
            android:rotation="-90"
            android:id="@+id/lowerRight_text_port" />
    </LinearLayout>

</LinearLayout>

Where the styles are:

<style name="WidgetButtonLayout">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">match_parent</item>
    <item name="android:orientation">vertical</item>
    <item name="android:weightSum">3</item>
</style>

<style name="WidgetButtonRow">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:orientation">horizontal</item>
    <item name="android:layout_weight">1</item>
    <item name="android:weightSum">3</item>
</style>

<style name="WidgetButton">
    <item name="android:layout_weight">1</item>
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_height">match_parent</item>
    <item name="android:layout_margin">1dp</item>
    <item name="android:gravity">center</item>
</style>

<style name="WidgetButton.Text">
    <item name="android:textSize">15sp</item>
    <item name="android:text">@string/button_settings</item>
    <item name="android:textColor">@color/widgetButtonText</item>
    <item name="android:background">@color/transparent</item>
</style>

This works fine, except that the text in each of the grid boxes wraps based on the unrotated width, not the rotated width, so that text is wrapped when there is space for it not to be... see e.g. the top-left grid box in the widget below:

Any idea how to fix this? I did think about just using a fixed and wider-than-needed TextView but the problem here is that the TextView is dynamically sized based on a grid layout.

EDIT note that since this is set within the context of an App Widget, this layout is for a RemoteViews and I cannot use setRotation() to set the rotation programmatically on the TextView (see here) and other similar options are likewise limited.

check [link1](https://stackoverflow.com/questions/1258275/vertical-rotated-label-in-android/7855852#7855852) , [link2](https://stackoverflow.com/questions/23311484/textview-rotation-keeps-width-and-height) — Mohammed Alaa, Apr 12 '20 at 14:11
@MohammedAlaa Those are not workable solutions for this, because the OP is talking about an App Widget, which entails `RemoteViews`. You can't use custom classes for that, and there is a very limited number of things that you can modify remotely. Just FYI. — Mike M., Apr 12 '20 at 14:22
@oiyio the accepted answer *does* solve my problem... I have it working now. Does your solution work when the layout is for an *App Widget* rather than an *Activity*? From comment above (and in the accepted answer) you can't use a custom view in an App Widget layout? — drmrbrewer, Apr 18 '20 at 08:13

score 1 · Accepted Answer · answered Apr 17 '20 at 11:55

If it weren’t a specific AppWidget case I would recommend you to use custom view such as this answer suggests.

It is Widget though, thus we cannot use custom views. We can use dirty hacks though.

Try this hack:

Hard-code the layout_width and layout_heightof the TextView larger than the expected text size - for example 1024dp x 1024dp.
Place your TextView in a FrameLayout
Use a gravity attribute to position the text within TextView boundary.
Use a layout_gravity attribute to position the TextView inside FrameLayout

In your case it will look something like this:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal">

        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:padding="8dp">
            <TextView
                android:layout_width="1024dp"
                android:layout_height="1024dp"
                android:layout_gravity="center"
                android:gravity="center"
                android:rotation="-90"
                android:text="Some text smaller than container" />
        </FrameLayout>
        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:padding="8dp">
            <TextView
                android:layout_width="1024dp"
                android:layout_height="1024dp"
                android:layout_gravity="center"
                android:gravity="center"
                android:rotation="-90"
                android:text="Some text smaller than container" />
        </FrameLayout>
        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:padding="8dp">
            <TextView
                android:layout_width="1024dp"
                android:layout_height="1024dp"
                android:layout_gravity="center"
                android:gravity="center"
                android:rotation="-90"
                android:text="Some text smaller than container" />
        </FrameLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal">

        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:padding="8dp">
            <TextView
                android:layout_width="1024dp"
                android:layout_height="1024dp"
                android:layout_gravity="center"
                android:gravity="center"
                android:rotation="-90"
                android:text="Some text smaller than container" />
        </FrameLayout>
        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:padding="8dp">
            <TextView
                android:layout_width="1024dp"
                android:layout_height="1024dp"
                android:layout_gravity="center"
                android:gravity="center"
                android:rotation="-90"
                android:text="Some text smaller than container" />
        </FrameLayout>
        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:padding="8dp">
            <TextView
                android:layout_width="1024dp"
                android:layout_height="1024dp"
                android:layout_gravity="center"
                android:gravity="center"
                android:rotation="-90"
                android:text="Some text smaller than container" />
        </FrameLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal">

        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:padding="8dp">
            <TextView
                android:layout_width="1024dp"
                android:layout_height="1024dp"
                android:layout_gravity="center"
                android:gravity="center"
                android:rotation="-90"
                android:text="Some text smaller than container" />
        </FrameLayout>
        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:padding="8dp">
            <TextView
                android:layout_width="1024dp"
                android:layout_height="1024dp"
                android:layout_gravity="center"
                android:gravity="center"
                android:rotation="-90"
                android:text="Some text smaller than container" />
        </FrameLayout>
        <FrameLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:padding="8dp">
            <TextView
                android:layout_width="1024dp"
                android:layout_height="1024dp"
                android:layout_gravity="center"
                android:gravity="center"
                android:rotation="-90"
                android:text="Some text smaller than container" />
        </FrameLayout>

    </LinearLayout>

</LinearLayout>

Yep you got it! As I mentioned in my OP, I had already tried using a fixed-size and larger-than-needed TextView, but the key is to enclose that within a FrameLayout so that the FrameLayouts can be sized properly in a grid. Thanks! — drmrbrewer, Apr 17 '20 at 13:46
Why does simply hardcoding textview a higher width not work? Also, why a frame layout; would a Linear Layout work? — vepzfe, Apr 21 '20 at 09:19

Rotated text in AppWidget

1 Answers1