How to make ImageView as large as possible

Question

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
                                    xmlns:app="http://schemas.android.com/apk/res-auto"
                                    android:layout_width="match_parent"
                                    android:layout_height="110dp"
                                    android:layout_margin="@dimen/news_item_cardview_margin"
                                    app:cardElevation="@dimen/cardview_default_elevation">

    <RelativeLayout
        android:id="@+id/relative_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="16dp">

        <ImageView
            android:id="@+id/news_image1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:contentDescription="@string/news_image_description"/>

        <TextView
            android:id="@+id/news_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="8dp"
            android:layout_marginStart="8dp"
            android:layout_toEndOf="@id/news_image1"
            android:layout_toRightOf="@id/news_image1"
            android:textAppearance="?android:attr/textAppearanceMedium"/>


        <TextView
            android:id="@+id/news_pub_date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/news_title"
            android:layout_alignParentBottom="true"
            android:layout_alignStart="@id/news_title"
            android:layout_toEndOf="@id/news_image1"
            android:layout_toRightOf="@id/news_image1"/>

        <TextView
            android:id="@+id/news_comments_count"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="8dp"
            android:drawableLeft="@drawable/ic_comment_black_18dp"
            android:drawableStart="@drawable/ic_comment_black_18dp"
            />
    </RelativeLayout>
</android.support.v7.widget.CardView>

I want to create a layout like image 1 with layout xml above. But when i test it, I found the image view isn't large enough. it could be higher and wider.

how could i make the imageview have more priority than textview.

do you want this to support all device having different resolution ? — Amit Vaghela, May 18 '16 at 08:26
yes, that's why i didn't indicate layout_width manually. @AmitVaghela — Wei Jian Guo, May 18 '16 at 08:35
check this answer below http://stackoverflow.com/a/37295089/2826147, you can use it with minor changes to support all devices — Amit Vaghela, May 18 '16 at 09:19

Nguyễn Trung Hiếu · Answer 1 · 2016-05-18T08:55:43.100

1

Try this!!

add

android:scaleType="centerCrop"

to ImageView

<ImageView
        android:id="@+id/news_image1"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:contentDescription="@string/news_image_description"/>

edited May 18 '16 at 08:55

answered May 18 '16 at 08:42

Nguyễn Trung Hiếu

2,004
1
10
22

could you explain why relativelayout behave like this. – Wei Jian Guo May 18 '16 at 08:47
it works, however the image was cropped. is it better to use PercentLayout? if i want the image to keep its ratio – Wei Jian Guo May 18 '16 at 09:00
you may want to set a fixed value for it – Nguyễn Trung Hiếu May 18 '16 at 09:02

Amit Vaghela · Answer 2 · 2016-05-18T09:18:27.527

check below layout file, in which changed from RelativeLayout to LinearLayout and used weightSum

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardElevation="@dimen/cardview_default_elevation" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="5dip"
        android:weightSum="3" >

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="5dip"
            android:layout_weight="1"
            android:padding="10dp" >

            <ImageView
                android:id="@+id/news_image1"
                android:layout_width="100dip"
                android:layout_height="100dip"
                android:contentDescription="news_image_description"
                android:src="@drawable/cal" />
        </LinearLayout >

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_margin="5dip"
            android:layout_weight="2"
            android:orientation="vertical"
            android:weightSum="5" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="3" >

                <TextView
                    android:id="@+id/news_title"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="4"
                    android:gravity="left"
                    android:hint="Title"
                    android:textSize="24sp" />
            </LinearLayout >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_margin="5dip"
                android:layout_weight="2"
                android:gravity="bottom"
                android:orientation="horizontal" >

                <TextView
                    android:id="@+id/news_pub_date"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="0.8"
                    android:gravity="left|bottom"
                    android:hint="Date"
                    android:textSize="18sp" />

                <TextView
                    android:id="@+id/news_comments_count"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1.2"
                    android:gravity="right|bottom"
                    android:hint="Count"
                    android:textSize="18sp" />
            </LinearLayout >
        </LinearLayout >
    </LinearLayout >
</android.support.v7.widget.CardView >

score 0 · Answer 3 · edited May 23 '17 at 12:08

0

Try to use weight and weightSum properties inside tags. E.g., android:layout_weight="0.7"

read this question: Android relative layout with button width using weight

edited May 23 '17 at 12:08

Community

1
1

answered May 18 '16 at 08:35

Vyacheslav

26,359
19
112
194

how it possible to make large size of image in imageview? Did you try this ever @Vyacheslav? – Ganesh Krishnamoorthy May 18 '16 at 12:13

score 0 · Answer 4 · answered May 18 '16 at 09:01

Copy paste this into your CardView

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/relative_layout"
android:layout_width="match_parent"
android:layout_height="150dp"
android:weightSum="3"
android:padding="16dp">

<ImageView
    android:id="@+id/news_image1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimaryDark"
    android:layout_weight="2"
    />
<LinearLayout
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent"
    android:weightSum="4"
    android:background="#ffffff"
    android:layout_weight="1">
    <TextView
        android:id="@+id/news_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Title"
        android:layout_weight="3"
        android:textAppearance="?android:attr/textAppearanceMedium"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_weight="1"

        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/news_pub_date"
            android:layout_width="wrap_content"
        android:layout_weight="1"
            android:text="Some"
            android:layout_height="wrap_content" />

        <TextView
            android:id="@+id/news_comments_count"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:gravity="end|right"
            android:layout_height="wrap_content"
            android:text="Count"
            />
    </LinearLayout>
</LinearLayout>

This is the output i got

koliczyna · Answer 5 · 2016-05-18T09:25:07.190

I can suggest programmatically solution for you. You have to compute the best proportions for your ImageView without changing orginal image's aspect ratio.

private void fitImageView(View parentView, ImageView imageView) {
    double maxHeight = parentView.getLayoutParams().height - parentView.getPaddingTop() - parentView.getPaddingBottom();
    Drawable drawable = imageView.getDrawable();

    double width = drawable.getMinimumWidth();
    double height = drawable.getMinimumHeight();
    double aspect = (float) width / height;

    width = maxHeight * aspect;
    height = maxHeight;

    imageView.getLayoutParams().height = (int) height;
    imageView.getLayoutParams().width = (int) width;
    imageView.setScaleType(ImageView.ScaleType.FIT_XY);
}

How to make ImageView as large as possible

5 Answers5