Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android layouts and automatic image resizing

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.

like image 669
basinbasin Avatar asked Jul 26 '11 15:07

basinbasin


People also ask

What is ImageView in android?

ImageView class is used to display any kind of image resource in the android application either it can be android. graphics. Bitmap or android. graphics. drawable.

How do I scale an image on android?

Tap the image you want to adjust. You can adjust the size of an image or rotate it: Resize: Touch and drag the squares along the edges. Rotate: Touch and drag the circle attached to the image.

How do you show the full size image in pop up when clicking the picture on android?

How to show the full size image in popup on clicking the image in android. Below is the code that will show the full size image in a dialog box popup without defining layout xml file . int a=v. getId(); intiger "a" will have the value equal to profile_pic if we touched on profile_pic imageview else we will get pro id .


1 Answers

@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.

like image 81
KaHa6uc Avatar answered Oct 10 '22 17:10

KaHa6uc