Using ImageView to hide/reveal another ImageView in RelativeLayout

Question

I want to display an image (image1 of 629x470 pixels) in a relative layout and use another complete white image (image2 of 1896x470 pixels) to scroll over image1 to hide/reveal image1.

My image1 is visible correctly. But image2 is automatically resized to a smaller version and positioned vertically centered to image1 due to which I am not able to completely coverup image1. How do I display image2 as is so that it completely covers image1? adjustViewBounds and scaleType did not help.

My Layout is as follows:

<?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:layout_height="wrap_content"
               android:layout_width="wrap_content"
               android:src="@drawable/image1" />

    <ImageView android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:src="@drawable/image2" />

</RelativeLayout>

Please suggest.

It'd certainly help you get better answers if you took a screenshot of what you get and a mock-up of the desired outcome. — Stas Bichenko, Jul 11 '13 at 08:23

score 1 · Answer 1 · edited Jul 11 '13 at 08:34

1

If you want to use image2 to scroll over and cover up your image1, you may instead create custom layout(linearlayout type) for image2 and then call it up when you make events(scroll down etc.)
You may use android:layout_width="wrap_content" for image1 and use android:layout_width="match_parent" for image2 to set up their size.

The way you put imageview together in same xml will fix their position. Image2 will always stay under image1.

edited Jul 11 '13 at 08:34

Arun Chandran Chackachattil

3,356
7
31
45

answered Jul 11 '13 at 08:29

Shombongkot Jindakom

29
1
1
5

The problem is `Image2` is getting resized automatically. If I use an image of same width as of `Image1` (which is 629 pixels) then it covers `Image1` correctly, but I will not be able to scroll since `Image2` would be smaller than screen width. So, since the width of `Image2` is larger (1896 pixels) its `ImageView` got shrinked into smaller in size. – Surge Jul 11 '13 at 19:08

score 0 · Accepted Answer · answered Jul 11 '13 at 08:17

0

put some gravity for both images, e.g the below code will center them in center

android:layout_centerInParent="true"

or you can use

android:layout_gravity="center"

you can use other gravity options too, for more about gravity, refer to this link http://developer.android.com/reference/android/view/Gravity.html

answered Jul 11 '13 at 08:17

Onur A.

3,007
3
22
37

This did not helped. Since my `Image2` is large in width, it is getting resized (rather shrinked) to smaller view. – Surge Jul 11 '13 at 19:10
hımm try this, on both imageviews android:scaleType="centerCrop" – Onur A. Jul 11 '13 at 21:02
Using _scaleType="centerCrop"_ covers `Image1` correctly both width & height wise, but since `Image2` is cropped to center, I miss the left edge which has some transparent pixels. – Surge Jul 11 '13 at 21:15
hımm how about trying other scale types? like xystart or matrix? – Onur A. Jul 11 '13 at 21:56
If I use other types then `Image2` is either cropped or resized. – Surge Jul 11 '13 at 22:09
of course it will be resized, because it is bigger than your layout view :) – Onur A. Jul 11 '13 at 22:11
yeah, but my requirement is not to resize. So that I can slide `Image2` over `Image1` :) Thanks a lot @onur-a – Surge Jul 11 '13 at 22:24
hımm then you should wrap your Image2 with scrollview, you can use horizontal or vertical or both, pick one which works best for you :) it's nothing :) – Onur A. Jul 11 '13 at 22:26

Using ImageView to hide/reveal another ImageView in RelativeLayout

2 Answers2