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
Related
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>
I'm trying to make a ImageView inside a HorizontalScrollView, but the imageView gets twice the width of the screen and end halfway out of bounds.
My XML:
<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/horizontalScrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:baselineAligned="true"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/penguins" />
</LinearLayout>
</HorizontalScrollView>
And a image of what I get (click me!)
Does anyone know a solution to this problem?
Greetings
I copied your xml and using my resource it looks perfect, i believe your resource is bigger than you think it is, you probably should use layout_width and layout_height as fix size and also set scaleType to centerInside.
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>
My android app currently has two layouts for its splash screen, portrait and landscape. Both use the same simple format - an image that's the same size as the screen, held in a simple linear layout:
<?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"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitCenter"
android:src="#drawable/splash_p"
/>
</LinearLayout>
The image used is 320w x 480h and Android automatically resizes it to fit the screen, irrespective of the screen size of the device. Obviously, the image isn't as sharp when resized for a tablet for example.
I should point out here that my goal is to reduce the installed size of the final application as much as possible, and I'm aware that I could include different layouts and sizes of the same images for each differing screen size.
My splash screen is made up of the app's name in the top third of the screen, and then an image in the bottom two thirds of the screen. In order to save memory, I want to crop the app name and the image into two seperate images, and then display them in a linear vertical layout for devices held in portrait mode. I'll then use a linear horizontal layout of image and then app name for landscape mode.
For the portrait layout I've got 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">
<LinearLayout android:id="#+id/linearLayout1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical">
<View android:layout_height="45dp" android:layout_width="45dp" />
<ImageView android:layout_height="fill_parent"
android:src="#drawable/splashtext"
android:scaleType="fitCenter"
android:layout_gravity="center"
android:layout_width="fill_parent"></ImageView>
<View
android:layout_height="35dp"
android:layout_width="35dp" />
<ImageView
android:scaleType="fitCenter"
android:src="#drawable/splashpic"
android:layout_height="fill_parent" android:scaleType="fitCenter" android:layout_width="fill_parent" android:layout_gravity="center"/>
</LinearLayout>
</LinearLayout>
When I display the above in eclipse, it looks ok for smart phones, but the images are not scaled up when displayed on a tablet, although I'm using the android:scaleType="fitCenter" argument. I've tried using dips instead of fill_parent in the imageview layout_width and layout_height but that doesn't work either.
What am I doing wrong? Is there another way to do this?
Thanks
I've edited the question to include this revised XML based on #KaHa6u 's help below. So now I have:
<?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">
<LinearLayout android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<View
android:layout_height="15dp"
android:layout_width="15dp"
/>
<ImageView android:layout_height="wrap_content"
android:src="#drawable/splashtext"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_weight="1">
</ImageView>
<View
android:layout_height="15dp"
android:layout_width="15dp"
/>
<ImageView
android:scaleType="fitXY"
android:src="#drawable/splashpic"
android:adjustViewBounds="false"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="4"
android:layout_gravity="center"/>
</LinearLayout>
</LinearLayout>
Which scales up vertically, but not horizontally, so I end up with tall thin images when the screen size increases.
#basinbasin
I just encountered a situation very similar to the one you explained. I needed to have an ImageView on top of the layout, which had to be stretched ONLY HORIZONTALLY and retain its height when the phone gets into landscape orientation. I succeeded with just this:
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/main_header"
android:scaleType="fitXY"
/>
and, of course, with activity's attribute:
<activity android:configChanges="keyboardHidden|orientation">
Hope this helps. Thank you.
The fitCenter scaleType maintains the original aspect ratio. Have you tried the fitXY scaleType? Matrix.ScaleToFit Documentation
Did you try "fill_parent" as the android:layout_height and android:layout_width values for the ImageView you want stretched?
I guess that the "wrap_content" setting does not let the system know the bounds to which to resize the image. Please try that and let me know of the results.
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>