Board index » Android Coding Problems » View, Layout & Resource Problems

Skip to content

How to let image scaled to appropriate size.

Put problem concerning Views, Layouts and other XML-Resources (like AndroidManifest) here.
Topic locked

How to let image scaled to appropriate size.

Postby brianhsu » Wed Nov 19, 2008 9:33 am

I would like make an UI consist with a ImageView, a button and two
TextView in a vertical LinearLayout.

But there is a problem -- my image seems consume too much screen
space.

I hope the system will left enough screen space to display two
TextView.

I also tried apply android:adjustViewBounds to the ImageView but still
has no success. android:layout_weight seems not work neither.

BTW, maxHeight works but I don't want to use it because I hope the
image will adjust its size when user change the orientation of the
device.

What I want it to look like:

Code: Select all
+-----------------+
|+-----+ +------+ |
||img  | |button| |
||     | |      |
||     | |      | |
|+-----| +------+ |
|                 |
|Hello World      |
|Meow...          |
|                 |
+-----------------+



But what I actually get is the two TextView is totally missing.

The following is my UI XML file content, where should I check or
modifiy?

Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <?xml version="1.0" encoding="utf-8"?>
  2.  
  3.  
  4.  
  5. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/
  7. android"
  8.  
  9.              android:layout_width="fill_parent"
  10.  
  11.              android:layout_height="fill_parent"
  12.  
  13.              android:orientation="vertical">
  14.  
  15.  
  16.  
  17.     <LinearLayout android:layout_width="fill_parent"
  18.  
  19.                  android:layout_height="wrap_content"
  20.  
  21.                  android:orientation="horizontal">
  22.  
  23.         <ImageView android:layout_width="wrap_content"
  24.  
  25.                   android:layout_height="wrap_content"
  26.  
  27.                   android:adjustViewBounds="true"
  28.  
  29.                   android:src="@drawable/image" />
  30.  
  31.  
  32.  
  33.         <Button android:layout_width="fill_parent"
  34.  
  35.                android:layout_height="fill_parent"
  36.  
  37.                android:text="Hello" />
  38.  
  39.     </LinearLayout>
  40.  
  41.  
  42.  
  43.     <LinearLayout android:layout_width="wrap_content"
  44.  
  45.                  android:layout_height="wrap_content"
  46.  
  47.                  android:orientation="vertical">
  48.  
  49.  
  50.  
  51.         <TextView android:layout_width="wrap_content"
  52.  
  53.                  android:layout_height="wrap_content"
  54.  
  55.                  android:text="Hello World 1" />
  56.  
  57.  
  58.  
  59.         <TextView android:layout_width="wrap_content"
  60.  
  61.                  android:layout_height="wrap_content"
  62.  
  63.                  android:text="Meow..." />
  64.  
  65.  
  66.  
  67.     </LinearLayout>
  68.  
  69.  
  70.  
  71. </LinearLayout>
Parsed in 0.002 seconds, using GeSHi 1.0.8.4
brianhsu
Freshman
Freshman
 
Posts: 2
Joined: Wed Nov 19, 2008 9:29 am
Top
Top

Postby MrSnowflake » Wed Nov 19, 2008 1:27 pm

You should define
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. layout_weight="1"
Parsed in 0.000 seconds, using GeSHi 1.0.8.4
on both the imageview and the textview in the same linlayout.
User avatar
MrSnowflake
Moderator
Moderator
 
Posts: 1439
Joined: Sat Feb 16, 2008 3:11 pm
Location: Flanders, Belgium
Top

Postby brianhsu » Thu Nov 20, 2008 12:05 am

Thanks for all of your help.

I found that I have some misunderstanding about android:layout_weight. I don't know why, but it seems conflict with the explation in Tutorial: Notepad Exercise 2.

If the first one has a layout_weight of 1 and the second has a layout_weight of 2, then one third of the remaining space will be given to the first, and two thirds to the second (because we claim the second one is more important).


In the fact, It takes larger screen space when the I assign a smaller value.

So, this is the XML code doing what I said before.


Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3.  
  4.  
  5.  
  6. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  7.  
  8.              android:layout_width="fill_parent"
  9.  
  10.              android:layout_height="fill_parent"
  11.  
  12.              android:orientation="vertical">
  13.  
  14.  
  15.  
  16.     <LinearLayout android:id="@+id/actionArea"
  17.  
  18.                  android:layout_width="fill_parent"
  19.  
  20.                  android:layout_height="wrap_content"
  21.  
  22.                  android:layout_weight="300"
  23.  
  24.                  android:orientation="horizontal">
  25.  
  26.         <ImageView android:layout_width="fill_parent"
  27.  
  28.                   android:layout_height="fill_parent"
  29.  
  30.                   android:layout_weight="1"
  31.  
  32.                   android:adjustViewBounds="true"
  33.  
  34.                   android:src="@drawable/maid" />
  35.  
  36.  
  37.  
  38.         <LinearLayout android:layout_width="fill_parent"
  39.  
  40.                      android:layout_height="fill_parent"
  41.  
  42.                      android:layout_weight="2"
  43.  
  44.                      android:orientation="vertical">
  45.  
  46.        
  47.  
  48.             <Button android:layout_width="fill_parent"
  49.  
  50.                    android:layout_height="fill_parent"
  51.  
  52.                    android:layout_weight="1"
  53.  
  54.                    android:text="Dialer" />
  55.  
  56.  
  57.  
  58.             <Button android:layout_width="fill_parent"
  59.  
  60.                    android:layout_height="fill_parent"
  61.  
  62.                    android:layout_weight="1"
  63.  
  64.                    android:text="Contacts" />
  65.  
  66.  
  67.  
  68.             <Button android:layout_width="fill_parent"
  69.  
  70.                    android:layout_height="fill_parent"
  71.  
  72.                    android:layout_weight="1"
  73.  
  74.                    android:text="Applications" />
  75.  
  76.  
  77.  
  78.         </LinearLayout>
  79.  
  80.     </LinearLayout>
  81.  
  82.  
  83.  
  84.     <LinearLayout android:id="@+id/messageArea"
  85.  
  86.                  android:layout_width="wrap_content"
  87.  
  88.                  android:layout_height="wrap_content"
  89.  
  90.                  android:layout_weight="1"
  91.  
  92.                  android:orientation="vertical">
  93.  
  94.  
  95.  
  96.         <TextView android:layout_width="wrap_content"
  97.  
  98.                  android:layout_height="wrap_content"
  99.  
  100.                  android:text="Welcome to Android Phone." />
  101.  
  102.  
  103.  
  104.         <TextView android:layout_width="wrap_content"
  105.  
  106.                  android:layout_height="wrap_content"
  107.  
  108.                  android:text="Meow..." />
  109.  
  110.  
  111.  
  112.     </LinearLayout>
  113.  
  114. </LinearLayout>
  115.  
  116.  
