Android: FrameLayout squeezes View - android

I am using the following layout:
FrameLayout fills the entire Viewport, i.e. width and height are set to MATCH_PARENT
Width and height of RelativeLayout are set to WRAP_CONTENT
View1 to View5 have fixed dimensions e.g. width = 500, height = 50
View 5 lies near the border of FrameLayout and is squeezed by Android,
so that it lies fully within FrameLayout. The height of View5 should be 50 but unfortunately Android changes it to a smaller value.
How can I avoid, that Android changes the height of View5 ?
When I scroll RelativeLayout, the error is still existing.
A similar behavior is described here:
button is squeezed when it exceeds layout

A "better" Approach to this problem is to use a ScrollView like
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<View
android:id="#+id/view1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentTop="true" />
<View
android:id="#+id/view2"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_below="#+id/view1" />
<View
android:id="#+id/view3"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_below="#+id/view2" />
<!-- YOU GET THE IDEA -->
</RelativeLayout>
</ScrollView>

Related

ScrollView and its content use 'wrap_content'. How to assign constraint priority?

I need a horizontal ScrollView with a fixed height of 100dp and dynamic content of ImageViews.
Currently I the ScrollView has a horizontal LinearLayout with ImageViews. The ImageViews have wrap_content enabled for their width, while the height is on the fixed height for all of them. The ScrollView itself has its height on wrap_content.
If the ScrollViews content is bigger than what the view can display without scrolling, the ImageViews images are scaled down. The ImageViews layout_hight works in terms of its bounds, but the image itself is not.
Changing scaleType to something else doesn't help. Setting a fixed width for the LinearLayout works, but as the content should be dynamic that's not an option. This seems like a default use case. Isn't this possible in xml?
Example with a manually given exact ScrollView-width:
The view looks as I need it, but won't allow dynamic content.
Example with width on wrap_content:
The ImageView
ScrollView code below:
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#CCCCFF">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#AAAAFF"
android:orientation="horizontal">
<ImageView
android:id="#+id/so1"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:adjustViewBounds="true"
android:background="#FF0000"
android:scaleType="fitCenter"
android:src="#drawable/so" />
<Space
android:layout_width="10dp"
android:layout_height="match_parent" />
<ImageView
android:id="#+id/so2"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:adjustViewBounds="true"
android:background="#FF0000"
android:scaleType="fitCenter"
android:src="#drawable/so" />
<Space
android:layout_width="10dp"
android:layout_height="match_parent" />
<ImageView
android:id="#+id/so3"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:adjustViewBounds="true"
android:background="#FF0000"
android:scaleType="fitCenter"
android:src="#drawable/so" />
</LinearLayout>
</ScrollView>
Ok, that was way easier to fix, than i thought:
ScrollViews are always vertical. There is no orientation attribute in ScrollView. To get a horizontal ScrollView instead use HorizontalScrollView and ditch the orientation.
So this
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
should instead be:
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">

ConstraintLayout inside of ViewPager wrap_content not working

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'

set ImageView' height accordingly to its set width and aspect ratio, in a ScrollView

I have below a ScrollView so that the user would be able to scroll the question container(ImageView + TextView), if the questions text is very enormous. The problem is that I want the ImageView to take the height based on its aspect ratio and width set with the help of layout_width set to match_parent attribute.
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scrollbars="none"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center_vertical" >
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:src="#drawable/set_1_question_2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:textSize="18sp"
android:text="#string/app_set_1_question_2_text" />
</LinearLayout>
</ScrollView>
As in the Image below, by hovering the LinearLayout of ScrollView parent, it's showing that it's height is equal with image original height ~ 1100px + the height of TextView.
Wherever I put the layout_height set to wrap_content or 0dp with weight set 1, it seems that it doesn't work either.
Any appropriate solution would be very helpful, because I am just starting off with Android developing and I am stuck with this problem.
EDIT:
After searching through all methods for ImageView on https://developer.android.com/reference/android/widget/ImageView.html, I found this method:
android:adjustViewBounds Set this to true if you want the ImageView to adjust its bounds to preserve the aspect ratio of its drawable.
Which works perfectly for my case, thanks for everyone that tried to solve my problem. :)

layout height issue with weight and wrap_content

My view is like:
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RecyclerView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
/>
</LinearLayout>
It will give 50dp to TextView and rest of area to RecyclerView.
But if items in RecyclerView are less than, say 1 or 2, then it should shrink to the height of it's child views other wise behave like layout specifies. Can any one help??
I think the best option would be to change LinearLayout.LayoutParams of the root view dynamically. When the RecyclerViewhas a low amount of children, then set LinearLayout params to:
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT);
layout.setParams(params);
otherwise, leave as it is.
It is very easy to detect if RecyclerView should be wrapped. Obtain LinearLayout height:
int height = layout.getTop() - layout.getBottom()
If this height is lower than the expected maximum height (screen height or other predefined value).
A simple approach would be using RelativeLayout:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_below="#+id/recyclerView" />
</RelativeLayout>

Does LinearLayout have a max height?

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.

Categories

Resources