CODEWITHSUNDEEP
androidxmlandroid-layout
Laplace M
Laplace M

Reputation: 25

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

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

Like this: Display frame

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>

Upvotes: 1

Views: 214

Answers (5)

Happy Bhimani
Happy Bhimani

Reputation: 206

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!!

Upvotes: 2

jins joseph
jins joseph

Reputation: 301

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

enter image description here

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

Upvotes: 2

Vir Rajpurohit
Vir Rajpurohit

Reputation: 1937

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>

enter image description here

Upvotes: 1

Sanwal Singh
Sanwal Singh

Reputation: 1793

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.

Upvotes: 0

AskNilesh
AskNilesh

Reputation: 69744

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>

Upvotes: 2

Related Questions