Develop Reference

Android, fit an image and textview into the screen

I added a fragment with an ImageView, which is a PNG image, and a TextView just below it.
The fragment is showing fine but when I rotate the screen the image will take most of the screen and the TextView is partially cut.
Here's 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="match_parent">
<ImageView
android:id="#+id/shopping_cart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/shopping_cart" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_below="#id/shopping_cart"
android:text="#string/no_data"
android:gravity="center"/>
</RelativeLayout>
I'm trying to find a way to resize the image in order to show both image and text in the screen

try using a scroll-view as the root element if u want to retain the same image size rather than resizing the image. Here's a small snippet -
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<RelativeLayout
android:id="#+id/container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
(all your view elements)
</RelativeLayout>

<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/text_image_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
(Enter view here)
</LinearLayout>

Alright, so firstly ensure that you have the image for the ImageView in all densities. I would suggest that you use this attribute in your ImageView code:
https://developer.android.com/reference/android/widget/ImageView.ScaleType.html
The scale type defines how your image should scale according to the view. I faced a similar issue once, and i was able to solve it using this. Having said that, i have not seen the image you are using, so i cannot be very sure of it. But, i would say that you use:
android:scaleType="centerCrop"
you can find the definition of the attribute on the link provided above. Also, i do not know what devices you are targeting for your app, but its always good to keep views inside a scroll view so that they are visible even on a smaller screen.
Give it a try, if not by centerCrop, then maybe by some other attribute.
Cheers!!

Here is 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="match_parent"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/shopping_text"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="#string/no_data"/>
<ImageView
android:id="#+id/shopping_cart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/shopping_text"
android:src="#drawable/shopping_cart"/>
</RelativeLayout>

Scaling an image to max available width, keeping aspect ratio and avoiding ImageView extra space

I have this simple layout XML, and a green_square.png file which is 30X30 pixels
<?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" >
<ImageView
android:background="#color/red"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:scaleType="fitStart"
android:src="#drawable/green_square"/>
</LinearLayout>
What I'm trying to achieve is scaling the image to fill the parent width, keeping it's aspect ratio with no extra space of the ImageView.
I've added a red background to the ImageView just for reference of the extra space I want to avoid.
Here is my goal

<ImageView
android:id="#+id/game"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:src="#drawable/ic_game"
/>
this works for me. Full width of parent and center crop to keep aspect ratio

It's so simple. Just make the width fill_parent and height wrap_content. Here is the I figured it out.
<ImageView
android:id="#+id/game"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:src="#drawable/ic_game"
/>

In my view, this ImageView extra layout is a bug. I had the same thing happen. As a result, text that I wanted to follow the green_square followed the extra layout. So what I did was specify the text relative to the bottom of the screen. That way, the text would go over the extra layout. I admit, it wasn't the best solution, but it looks much better than having a huge space between the green_square and the text.

There lots of great answers here which actually works. I just what to share the way I do this now with a more modern XML syntax, the constraint view. Trust me constraint view rooks!
<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="match_parent"
android:layout_height="match_parent"
android:background="#394BAB"
tools:context="com.appdomain.app.apppro.ActivityName">
<ImageView
android:id="#+id/nice_img"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
android:src="#drawable/green_square"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
of course the
tools:context="com.collectsavings.collect.collectpro.LoginAndRegisterPrompt"
and
android:src="#drawable/green_square"
Should all match your app activity context and drawabl resources respectively.

Use scale type "fitCenter" or "fitxy"

Try this,
<?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" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/red"
android:scaleType="centerCrop"
android:src="#drawable/green_square" />
</LinearLayout>

Improper Header Placement in Layout

I have a large header image that I'd like to use for both tablet devices and phones. The image looks fine on a tablet but when viewed on a phone it looks like this:
Here is my layout XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/white"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/searchresults_header" />
<ListView
android:id="#+id/android:list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</LinearLayout>
How can I get this header image to scale correctly on both screen sizes?

Your image is getting resized automatically, but the viewbounds stay as they were originally.
Add this to your ImageView and you should see the difference:
android:adjustViewBounds="true"

Can't remember which one but try these scaleType param values

Android ScrollView Doesn't wrap to its child?

I have a problem with my ScrollView. It has an ImageView inside it. The imageView holds an image which is 480 * 3000 px. So It needs to be in a ScrollView so the user will have the ability to scroll down.
The problem is: when I test the application, the ScrollView does not wrap to the image hight. There is a black space under the image which is strange for me.
This is my XML code. I look forward for your opinion
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ScrollView
android:id="#+id/scroll_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/image"
android:src="#drawable/image01"
android:scaleType="fitStart" />
</ScrollView>
</RelativeLayout>
Update:
This is how my image looks like with #ruhalde code. I can't take a screenshoot since it is big and you'll not see the whole picture so I draw it.

Rewrite your layout. Make the ScrollView the outer most element. Take a look at this good tutorial for more information: http://mobiforge.com/designing/story/understanding-user-interface-android-part-1-layouts

Use a LinearLayout instead of RelativeLayout which is deprecated by now. Set fillViewPort=true in your ScrollView XML or programatically if you want with setFillViewPort(true).
Put imageview inside a LinearLayout and that inside ScrollView, your XML should look like this:
LinearLayout
---ScrollView
----LinearLayout
------ImageView
Check out my XML here working good with a 800 x 4000 pixels image, perfectly scrolling vertical:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ScrollView android:id="#+id/scrollView1"
android:layout_width="fill_parent" android:layout_height="wrap_content">
<LinearLayout android:id="#+id/linearLayout1"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<ImageView android:id="#+id/mapa" android:layout_height="wrap_content"
android:layout_width="wrap_content"></ImageView>
</LinearLayout>
</ScrollView>
</LinearLayout>

To those who might be interested:
My problem was with the image I'm using, not how I organize my layouts. Thanks.

I believe you should use scrollView tag before your layout tag

How can I get my Android Gallery to fit within my Relative Layout?

I'm currently stuck on my landscape layout. I am implementing a Gallery, and would like it to fit the relative layout's height, and wrap the content via the width. I tried scaleType centerInside, messing with different types of layout_height/width.
Here's where the relevant part of my XML looks like (I apologize for the lack of formatting):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:padding="10dip"
android:orientation="vertical">
<RelativeLayout
android:orientation="horizontal"
android:layout_height="wrap_content"
android:layout_width="fill_parent">
<Gallery xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gallery"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:scaleType="centerInside"
/>
Here is the image
of the cutoff.

I don't believe you can apply scaleType to a Gallery: looking at http://developer.android.com/reference/android/widget/Gallery.html I don't see scaleType as one of the supported attributes.
EDIT: You should apply the scaleType attribute on the ImageView you are putting in the Gallery.

I don't think wrap_content works well with the width of a Gallery view.
Instead use android:layout_toRightOf, it will ensure that the Gallery doesn't extend into the area of your textviews. The following code is an example, but I have not tested it.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<LinearLayout
android:id="#+id/right_side"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:layout_alignParentLeft="true">
*put your textviews here*
</LinearLayout>
<Gallery
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_toLeftOf="#id/right_side"
/>
</RelativeLayout>