How to display an ImageView slightly outside a RelativeLayout or outside the screen? How to display a rubber on the topleft of the screen

Question

I've setup a relative view with all my elements inside (buttons, images, etc...). It is the title page of my Android application.
Now I would like to overlay "LITE" banner over the whole layout, in the upperleft corner.

My problem is that the "LITE" banner image is an oblique red rubber, and that I need to set its topleft point to (-45,-45) on the screen to only display the part of the image I want (attached is the source image so you can understand what part of the image should be visible on the screen).

the banner

I have tried the AbsoluteLayout, the RelativeLayout, to move it programmatically with SetLeft and SetTop, but the negative values are not accepted.

Any idea ?

@Rod_Algonquin : because I share these images with the iPad application. And this is easy to do on XCode. I would rather to it programmatically, but if I get no answer, that's what I'll have to do. — philippe, Jun 09 '14 at 22:54
I've used negative margins before to achieve a similar effect. See this post: http://stackoverflow.com/questions/10673503/is-it-a-bad-practice-to-use-negative-margins-in-android — Chris Feist, Jun 09 '14 at 23:09

score 10 · Answer 1 · answered Jun 09 '14 at 22:59

You can use Relative layout with the attribute android:clipToPadding="false" to get the desire effect.

example:

    <?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:clipToPadding="false"
android:background="@android:color/white"
android:paddingLeft="50dip"
>

<ImageView
    android:id="@+id/myId"
    android:layout_width="60dip"
    android:layout_height="60dip"
    android:layout_marginLeft="-70dp"
    android:layout_marginTop="-20dp"
    android:clipChildren="false"
    android:src="@drawable/button_normal" />

</RelativeLayout>

result:

enter image description here

Thank you SO much ! Great answer, with sample code and image.++ — philippe, Jun 10 '14 at 18:21
I have worked on the subject a few hours more and had to post another answer, because code needed... Thanks anyway Rob ! — philippe, Jun 11 '14 at 20:09

score 2 · Accepted Answer · edited Apr 14 '22 at 03:54

I'd like to share my experience of this affair with the community...

The idea was to display an oblique "LITE" rubber on the top-left corner of the main screen of my app.

Rod Algonquin's answer was fine. However, it did not completely solve my problem, because I had to adapt the picture's dimensions to the screen height...AND to the screen orientation. Nightmare. Even with a relative layout, it was nearly impossible, because the hidden parts of the image were never correctly aligned.

So I had to work differently: The picture had to be moved left and top, by 20%. How to do that?

In the layout.xml file :

Insert the ImageView inside a RelativeLayout
Give the relative layout an ID

Configure the ImageView to make it fit its container RelativeLayout's width and height (layout_width="wrap_content" and layout_height="wrap_content")

 <RelativeLayout
     android:id="@+id/accueil_litebannerlayout"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent">
     <ImageView
         android:id="@+id/accueil_litebanner"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:scaleType="fitXY"
         android:src="@drawable/lite_banner" />
 </RelativeLayout>

In your activity.java class file :

 //get screen dimensions
     Display display = getWindowManager().getDefaultDisplay();
     Point size = new Point();
     display.getSize(size);
     int ScreenWidth = size.x;
     int ScreenHeight = size.y;
     //set the desired height of the rubber, based on screen's height    
     int myLayoutWidthAndHeight=ScreenHeight/4;

 //get rubber PNG image dimensions
     BitmapFactory.Options options = new BitmapFactory.Options();
     options.inJustDecodeBounds=true;
     BitmapFactory.decodeResource(getResources(),
             R.drawable.lite_banner,options);
     int imageHeight = options.outHeight;
     int imageWidth = options.outWidth;

 //redux_factor has to be calculated, because if the image is reduced, then the translation has to be adapted
     double redux_factor=1;
     if (myLayoutWidthAndHeight<imageWidth) {
         redux_factor=(double)myLayoutWidthAndHeight/imageWidth;
     }
 //determine by how many pixels left and top (same) the image will have to be translated
     double translation_percents=.22;
     double myCroppedMargin_double=imageWidth*translation_percents*redux_factor;
     int myCroppedMargin=(int) Math.round(myCroppedMargin_double);

 //get the image layout
     RelativeLayout litebannerlayout=(RelativeLayout) this.findViewById(R.id.accueil_litebannerlayout);
 //change its parameters (width, height, leftMargin, topMargin)
     RelativeLayout.LayoutParams params=new RelativeLayout.LayoutParams(myLayoutWidthAndHeight,myLayoutWidthAndHeight);
     params.setMargins(-myCroppedMargin, -myCroppedMargin, 0,0);
     litebannerlayout.setLayoutParams(params);

Arghhh. It works...

You can use this sample code to move an imageView out of the screen, either based on a percentage, or a pixel count. This code can also be adapted to put the rubber/banner in the topright, bottomleft, bottomright corners.

OK, let's move on to something else...

How to display an ImageView slightly outside a RelativeLayout or outside the screen? How to display a rubber on the topleft of the screen

2 Answers2

Linked