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

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

Any idea ?

Answer 1

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:

Answer 2

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

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

Rod Algonquin's answer was fine. However, it did not completely solved 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...