match_parent and does not fill as expected - Android / XML

Question

I have a YoutubeThumbnail/ImageView inside a listView which I'd like to have fill/stretch to the edge of the screen:

        <com.example.project.ui.widget.VideosListView
            android:id="@+id/videosListView"
            android:adjustViewBounds="true"
            android:scaleType="fitXY"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
        </LinearLayout>

and

 <com.example.project.ui.widget.UrlImageView
        android:id="@+id/userVideoThumbImageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"
        android:background="@android:color/black"
        android:scaleType="fitXY"
        android:clickable="false"
        android:contentDescription="YouTube video thumbnail"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:gravity="center"
        android:src="@drawable/ic_launcher" />

Currently it doesn't seem to do so, and on some devices, the thumbnails look TINY.

Screenshots from HTC Butterfly:

enter image description here

Screenshot from Galaxy S2:

enter image description here

I'm not sure exactly what I've done wrong - any input is appreciated.

home.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
    </LinearLayout>

    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="120dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/darkgrey"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:textStyle="bold" />

    <RelativeLayout
        android:id="@+id/rl"
        android:layout_width="match_parent"
        android:layout_height="match_parent" 
        android:background="#AAFFFFFF" >

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

                 <com.example.project.ui.widget.VideosListView
            android:id="@+id/videosListView"
            android:adjustViewBounds="true"
            android:scaleType="fitXY"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
        </LinearLayout>

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

            <RelativeLayout
                android:layout_width="50dip"
                android:layout_height="50dip"
                android:layout_alignParentBottom="true" >

                <ImageButton
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="left"
                    android:background="@color/darkgrey"
                    android:scaleType="centerCrop"
                    android:src="@drawable/home_up_btn" />
            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/footer"
                android:layout_width="match_parent"
                android:layout_height="50dip"
                android:layout_alignParentBottom="true"
                 >

                <android.support.v4.view.ViewPager
                    android:id="@+id/view_pager"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent" />

                <ImageButton
                    android:layout_width="30dip"
                    android:layout_height="30dip"
                    android:layout_alignParentLeft="true"
                    android:layout_centerVertical="true"
                    android:layout_marginLeft="15dp"
                    android:focusable="false"
                    android:src="@drawable/scroll_lt_arrow" />

                <ImageButton
                    android:layout_width="30dip"
                    android:layout_height="30dip"
                    android:layout_alignParentRight="true"
                    android:layout_centerVertical="true"
                    android:layout_marginRight="15dp"
                    android:focusable="false"
                    android:src="@drawable/scroll_rt_arrow" />
            </RelativeLayout>
        </LinearLayout>
    </RelativeLayout>

</android.support.v4.widget.DrawerLayout>

list_item_user_video.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="match_parent"
    android:orientation="vertical" >

         <com.example.project.ui.widget.UrlImageView
        android:id="@+id/userVideoThumbImageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"
        android:background="@android:color/black"
        android:scaleType="fitXY"
        android:clickable="false"
        android:contentDescription="YouTube video thumbnail"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:gravity="center"
        android:src="@drawable/ic_launcher" />

    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:visibility="invisible" />

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

        <TextView
            android:id="@+id/userVideoTitleTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="5dip"
            android:text="Video Title Not Found"
            android:textColor="@android:color/black"
            android:textSize="20sp" />

        <Button
            android:id="@+id/fav_up_btn1"
            android:layout_width="27dp"
            android:layout_height="27dp"
            android:layout_alignParentRight="true"
            android:background="@drawable/fav_up_btn1"
            android:clickable="false"
            android:focusable="false"
            android:focusableInTouchMode="false"
            android:gravity="right"
            android:paddingRight="5dp"
            android:paddingTop="5dp" />
    </RelativeLayout>

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

        <TextView
            android:id="@+id/userVideouploaderTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="5dip"
            android:textColor="@color/verylightgrey"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/userVideoviewsTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/userVideouploaderTextView"
            android:textColor="@android:color/black"
            android:textSize="16sp" />
    </RelativeLayout>

</LinearLayout>

JAVA:

private VideosListView listView;


listView = (VideosListView) findViewById(R.id.videosListView);
        listView.setOnVideoClickListener(this);


            private void populateListWithVideos(Message msg) {
        Library lib = (Library) msg.getData().get(
                GetYouTubeUserVideosTask.LIBRARY);
        listView.setVideos(lib.getVideos());

    }

Edit:

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

    <com.idg.omv.ui.widget.UrlImageView
        android:id="@+id/userVideoThumbImageView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:adjustViewBounds="false"
        android:background="@android:color/black"
        android:clickable="false"
        android:contentDescription="YouTube video thumbnail"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:scaleType="fitXY"
        android:src="@drawable/ic_launcher" />

    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:visibility="invisible" />

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

        <TextView
            android:id="@+id/userVideoTitleTextView"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="5dip"
            android:text="Video Title Not Found"
            android:textColor="@android:color/black"
            android:textSize="20sp" />

        <Button
            android:id="@+id/fav_up_btn1"
            android:layout_width="27dp"
            android:layout_height="27dp"
            android:layout_alignParentRight="true"
            android:background="@drawable/fav_up_btn1"
            android:clickable="false"
            android:focusable="false"
            android:focusableInTouchMode="false"
            android:gravity="right"
            android:paddingRight="5dp"
            android:paddingTop="5dp" />
    </RelativeLayout>

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

        <TextView
            android:id="@+id/userVideouploaderTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="5dip"
            android:textColor="@color/verylightgrey"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/userVideoviewsTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/userVideouploaderTextView"
            android:textColor="@android:color/black"
            android:textSize="16sp" />
    </RelativeLayout>

</LinearLayout>

Screenshot after Edit:

enter image description here

What API version are those devices? There was a measuring bug in RelativeLayout until version 18 (=4.3) — jclehner, Dec 19 '13 at 17:11
They are all using 4.2.2 or lower (any idea what a workaround/fix might be?) — Droidzilla, Dec 19 '13 at 17:12
at which point in the XML? (everywhere I'm using fill_parent?) — Droidzilla, Dec 19 '13 at 17:26
You should be using `match_parent`, but it won't do anything for your problem. [fill_parent was deprecated as a name, but it has the same value as match_parent](http://stackoverflow.com/questions/5761960/what-is-the-difference-between-match-parent-and-fill-parent-property-in-android). — Matt Gibson, Dec 19 '13 at 19:37

bobby.dhillon · Answer 1 · 2013-12-19T17:49:01.687

Try to apply this if you are extending ImageView :

android:scaleType="fitXY"

or in javacode

imageView.setScaleType(ScaleType.FIT_XY);

2) Apply the code mentioned above like :

<com.example.project.ui.widget.UrlImageView
        android:id="@+id/userVideoThumbImageView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:adjustViewBounds="false"
        android:background="@android:color/black"
        android:clickable="false"
        android:contentDescription="YouTube video thumbnail"
        android:focusable="false"
        android:scaleType="fitXY"
        android:focusableInTouchMode="false"
        android:gravity="center"
        android:src="@drawable/ic_launcher" />

Edit changed:

android:adjustViewBounds="true"

to

android:adjustViewBounds="false"

@user3113035 try changing android:adjustViewBounds="true" to android:adjustViewBounds="false" — bobby.dhillon, Dec 19 '13 at 17:46
Not exactly solution of my problem but I found something useful! — Viacheslav, May 20 '14 at 13:02

score 1 · Answer 2 · answered Dec 19 '13 at 20:06

1

since the UrlImageView takes the image from the internet, how could it know what's its size should be before it gets the image?

you must decide on the height of the views of the listView's items before you are going to show them.

also android:adjustViewBounds="true" doesn't mix well with android:scaleType="fitXY" , since adjustViewBounds says it will keep the aspect ratio (link here), while fitXY says it won't (link here). you need to decide what's important for you- to stretch the image or to keep the aspect ratio. this problem exists everywhere and not just on android.

since it seems you are new to listviews , i recommend you to watch this lecture.

also, btw, what i see on the screenshot doesn't look like a good android app design. please check out this link. if your app doesn't follow google's guidelines, it has realy low chance of ever getting featured on the play store, even if it gets popular.

answered Dec 19 '13 at 20:06

android developer

114,585
152
739
1,270

It is much more important to increase the size of the image than to keep the aspect ratio - finding a method of doing this will resolve my primary issue at this point (I will look into reformatting according to the android guidelines however at this time I REALLY need to figure out a way of making this image bigger) – Droidzilla Dec 19 '13 at 20:09
The author of the article I used to build part of this seems to think scaleType=fitXY should work - but it does not seem to (take a look at the first comment in this article) http://blog.blundell-apps.com/show-youtube-user-videos-in-a-listview/ – Droidzilla Dec 19 '13 at 20:10
so you don't care about stretching? if so , use adjustViewBounds="false" , scaleType="fitXY" , and remove the gravity. – android developer Dec 19 '13 at 20:11
look, i don't know how this custom view called "UrlImageView" works, but if it works as i think (extends from imageView) , it should work fine. if not, you can simply download the image files to cache, downscale them as needed, and use the bitmaps on the imageViews. if they are already small images (depends on the server), you can use Google's Volley's "NetworkImageView" class. you can also make a test in order to see if your custom ImageView is ok - simply use ImageView and set it with an src to point to a drawable within your app. – android developer Dec 19 '13 at 20:14
I updated my source and screenshot above (thumbnails are still appearing tiny - and now off center) – Droidzilla Dec 19 '13 at 20:22
ok, please try the test i've told you about at the end of my answer. use a simple ImageView instead of the UrlImageView (and remove anything related to youtube/internet, just use simple, fake data) , and just set it with an src to reference to a drawable you have. also set the height of the imageView (say to 100dp). this way you could know if it's because you use UrlImageView. – android developer Dec 19 '13 at 20:48
I appreciate your input quite a bit! (thanks!) I'm going to try this solution in just a bit... in the meantime I'm trying to nail down a few smaller issues I'm having: http://stackoverflow.com/questions/20691604/textviews-do-not-align-correctly-in-relativelayout – Droidzilla Dec 19 '13 at 21:03
and this one... http://stackoverflow.com/questions/20685907/starting-intents-with-a-navigationdrawer-populated-with-a-stringarray – Droidzilla Dec 19 '13 at 21:06

match_parent and does not fill as expected - Android / XML

Screenshots from HTC Butterfly:

Screenshot from Galaxy S2:

home.xml:

list_item_user_video.xml:

JAVA:

Edit:

Screenshot after Edit:

2 Answers2