I am building an android application with eclipse and I'm struggling to master the image positioning in the screen. I have put an image in a relative layout, and I want the borders of the image to match perfectly the borders of the screen, but when I extend the image manually it never fits and even if I put padding :/
(see the right side is ok, but not the left, the problem is not even a problem about the dimensions of the screen)
Thank you for your help
If you want to do that, you need to take the dimensions of the screen using this code :
// pixels
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x;
int height = size.y;
Then you need to set programmatically the dimensions of the picture using the width and height properties.
If you need that your image to be the backgroung of the activity you can use the background property.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rootRL"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background">
</RelativeLayout>
The "#drawable/your_image_name" is your image. The image should be the dimensions that google recomends for deferent sizes of screen.
Related
I have a list of photos, each having some text in it. I would like each photo to horizontally fill the screen and would like to height to be the same as of the width
Trying to accomplish something like
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="self.width"
...
How could I accomplish this ?
Since I will be using a recycleview I can edit the height at runtime.
XML is not dynamic. Screen measurements have to be done in Java during onCreate.
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point(); display.getSize(size);
int width=size.x; int height=size.y;
LinearLayout.LayoutParams params= new LinearLayout.LayoutParams(width,width);
yourView.setLayoutParams(params);
find width of your layout programmatically, and set that value as height of your layout.
//get Width
int width=layout.getWidth();
//set height
layout.getLayoutParams().height=width;
should be like this,if you want height for full screen use match_parent also
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
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 ?
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:
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...
My Android app is for Gingerbread and above. It creates screen output of a graph and a text table. Each is square in shape and drawn using an imageview. These are placed with the layout xml separately within a linear layout. I want the squares the same size and as large as possible. In portrait mode they are stacked and in landscape mode they are side by side. There is nothing else drawn by the app.
I use this code to get a notion of what size squares to draw:
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
height = metrics.heightPixels;
width = metrics.widthPixels;
....
landscape=width>height;
//use fudge factor for vertical display (account for title bar, etc.)
if (!landscape)
graphSize=(int) (0.9f*(float)height/2.0f);//reduce by 10%
if (landscape)
graphSize=width/2;
I use graphSize to set the size of the imageviews for output.
Recognizing that the width and height provided by the metrics only gives an approximation (for numerous reasons I do not wish to get into), I simply reduce the height by a fudge factor when sizing my squares. In landscape mode using width over 2 as the square size gives a good display which makes fairly good use of the available screen space. In portrait mode using height/2 works poorly: the second drawn square is diminished in size. So I reduce the height by 10% then divide by two to get the square size. This works but does not make good use of the available space. Any suggestions?
Might be you want something like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2">
<ImageView
.
.
.
android:layout_weight="1" />
<ImageView
.
.
.
android:layout_weight="1" />
</LinearLayout>
I have a background image in body.
What I want to achieve is that:
1) - Calculate the visitor screen resolution.
2) - based on that resolution I want to resize my background image.
I know get the screen resolution as a
Display display = getWindowManager().getDefaultDisplay();
width_screen = display.getWidth();
height_screen = display.getHeight();
But I don't know how to resize the images according screen resolution of user.
Can anyone help?
Thanks..
Put a ImageView in your layout file and set
android:layout_width="match_parent"
android:layout_height="match_parent"
If you want to keep the aspect use:
android:scaleType="centerInside"
If you dont care about the aspect ratio use:
android:scaleType="fitXY"
you may have to write a custom view to do this. Overide onDraw method in it to copy your bitmap as many times as needed.
I'm developing an Android application and I want to design, in eclipse, a layout bigger than screen height.
I have a layout for a fragment and this fragment will be inside a ScrollView on FragmentActivity.
This is my fragment's layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/user_pro_main_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/text_state"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/layout_state"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
Do I have to change android:layout_height="match_parent" to make it bigger on eclipse's designer?
What do I have to do if I want to see the layout bigger on eclipse designer?
Answer is pretty simple: you can't view layout which is biggern then screen on Eclipse Editor.
Possible workarounds:
1. Comment part of top views (visible) to see bottom (which are invisible), then uncomment when ready to launch.
2. Change Device Preview to bigger resolution (Nexus 10), this will give you some extra space.
You can always explicitly set the exact dp value in layout_height, but of course most of the time I don't think you want a fixed value, so do it programatically.
LinearLayout yourLayout; // Get it by findViewById()
yourLayout.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, your_calculated_height));
You would set android:layout_height="wrap_content" and as you add child elements beyond the physical screen it will continue to stretch the layout.
As for viewing this on Eclipse, I'm not sure. I personally would just run it on a device to view it.
just calculate device height and width and add int value to calculated height and width at runtime at layouts height and width.
public void deviceDisplay(){
Display display = getWindowManager().getDefaultDisplay();
int width = display.getWidth();
int height = display.getHeight();
}