Want To Show Image And Text Side By Side In Android

January 20, 2023 Post a Comment

I am new to android development, I am building an app and on that I want to show Imageview and Textview side by side in android layout. Below code is showing textview below the ima

Solution 1:

Check this.. It will creates layout view hows you want.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/vly"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingTop="20px"
        android:weightSum="3">

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

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


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

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="20px"
                    android:text="Exercise 1"
                    android:textAlignment="center"
                    android:textAllCaps="true"
                    android:textSize="10dp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/ly2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/ly1"
                android:orientation="horizontal"
                android:paddingLeft="5px"
                android:paddingRight="5px">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="20px"
                    android:layout_weight="1"
                    android:text="Exercise Name:" />

                <TextView
                    android:id="@+id/en1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="20px"
                    android:layout_weight="1" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/ly3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/ly2"
                android:orientation="horizontal"
                android:paddingLeft="5px"
                android:paddingRight="5px">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10px"
                    android:layout_weight="1"
                    android:text="Speed: " />

                <TextView
                    android:id="@+id/es1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10px"
                    android:layout_weight="1" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/ly4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/ly3"
                android:orientation="horizontal"
                android:paddingLeft="5px"
                android:paddingRight="5px">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10px"
                    android:layout_weight="1"
                    android:text="Repetition: " />

                <TextView
                    android:id="@+id/erep1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10px"
                    android:layout_weight="1"

                    android:textDirection="ltr" />

                <TextView
                    android:id="@+id/erep2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10px"
                    android:layout_weight="1"
                    android:textColor="#ffffff" />

                <TextView
                    android:id="@+id/erep3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10px"
                    android:layout_weight="1" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/ly5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/ly4"
                android:orientation="horizontal"
                android:paddingLeft="5px"
                android:paddingRight="5px">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10px"
                    android:layout_weight="1"
                    android:text="Weight: " />

                <TextView
                    android:id="@+id/ew1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10px"
                    android:layout_weight="1"

                    android:textDirection="ltr" />

            </LinearLayout>
        </LinearLayout>

    </LinearLayout>
</RelativeLayout>

Solution 2:

you can't use ConstraintLayout in this way, follow the this code;

    <LinearLayout
    android:weightSum="2"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">


    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>

</LinearLayout>

Solution 3:

Looks like @drawable/gym_logo1 is the child of @+id/vly LinearLayout that has android:orientation="vertical". You should try making it the child of @+id/ly1

Solution 4:

Create your layout like this it'll work for you...but remind one thing search first if you don't get solution then ask...

Baca Juga

<android.support.constraint.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="fill_parent"
android:layout_height="fill_parent"
>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="@color/colorBackground">
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/imageView"
    android:src="@drawable/gym_logo1"/>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingTop="20px"
    android:layout_toRightOf="@+id/imageView"
    android:id="@+id/vly">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:id="@+id/ly1">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Exercise 1"
            android:textAlignment="center"
            android:textAllCaps="true"
            android:textColor="#ffffff"
            android:layout_marginTop="20px"
            android:textSize="10dp"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/ly1"
        android:paddingLeft="5px"
        android:paddingRight="5px"
        android:id="@+id/ly2"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Exercise Name:"
            android:textColor="#ffffff"
            android:layout_marginTop="20px"
            android:layout_weight="1"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/en1"
            android:textColor="#ffffff"
            android:layout_marginTop="20px"
            android:layout_weight="1"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/ly2"
        android:id="@+id/ly3"
        android:paddingLeft="5px"
        android:paddingRight="5px"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Speed: "
            android:textColor="#ffffff"
            android:layout_marginTop="10px"
            android:layout_weight="1"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/es1"
            android:textColor="#ffffff"
            android:layout_marginTop="10px"
            android:layout_weight="1"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/ly3"
        android:paddingLeft="5px"
        android:paddingRight="5px"
        android:orientation="horizontal"
        android:id="@+id/ly4">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Repetition: "
            android:textColor="#ffffff"
            android:layout_marginTop="10px"
            android:layout_weight="1"/>

        <TextView
            android:id="@+id/erep1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10px"
            android:layout_weight="1"
            android:textColor="#ffffff"
            android:textDirection="ltr" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/erep2"
            android:textColor="#ffffff"
            android:layout_marginTop="10px"
            android:layout_weight="1"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/erep3"
            android:textColor="#ffffff"
            android:layout_marginTop="10px"
            android:layout_weight="1"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/ly4"
        android:paddingLeft="5px"
        android:paddingRight="5px"
        android:orientation="horizontal"
        android:id="@+id/ly5">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Weight: "
            android:textColor="#ffffff"
            android:layout_marginTop="10px"
            android:layout_weight="1"/>

        <TextView
            android:id="@+id/ew1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10px"
            android:layout_weight="1"
            android:textColor="#ffffff"
            android:textDirection="ltr" />

    </LinearLayout>
</LinearLayout>



</RelativeLayout>
</android.support.constraint.ConstraintLayout>

Solution 5:

why don't you use drawable left?

Use drawable left in first text-view and with proper padding between drawable and text you can easily achieve what you intend.

        <?xml version="1.0" encoding="utf-8"?>
     <android.support.constraint.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="fill_parent"
       android:layout_height="fill_parent"
       tools:context="com.example.spand.krishnasoftwares.Main2Activity">

           <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Exercise 1"
            android:textAlignment="center"
            android:textAllCaps="true"
            android:textColor="#ffffff"
            android:drawableLeft="@drawable/"
            android:layout_marginTop="20px"
            android:textSize="10dp"/>
      </android.support.constraint.ConstraintLayout>

BENEFITS: You can save extra nesting of multiple view groups. Lesser rendering time in case of recycler view or list view. Recommended by Google developers resource.

Android Devweb