align textviews with first character

Question

I have a custom list view that looks like this:

<image><textview1>         <textview2>

Here's the XML file:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/leader_item"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    android:paddingTop="5dp"
    android:paddingBottom="5dp"
    android:orientation="horizontal"
    android:weightSum="2" >

<!-- heart icon and username -->
<RelativeLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:layout_marginLeft="20dp"
    android:paddingLeft="10dp"
    android:gravity="center"
    android:layout_marginRight="5dp" >


    <ImageView
        android:id="@+id/leader_heart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:src="@drawable/tt_heart_icon"
        />

    <TextView
        android:id="@+id/leader_username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="4dp"
        android:layout_toRightOf="@id/leader_heart"
        android:gravity="center"
        android:textColor="@color/light_blue"
        android:textSize="14sp"/>

</RelativeLayout>

<!-- like total -->
<TextView
    android:id="@+id/leader_like_total"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:layout_marginRight="20dp"
    android:gravity="center"
    android:textColor="@color/dark_grey"
    android:textSize="15sp"/>

</LinearLayout>

Right now the text looks like this:

 <img><texthere>           <text>
   <img><text>             <text>
<img><biggertexthere>      <text>

Is there anyway to rearrange the left-hand column such that the textviews are lined up with their first characters but still be centered within the parent? I.e.:

<img><texthere>           <text>
<img><text>               <text>
<img><biggertexthere>     <text>

Edit:

Here's what I would like to achieve:

    <header1>           <header2>
 <img><texthere>        <othertext>
 <img><text>            <othertext>
 <img><textherhehr>     <othertext>

score 0 · Answer 1 · edited May 23 '17 at 11:57

I think you just may need to switch one line in your XML file. Instead of centering your image, align it to the left edge of the parent view.

    <ImageView
        android:id="@+id/leader_heart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:src="@drawable/tt_heart_icon"
        />

*With regards to your edit: (and your question in comments)

to clarify:

-you want to have your items left aligned, and centered as a group

-you want your header centered above them as well, but not left aligned with the (image/text) items

here's what the xml could look like (I Think):

    <LinearLayout
        android:orientation="vertical"
        android:gravity="center"
        >

        <TextView/><!-- header -->

        <LinearLayout
            android:gravity="left"
            >

            <RelativeLayout>
                <ImageView/><TextView/>
            </RelativeLayout>

            <RelativeLayout>
                <ImageView/><TextView/>
            </RelativeLayout>

            <!--   ..    -->    

        </LinearLayout> 
    </LinearLayout>

So your outer layer would contain two views, each of which are independantly centered

if its any consulation I have to revisit this stackoverflow question every once in a while to help me remember how gravities work

Gravity and layout_gravity on Android

Hope my example is helpful!

*edit 2

You can implement the XML example I used above programmatically something like this:

    rl_outer = new LinearLayout(context);
    r_inner = new RelativeLayout(context);

    rl_outer.setLayoutParams(new LayoutParams(
        LayoutParams.MATCH_PARENT,
        LayoutParams.MATCH_PARENT));
    r_outer.setGravity(Gravity.CENTER)

    RelativeLayout.LayoutParams rl_ingame_layoutparams = new            RelativeLayout.LayoutParams(
        LayoutParams.MATCH_PARENT,
        LayoutParams.MATCH_PARENT));
    rl_inner_layoutparams.addRule(RelativeLayout.ALIGN_PARENT_LEFT);

   //then add your custom Listview to rl_inner

   rl_outer.addView(rl_inner,rl_inner_layoutparams);

   setContentView(rl_outer);

Something like this should should allow you to achieve the two layout criteria I mentioned above, with your custom listview.

He may also need to get rid of android:gravity="center" from both the first relative layout and the first text view. — Stephan Branczyk, Jul 29 '14 at 19:08
I edited my original post. I tried both of your solutions, and it aligned the text properly, but I want the to be centered below the . Right now I have to specify a leftMargin in order to try to "hack" it to be placed right under . Is there a way to center it under while still maintaing the text alignment? — ynnadkrap, Jul 31 '14 at 15:12
The headers are in a separate file because the XML layout I posted above is for a custom ListView (ArrayAdapter). — ynnadkrap, Jul 31 '14 at 19:21

Bismark Ito · Answer 2 · 2014-07-31T17:07:47.037

You can use drawableLeft to remove the inner RelativeLayout and you need to use center_vertical instead of center to keep the text left aligned:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/leader_item"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    android:orientation="horizontal"
    android:paddingBottom="5dp"
    android:paddingTop="5dp"
    android:weightSum="2">

    <!-- heart icon and username -->
    <TextView
        android:id="@+id/leader_username"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:drawableLeft="@drawable/tt_heart_icon"
        android:drawablePadding="4dp"
        android:gravity="center_vertical"
        android:textColor="@color/light_blue"
        android:textSize="14sp"/>

    <!-- like total -->
    <TextView
        android:id="@+id/leader_like_total"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_marginRight="20dp"
        android:gravity="center_vertical"
        android:textColor="@color/dark_grey"
        android:textSize="15sp"/>

</LinearLayout>

Edit: Now I got what you want. One solution is set a fixed width for each column (i.e. 100dp on this example) and center it like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/leader_item"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:paddingBottom="5dp"
    android:paddingTop="5dp"
    android:weightSum="2">

    <!-- heart icon and username -->
    <FrameLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_gravity="center_vertical">

        <TextView
            android:id="@+id/leader_username"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:drawableLeft="@drawable/tt_heart_icon"
            android:drawablePadding="4dp"
            android:gravity="center_vertical"
            android:textColor="@color/light_blue"
            android:textSize="14sp"/>

    </FrameLayout>

    <!-- like total -->
    <FrameLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_gravity="center_vertical">

        <TextView
            android:id="@+id/leader_like_total"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center_vertical"
            android:textColor="@color/dark_grey"
            android:textSize="15sp"/>
    </FrameLayout>

</LinearLayout>

This aligns everything to the left of the screen. I want them to be centered underneath and — ynnadkrap, Jul 31 '14 at 15:58
Setting the width was a neat trick, but it causes some of the text to wrap into multiple lines which I want to avoid. Also, the more I increase the width-dp, the further off-centered (to the left) the views become. — ynnadkrap, Jul 31 '14 at 19:15
In this case you need to know which list item is the largest and get it's width. Using Android ListView, is not possible to create a layout relationship between itens, that what you want to accomplish. You will need to add a code in your ListAdapter to get the maximum width and set it dynamically. — Bismark Ito, Jul 31 '14 at 21:08

align textviews with first character

2 Answers2