PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Friday, November 18, 2022

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

 November 18, 2022     android, android-linearlayout, listview, listviewitem, vertical-alignment     No comments   

Issue

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.



Answered By - Alyoshak
Answer Checked By - Candace Johnson (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing