How do i make some TextView right next to the ImageView in xml

Question

How can i create some TextView beside an ImageView in xml? I've tried my best, but still I can't make it.

I need 4 texts containing the title and description. The texts are intended to describe the image, any pointers or help would be appreciated

This is my xml code(end up getting a messy layout)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:background="@android:color/white"
    android:padding="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/img_item_photo"
        android:layout_width="150dp"
        android:layout_height="200dp"
        android:layout_marginEnd="@dimen/activity_horizontal_margin"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        android:src="@drawable/oneplus_7_pro_r1" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_toEndOf="@id/img_item_photo"
    android:layout_toRightOf="@id/img_item_photo"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/tv_item_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="165dp"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        android:text="@string/Hape_name"
        android:textSize="16sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/tv_item_Desc"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/activity_horizontal_margin" />

 </LinearLayout>
</RelativeLayout>

What is the problem with your current code? I think you are doing it right, I will also do it in the same way. — Ezio, Jul 16 '19 at 05:12
I'm not sure if something is wrong or something is missing with the code, but the display provided by the code does not match what I expected (see the image I uploaded in the question above) @Ezio — Laplace M, Jul 16 '19 at 05:19
it's too simple.. change your main layout orientation to horizontal. like this android:orientation="vertical" --> android:orientation="horizontal" — Mahendra Gohil, Jul 16 '19 at 05:36

score 2 · Accepted Answer · answered Jul 16 '19 at 05:13

Just remove android:layout_marginBottom="165dp" from your textview

Try this

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

    <ImageView
        android:id="@+id/img_item_photo"
        android:layout_width="150dp"
        android:layout_height="200dp"
        android:src="@drawable/ic_search_black" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@id/img_item_photo"
        android:layout_toRightOf="@id/img_item_photo"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/tv_item_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/load_available"
            android:textSize="16sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/tv_item_Desc"
            android:text="@string/load_available"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </LinearLayout>
</RelativeLayout>

Also, try with LinearLayout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:background="@android:color/white"
    android:orientation="horizontal"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/img_item_photo"
        android:layout_width="150dp"
        android:layout_height="200dp"
        android:src="@drawable/ic_search_black" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/load_available"
            android:textSize="16sp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/load_available"
            android:textSize="16sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/tv_item_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/load_available"
            android:textSize="16sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/tv_item_Desc"
            android:text="@string/load_available"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </LinearLayout>
</LinearLayout>

oh god, you're right, it resolves my problem, just by removing android: layout_marginBottom = "165dp", thank you very much — Laplace M, Jul 16 '19 at 06:37
hey sir, can we replace all the textview with recyclerview? or not? — Laplace M, Jul 16 '19 at 16:59
@LaplaceM yes if you want to display a list of textview then you can use recyclerview — AskNilesh, Jul 16 '19 at 17:34

score 2 · Answer 2 · edited Jul 16 '19 at 06:02

You can simply do this view using ConstraintLayout and it will look like below image and I posted the XML also use this:

Small Note: AndroidX is used here. If you are not familiar with androidX then, please take a small break to know about androidX and then try this.

if you are using support library (not androidX) then replace androidx.constraintlayout.widget.ConstraintLayout with android.support.constraint.ConstraintLayout in below code

<?xml version="1.0" encoding="utf-8"?>
       <androidx.constraintlayout.widget.ConstraintLayout      
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:srcCompat="@tools:sample/avatars" />

        <TextView
            android:id="@+id/tv_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/margin_8dp"
            android:text="textView 1"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium"
            android:textColor="@color/black"
            app:layout_constraintBottom_toTopOf="@id/tv_2"
            app:layout_constraintStart_toEndOf="@id/imageView1"
            app:layout_constraintTop_toTopOf="@id/imageView1" />

        <TextView
            android:id="@+id/tv_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/margin_8dp"
            android:text="textView 2"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium"
            android:textColor="@color/black"
            app:layout_constraintBottom_toTopOf="@id/tv_3"
            app:layout_constraintStart_toEndOf="@id/imageView1"
            app:layout_constraintTop_toBottomOf="@id/tv_1" />

        <TextView
            android:id="@+id/tv_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/margin_8dp"
            android:text="textView 3"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium"
            android:textColor="@color/black"
            app:layout_constraintBottom_toTopOf="@id/tv_4"
            app:layout_constraintStart_toEndOf="@id/imageView1"
            app:layout_constraintTop_toBottomOf="@id/tv_2" />

        <TextView
            android:id="@+id/tv_4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/margin_8dp"
            android:text="textView 4"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium"
            android:textColor="@color/black"
            app:layout_constraintBottom_toBottomOf="@id/imageView1"
            app:layout_constraintStart_toEndOf="@id/imageView1"
            app:layout_constraintTop_toBottomOf="@id/tv_3" />

    </androidx.constraintlayout.widget.ConstraintLayout>

Happy Bhimani · Answer 3 · 2019-07-16T09:00:49.377

You can use layout weight for better result in every case,as shown below,...

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:TextViewandroid="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/icons"
android:orientation="horizontal"
android:weightSum="2">

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_margin="@dimen/margin_10dp"
    android:layout_weight="1"
    android:background="@color/icons"
    android:gravity="center">

    <ImageView
        android:id="@+id/img_item_photo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/background_img" />

</LinearLayout>

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_weight="1"
    android:background="@color/icons">

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


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/margin_5dp"
            android:background="@drawable/style_curve_accent"
            android:text="Title"
            android:textSize="@dimen/margin_15sp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/margin_5dp"
            android:background="@drawable/style_edittext"
            android:text="Descripltion is Here. Descripltion is Here."
            android:textSize="@dimen/margin_15sp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/margin_5dp"
            android:layout_marginTop="@dimen/margin_5dp"
            android:background="@drawable/style_curve_accent"
            android:text="Title"
            android:textSize="@dimen/margin_20dp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/margin_5dp"
            android:background="@drawable/style_edittext"
            android:text="Descripltion is Here.Descripltion is Here."
            android:textSize="@dimen/margin_15sp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/margin_5dp"
            android:background="@drawable/style_curve_accent"
            android:text="Title"
            android:textSize="@dimen/margin_20dp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/margin_5dp"
            android:background="@drawable/style_edittext"
            android:text="Descripltion is Here.Descripltion is Here."
            android:textSize="@dimen/margin_15sp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/margin_5dp"
            android:background="@drawable/style_curve_accent"
            android:text="Title"
            android:textSize="@dimen/margin_20dp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/margin_5dp"
            android:background="@drawable/style_edittext"
            android:text="Description is here. Description is Here."
            android:textSize="@dimen/margin_15sp"
            android:textStyle="bold" />
    </LinearLayout>
</LinearLayout>

Hope this it will help you! Thanks!!

score 1 · Answer 4 · answered Jul 16 '19 at 05:20

Though your code seems fine with minor improvements.

Here is some alternate code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="@android:color/white"
android:padding="@dimen/activity_vertical_margin"
android:orientation="horizontal"
android:layout_height="match_parent">

<ImageView
    android:padding="10dp"
    android:layout_weight="1"
    android:id="@+id/img_item_photo"
    android:layout_width="0dp"
    android:layout_height="200dp"
    android:src="@drawable/side_nav_bar" />

<LinearLayout
    android:padding="10dp"
    android:layout_weight="1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/tv_item_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Test"
        android:textSize="16sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/tv_item_Desc"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Test 1"
        />

    <TextView
        android:id="@+id/tv_item_name1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Test"
        android:layout_marginTop="5dp"
        android:textSize="16sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/tv_item_Desc2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Test 2"
        />

</LinearLayout>

score 0 · Answer 5 · answered Jul 16 '19 at 05:16

Here is solution,

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/img_item_photo"
        android:layout_width="150dp"
        android:layout_height="200dp"
        android:layout_marginEnd="@dimen/activity_horizontal_margin"
        android:layout_marginRight="@dimen/activity_horizontal_margin" />

    <LinearLayout
        android:id="+@id/layout_field"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv_item_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/activity_horizontal_margin"
            android:layout_marginRight="@dimen/activity_horizontal_margin"
            android:text="Hape_name"
            android:textSize="16sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/tv_item_Desc"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/activity_horizontal_margin" />

    </LinearLayout>

</LinearLayout>

Add more textView inside layout_field.

How do i make some TextView right next to the ImageView in xml

5 Answers5