I am using xamarin android to make a android app in which i am using cardview with recycler view.
Problem
Image height is exceeding the wrap content of the text.
What is Want
I want the image size to be the size covered by text.
What I Have Tried:
I have tried setting image as a background of the linearlayout but it sets the height of the layout itself much greater than shown in images below.
i have tried setting this in framelayout but it gives same result as below
Details about the images
numbers are provided with the instance of the card view in
1: image the image source height is increasing the view height
2: this image is setted perfectly because the original image height resolution is low and the image is stretched to view
3: again image height resolution is high so the view is extended by image
4,5 cardview without image
My Code:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/cardView"
app:cardBackgroundColor="#android:color/transparent">
<ImageView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:id="#+id/cardImage"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/templateLayout"
>
<TextView
android:text="Title:"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:id="#+id/listTitle"/>
<TextView
android:text="Start Time:"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="15sp"
android:id="#+id/listSTime"/>
<TextView
android:text="End Time:"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="15sp"
android:id="#+id/listFTime"/>
<TextView
android:text="Description:"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="15sp"
android:id="#+id/listDescription"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
Images:
Add the following fields to ImageView
android:scaleType="centerCrop"
android:adjustViewBounds="true"
you can change the imageView attributes to android:scaleType="centreCrop" and change the height to wrap content. you are matching it to parent in you case,its the card view. Whereas, textview is in a linearlayout.
Orelse you can move ImageView to same linearLayout of the textView
Related
I m using GifImageView from here.
With the below code(without min-height) it just shows a thumbnail size of the gif -
<LinearLayout
android:id="#+id/linear_one"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/linearlayout1">
<pl.droidsonroids.gif.GifImageView
android:id="#+id/gif"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
the screenshot below shows the third image as the gif.
I had to set the min-height of the LinearLayout to 300dp so that the gif can fit the whole parent width.
<LinearLayout
android:id="#+id/linear_one"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/linearlayout1"
android:minHeight="300dp">
<pl.droidsonroids.gif.GifImageView
android:id="#+id/gif"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
Now the gif is shown in whole width but the LinearLayout has paddings as the height is 300dp.
android:adjustViewBounds="true"
is the answer to autoscaling for all Views.
I am facing a problem with setting background image for my app. I have linear layout with two imageviews. One with logo and weight 1 and one with background image with weight 3. I want the second one to be always centered horizontally and have sides cropped in vertical orientation and bottom cropped in horizontal orientation. CENTER_CROP almost does the job but I want to have the top of my image drawn. I don't care about the bottom.
In this configuration vertical orientation is perfect but horizontal cuts the top of image and I want the top to be always visible. Bottom can be cropped
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_margin="50dp"
android:layout_gravity="center_horizontal"
android:src="#drawable/masters_logo"
android:id="#+id/imageView" />
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:scaleType="centerCrop"
android:src="#drawable/masters_login_background"/>
</LinearLayout>
That's what I want to achieve.
Vertical orientation:
Horizontal orientation:
If you want to set background into your login screen, you should add android:background="#drawable/masters_login_background" attribute into your root LinearLayout.
Otherwise, you should use, for example, RelativeLayout as root element and add inside this your ImageView as top element, smth like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/masters_login_background"/>
<!-- other code here -->
</RelativeLayout>
I had to edit the ans as I understood your question wrongly. Please use the below code. This will postion your bg img in the background and logo above the bg img.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:scaleType="centerCrop"
android:src="#drawable/masters_login_background"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_margin="50dp"
android:layout_gravity="center_horizontal"
android:src="#drawable/masters_logo"
android:id="#+id/imageView" />
</LinearLayout>
Hey I begin my adventure with Android and I can't solve one problem.
I am loading pictures from web server using Universal Image Loader. I put them into Relative Layouts which is located in ListView. The effect that I want to achieve, is that pictures are displayed on the entire screen with full width and height with a small box at the bottom.
In the IDE preview, everything looks ok:
But on my phone loaded images look like that. I want them to be displayed with full height. It is necessary to use programming functions to achive it?
Loading images:
imageLoader.displayImage(
wallpapers.get(position).getSrcUrl()//the drawable
, currentWallpaperViewHolder.imageViewWallpaper//the image view
, imageLoaderOptions);//the display options
return itemView;
List view:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<ListView
android:id="#+id/WallpapersListView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
Image view:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/wallpaper_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/test"
/>
<TextView
android:id="#+id/wallpaper_date_for_use"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dip"
android:padding="12dip"
android:background="#AA000000"
android:textColor="#ffffffff"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="center"
android:textStyle="bold"
android:text="Date of use" />
</RelativeLayout>
It's probably because you have a RelativeLayout as your root view. Try wrapping the outside RelativeLayout in a LinearLayout.
You can do this,
Get the device height.
And then set imageView height programatically as the device height.
I have a horizontal linear layout that contains 3 image views. Each image view contains the same image which is 200x200 pixels. Here is my layout xml:
<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"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image200" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image200" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image200" />
</LinearLayout>
</RelativeLayout>
And here is what it looks like:
Notice how the third image from the left is resized I assume because there is not enough real estate to contain 3x 200 pixel wide images.
What I would rather happen is instead of shrinking only the last image, all three images are resized evenly so that they all fit across the screen. How do I setup my layout to evenly fit all three images?
Thank you
UPDATE - after changing my settings here is what things look like:
Notice that the border around the image view is still 200 px high. Why is this happening?
Set Width and height to match_parent for imageviews and set layout_weight=1 for all imageviews. Also set Attribute android:scaleType="fitXY"
This worked perfectly for me:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:adjustViewBounds="true"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<ImageView
android:adjustViewBounds="true"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<ImageView
android:adjustViewBounds="true"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
Layout width when set to 0dp, layout width is what came into picture. And here layout width of the LinearLayout is match parent. So it will take the whole width, and as per the layout width of the images, they take space in the ratio of there weight.
make your three images a width of 0dp
and add them a layout_weight of 1
;)
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/image200" />
#JanTacci Regarding your follow up question "Note, however, that even though the image has been shrunk the actual layout height is still 200 px. Why is this happening?"
I just had the same issue and fixed it by adding this property to each ImageView:
android:adjustViewBounds="true"
I have a layout like this one:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tabBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#272727"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/BtnSlide"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#null"
android:src="#drawable/lin" />
<TextView
android:id="#+id/textView1"
android:layout_width="275dp"
android:layout_height="50dp"
android:gravity="center"
android:paddingLeft="20dp"
android:paddingRight="100dp"
android:text="HEADER"
android:textAppearance="?android:attr/textAppearanceMedium" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="2.2dp"
android:src="#drawable/logo" />
The ImageView is placed to the right of the screen. But I'm facing an issue, the ImageView increases and decreases in height and width depending on the length of the TextView, how can I make this work properly, without the ImageView changing size?
The problem here is that your ImageView matches the size of your parent, that is your LinearLayout (with id tabBar).
That LinearLayout wraps the content on his height, so, it sums all "heights" of his contents. The LinearLayout will take the height of TextView + the height of the ImageButton. Then, the ImageView will match that height.
A solution depends on what you are trying to do, but you can try to:
Set a predefined height in your ImageView
Use a RelativeLayout instead of a LinearLayout and align all your views depending on each other
My suggestion is to set layout_weight to all the components so that their size is fixed regardless of their contents:) See here for more details