CODEWITHSUNDEEP
androidandroid-layout
pothios
pothios

Reputation: 261

Android Layout - image on the left with 3 textview on the right

The image below shows my desired layout.

I am able to get the image view and the first textview in the correct position. However, the other two textview is apprearing below the imageview.

Can anyone help please?

enter image description here

<?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="wrap_content"
    android:orientation="vertical" >

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

        <ImageView
            android:id="@+id/icon"
            android:layout_width="110dp"
            android:layout_height="110dp"
            android:background="@drawable/attraction_bg"
            android:gravity="left"
            android:adjustViewBounds="true"
            android:scaleType="fitXY"
            android:layout_marginBottom="2dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="10dp" />

        <TextView
            android:layout_toRightOf="@id/icon"
            android:id="@+id/row1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:textColor="@android:color/black"
            android:textSize="20dp"
            android:layout_weight="1" />

        <TextView
            android:id="@+id/row2"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:textColor="@android:color/black"
            android:textSize="20dp" />

        <TextView
            android:id="@+id/row3"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:textColor="@android:color/black"
            android:textSize="20dp" />


    </LinearLayout>

</LinearLayout>

Upvotes: 1

Views: 1492

Answers (4)

Basavannevva
Basavannevva

Reputation: 294

You have to use relative Layout check the code

 <?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="wrap_content"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/icon"
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:gravity="left"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:layout_marginBottom="2dp"
        android:background="@drawable/attraction_bg"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="10dp" />

    <TextView
        android:id="@+id/row2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_toRightOf="@id/icon"
        android:textColor="@android:color/black"
        android:textSize="20dp" />

    <TextView
        android:id="@+id/row3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/black"
        android:textSize="20dp"
        android:layout_below="@+id/row1"
        android:layout_toRightOf="@id/icon"
        />

    <TextView
        android:id="@+id/row1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/black"
        android:textSize="20dp"
        android:layout_weight="1"
        android:layout_toRightOf="@id/icon"
        android:layout_below="@+id/row2"
    />
</RelativeLayout>

Upvotes: 0

Jason Liao
Jason Liao

Reputation: 1

you should use RelativeLayout like this:

<?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="wrap_content"
android:orientation="vertical" >

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

    <ImageView
        android:id="@+id/icon"
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:background="@color/colorPrimary"
        android:gravity="left"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:layout_marginBottom="2dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="10dp" />

    <TextView
        android:layout_toRightOf="@id/icon"
        android:id="@+id/row1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:textColor="@android:color/black"
        android:textSize="20dp"
        android:text="text one"
        />

    <TextView
        android:text="text two"
        android:id="@+id/row2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@android:color/black"
        android:textSize="20dp"
        android:layout_below="@+id/row1"
        android:layout_toRightOf="@+id/icon"
        android:layout_toEndOf="@+id/icon" />

    <TextView
        android:text="text third"
        android:id="@+id/row3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@android:color/black"
        android:textSize="20dp"
        android:layout_below="@+id/row2"
        android:layout_toRightOf="@+id/icon"
        android:layout_toEndOf="@+id/icon" />


</RelativeLayout>

Upvotes: 0

Isaac
Isaac

Reputation: 1452

You just need to switch your LinearLayouts

Try something like this:

<?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="wrap_content"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/icon"
        android:layout_width="110dp"
        android:layout_height="110dp"
        android:background="@drawable/attraction_bg"
        android:gravity="left"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        android:layout_marginBottom="2dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="10dp" />

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

        <TextView
            android:layout_toRightOf="@id/icon"
            android:id="@+id/row1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:textColor="@android:color/black"
            android:textSize="20dp"
            android:text="line 1"
            android:layout_weight="1" />

        <TextView
            android:id="@+id/row2"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:textColor="@android:color/black"
            android:text="line 2"
            android:textSize="20dp" />

        <TextView
            android:id="@+id/row3"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:textColor="@android:color/black"
            android:text="line 3"
            android:textSize="20dp" />

    </LinearLayout>

</LinearLayout>

Upvotes: 3

Aman Shekhar
Aman Shekhar

Reputation: 2780

Use this in your xml.

<?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="wrap_content"
    android:orientation="vertical">

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

        <ImageView
            android:id="@+id/icon"
            android:layout_width="110dp"
            android:layout_height="110dp"
            android:layout_marginBottom="2dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="10dp"
            android:adjustViewBounds="true"
            android:background="@mipmap/ic_launcher"
            android:gravity="left"
            android:scaleType="fitXY" />

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

            <TextView
                android:id="@+id/row1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="30dp"
                android:layout_weight="1"
                android:text="TextView 1"
                android:textColor="@android:color/black"
                android:textSize="20dp" />

            <TextView
                android:id="@+id/row2"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:text="TextView 1"
                android:textColor="@android:color/black"
                android:textSize="20dp" />

            <TextView
                android:id="@+id/row3"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:text="TextView 1"
                android:textColor="@android:color/black"
                android:textSize="20dp" />
        </LinearLayout>

    </LinearLayout>

Upvotes: 2

Related Questions