I am trying to make a small image appear on my screen. I want it to be a small square. With the below code, it shows up as a long flat rectangle. I have attached a picture of what it looks like below.
java code
ImageView q1Image = (ImageView)findViewById(R.id.q1Image);
q1Image.setScaleType(ScaleType.FIT_XY);
xml code
<TableRow
android:id="#+id/row4"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1" >
<ImageView
android:id="#+id/q1Image"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_weight=".1"
android:textSize="8sp"
android:gravity="center_horizontal" />
EDIT
If I make the width and height equal to 50dp each, the image gets bigger but is still a flat looking rectangle.
Your scaling the Image wrong. Here are all scaletypes:
Top row (l-r) center, centerCrop, centerInside.
Bottom row (l-r): fitCenter, fitStart, fitEnd, fitXY.
You probably need fitCenter:
q1Image.setScaleType(ScaleType.FIT_CENTER);
FIT_XY will stretch your image to fit all yout ImageView.
Use scale type fitCenter to preserve aspect ratio by placing the image in center if your ImageView
q1Image.setScaleType(ScaleType.FIT_CENTER);
Refer to http://developer.android.com/reference/android/widget/ImageView.ScaleType.html
For other options.
Without the full layout XML this is just speculation, but seeing as you don't appear to have fixed the problem by changing the scale type, here are some other suggestions:
Wouldn't it be better if the layout_weight of the ImageView was zero?
Are you specifying android:stretchColumns on the TableLayout?
The image looks like it is being stretched to match the width of the text below. How many columns have you got in your table? It looks like the text in the other rows is in column 0 (as is the image in your first row) and the text in the first row is in column 1. If you want to leave column zero blank for the other rows, you need to specify android:layout_column on the text views.
Related
I'm creating an app that uses an ImageView in the main activity that covers the whole width of the screen, the height should fit the image's resolution.
Here's my xml:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:adjustViewBounds="true"
android:id="#+id/bgImage"
android:scaleType="fitXY"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/bg_home_blue"/>
</RelativeLayout>
Here's what my layout looks like:
Everything seems to work fine but I don't know where these paddings are coming from, I've tried to change the scaleType but nothing seems to work.
Edit:
If I put instead of src just a blue background, the paddings go away and it fills the whole width (than I need to set a specific height as well)
I guess your image is png and have that space around it, even when your scaleType is FitXY it doesn't mean that it will remove the space around the png file, check that out and let us know what happened, or at least upload your image file
I have a problem with my ImageButton because it appears to be resizing together with the source image. This is quite problematic because I'm using a TableLayout with equally weighted TableRows to achieve a uniform grid layout but for some reason, that particular ImageButton is resizing itself with the image and making that entire row appear bigger than the others even if they all have the same layout weight.
empty src:
https://gyazo.com/b50ab6d7afb6608db0505d701a2a40c9
with src, adjustViewBounds=true
https://gyazo.com/e2a2dae581d1fae4503b6e130ced776d
with src, adjustViewBounds=false
https://gyazo.com/2623f08fcffea586d5b7917332ae7291
XML Tag:
<ImageButton
android:id="#+id/stat_analyze"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/sp2_calc_button"
android:onClick="btnClicked"
android:src="#drawable/statistics_white"
android:adjustViewBounds="true"
android:scaleType="fitCenter"/>
Update:
So far, I've tried replacing the source image which is a png with a smaller version and with an android vector resource replacement but so far, I've still been stuck with the same results. I guess that means the only way to do this really is to lock the layout height. I've tried programatically setting the height at runtime but I still get the same result.
Update:
I tried once again, resizing the image to a fixed value. I noticed, however, that this particular button does not take up the whole area until it reaches a height quite far beyond the intended height. What I mean by this is for example, I set it to 60dp, the entire row will already begin to take up more space even if the button itself hasn't matched the parent height yet. I don't know why this is happening as this is the first time I've seen this happen. Can someone help me with this?
Have you tried the scaleType fitXY attribute:
android:scaleType="fitXY"
Image view elements stay the same regardless of device size. So while is optimized for a smaller screen like a Nexus 6, the orientation or spacing of the various buttons and image views are not appropriate on a tablet device like the Nexus 7.
Is this because the layout_width and layout_height attributes are defined specifically?
As for the aspect ratio, answers suggestions on certain questions have suggested that android:scaleType=fitXY be used have not yielded any effective results.
<ImageView
android:scaleType="fitXY"
android:id="#+id/ring"
android:layout_centerHorizontal="true"
android:layout_marginBottom="58dp"
android:contentDescription="#null"
android:src="#drawable/ring"
android:layout_width="200dp"
android:layout_height="200dp" />
Do image view elements have to be both resized and scaled?
Somewhat similar questions:
Layout screwed up on bigger screen sizes.
How to evaluate view size to keep same proportion in all devices?
you should use percent for width and height of your image like below
android1:layout_width="0dip"
android1:layout_height="fill_parent"
android1:layout_weight="0.4885"
use layout-weight attribute for the elements.
Suppose inside a layout, there are 2 TextView elements.
Setting layout-weight="1" for the first and layout-weight="2" for the second will divide the total available space to the 2 TextView elements in the ratio of 1:2 regardless of the screen size. So, instead of using dp values for dimensions, use layout-weight attribute to indicate how much space you want your elements to cover.
I need to change a image width
original image like the first line below:
but when I change the width it keeps the ratio resize the original image
I need to do something like the third image
can change the width and don't modify original image
How can I do this through Java or XML in android?
xml code:
<ImageView
android:id="#+id/fill"
android:layout_width="150dp"
android:layout_height="32dp"
android:layout_alignLeft="#+id/BGfill"
android:layout_centerVertical="true"/>
I made a Grid View with 6 columns and 60 rows. Where I can add, move and erase images. But I'm having trouble to set the distance between columns (I don't want any space between columns). Since it will change deppending on screen size. I set it up for my phone, then tried it at a friends phone and there where like 10dp between columns. Heres the xml for the GridView EDIT: and if I try it in a smaller phone the images where to big to fit the cell.
<GridView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/image_grid_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:numColumns="#integer/num_columns"
android:stretchMode="columnWidth" />
Heres the java code for the layout
ImageCell v = null;
if (convertView == null) {
v = new ImageCell (mContext);
v.setLayoutParams(new GridView.LayoutParams(80, 80));
v.setScaleType(ImageView.ScaleType.CENTER_CROP );
} else {
v = (ImageCell) convertView;
}
I tried changing that v.setLayoutParams... to
v.setLayoutParams(new GridView.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT ));
and
v.setLayoutParams(new GridView.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
But those two maked the GridView unable to use. If anyone have any idea of what am I doing wrong please tell me, if someone needs something else also ask for it (I can't post screenshots)
I had a similar problem, and i used another approach with getDisplayMetrics.
DisplayMetrics metrics = this.getResources().getDisplayMetrics();
int screenWidth = metrics.widthPixels;
And divide between number of columns.
v.setLayoutParams(new GridView.LayoutParams(screenWidth/2, screenWidth/2));
v.setPadding(8, 8, 8, 8);
It's not so elegant, but its easy. :-)
The problem is that you are hardcoding the width and height for your cells.
This makes the cells 80 pixel wide on all phones. If the phone has a bigger resolution (the real pixels get smaller) your view will be smaller. If you really want to create the whole view in Java and not in xml at least load the dimension for your cells from a ressource file. This will enable you to save the value in density independent pixel and have the phone adjust the value to something that matches the actual screen resolution.
Read the supporting multiple screens sections in the documentation for more insight into this.
In addition to Janusz's comment, you may need to set your stretchMode to none so that Android would not stretch anythings automatically. Further, if you don't need to have any spacing between columns, then set horizontalSpacing to 0. You may end up with this XML:
<GridView
...
android:stretchMode="none"
android:horizontalSpacing="0dp"
</GridView>
See
http://developer.android.com/guide/practices/screens_support.html
If your graphics are too big on small phones use additional drawable directories like drawable-mdpi or sth.
Also u should try android:stretchMode="none" in your gridview (xml).