How to center align a textview below imageview as a title in a List view

Question

I am not able to align a text below imageview in a listview. below is my code.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"     >

    <ImageView 
            android:id="@+id/icon"
            android:layout_width="wrap_content"
            android:layout_height="50dp" />


    <TextView 
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/icon"
            android:layout_alignParentBottom="true"  
            android:gravity="center"
            android:singleLine="true"
            android:layout_marginLeft="20dp"
            android:textColor="@color/white"/>


</RelativeLayout>

and ListView is

<ListView    android:id="@+id/grid_view"
            android:layout_width="wrap_content"
            android:layout_height="280sp"
            android:layout_alignParentLeft="true"
            android:layout_marginTop="20dp"
            android:layout_toLeftOf="@+id/imgView"
            android:scrollbars="none"
            android:divider="@null"
            android:gravity="center" >
</ListView>

java code to dynamically add text and image from array

@Override
    public View getView(int position, View convertView, ViewGroup parent) {         
        ViewHolder holder;
        if (convertView == null) {
            convertView = l_Inflater.inflate(R.layout.gridview_layout, null);
            holder = new ViewHolder();
            holder.imageName = (TextView) convertView.findViewById(R.id.name);
            holder.image = (ImageView) convertView.findViewById(R.id.icon);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }


        holder.imageName.setText(name[position]);
        holder.image.setImageResource(mThumbIds[position]);

        return convertView;
    }

not getting how to center text below imageview. please help me to solve this problem.

Answer 1

Simply use the layout_centerHorizontal attribute in your TextView:

<TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/icon"
        android:layout_alignParentBottom="true"  
        android:layout_centerHorizontal="true"
        android:singleLine="true"
        android:textColor="@color/white" />

Answer 2

In textview change

android:layout_width="wrap_content" 

to

android:layout_width="match_parent"

Answer 3

You should use Linear layout to set orientation attribute. Set orientation to vertical for Linear layout and set imageview attribute android:layout_gravity="center" Here is the complete code:

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        android:layout_marginTop="@dimen/activity_horizontal_margin"
        android:layout_marginBottom="@dimen/activity_horizontal_margin"
         >

        <ImageView
            android:id="@+id/grid_item_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
           android:layout_gravity="center"
            android:src="@drawable/home" >
        </ImageView>

        <TextView
            android:id="@+id/grid_item_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Cardiology"
            android:layout_gravity="center"
            android:layout_marginTop="5px"
            android:textSize="20sp" >
        </TextView>

    </LinearLayout>

hope it will help