3

I have my screen, which is divided in the 4 parts vertically and I want vertical text in all the 4 strips, I tried using android:rotation="-90" but if my text is long it is appearing in the 2 lines. How can I make it only in 1 line.

I want DELHI AGRA in only line

enter image description here

Following is my xml layout 

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:baselineAligned="false"
        android:weightSum="4"
        android:layout_below="@+id/offers_view">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:id="@+id/first"
            android:background="#CC4D9E59"
            android:layout_weight="1"
            android:weightSum="1">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/one"
                android:text="Delhi Agra"
                android:textSize="@dimen/textsize_xxxmedium"
                android:textColor="@color/white"
                android:textAllCaps="true"
                android:rotation="-90"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:id="@+id/second"
            android:background="#CC9C27B0"
            android:layout_weight="1">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="Goa"
                android:id="@+id/two"
                android:textSize="@dimen/textsize_xxxmedium"
                android:textColor="@color/white"
                android:textAllCaps="true"
                android:gravity="center"
                android:rotation="-90"
                android:layout_gravity="bottom|center_vertical"
                android:layout_marginBottom="@dimen/margin_lmedium"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:id="@+id/third"
            android:background="#CC2196F3"
            android:layout_weight="1">

            <TextView
                android:layout_width="85dp"
                android:layout_height="match_parent"
                android:id="@+id/three"
                android:text="Delhi"
                android:textSize="@dimen/textsize_xxxmedium"
                android:textColor="@color/white"
                android:textAllCaps="true"
                android:gravity="center"
                android:rotation="-90"
                android:layout_gravity="top|center_horizontal"
                android:layout_marginTop="@dimen/margin_lmedium"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:id="@+id/fourth"
            android:background="#CCFF9800"
            android:layout_weight="1">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:id="@+id/view_all_cities"
                android:text="@string/view_all_cities"
                android:textSize="@dimen/textsize_xxxmedium"
                android:textColor="@color/white"
                android:textAllCaps="true"
                android:rotation="-90"
                android:gravity="center"
                android:layout_gravity="center_vertical"
                android:layout_marginTop="@dimen/margin_lmedium"/>

        </LinearLayout>

    </LinearLayout>
Cœur
  • 37,241
  • 25
  • 195
  • 267
Krishna Meena
  • 5,693
  • 5
  • 32
  • 44
  • 1
    Does `android:singleLine="true"` not work? – Phantômaxx Jun 11 '16 at 17:54
  • No, after adding this only DELHI is getting displayed – Krishna Meena Jun 11 '16 at 17:55
  • And did you set the width to be `wrap_content`? – Phantômaxx Jun 11 '16 at 17:56
  • yes, I have set both width and height to wrap_content – Krishna Meena Jun 11 '16 at 18:00
  • OK, try setting the width to `match_parent`. Also make sure that you don't have a `\n` between DELHI and AGRA. – Phantômaxx Jun 11 '16 at 18:01
  • Actually every strip width is fixed so if textview width is more than strip's width than it is appearing in 2 lines – Krishna Meena Jun 11 '16 at 18:01
  • Then this is your problem (and you already know why: `so if textview width is more than strip's width than it is appearing in 2 lines`). Please try as per my comment above on the `DELHI AGRA` TextView. They don't need to have the same width - only the height (which is divided in 4 equal parts). – Phantômaxx Jun 11 '16 at 18:02
  • I tried that but it is not working, Please try to understand my point I want screen to be divided into 4 strips and if the number of characters in the textview width is more than strip's width than it is appearing in the 2 lines but what I want is it should appear in single line as I have enough vertical space. – Krishna Meena Jun 11 '16 at 18:06
  • Well, if you think that I'm confusing between width and height; no, I'm not. Because I'm taking in account the **90° rotation**. – Phantômaxx Jun 11 '16 at 18:09
  • No no,I am not saying that. – Krishna Meena Jun 11 '16 at 18:12
  • Then, `android_width="match_parent"` with no `singleLine` should work just fine. Unless you have `\n` characters in between your words. – Phantômaxx Jun 11 '16 at 18:14
  • I have posted my xml layout, please tell me now – Krishna Meena Jun 11 '16 at 18:23
  • 1
    OH NO!! Why all those inner LinearLayouts?! – Phantômaxx Jun 11 '16 at 18:25
  • Wait a minute... I'll correct that for you. – Phantômaxx Jun 11 '16 at 18:25
  • Maybe AGRA doesn't appear because it would be off the screen – OneCricketeer Jun 11 '16 at 18:26
  • 2
    `android:rotation="-90"` applies _after_ measurement. The text may be drawn vertically, but the TextView itself still has its width (before rotation) constrained by the parent (so at most one quarter of the screen), and _then_ it is rotated. I don't think you can achieve the effect you want without writing a custom View, or extending TextView and making it measure and draw itself differently. – Karakuri Jun 11 '16 at 19:31
  • No, it didn't work. My last attempt was to apply the rotation to the container (set as vertical instead of horizontal). The only good result was in landscape mode, but it left some white paddings on the left and right sides. In practice, the overall width equated the height (something very "squarish"). Really odd. As @Karakuri noted, you may need to create a custom View. – Phantômaxx Jun 11 '16 at 19:45
  • check my answer it works for me https://stackoverflow.com/a/76260233/4264996 – madhu527 May 16 '23 at 07:12

1 Answers1

2

Finally I got it working

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:baselineAligned="false"
        android:weightSum="4"
        android:layout_below="@+id/offers_view">

        <com.example.app.views.VerticalTextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:id="@+id/one"
            android:text="Delhi Agra"
            android:textSize="@dimen/textsize_large"
            android:textColor="@color/white"
            android:textAllCaps="true"
            android:layout_weight="1"
            android:background="#CC4D9E59"
            android:layout_gravity="center"
            android:gravity="right|center_horizontal"
            android:paddingRight="@dimen/margin_lmedium"/>

        <com.example.app.views.VerticalTextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:text="Goa"
            android:id="@+id/two"
            android:textSize="@dimen/textsize_large"
            android:textColor="@color/white"
            android:textAllCaps="true"
            android:background="#CC9C27B0"
            android:layout_weight="1"
            android:gravity="left|center_horizontal"
            android:paddingLeft="@dimen/logo_size"/>

        <com.example.app.views.VerticalTextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:id="@+id/three"
            android:text="Delhi"
            android:textSize="@dimen/textsize_large"
            android:textColor="@color/white"
            android:textAllCaps="true"
            android:background="#CC2196F3"
            android:layout_weight="1"
            android:layout_gravity="center_horizontal"
            android:gravity="right|center_horizontal"
            android:paddingRight="@dimen/margin_lmedium"/>

        <com.example.app.views.VerticalTextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:id="@+id/view_all_cities"
            android:clickable="true"
            android:text="@string/view_all_cities"
            android:textSize="@dimen/textsize_large"
            android:textColor="@color/white"
            android:textAllCaps="true"
            android:background="#CCFF9800"
            android:layout_weight="1"
            android:layout_gravity="center_horizontal"
            android:gravity="center_horizontal" />

    </LinearLayout>

Follow this for VerticalTextView Vertical (rotated) label in Android

Community
  • 1
  • 1
Krishna Meena
  • 5,693
  • 5
  • 32
  • 44