Good Day!
How can I achieve the look of the first screen? I wanted to stretch an image view up to the edge of the screen but I all I get is an image view with margins on the sides. Here is my xml code:
<ImageView android:layout_width="wrap_content"
android:layout_height="240dp"
app:srcCompat="#drawable/green_image"
tools:layout_editor_absoluteX="0dp"
android:id="#+id/imageView"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent" />
generally to achieve what you want to stretch the ImageView's width your layout.xml should look like this :
the parent layout of your imageView should not have any margin and padding on left or right
and its width should be match_parent
and your image view should not have any margin on left or right and its width should be match_parent too.
for example you have your ImageView inside an LinearLayout :
<LinearLayout
android:layout_width="match_parent"
...
android:paddingLeft="0dp"
android:paddingRight="0dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp">
<ImageView
android:layout_width="match_parent"
...
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp" />
</LinearLayout>
marginLeft or marginRight = 0dp could be removed just added them so could point that you should not have margins
hope this helps.
Related
I created a ViewPager and put it inside of ConstraintLayout:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green">
<ViewPager
android:id="#+id/teaser_view_pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:background="#color/blue"
android:currentPage="#={viewModel.currentItem}"
bind:adapter="#{viewModel.adapter}"
bind:withAnimation="#{viewModel.changeWithAnimation}"
bind:layout_constraintStart_toStartOf="parent"
bind:layout_constraintTop_toTopOf="parent"
bind:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
and the layout of item inside of ViewPager is:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/red">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:background="#color/black"
bind:imageUrl="#{viewModel.imagePath}"
bind:layout_constraintDimensionRatio="3:1"
android:adjustViewBounds="true" />
</androidx.constraintlayout.widget.ConstraintLayout>
as you see, every view or it's parent has different background. And if I run the app, I see:
the background is red, it means, the ConstraintLayout in ViewPager item is stretched to the whole height of screen despite wrap_content.
Anybody knows, how to shrink the item to the size of the image inside?
P.S.: I use ConstraintLayout here, because I need to keep the image size in aspect ratio "3:1"
Set all constraints to parent
then use 0dp in height or width instead of `wrap_content'
I'm trying to align an image to it's parents bottom. The basic idea is to fit the image to screen width, use wrap_content for height and then align all that to the parent's bottom. Unfortunately the result is a 1-2dp margin at the bottom I cannot get rid of. I changed the parent's background here to blue so it is obvious:
<RelativeLayout
android:layout_gravity="center_horizontal"
android:id="#+id/contentView"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/top_graphic" />
//...
</RelativeLayout>
This is how it looks like in layout builder:
That blue line at the bottom I cannot get rid of. I don't want to use direct dp values obviously, how can I solve this?
Try this
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/top_graphic" />
I am struggling with newbie question.
I have a layout defined like this: (it is used as listview item)
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:orientation="horizontal" >
<ImageView
android:id="#+id/articleSmallImageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="3"
android:adjustViewBounds="true"
android:scaleType="fitStart" />
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_weight="2"
android:orientation="vertical" >
<TextView
android:id="#+id/newsIntroText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:text="TextView"
android:textColor="#color/black" />
</LinearLayout>
</LinearLayout>
What i want to achieve is this:
Parent layout height to resize according to the highest child. In this case if TextView is higher then ImageView, ImageView aspect ratio should be intact, with max width possible, and if ImageView i higher then TextView, again, width should be maximal, and parent should have height as ImageView.
This is actually screenshot from my app, running on JB 4.3. and is looks as expected. But on ICS 4.0.3, 4.0.4 it looks like this.
I cannot see any reason why ImageVIew is not filling that blank space.
Help..
Try the value fitXY for scaleType. Btw unless I'm missing something, I think your LinearLayout1 is useless. Also, like YouYou said.. If a weight has been set in a vertical layout, the height should be 0dp and in a horizontal linear layout, the width should be set to 0dp for better performance.
I have a vertical linearlayout that won't stretch beyond a certain limit.
This is the layout with centerCrop in the imageview
http://tinypic.com/r/20nm6s/5
This is the layout with no crop set (so it should be full width and huge)
http://tinypic.com/r/vzk7kw/5
So my thought is that there is some implicit max height that I'm not seeing in my layout but I can't see where it is, can you spot my error?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#drawable/dropshadow"
>
<TextView
android:id="#+id/heading"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
/>
<ImageView
android:id="#+id/featuredimage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:maxHeight="1000dp"
android:scaleType="centerCrop"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
/>
</LinearLayout>
</RelativeLayout>
The "implicit" max height of the layout is the height of its parent. Since you're using wrap_content on both layouts, that means the parent is effectively the screen area, minus whatever other views you're using (such as the TextView). Unless you place it in a scrolling container, such as a ScrollView, it won't ever exceed the size of the screen.
The reason your ImageView isn't showing up "full width and huge" when you remove the crop is because the default scaleType for an ImageView is fitCenter. This particular view is bounded by the layout's width, so it shrinks the image while maintaining aspect ratio.
In my layout I have a FrameLayout which contains 2 ImageViews. One ImageView is shown at a time and the change between ImageViews is done through 3D Rotation animation.
<FrameLayout
android:id="#+id/animContainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp" >
<ImageView
android:id="#+id/picture1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:src="#drawable/malware" />
<ImageView
android:id="#+id/picture2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:src="#drawable/browsing"
android:visibility="gone" />
</FrameLayout>
The problem with my xml is that it leaves some empty space above and below the ImageView in the FrameLayout even though I have not specified any top or bottom margin/padding to it.
The ImageViews I'm using in the FrameLayout are of equal heights.
I want the height of the FrameLayout to be exactly same as the height of the ImageViews within it.
How do I achieve this?
Thank you.
EDIT:
Another thing I have observed is that in landscape mode the empty space is added to the left and right of the ImageViews and the width of the FrameLayout does not match with the width of the ImageViews.
How can have the FrameLayout width and height same as that of the ImageViews?
I think you need to use android:adjustViewBounds="true" -> in your ImageView's ... This will resize the imageview to the image inside and hopefully fix your problem.
http://developer.android.com/reference/android/widget/ImageView.html#attr_android:adjustViewBounds
I think I found a solution, in mine I had to place an image in the right hand corner for the delete icon but had to jump through hoops to get the edge of the X to line up with the top of the photo. fitCenter would create whitespace on top and bottom. fitStart worked like a charm.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/front_right"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:scaleType="fitStart"
android:adjustViewBounds="true"
android:onClick="imageEditClicked"
android:src="#drawable/myimage"/>
<ImageView
android:id="#+id/front_right_x"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#color/white"
android:layout_gravity="end|top"
android:clickable="true"
android:focusable="true"
app:srcCompat="#drawable/com_facebook_tooltip_black_xout" />
</FrameLayout>