CODEWITHSUNDEEP
androidandroid-layout
Doug Conran
Doug Conran

Reputation: 459

android sdk vertically left align text in vertical linearlayouts

I have a remoteview that contains 3 lines of text/images, each row consisting of 2 textviews and one imageview.

My structure is:-

Vertical Linearlayout Horizontal linearlayout Horizontal linearlayout Horizontal linearlayout.

The layout xml I'm using is:-

<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="5dp"
    android:paddingTop="5dp"
    android:paddingBottom="10dp"
    android:id="@+id/wevents"
    android:gravity="center_vertical">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical|left"
        android:layout_gravity="center_vertical"
        android:id="@+id/sub3">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="+10"
            android:id="@+id/wdays3"
            android:layout_weight="1"
            android:textColor="#ffffff" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="Some Text"
            android:id="@+id/wsubject3"
            android:layout_weight="4"
            android:textColor="#ffffff"
            android:paddingLeft="5dp"
            android:scrollHorizontally="true"
            android:ellipsize="end"
            android:maxLines="1"
            android:singleLine="true"
            android:layout_gravity="left" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/walarm3"
            android:src="@drawable/bell_white"
            android:layout_weight="1"
            android:layout_gravity="center" />
    </LinearLayout>

    ... (each of the other linearlayouts is exactly the same)

I have two problems:-

  1. I cannot get the second text field to vertically align under its predecessor.
  2. If the second text field is too long it pushes the image onto a second line.

So:

  1. How do I make it so that all texts left align under each other.
  2. How do I limit long text to be truncated with ellipses so that the images also align?

Upvotes: 1

Views: 266

Answers (1)

Lewis McGeary
Lewis McGeary

Reputation: 7922

The answers to both 1 and 2 should actually be the same here; you need to change the layout_width attribute to 0dp on your TextViews and ImageViews. So the first TextView should show:

        <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="+10"
        android:id="@+id/wdays3"
        android:layout_weight="1"
        android:textColor="#ffffff" />

And then do the same for the other TextViews and ImageViews.

The problem is that when you use layout_weight for these Views in a horizontal LinearLayout, you are saying that the width of each view should be calculated by referring to the weights you've specified, but when you say layout_width="wrap_content", you are saying the widths should be calculated based on what is inside the view, ie the length of text or size of the image. Specifying both methods to calculate the widths will cause some odd results, but if you set the widths to 0dp, then it will just go straight to the weights you have set.

It probably goes without saying, but I'll say it anyway, if you were using weights for items within a vertical linear layout, you would need to set the layout_height attributes to 0dp instead.

Upvotes: 1

Related Questions