Parsed in 0.004 seconds, using GeSHi 1.0.8.4


It works fine on both landscape of device except that I don't know why I have to assign a very large value of android:layout_weight in the LinearLayout with id actionArea, or the second TextView(Meow...) will missing when the device placed horizontally.

Here is some screenshot.

android:layout_weight="300" works on both.

http://picasaweb.google.com.tw/brianhsu ... 3613342114
http://picasaweb.google.com.tw/brianhsu ... 1347922322

android:layout_weight="1" works only when the device is vertically placed.

http://picasaweb.google.com.tw/brianhsu ... 8655340514
http://picasaweb.google.com.tw/brianhsu ... 4578579346

Finally, after I think about it more carefully, I found that since I'm using TextView as a message area, a better way might be assign a fixed height for it.

Because this will ensuere that there is always a sufficient space to put the text on the screen no matter what device configuration used by the user.

So, there is the final version of my UI XML code and screenshot, and it works perfectly for me.

http://picasaweb.google.com.tw/brianhsu ... 9983968850
http://picasaweb.google.com.tw/brianhsu ... 6842311266


Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.  
  3.              android:layout_width="fill_parent"
  4.  
  5.              android:layout_height="fill_parent"
  6.  
  7.              android:orientation="vertical">
  8.  
  9.  
  10.  
  11.     <LinearLayout android:layout_width="fill_parent"
  12.  
  13.                  android:layout_height="wrap_content"
  14.  
  15.                  android:layout_weight="1"
  16.  
  17.                  android:orientation="horizontal">
  18.  
  19.         <ImageView android:layout_width="fill_parent"
  20.  
  21.                   android:layout_height="fill_parent"
  22.  
  23.                   android:layout_weight="1"
  24.  
  25.                   android:adjustViewBounds="true"
  26.  
  27.                   android:src="@drawable/maid" />
  28.  
  29.  
  30.  
  31.         <LinearLayout android:layout_width="fill_parent"
  32.  
  33.                      android:layout_height="fill_parent"
  34.  
  35.                      android:layout_weight="2"
  36.  
  37.                      android:orientation="vertical">
  38.  
  39.        
  40.  
  41.             <Button android:layout_width="fill_parent"
  42.  
  43.                    android:layout_height="fill_parent"
  44.  
  45.                    android:layout_weight="1"
  46.  
  47.                    android:text="Dialer" />
  48.  
  49.  
  50.  
  51.             <Button android:layout_width="fill_parent"
  52.  
  53.                    android:layout_height="fill_parent"
  54.  
  55.                    android:layout_weight="1"
  56.  
  57.                    android:text="Contacts" />
  58.  
  59.  
  60.  
  61.             <Button android:layout_width="fill_parent"
  62.  
  63.                    android:layout_height="fill_parent"
  64.  
  65.                    android:layout_weight="1"
  66.  
  67.                    android:text="Applications" />
  68.  
  69.  
  70.  
  71.         </LinearLayout>
  72.  
  73.     </LinearLayout>
  74.  
  75.  
  76.  
  77.     <LinearLayout android:layout_width="wrap_content"
  78.  
  79.                  android:layout_height="100px"
  80.  
  81.                  android:layout_weight="1"
  82.  
  83.                  android:orientation="vertical">
  84.  
  85.  
  86.  
  87.         <TextView android:layout_width="wrap_content"
  88.  
  89.                  android:layout_height="wrap_content"
  90.  
  91.                  android:text="Welcome to Android Phone." />
  92.  
  93.  
  94.  
  95.         <TextView android:layout_width="wrap_content"
  96.  
  97.                  android:layout_height="wrap_content"
  98.  
  99.                  android:text="Meow..." />
  100.  
  101.  
  102.  
  103.     </LinearLayout>
  104.  
  105.  
  106.  
  107. </LinearLayout>
Parsed in 0.003 seconds, using GeSHi 1.0.8.4
brianhsu
Freshman
Freshman
 
Posts: 2
Joined: Wed Nov 19, 2008 9:29 am
Top
Top
Topic locked

Return to View, Layout & Resource Problems

Who is online

Users browsing this forum: No registered users and 2 guests

Board index The team • Delete all board cookies • All times are UTC + 1 hour