1

I need to place three elements inside RelativeLayout:

  • scaled image in ImageView on the right side with the top and bottom margins
  • TextEdit in the left top corner
  • LinearLayout in the rest of the space (below the title and to the left of the image)

The problem happens when the image is scaled in ImageView. I want it fits the entire parent's height considering margins. After scaling uniformly to fit the parent's height I want ImageView wraps the image's width. But as the result there are some unfilled horizontal spaces in ImageView.

The problem looks similar to one solved here. But in my case all tests with android:adjustViewBounds and android:scaleTypes didn't work. I suppose there is a problem because of margins and RelativeLayout use.

Here is the extract from my xml file:

<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">

    <ImageView 
      android:id="@id/albums_slideshow"
      android:adjustViewBounds="true"
      android:layout_marginTop="71.33dp"
      android:layout_marginBottom="88.67dp"
      android:scaleType="centerInside"
      android:layout_height="fill_parent"
      android:layout_width="wrap_content"
      android:layout_alignParentRight="true"
      android:src="@drawable/music_img_album_noimage"/>

    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginLeft="@dimen/music_module_screen_title_margin_left"
      android:layout_marginTop="@dimen/music_module_screen_title_margin_top"
      android:text="@string/music_string"
      style="@style/ScreenTitleFont"
      android:layout_alignParentLeft="true"
      android:layout_alignParentTop="true"/>

    <LinearLayout
      android:orientation="vertical"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:layout_alignParentLeft="true"
      android:layout_alignTop="@id/albums_slideshow" 
      android:layout_toLeftOf="@id/albums_slideshow">

        ... 

      </LinearLayout>
 </RelativeLayout>

Has anyone met this problem and found the answer?

Community
  • 1
  • 1
Nicolle
  • 33
  • 3

1 Answers1

0

this is what i have come up with

enter image description here

and this is the xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  android:layout_width="fill_parent" android:layout_height="fill_parent"
  android:orientation="vertical"
>
<TextView android:id="@+id/album_text"
  android:layout_width="wrap_content" android:layout_height="wrap_content"
  android:layout_alignParentLeft="true" android:layout_alignParentTop="true"
  android:layout_marginLeft="20dip" android:layout_marginTop="20dip"
  android:text="music string" android:background="@android:color/white"
/>

<LinearLayout android:id="@+id/albums_list"
  android:layout_width="wrap_content" android:layout_height="fill_parent"
  android:layout_alignParentLeft="true" android:layout_below="@id/album_text"
  android:layout_marginTop="71.33dp" 
  android:orientation="vertical" android:background="@android:color/white"
>
<TextView android:id="@+id/album_text"
  android:layout_width="wrap_content" android:layout_height="wrap_content"
  android:layout_alignParentLeft="true" android:layout_alignParentTop="true"
  android:layout_marginLeft="20dip" android:layout_marginTop="20dip"
  android:text="albums list"  
/>
</LinearLayout>

<ImageView android:id="@+id/albums_slideshow"    
  android:layout_height="fill_parent" android:layout_width="wrap_content"     
  android:layout_alignParentRight="true"
  android:layout_marginBottom="88.67dp"
  android:layout_alignTop="@id/albums_list" 
  android:scaleType="centerInside"
  android:layout_centerInParent="true" android:background="@android:color/darker_gray"
  android:src="@drawable/icon"/>
</RelativeLayout>

let me know for improvements

Samuel
  • 9,883
  • 5
  • 45
  • 57
  • excuse me, but I've not understood exactly your suggestion. The image must be to the left of the LinearLayout. And I need these margins to place the image in a certain predefined position. – Nicolle Aug 31 '11 at 02:24
  • and image would help. can you make one and add it to your question. or give a link to the image. – Samuel Aug 31 '11 at 02:27
  • first I couldn't upload the picture at work. Now the system says that a user with the reputation less than 10 can't upload a picture either :( Please, check the image [here](http://www.image-share.com/ijpg-894-118.html). I need something like in the top picture but get the result drown in the bottom picture – Nicolle Aug 31 '11 at 23:36
  • ah! landscape mode. this looks possible without any hassle – Samuel Sep 01 '11 at 00:53
  • hm, that's not so easy as you think. I took exactly your layout above and put my image (bigger that icon) in src of ImageView. I get the same result as before that is the image exactly fits vertically ImageView but there are spaces in the horizontal direction. And in case of icon I don't want any space (grey color) around. – Nicolle Sep 01 '11 at 08:38
  • I guess there are problems with scaling in ImageView and it depends on the proportion of images. I will make my custom view with overridden onMeasure. Thank you for your efforts. – Nicolle Sep 01 '11 at 08:41
  • did you try other options mentioned here. [android:scaleType](http://developer.android.com/reference/android/widget/ImageView.ScaleType.html). if you want the aspect ratio you will endup having space in either of the sides. or you need to crop. this you will need to do even in your custom view. – Samuel Sep 01 '11 at 09:02
  • why? For example: 1. At first I place ImageView; 2. It scales to fit the height; 3. It wraps the width of the uniformly scaled image (no spaces). I don't see any logical problem. – Nicolle Sep 01 '11 at 09:35