<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:minHeight="400dp"
android:background="#android:color/black"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/invitation_imageview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_margin="1dp"
android:scaleType="centerCrop"
/>
<ImageView
android:id="#+id/invitation_avatar_view_1"
android:layout_width="28dp"
android:layout_height="28dp"
android:scaleType="centerCrop"
android:layout_margin="6dp" />
</LinearLayout>
Hi all, this is my layout and I have an issue that if i put smaller image for example 60*60 - px to this layout my view is just around 60 pixel tall. but the image is stretched as it should be, I added minimum height to layout, but it does not solve my problem exactly because that number could be different based on the width of the device. What should I do to have always shown my whole imageview and have the wrap content as well, and not to play with some minHeight?
Related
I am trying to make a very simple Layout like this:
An image occupying the width of the screen, and a button occupying the width of the screen coming right next to it without any space.
Here is the code I have, it is next to trivial
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:context="com.andrew.question.InitialActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:src="#drawable/bg" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:text="Hello, I am a Button" />
</LinearLayout>
The problem is, the button does not show up, it shows the image with some space
The emulator is running with screen size 1080 x 1920, and the image has size 720 x 990, if we scale that up, it should be 1080 x 1485, leaving a lot of space for the button, but the image occupied in the middle of the screen somehow that I do not understand.
This is how a screen capture on the emulator look like:
Next, I tried to swap the order of the button and the image (just for the sake of experimenting), I see something like this:
I get this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:context="com.andrew.question.InitialActivity">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:text="Hello, I am a Button" />
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:src="#drawable/bg" />
</LinearLayout>
Now I figured what happened, it appears that we have lot of spaces between the button and the image and therefore the button have no space. But where does those spaces come from? I wanted them to stick together.
The full source code of this experiment can be found in
https://github.com/cshung/MiscLab/tree/master/Question
The problem occurs here because the LinearLayout container has a height with wrap_content and the system extends the ImageView at its max and then display the TextView below it (thus below the screen height).
To get the right layout, you have to use layout_weight in the child views as follows:
<!-- fill the entire height -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
...>
<!-- take 90% of container -->
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.9"
... />
<!-- take 10% of container -->
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.1"
... />
</LinearLayout>
Then, in order to have "no space" for the image, you have to play with the attribute scaleType (see this example) as the following:
Either force the image to fit the widht/height:
<ImageView
...
android:scaleType="fitXY"/>
Or show the center and fill the w/h:
<ImageView
...
android:scaleType="centerCrop"/>
Your drawable/bg is being scaled to fit in id/imageView. The space you're getting is just the window's background not being covered by the image. Change ScaleType of your ImageView to FIT_XY, CENTER_CROP or other and watch a result. See: http://developer.android.com/reference/android/widget/ImageView.ScaleType.html
Your easiest option will probably be to use a RelativeLayout instead of a LinearLayout. I think this is the direction Android has been going lately. Everything seems to be RelativeLayout based. For instance, when you make a new layout in Android Studio, I believe it defaults to RelativeLayout. It used to be LinearLayout in the eclipse extension a while back.
Relative Layout
Using a relative layout instead you should have the following:
<?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="wrap_content"
tools:context="com.andrew.question.InitialActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:src="#drawable/bg" />
<Button
android:id="#+id/button"
android:layout_below="#id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:text="Hello, I am a Button" />
</RelativeLayout >
Note that I simply changed LinearLayout to RelativeLayout, removed the setOrientation and then added the following line to your button.
android:layout_below="#id/imageView"
First of all your image is too big so it basically takes up all of the screen space in the first place and pushes the button down the viewable region.There is no need to modify the padding or margin as it is in the LinearLayout and it places all child views one after the other.
Set a desired height to the image view and also a scale type to get what you are expecting.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:context="com.andrew.question.InitialActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:scaleType="centerCrop"
android:layout_height="300dp"
android:src="#drawable/bg" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello, I am a Button" />
</LinearLayout>
Screen shot
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 have an ImageView which is populated from database (the image comes from database). in the database i have images both portrait and landscape!! how can i adjust the imageView to scale it self according to the image width and height. I have tried many ways but no result! any help please!!!!
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/slideshow"
android:orientation="horizontal"
android:padding="0dp"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_marginRight="5dp"
android:id="#+id/slide1"
android:src="#drawable/ddd"
/>
Try this code. adjustViewBounds attribute makes the ImageView the same size as image that you put in it.
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true" />
If you need specific width or height change the wrap_content value.
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"
As part of a larger project, I'm attempting to create a custom image gallery which will hold images from the web. I have no control over their size and their layout (order, total number [up to ten], and number per row [up to three]) is defined by the API I'm working with. I'm using nested LinearLayouts to build the loose grid programmatically but this is an XML proof of concept...
<?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="wrap_content"
android:orientation="vertical"
android:divider="#drawable/photoset_vert_divider"
android:showDividers="middle">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:divider="#drawable/photoset_horz_divider"
android:showDividers="middle">
<ImageView
android:layout_width="0dp"
android:layout_weight="1"
android:scaleType="centerCrop"
android:layout_gravity="center_vertical"
android:adjustViewBounds="true"
android:layout_height="wrap_content"
android:src="#drawable/tall" />
<ImageView
android:layout_width="0dp"
android:layout_weight="1"
android:scaleType="centerCrop"
android:layout_gravity="center_vertical"
android:adjustViewBounds="true"
android:layout_height="wrap_content"
android:src="#drawable/tall" />
<ImageView
android:layout_width="0dp"
android:layout_weight="1"
android:scaleType="centerCrop"
android:layout_gravity="center_vertical"
android:adjustViewBounds="true"
android:layout_height="wrap_content"
android:src="#drawable/wide" />
</LinearLayout>
</LinearLayout>
This is 60% of what I'm looking for and gets me
…but this is my target:
What I want is a android:layout_height="wrap_smallest_content" sort of thing that scales all the ImageViews to the correct size and then crops them all down to match the "shortest" child.
Since you say you're going to eventually do this programmatically, you could always just subclass LinearLayout to find the smallest height of the containing ImageViews as they load and then set that as the layout's height. Then all you'd have to do with the images is set their height to match_parent.
It's really better to set the fixed layout_height to inner LinearLayout. You can just do this in XML
If you're focusing on variety of devices then give a id to the inner LinearLayout then set the LinearLayout size dynamically by measuring the screen size of the device. To measure the screen size programmatically
By using the DisplayMetrics you can get height and width of the screen of any device.
here is the code.
DisplayMetrics metrics;
int width = 0, height = 0;
In your onCreate Method
metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
xheight = metrics.heightPixels;
xwidth = metrics.widthPixels;
Try this to get the Screen height.
Then set the inner LinearLayout programmatically like this
linearLayout.getLayoutParams().height = xheight - 50;
Depending upon the xheight change the - 50 value
the your xml will change to something like this
<?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="wrap_content"
android:orientation="vertical"
android:divider="#drawable/photoset_vert_divider"
android:showDividers="middle">
<LinearLayout
android:id="#"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:divider="#drawable/photoset_horz_divider"
android:showDividers="middle">
<ImageView
android:layout_width="0dp"
android:layout_weight="1"
android:scaleType="centerCrop"
android:layout_gravity="center_vertical"
android:adjustViewBounds="true"
android:layout_height="match_parent"
android:src="#drawable/tall" />
<ImageView
android:layout_width="0dp"
android:layout_weight="1"
android:scaleType="centerCrop"
android:layout_gravity="center_vertical"
android:adjustViewBounds="true"
android:layout_height="match_parent"
android:src="#drawable/tall" />
<ImageView
android:layout_width="0dp"
android:layout_weight="1"
android:scaleType="centerCrop"
android:layout_gravity="center_vertical"
android:adjustViewBounds="true"
android:layout_height="match_parent"
android:src="#drawable/wide" />
</LinearLayout>
</LinearLayout>