CODEWITHSUNDEEP
javaandroidxmlandroid-layout
Arka Prava Basu
Arka Prava Basu

Reputation: 2560

How to set this view?

I want to have a recycler view row as the given figure. Basically, the image view will be of fixed dimensions. The two text views should cover the entire space but should not move the image view out of the screen. Nor should it crop it. My desired layout Please ignore the padding and margins. Except that there will be a margin between the image view and two textviews.

What I have tried : 

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

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0.8">

        <TextView
            android:id="@+id/tv1"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />

        <TextView
            android:layout_alignParentStart="true"
            android:layout_below="@id/tv1"
            android:id="@+id/tv2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLines="2"
            android:ellipsize="end"/>

    </RelativeLayout>

    <ImageView
        android:id="@+id/img"
        android:layout_weight="0.2"
        android:layout_width="85dp"
        android:layout_height="50dp"
        android:layout_marginStart="12dp"
        android:layout_centerVertical="true"
        android:scaleType="centerCrop"/>
</LinearLayout>

The problem with this is that the dimensions of the image view changes with the text in the textviews. I do not want that. I want dimensions to be fixed.

I could have kept the whole thing in a Relative layout but then I was unable to keep a margin between the two textviews and the image views.

Upvotes: 2

Views: 144

Answers (4)

Lenochod
Lenochod

Reputation: 61

I think this is what you're looking for. Screen size independent layout. The only fixed dimensions are in ImageView. I have added background so you can check it immediately in preview in Android Studio.

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignBottom="@id/img"
        android:layout_toLeftOf="@id/img"
        android:layout_toStartOf="@id/img"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv1"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#acacac"
            android:gravity="center"
            tools:text="TextView1"
            />

        <TextView
            android:id="@+id/tv2"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="#d49e9e"
            android:ellipsize="end"
            android:gravity="center"
            android:maxLines="2"
            tools:text="TextView2"/>
    </LinearLayout>

    <ImageView
        android:id="@+id/img"
        android:layout_width="100dp"
        android:layout_height="180dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="#90f760"
        android:scaleType="centerCrop"/>

</RelativeLayout>

Upvotes: 0

Kavach Chandra
Kavach Chandra

Reputation: 770

This should give you the desired effect:

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

<TextView
    android:id="@+id/tv1"
    android:layout_alignParentStart="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toLeftOf="@+id/img"
    android:layout_toStartOf="@+id/img"
    />
<TextView
    android:layout_alignParentStart="true"
    android:layout_alignParentLeft="true"
    android:layout_alignRight="@+id/tv1"
    android:layout_alignEnd="@+id/tv1"
    android:layout_below="@id/tv1"
    android:id="@+id/tv2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:maxLines="2"
    android:ellipsize="end"/>
<ImageView
    android:id="@+id/img"
    android:layout_width="85dp"
    android:layout_height="50dp"
    android:layout_marginStart="12dp"
    android:layout_marginLeft="12dp"
    android:layout_centerVertical="true"
    android:scaleType="centerCrop"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"/>

Upvotes: -1

ono
ono

Reputation: 3102

Your RelativeLayout should read: 

<RelativeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1">

Remove the android:layout_weight from the ImageView

This will stretch the RelativeLayout to fit the space and keep the ImageView the same size.

Upvotes: 2

Andrei
Andrei

Reputation: 33

Instead of using the wrap_content feature on your text views, you could manually assign it a size so that it is set rather than changing in accordance to how much text you have. 

android:layout_width="300dp"
android:layout_height="200dp"

The actual size you may have to play around with to get exactly as you want it.

Upvotes: 0

Related Questions