Android centering text in lists

Question

Say I have a list of Strings with the elements: "One", "Two", "Three", "Four"

I want to center them in the middle of the screen but I want to do it in a way that the start of each word is next to each other.

Like this:

                                      One
                                      Two
                                      Three
                                      Four

Considering that the font probably has different length per character, how do I do this best in Android?

Answer 1

you can set the gravity at the elements you want to be center and for detail

android:gravity="center_horizontal"

Answer 2

I'm not sure how your application is behaving and if a ListView is strictly required, but the effect you desire can be achieved using TableLayout and TableRows. The TableLayout will line up the elements in each column for each row as you have described.

Having said that, TableLayout does not support having lines between the rows or gridlines (although I have seem some clever hacks involving changing the background colour of the TableRow to black, and then changing the padding and background colour of the View objects in the TableRow to white to get a black divider line - but that doesn't always work depending on your View objects).

I'm in a similar pickle, and that was the first avenue I examined. It didn't have a solution for my situation, but this might work for you. And if you do find a way of lining up the text in a List, I'd love to hear about it.

EDIT: I also feel it is worth mentioning (based on how the conversation is progressing) that you can also set row.setOnClickListener() and make an entire row clickable in a TableView. Once you wrap it in a ScrollView, it's pretty list-like.

Answer 3

It sounds like you want to place your items within a parent with layout_width="wrap_content" and center the whole parent.

Something like this, perhaps?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    <TextView android:text="Content above..."
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <LinearLayout android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal">
        <TextView android:text="One"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <TextView android:text="Two"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <TextView android:text="Three"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <TextView android:text="Content below..."
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />    
</LinearLayout>

Remember the difference between gravity and layout_gravity. The gravity attribute refers to the view's content. layout_gravity (and all other attributes prefixed with layout_) refers to the view's layout within its parent.

Edit: If you're looking to format ListView items similarly, try something like this as your list item layout with the ListView itself using layout_width="fill_parent" and layout_height="fill_parent":

<LinearLayout android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:minHeight="?android:attr/listPreferredItemHeight"
    android:weightSum="2"
    android:gravity="center">
    <TextView android:id="@+id/text" 
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>

Change the content of the TextView with id text in each list item in the usual way. The minHeight setting pulled from the current theme will make sure it stays a good size for touch.

The uniform centering in this case is handled by a combination of the weightSum and gravity on the LinearLayout and the layout_weight on the TextView. The TextView's weight divided by its parent's weightSum will determine the percentage of horizontal space the LinearLayout will give it. In the example above it will get 1/2 the available horizontal space, but centered.

Since ListView never knows the content of list items that are not currently onscreen there is no way to have it measure the text of every item in your adapter to center the content perfectly. You will have to approximate it using a list item layout like the example above.

Answer 4

Wrap your ListView in a LinearLayout with layout_gravity="center_horizontal" or

nvm: that won't work obviously..

So wait.. You want a list, where each line is clickable for the whole width of the screen, and you want to justify all lines to left, and ALSO center all of the justified text without breaking justification?