I have a square drawable image (drawable-l is 1280x1280) and I want it to crop depending on which direction the device is in (landscape, portrait). I want the image to always be centered, scaled to fill the largest side, and have the smaller side clipped.
Is this possible?
EDIT:
Adding on to Pramod J George's answer below, if you take the ImageView with the scaleType:centerCrop and put it along side your main layout inside of a FrameLayout, this will work perfectly!
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/background"
android:scaleType="centerCrop"
android:src="#drawable/background" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/logo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/logo"
android:src="#drawable/logo" />
</LinearLayout>
</FrameLayout>
I think this will do some help
http://blog.andresteingress.com/2011/09/22/to-scale-or-not-to-scale/
Related
How do I let or force a background drawable to be smaller than the view? Say I have an ImageView which a user clicks to take a photo. I want to place the ic_photo_camera icon as the background of the ImageView. But I don’t want the icon to stretch to fit the size of the ImageView: I want the icon to maintain its own size. How do I do this without using a combination of views? but rather just one view? For instance I can use A RelativeLayout and two ImageView to accomplish this. But I am wondering if there is an option for just one ImageView.
update
I think this is as good as a picture: this does it presently. But I don't want to use three views, I want to use one if I can.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:background="#eeeeee"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/container"
android:layout_width="250dp"
android:layout_height="150dp"
android:layout_centerHorizontal="true">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:scaleType="center"
android:src="#drawable/ic_photo_camera_white_48dp" />
<ImageView
android:id="#+id/photo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:scaleType="centerCrop" />
</RelativeLayout>
<TextView
android:id="#+id/label"
android:layout_width="match_parent"
android:gravity="center"
android:layout_height="wrap_content"
android:layout_below="#+id/container"
android:background="#FFFFFF"
tools:text="This is the label to some image" />
</RelativeLayout>
Yes, you can.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#eeeeee">
<ImageView
android:id="#+id/container"
android:layout_width="250dp"
android:layout_height="150dp"
android:layout_centerInParent="true"
android:scaleType="center"
android:src="#drawable/ic_photo_camera_white_48dp"
android:background="#drawable/bg"/>
<TextView
android:id="#+id/label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/container"
android:background="#FFFFFF"
android:gravity="center"
tools:text="This is the label to some image" />
</RelativeLayout>
and create bg.xml in your res/drawable:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="clip_horizontal"
android:src="#drawable/photo" />
#drawable/photo is what you wanna put into your old ImageView with id "photo". gravity can be changed to clip_vertical based on your image aspectRatio.
If your wanna dynamically set "photo", you can:
ImageView iv_container = (ImageView) findViewById(R.id.container);
Drawable drawable = getResources().getDrawable(R.drawable.photo_2);
((BitmapDrawable)drawable).setGravity(Gravity.CLIP_HORIZONTAL);
iv_container.setBackgroundDrawable(drawable);
hi，could you show a picture which you want to display, i can not hardly understand what you say. i try you can use the scaleType attribute of imageView, it has center, fixXY as so on. I appreciate it could help you.
I am using com.android.volley.toolbox.NetworkImageView.
Image is coming from url.
I want to display image so that its width to occupy full width of screen not height because below image there is a caption which is a Textview.
Here is the activity's xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/black"
tools:context=".MainActivity" >
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
Here is the items xml.
<?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"
android:gravity="center" >
<com.android.volley.toolbox.NetworkImageView
android:id="#+id/photo_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="1dp"
android:src="#drawable/button_register" />
<TextView
android:id="#+id/caption"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/photo_image"
android:layout_marginLeft="15dp"
android:text="Check"
android:textColor="#color/white" />
</RelativeLayout>
From the backend the image size is 300 X 200 pixels.
How to set imageview so that it can occupy full width of the screen.
Can anyone help?
NetworkImageView extends ImageView so you should be able to use everything that works with ImageView.
So, if you want your image to occupy full width and adjust its height so it maintains its aspect ratio (at least that's what I understood you wanted to do) use the adjustViewBounds property
Your xml will look like this:
<com.android.volley.toolbox.NetworkImageView
android:id="#+id/photo_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="1dp"
android:src="#drawable/button_register"
<!-- add adjustViewBounds -->
android:adjustViewBounds="true" />
I am using a list view and I have an image in it, the image just for example say is 1920 by 1080, and i only want to display the same amount of the image as height of the layout that it is in.
So i have a verticl linearLayout and it's height is 100dp for example, so i want the image that im using in that image view to display whatever 100 dp would translate onto the image? if that makes sense. I want to keep the same resolution and i dont want to shrink it or anything, just show part of the image .
this is the xml as of now:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:adjustViewBounds="true"
android:src="#drawable/example"
/>
</LinearLayout>
</LinearLayout>
Try this:
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scaleType="center"
Documentation to "center"
Documentation to "layout_weight"
the imageview takes extra [black] space and i dont know why
ok this imageview should wrap content but instead..
photo explains the problem
this is the code
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/map"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/map" /><ImageView
android:id="#+id/blxx"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingBottom="-20dp"
android:src="#drawable/photo" />
<ImageView
android:id="#+id/blxx"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/blxx" />
</LinearLayout>
</ScrollView>
Try the below:
android:adjustViewBounds="true"
This will remove the extra padded space
first possible reason for your problem:
sometimes when the image is too small, it can't scratch anymore then some limit. after that limit - what happens is what you see - blank space claimed by the imageView where additional scratch of the image was expected. I advice you to take larger picture (with bigger resolution)
Second possible reason:
add to your imageView properties on the xml file the following attribute:
android:scaleType="fitXY"
android:layout_gravity="center"
Above line is centering the image to fit inside your ImageView. Try without it. If not, set gravity to "fill" and try again.
Also remove one of the duplicates of blxx as noted.
hope this ll help you
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_gravity="center">
<ImageView
android:id="#+id/map"
android:layout_width="fill_parent"
android:layout_height="fill_content"
android:src="#drawable/map" />
</LinearLayout>
</ScrollView>
I need to strech a background image for a layout in my app,
please note, the yellow background in my layout is not streched
how to accomplish this [yellow bar image filling parent]?
also please note that the blue layout is not the whole width of the screen, how to?
code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:id="#+id/myfragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="1"
android:background="#0000FF">
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/titlebar" />
</LinearLayout>
<ListView android:id="#id/android:list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:drawSelectorOnTop="false"/>
</LinearLayout>
Thanks a lot!
This is the reason why your linearlayout (blue) is not fitting the whole screenwidth
android:paddingLeft="8dp"
android:paddingRight="8dp"
You need to change this. Put a margin (left and right) for the inner layout instead.
Instead of the image view you could set the background of the 2nd linearlyout directly
android:background="#+id/imageView1"
Incase you want to use the image view instead
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:scaleType="fitXY"
android:src="#drawable/titlebar" />