android - How to display an ImageView slightly outside a RelativeLayout or outside the screen? How to display a rubber on the topleft of the screen - TagMerge
3How to display an ImageView slightly outside a RelativeLayout or outside the screen? How to display a rubber on the topleft of the screenHow to display an ImageView slightly outside a RelativeLayout or outside the screen? How to display a rubber on the topleft of the screen

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

Asked 5 months ago
10
3 answers

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

Source: link

2

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

Source: link

0

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>

Source: link

Recent Questions on android

    Programming Languages