center align imageview with above textview

Question

I want to center align my imageview with the above textview here's an image of what I'm getting.

I need something like this in a relative layout

<TextView
    android:id="@+id/strength"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/hero_class"
    android:textColor="#0095FF"
    android:text="Strength"
    android:textAppearance="?android:attr/textAppearanceMedium" />

<TextView
    android:id="@+id/agility"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/hero_class"
    android:layout_centerHorizontal="true"
    android:text="Agility"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:textColor="#0095FF" />

<TextView
    android:id="@+id/intl"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/agility"
    android:layout_alignBottom="@+id/agility"
    android:layout_alignParentRight="true"
    android:text="Intelligence"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:textColor="#0095FF" />

<ImageView
    android:id="@+id/img_int"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignTop="@+id/img_str"
    android:src="@drawable/intelligence" />

<ImageView
    android:id="@+id/img_agi"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/img_int"
    android:layout_centerHorizontal="true"
    android:src="@drawable/agility" />

<ImageView
    android:id="@+id/img_str"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/strength"
    android:layout_alignParentLeft="true"
    android:src="@drawable/strength" />

This is what i have done but the problem is that i can have the middle imageview centered align but the left and right one are with align to the most right and most left not in the center of above textview

Answer 1

In layout.xml you can use this for each Text+Image:

<TextView ...
    android:text="The Text"
    android:drawableBottom="@drawable/icon1" />

You could repeat it into an LinearLayout with the horizontal orientation

Answer 2

You can make three Relative Views each containing a Textview and Imageview posited one below the other with the ImageView in the cater of the parent Relative View. Finally put these three within an outer Relative View to position them as you like.

Answer 3

You can use LinearLayout as parent Layout having android:orientation="horizontal" . and then use three LinearLayout each contains TextView and ImageView having android:orientation="vertical" .

See below code-

          <?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" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical" >
            <TextView
            android:id="@+id/strength"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/hero_class"
            android:textColor="#0095FF"
            android:text="Strength"
            android:textAppearance="?android:attr/textAppearanceMedium" />
        <ImageView
            android:id="@+id/img_agi"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/img_int"
            android:layout_centerHorizontal="true"
            android:src="@drawable/agility" />
        </LinearLayout>
     <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical" >
    TextView ImageView

    </LinearLayout>
    <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical" >
    TextView ImageView

    </LinearLayout>
    </LinearLayout>

Answer 4

尝试创建三个垂直方向的线性布局，每个线性布局将包含具有重心的textview和imageview

Answer 5

Hope this helps:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:background="@android:color/black" >

<RelativeLayout
    android:id="@+id/reltive1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true" >

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:text="TEXT VIEW"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        android:textStyle="bold" />

    <ImageView
        android:id="@+id/img1"
        android:layout_width="60dp"
        android:layout_height="80dp"
        android:layout_below="@id/text1"
        android:layout_centerHorizontal="true"
        android:background="@android:color/white" />
</RelativeLayout>

<RelativeLayout
    android:id="@+id/reltive1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true" >

    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:text="TEXT VIEW"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        android:textStyle="bold" />

    <ImageView
        android:id="@+id/img2"
        android:layout_width="60dp"
        android:layout_height="80dp"
        android:layout_below="@id/text2"
        android:layout_centerHorizontal="true"
        android:background="@android:color/white" />
</RelativeLayout>

<RelativeLayout
    android:id="@+id/reltive1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true" >

    <TextView
        android:id="@+id/text3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:text="TEXT VIEW"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        android:textStyle="bold" />

    <ImageView
        android:id="@+id/img3"
        android:layout_width="60dp"
        android:layout_height="80dp"
        android:layout_below="@id/text3"
        android:layout_centerHorizontal="true"
        android:background="@android:color/white" />
</RelativeLayout>

</RelativeLayout>

Answer 6

This is what you want...

<LinearLayout
    android:id="@+id/linear"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="TextView" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="TextView" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="TextView" />
</LinearLayout>

<LinearLayout
    android:id="@+id/linear2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/imgView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@drawable/ic_launcher" />

    <ImageView
        android:id="@+id/imgView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@drawable/ic_launcher" />

    <ImageView
        android:id="@+id/imgView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@drawable/ic_launcher" />
</LinearLayout>

Answer 7

Check if your ImageView is centered on your layout with this attribute:

android:layout_centerHorizontal="true"

For your TextView, it needs a reference to be aligned above it and also be centered. So you need this:

 android:layout_alignParentEnd="@+id/imageView"
 android:layout_alignParentRight="@+id/imageView"
 android:layout_alignParentLeft="true"
 android:layout_alignParentStart="true"
 android:gravity="center"

Create GridView adapter and your done.