CODEWITHSUNDEEP
androidandroid-layouttextviewimageview
Mohsin Mushtaq
Mohsin Mushtaq

Reputation: 133

center align imageview with above textview

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

enter image description here

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

Upvotes: 1

Views: 1867

Answers (7)

Almer Nakano
Almer Nakano

Reputation: 1

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.

Upvotes: 0

Snehal Poyrekar
Snehal Poyrekar

Reputation: 735

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>

Upvotes: 0

Sathya
Sathya

Reputation: 678

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>

Upvotes: 0

Mr.India
Mr.India

Reputation: 674

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>

Upvotes: 0

Pankaj Zanzane
Pankaj Zanzane

Reputation: 1242

Try to create three linear layouts with orietation vertical, Each linear layout will contain textview and imageview with gravity center

Upvotes: 0

JavaDM
JavaDM

Reputation: 851

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

Upvotes: 1

nette
nette

Reputation: 575

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.

Upvotes: 0

Related Questions