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

Issue

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

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

Any idea ?

Solution

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?

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

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

Answered By - philippe