how to fit an ImageView inside a CardView - android

I have a fixed size CardView, and I need to fill it with an ImageView, this is how the code looks so far:
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card1x"
android:layout_width="160dp"
android:layout_height="170dp">
<ImageView
android:id="#+id/futourImage"
android:src="#drawable/futourfie"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.v7.widget.CardView>
And in order to fit it, tried :
ImageView futour = (ImageView)findViewById(R.id.futourImage);
futour.setScaleType(ImageView.ScaleType.FIT_XY);
But doesn't seems to solve the problem, looking for an effective solution! Thanks

Fixed it by changing :
ImageView image_id = (ImageView)findViewById(R.id.ImageID);
image_id.setScaleType(ImageView.ScaleType.CENTER_CROP);
and setting :
android:layout_width="match_parent"
android:layout_height="match_parent"
for the ImageView

Have a layout like relative layout as the main child of the CardView and then have the ImageView the child view of the layout. Then set the ImageView's width and height to match_parent.
You could also alternatively have a framelayout as the main child of the CardView and set its background to the image. Will stretch it up to fill the Card.

Related

android:layout_height not working for CardView

I am working with CardViews inside a RecyclerView with GridLayoutManager. The problem that I am facing is, the height I specify for the card view inside xml or in java, it doesn't get enforced by the CardView. It seems like the cumulative height of the child views of the CardView becomes the height of the CardView. This behavior considering the fact that it's parent's layout parameters that are enforced on its child views.
What am I missing? Am I doing something wrong?
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/cardView"
android:layout_width="#dimen/card_view_width"
android:layout_height="0dp"
android:layout_marginBottom="6dp"
android:elevation="10dp"
android:orientation="horizontal"
card_view:cardCornerRadius="2dp"
>
<ImageView
android:layout_width="#dimen/card_view_width"
android:layout_height="10dp"
></ImageView>
</android.support.v7.widget.CardView>
In this case the height of the card view is 0dp but still the layout designer preview & when the app runs on the device, the size of the card is 10dp.
Best Regards
What do you expect to happen, with what you told the program?
You tell the CardVeiw to have a height of 0dp with this:
android:layout_height="0dp"
Then you place an ImageView inside, and tell it to have a height of 10dp.
So of course the CardView makes itself taller to allow the ImageView to fit properly.
If you want the inner elements to match the height of the CardView, set the layout_height of the CardView to whatever you want, like 20dp:
android:layout_height="20dp"
Then have the inner elements match_parent:
android:layout_height="match_parent"
Why are you setting visibility to 0? IF you are trying to hide it, use `visibility = View.GONE'.
ALso, don't use elevation which won't work before L. Insteed, use cardElevation so that it will work before L as well.
Try to set android:layout_height="wrap_content" in your CardView.

Android overlay outside/between layout boundaries

I have to add an overlay (ImageView) so that it's a bit shifted to the left of the containing layout's left boundary.
What is the best way to do this?
Tried something simple, like putting the ImageView inside the layout and use negative margin
android:layout_marginLeft="-20dip"
This made this:
(Correction: Text in the image should be 20dip not 20px)
AbsoluteLayout is deprecated. Is there something like z-order? Or what do I do?
Thanks in advance.
Edit: I tried using relative layout instead. Same effect. Here's the xml reduced to a minimum:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:clipChildren="false"
android:paddingLeft="50dip"
>
<ImageView
android:id="#+id/myId"
android:layout_width="60dip"
android:layout_height="60dip"
android:layout_marginLeft="-30dip"
android:clipChildren="false"
android:src="#drawable/pic" />
</RelativeLayout>
Result
Also happens when the containing layout has a background image smaller than the screen instead of padding.
Using RelativeLayout instead of LinearLayout (to allow overlapping) and adding this to the RelativeLayout fixed it:
android:clipToPadding="false"
set "android:clipChildren = false" in xml
Instead of
android:layout_marginLeft="-30dip"
try with
android:paddingLeft="-30dp"
Use a transparent(android:background="#00000000") imageview to the left of linear layout with width = 30dp. And make myId as aligning left in case of relative layout. If you are using linear layout make orientation as horizontal and let the transparent imageview be the first entry in it.

How can I align an image inside an ImageView to the bottom of the ImageView?

I want the drawable inside my ImageView to be shown aligned to the bottom (of the Imageview), and not centered.
Is it possible to do that?
Maybe this is too late, but even I ran into the same problem today and fixed it by using the following snippet.
All the alignment/scaling options are in the scaleType attribute.
Now, if you want to align the image with the beginning of the ImageView, use android:scaleType="fitStart".
Similarly, android:scaleType="fitEnd" to align it with the bottom of the ImageView.
You can wrap the ImageView inside a FrameLayout and align using android:layout_gravity like this:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:src="#drawable/img_select_profile" />
</FrameLayout>
You'll have to set the weight of it to 1 or set its alignment to bottom.
http://developer.android.com/reference/android/widget/LinearLayout.LayoutParams.html
If you have SVG you can open it in https://boxy-svg.com/app or any other online svg editor
Align Image Bottom.

Android crop background

I have a LinearLayout with width set to fill_parent and height to wrap_content. Now I want to give it a background from a png file, but doing it in a traditional way causes the LinearLayout to resize in order to show the whole background instead of cropping the additional part.
How can I set the background of LinearLayout so it won't resize?
Thanks
It appears that such thing is achievable only using the ImageView and setting the scaleType parameter accordingly. A quick workaround is to use FrameLayout and put the ImageView under another layout with transparent background.
Code:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/background" />
</FrameLayout>
The default behaviour of background bitmaps is to fill the container completely and grow the horizontal and vertical size of the container if needed. The solution is to create a drawable bitmap resource and changing the gravity.
Check the following link and look for the possible gravity values. Your view should then just reference the drawable resource and you should be fine.
http://developer.android.com/guide/topics/resources/drawable-resource.html#Bitmap
I solved this one by subclassing LinearLayout and overriding the onMeasure(int,int) callback, then updating the layout XML to use my new layout type. I'm not at liberty to post that exact code, but what I did was invoke the super.onMeasure(int,int) implementation and check whether the measured height came back as the exact height of my background image. If so, I grab the measured height of all child views, then calculate a new height value and pass it to setMeasuredDimension(int,int).
put this code in the xml activity, for example activity_main.xml
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/image" />

How to wrap content views rather than background drawable?

How can I get a LinearLayout (or any other ViewGroup) to assume the size of it's child views rather than assuming the size of the background image?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/large_image300x300pix">
<TextView android:id="#+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello world!"/>
</LinearLayout>
The linear layout becomes the same size as the background image.
How can I get my linear layout to assume the same size as the textview?
OK, so this thread is a little old, but I have a solution that someone might someday find useful. I think Android has problems scaling large images down, so the LinearLayout size ends up getting bumped by the background drawable bitmap, and the ImageView ends up forcing up the size of the parent container.
Unless you use a relative layout. You can make the ImageView relative to the position of the LinearLayout, even when the ImageView is behind the layout in the parent. My solution looks something like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:src="#drawable/activation_popup"
android:scaleType="fitXY"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignTop="#+id/activation_layout"
android:layout_alignBottom="#id/activation_layout"
android:layout_alignLeft="#id/activation_layout"
android:layout_alignRight="#id/activation_layout"
android:contentDescription="#string/act_code_label" />
<LinearLayout
android:id="#id/activation_layout"
android:clipToPadding="true"
android:padding="25dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- LinearLayout wraps a bunch of smallish views here -->
</LinearLayout>
</RelativeLayout>
I tried this on a top of display sizes and OS versions, seems to work great. Note that the padding in the LinearLayout is a trick to make space for a shadow border in the background image graphic. The LinearLayout doesn't need any relative positioning because top left is assumed.
You can create a FrameLayout and put an ImageView and your LinearLayout there. So you'll be able to configure the layout of your background image.
This happens because the Android view calculates its minimum size based on its background drawable size.
Check my answer here in this another post which covers the same problem which will help you to achieve your layout configuration.
If your image lends itself to being converted to a scalable 9-patch image, then doing that would cause the background to scale around the TextView.
I believe the best solution here is to set android:clipToPadding="true". What this does is excludes the padding for the main layout and wraps your layout to its children.

Categories

Resources