Android ImageView adjusting parent's height and fitting width - android

Update : I solved this issue by using the method described in this answer
I'm a bit stuck with this issue, which I think should be pretty simple.
So my app downloads an image, and renders the bitmap in an ImageView, a child element of a RelativeLayout.
I would like the ImageView to fit the parent width, and to adapt it's size to keep the aspect ratio.
Here is my XML :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<RelativeLayout android:id="#+id/banner" android:layout_width="fill_parent" android:layout_height="wrap_content"></RelativeLayout>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/hello"
/>
</LinearLayout>
And the code :
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
RelativeLayout banner = (RelativeLayout) findViewById(R.id.banner);
ImageView imgV = new ImageView(this);
imgV.setScaleType(ImageView.ScaleType.CENTER_CROP);
// I tried all the scale types : CENTER_INSIDE : same effect, FIT_CENTER : same effect...
imgV.setBackgroundColor(0x00FFFF00);
imgV.setAdjustViewBounds(Color.BLUE);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.FILL_PARENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
banner.addView(imgV,params);
// Some code downloading the image stream
bitmap = BitmapFactory.decodeStream(stream);
imgV.setImageBitmap(bitmap);
}
Desired :
Result :

Thanks to #Julien and #js.
Here is complete solution of ImageView that will stretch bitmap height preserving aspect ratio even if bitmap is smaller than ImageView.
public class ResizableImageView extends ImageView {
public ResizableImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
Drawable d = getDrawable();
if(d!=null){
// ceil not round - avoid thin vertical gaps along the left/right edges
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = (int) Math.ceil((float) width * (float) d.getIntrinsicHeight() / (float) d.getIntrinsicWidth());
setMeasuredDimension(width, height);
}else{
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
}
You can use this class in your xml layouts instead ImageView.
<com.example.ResizableImageView
android:id="#+id/banner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/banner" />

You're probably looking for android:adjustViewBounds="true" in xml or imageView.setAdjustViewBounds(true) in Java.

As I mentioned in a comment, I subclassed the ImageView. I found my code, here you go :
protected class ResizableImageView extends ImageView
{
private Bitmap mBitmap;
// Constructor
public ResizableImageView(Context context)
{
super(context);
}
// Overriden methods
#Override
protected void onMeasure(int widthMeasureSpec,
int heightMeasureSpec) {
if(mBitmap != null)
{
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = width * mBitmap.getHeight() / mBitmap.getWidth();
setMeasuredDimension(width, height);
}
else
{
super.onMeasure(widthMeasureSpec,
heightMeasureSpec);
}
}
#Override
public void setImageBitmap(Bitmap bitmap)
{
mBitmap = bitmap;
super.setImageBitmap(bitmap);
}
}

I think you should change your imgV width to "match_parent"
You should change the scale type to imgV.setScaleType(ImageView.ScaleType.CENTER_INSIDE);

I made a slight change to #Seraphim S's solution to account for cases where the image may be wide, and the view's bounds also wide (for example, rotating the device to landscape mode).
public class ResizableImageView extends ImageView {
public ResizableImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
Drawable d = getDrawable();
if (d != null) {
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
if (width >= height) {
width = (int) Math.ceil((float) height * (float) d.getIntrinsicWidth() / (float) d.getIntrinsicHeight());
} else {
height = (int) Math.ceil((float) width * (float) d.getIntrinsicHeight() / (float) d.getIntrinsicWidth());
}
setMeasuredDimension(width, height);
} else {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
}

Related

how to scale image width for device width?

I am getting image in gallery but some image width is not fit in device width so how to set that image width is device width in my ImageView but height is same for original image height.
below is my set image code here
Uri selectedImageUri = data.getData();
if (null != selectedImageUri) {
// Get the path from the Uri
String path = getPathFromURI(selectedImageUri);
Log.i("", "Image Path : " + path);
// Set the image in ImageView
try {
bitmap = MediaStore.Images.Media.getBitmap(this.getContentResolver(), selectedImageUri);
} catch (IOException e) {
e.printStackTrace();
}
imgEdit.setImageURI(selectedImageUri);
}
You have to extend ImageView, this will match_parent width and proportional height:
package com.yourpackage.ui;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;
public class DynamicImageView extends ImageView {
public DynamicImageView(final Context context, final AttributeSet attrs) {
super(context, attrs);
}
#Override
protected void onMeasure(final int widthMeasureSpec, final int heightMeasureSpec) {
final Drawable d = this.getDrawable();
if (d != null) {
final int width = MeasureSpec.getSize(widthMeasureSpec);
final int height = (int) Math.ceil(width * (float) d.getIntrinsicHeight() / d.getIntrinsicWidth());
this.setMeasuredDimension(width, height);
} else {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
}
Then in your XML layout:
<com.yourpackage.ui.DynamicImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"/>
change your image view with it.
<ImageView
android:id="#+id/background"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY"
/>
Try this
imageView.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT));
Or if you want to fill width
imageView.setLayoutParams(new LayoutParams((LayoutParams.FILL_PARENT,LayoutParams.MATCH_PARENT));
Use this and please change aspect ratio as you want
Display display = ((NavigationHome) context).getWindowManager().getDefaultDisplay();
int width = display.getWidth(); // deprecated
int height = display.getHeight();
int sliderHeight = (int) ((width) / 2.4);
if (height != 0)
imageView.setLayoutParams(new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT,sliderHeight));
try setting the height to match_parent
something like
<ImageView
android:layout_width="match_parent"
android:layout_height="50dp"/>

How to set the max height of a RecyclerView?

I have to implementing a RecylerView,it should wrap the content if its contain only item content height is less. If the item's increase like 250dp, it should be set to max heght(250dp) and that be able to scroll.How to achieve this.my parent layout is a Relative layout.
This is My Layout file
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="250dp"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom" />
</RelativeLayout>
Screen Shot if its only one item.This should be wrap_content.
you can programetically set height to RecylerView
if only one item... wrap content
ViewGroup.LayoutParams params=recycler_view.getLayoutParams();
params.height= RecyclerView.LayoutParams.WRAP_CONTENT;
recycler_view.setLayoutParams(params);
else
<dimen name="view_height">250dp</dimen>
float height= getResources().getDimension(R.dimen.view_height); //get height
ViewGroup.LayoutParams params_new=recycler_view.getLayoutParams();
params_new.height=height;
recycler_view.setLayoutParams(params_new);
1.) Create a class to handle setting maximum height to what is passed by the user:
public class OnViewGlobalLayoutListener implements ViewTreeObserver.OnGlobalLayoutListener {
private Context context;
private int maxHeight;
private View view;
public OnViewGlobalLayoutListener(View view, int maxHeight, Context context) {
this.context = context;
this.view = view;
this.maxHeight = dpToPx(maxHeight);
}
#Override
public void onGlobalLayout() {
if (view.getHeight() > maxHeight) {
ViewGroup.LayoutParams params = view.getLayoutParams();
params.height = maxHeight;
view.setLayoutParams(params);
}
}
public int pxToDp(int px) {
DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
int dp = Math.round(px / (displayMetrics.xdpi / DisplayMetrics.DENSITY_DEFAULT));
return dp;
}
public int dpToPx(int dp) {
DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
int px = Math.round(dp * (displayMetrics.xdpi / DisplayMetrics.DENSITY_DEFAULT));
return px;
}
}
2.) Attach this to the view and pass the maximum height in DP:
messageBody.getViewTreeObserver()
.addOnGlobalLayoutListener(
new OnViewGlobalLayoutListener(messageBody, 256, context)
);
I have an answer here:
https://stackoverflow.com/a/29178364/1148784
Just create a new class extending RecyclerView and override it's onMeasure method.
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
if (maxHeight > 0){
int hSize = MeasureSpec.getSize(heightMeasureSpec);
int hMode = MeasureSpec.getMode(heightMeasureSpec);
switch (hMode){
case MeasureSpec.AT_MOST:
heightMeasureSpec = MeasureSpec.makeMeasureSpec(Math.min(hSize, maxHeight), MeasureSpec.AT_MOST);
break;
case MeasureSpec.UNSPECIFIED:
heightMeasureSpec = MeasureSpec.makeMeasureSpec(maxHeight, MeasureSpec.AT_MOST);
break;
case MeasureSpec.EXACTLY:
heightMeasureSpec = MeasureSpec.makeMeasureSpec(Math.min(hSize, maxHeight), MeasureSpec.EXACTLY);
break;
}
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
maxHeight is in pixels.
You can use this:
maxHeight = (int) getContext().getResources().getDisplayMetrics().density * 250;
to convert 250 dp into pixels

Display comic strip in Imageview

i use Universal image loader to load some imageview(large height) to listview.
this is listview(custom for zoom in/out) in activity:
<noname.test1.CustomListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/listviewImg" />
this is list_img.xml for listview:
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageview1">
</ImageView>
this is image i want to load (size 400px X 5312px):
link
this is result:
I want image when show is full screen or larger.
How to fix it?
create this class and use this instead of imageView
/**
* Created by farazkhonsari on 1/26/16.
*/
public class ScaledImageView extends ImageView {
public ScaledImageView(Context context) {
super(context);
}
public ScaledImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public ScaledImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
try {
Drawable drawable = getDrawable();
if (drawable == null) {
setMeasuredDimension(0, 0);
} else {
int measuredWidth = MeasureSpec.getSize(widthMeasureSpec);
int measuredHeight = MeasureSpec.getSize(heightMeasureSpec);
int width = measuredWidth;
int height = width * drawable.getIntrinsicHeight() / drawable.getIntrinsicWidth();
setMeasuredDimension(width, height);
}
} catch (Exception e) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
and use this class in layout like this:
<ir.farazGroup.YeJoke.tools.ScaledImageView
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/c"
android:scaleType="fitCenter"
/>
you should change scaleType of imageViwe and set adjustViewBound true:
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageview1"
android:scaleType="centerCrop"
android:adjustViewBounds="true">
</ImageView>
you can try other option for scaleType and see which one is good for you!
and you can read about scaleType here:
scaleTypes
Try this solution: [Set this inside onCreate or onCreateView after inflating the list]
imageView = (ImageView) findViewById(R.id. imageview1);
Display display = getWindowManager().getDefaultDisplay();
DisplayMetrics metrics = new DisplayMetrics();
display.getMetrics(metrics);
float screenWidth = metrics.widthPixels;
imageView.getLayoutParams().width = (int) screenWidth; // Takes the whole screen width
try this i'll hope i will help you
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/imageView"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:src="#drawable/locked_image"
android:scaleType="fitXY"
/>

Drawing a square layout inside a circle

I am trying to make a relative layout bounded within a circle i.e the relative layout should be like the square shown in the figure below.
I am trying to set width and height of the layout as:
√((diameter)²/2) which is about 70 %
(source: yogaflavoredlife.com)
public class SquareLayout extends RelativeLayout {
public SquareLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int originalWidth = MeasureSpec.getSize(widthMeasureSpec);
int originalHeight = MeasureSpec.getSize(heightMeasureSpec);
int required = Math.min(originalWidth, originalHeight) * 7 / 10;
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(required, required);
}
}
What I am getting is a rectangular layout instead of square layout:
Can anyone guide me where I am going wrong?
Sample usage:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.widget.SquareLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F55C5C">
</com.example.widget.SquareLayout>
</RelativeLayout>
Here's how I got the solution. First I created a square frame to hold all the layouts.
public class SquareFrame extends FrameLayout {
public SquareFrame(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int originalWidth = MeasureSpec.getSize(widthMeasureSpec);
int originalHeight = MeasureSpec.getSize(heightMeasureSpec);
int required = Math.min(originalWidth, originalHeight);
super.onMeasure(
MeasureSpec.makeMeasureSpec(required, MeasureSpec.EXACTLY),
MeasureSpec.makeMeasureSpec(required, MeasureSpec.EXACTLY));
}
}
Then inserted all layouts within that square frame.
<com.example.widget.SquareFrame
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#5CF5FC">
<com.example.widget.SquareLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F55C5C">
</com.example.widget.SquareLayout>
</com.example.widget.SquareFrame>
Here is what I got
a square, not a rectangle.

I need to size the imageView inside my table row programatically

I've tried to set my ImageView resized but it did not work either by bitmap or other methods I'm going to place my code so if can anyone help me how to size the ImageView to fit inside the table row thnx.
public class Test extends Activity
{
private TableLayout Table1;
protected void onCreate(Bundle savedInstanceState)
{
int[] ImageArray={R.raw.hospital_image,R.raw.hotel_image};
super.onCreate(savedInstanceState);
setContentView(R.layout.favorites);
Table1 = (TableLayout) findViewById(R.id.Table);
TableRow.LayoutParams tableRowParams = new TableRow.LayoutParams(
TableRow.LayoutParams.WRAP_CONTENT,
TableRow.LayoutParams.WRAP_CONTENT, 1.0f);
for(int i=0;i<ImageArray.length;i++)
{
TableRow TR = new TableRow(this);
TR.setLayoutParams(tableRowParams);
ImageView img=new ImageView(this);
//What should i do here to resize it ???
Drawable d = getResources().getDrawable(ImageArray[i]);
img.setImageDrawable(d);
TR.addView(img, new TableRow.LayoutParams(
TableRow.LayoutParams.WRAP_CONTENT,
TableRow.LayoutParams.WRAP_CONTENT, 1.0f));
Table1.addView(TR);
}
}
My XMl only holds these :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true" >
<TableLayout
android:id="#+id/Table1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</TableLayout>
</ScrollView>
</RelativeLayout>
try this,
public class ResizableImageView extends ImageView {
public ResizableImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public ResizableImageView(Context context) {
super(context);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
Drawable d = getDrawable();
if (d == null) {
super.setMeasuredDimension(widthMeasureSpec, heightMeasureSpec);
return;
}
int imageHeight = d.getIntrinsicHeight();
int imageWidth = d.getIntrinsicWidth();
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
float imageRatio = 0.0F;
if (imageHeight > 0) {
imageRatio = imageWidth / imageHeight;
}
float sizeRatio = 0.0F;
if (heightSize > 0) {
sizeRatio = widthSize / heightSize;
}
int width;
int height;
if (imageRatio >= sizeRatio) {
// set width to maximum allowed
width = widthSize;
// scale height
height = width * imageHeight / imageWidth;
} else {
// set height to maximum allowed
height = heightSize;
// scale width
width = height * imageWidth / imageHeight;
}
setMeasuredDimension(width, height);
}
}
use it in your layout as you would plain old ImageView, just change the tag, like this,
<com.example.ResizableImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:padding="1px"
android:scaleType="fitCenter"
android:src="..." />
setLayoutParams() should do the trick, in your case I believe you would need TableRow.LayoutParams, like so:
ImageView img = new ImageView(this);
img.setLayoutParams(new TableRow.LayoutParams(w, h));
Edit
Try to set the Drawable before the setLayoutParams:
ImageView img = new ImageView(this);
Drawable d = getResources().getDrawable(ImageArray[i]);
img.setImageDrawable(d);
img.setLayoutParams(new TableRow.LayoutParams(w, h));

Categories

Resources