CODEWITHSUNDEEP
androidandroid-layoutandroid-imageviewtextview
Jacques Krause
Jacques Krause

Reputation: 5569

Align Text and Images Center to Each Other

I am displaying text and images in a list format next to each other but I can't get them to line up perfectly center next to each other in a straight line what am I missing

Here is my layout code below

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true" >



    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textSize="14dp"
        android:textStyle="bold"
        android:layout_gravity="center|right"
        android:gravity="center|right"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="10dp"

         />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/textView1"
        android:layout_gravity="center|right"
        android:gravity="center|right"
        android:src="@drawable/image_ls"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="10dp"

         />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center|right"
        android:text="TextView"
         android:textSize="14dp"
        android:layout_toRightOf="@+id/imageView1"
        android:textStyle="bold"
        android:gravity="center|right"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="10dp"
         />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_gravity="center|right"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/textView2"
        android:src="@drawable/image_ls"
        android:gravity="center|right"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="10dp"


         />


</RelativeLayout>

Upvotes: 0

Views: 893

Answers (2)

Ahmad Al-Sanie
Ahmad Al-Sanie

Reputation: 3785

i would prefer a linear layout over relative for this situation with this simple layout design, it is easier and straight forward you just need to use:

android:layout_gravity="center_vertical"

and play around with weights if any other size restriction is required. here is the solution hope its what you need:

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="hello"
        android:textStyle="bold"
        android:layout_gravity="center_vertical"
        android:layout_marginTop="10dp"

         />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:src="@drawable/ic_launcher"

        android:layout_gravity="center_vertical"
        android:layout_marginTop="10dp"

         />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="hello"
        android:textStyle="bold"
     android:layout_gravity="center_vertical"
        android:layout_marginTop="10dp"
         />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"

        android:layout_height="wrap_content"
      android:layout_gravity="center_vertical"
        android:src="@drawable/ic_launcher"

        android:layout_marginTop="10dp"


         />

</LinearLayout>
</LinearLayout>

Upvotes: 1

Jemshit
Jemshit

Reputation: 10048

This does work:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:padding="5dp"
    android:gravity="center_vertical|center_horizontal"


    android:background="@color/gray_dark">



    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="TextView"
        android:textSize="14dp"
        android:textStyle="bold"
        android:layout_gravity="center_vertical|right"
        android:gravity="center_vertical|right"
        android:layout_marginLeft="5dp"


        />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_toRightOf="@+id/textView1"
        android:layout_gravity="center_vertical|right"
        android:gravity="center_vertical|right"
        android:src="@drawable/image_ls"
        android:layout_marginLeft="5dp"


        />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical|right"
        android:text="TextView"
        android:textSize="14dp"
        android:layout_toRightOf="@+id/imageView1"
        android:textStyle="bold"
        android:gravity="center_vertical|right"
        android:layout_marginLeft="5dp"

        />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_toRightOf="@+id/textView2"
        android:src="@drawable/image_ls"
        android:layout_gravity="center_vertical|right"
        android:gravity="center_vertical|right"
        android:layout_marginLeft="5dp"



        />


</RelativeLayout>

Upvotes: 1

Related Questions