Search code examples
androidlistviewandroid-linearlayoutvertical-alignmentlistviewitem

How to center widgets vertically when orientation is horizontal for an Android LinearLayout?


I have several different item view types in an Android ListView, each with its own LinearLayout. I am trying to center all of their widgets vertically in addition to their being placed horizontally relative to each other. See the the very first item in the ListView in the attached pic. It looks fine except that the widgets are pushed up near the top of the ListView item.

The light blue and light green backgrounds for the TextView and ImageViews are intended to help view the effects of the xml on placement. Immediately below the image is my layout for that topmost item in the ListView. How can I make the TextView as well as the circular images (ImageView) to be centered vertically?

enter image description here

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:paddingBottom="5dp">

        <TextView
            android:id="@+id/ques_num"
            android:layout_width="30dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:layout_marginTop="2dp"
            android:layout_marginBottom="2dp"
            android:background="@color/LightBlue"
            android:text="0."
            android:textSize="22sp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_gravity="center_vertical"
            android:background="@color/LightGreen"
            android:adjustViewBounds="true"
            android:id="@+id/question_id_0" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_gravity="center_vertical"
            android:background="@color/LightGreen"
            android:adjustViewBounds="true"
            android:id="@+id/question_id_1" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_gravity="center_vertical"
            android:background="@color/LightGreen"
            android:adjustViewBounds="true"
            android:id="@+id/question_id_2" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_gravity="center_vertical"
            android:background="@color/LightGreen"
            android:adjustViewBounds="true"
            android:id="@+id/question_id_3" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_gravity="center_vertical"
            android:background="@color/LightGreen"
            android:adjustViewBounds="true"
            android:id="@+id/question_id_4" />


</LinearLayout>

UPDATE:

I tried simply adding to the LinearLayout:

android:gravity="center_horizontal"

and afterwards tried changing it to:

android:gravity="center_horizontal|center_vertical"

In both cases it resulted in moving the widgets into the horizontal center of the ListView item, but had no effect on the vertical positioning. See the results here in the image:

enter image description here


Solution

  • The entire problem was a combination of this line in the LinearLayout:

    android:paddingBottom="5dp"
    

    and the fact that, given the size of the content in the TextView and ImageView objects, the upper and lower boundaries of the ListView items were already pressing in as much as they could. There was no room for centering adjustments to take place even though it looked like there was, because of the paddingBottom attribute.