In Android, I want to achieve a scroll view with fixed height on the screen, and the content inside also have a fixed height.
The scroll view height is 300dp, the direct child (relative layout) is 500dp, and the text view distance from top is 301dp. This means after I reached the text view, there is 200dp more bottom space for me to scroll from the relative layout height.
I manage to create the desired effect using the XML below.
<ScrollView
android:layout_width="match_parent"
android:layout_height="300dp" >
<RelativeLayout
android:layout_width="match_parent"
android:background="#FFC0CB"
android:layout_height="500dp" >
<TextView
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:id="#+id/new_realm_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="301dp"
android:text="long text" />
</RelativeLayout>
</ScrollView>
But here is the problem, if I change the relative layout to constraint layout, now the scrolling will only scroll up to the text View at height 310dp, not of showing the 200dp empty space at the bottom.
Can someone explain why constraint layout is giving me this weird behavior?
According to Differences between ConstraintLayout and RelativeLayout, constraint layout "has dual power of both Relative Layout as well as Linear layout", it should be able to achieve what relative layout can achieve.
Try this:
<ScrollView android:layout_width="match_parent"
android:layout_height="300dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:background="#FFC0CB"
android:minHeight="500dp"
android:layout_height="500dp" >
<TextView
android:id="#+id/new_realm_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="301dp"
android:text="long text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
It seems like there is a bug in constraint layout or layout height cannot be applied to constraint layout in a scroll view but you can use minimum height attribute in constraint layout.
Adding android:fillViewport="true" to the ScrollView.
Related
I have custom LinearLayout, which is parent of my child views. I'm adding child views into this parent View using parent.addView() by inflating child layout. This LinearLayout is wrapped in ScrollView, so I can scroll child views if there is more there. Problem is that LinearLayout height is ignored if I add child views there (it stretched to full screen height for some reason). This behaviour is completely destroying need of ScrollView. Any reason why is it happening? I need some maxHeight parameter for this to work. It should stretch only to max of 200dp.
Layout:
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/resultList"
android:layout_width="match_parent"
android:layout_height="200dp"
android:paddingTop="#dimen/padding_medium"
android:paddingStart="#dimen/padding_medium"
android:paddingEnd="#dimen/padding_medium"
android:orientation="vertical">
</LinearLayout>
</ScrollView>
You can achieve this behaviour by using a root of a ConstraintLayout with a child of a ScrollView with height to wrap_content and a maximum height to 200dp using the property app:layout_constraintHeight_max="200dp" and the ScrollView child will be the LinearLayout with layout_height to wrap_content.
Below is the xml layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ScrollView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#android:color/holo_blue_dark"
app:layout_constraintHeight_max="200dp"
app:layout_constraintVertical_bias="0"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<LinearLayout
android:id="#+id/resultList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/padding_medium"
android:paddingStart="#dimen/padding_medium"
android:paddingEnd="#dimen/padding_medium"
android:orientation="vertical">
</LinearLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
And the result after adding 3 child Views of 50dp height with different colours to LinearLayout with a total height smaller than 200dp will be like below (No Scroll required):
And the result after adding 9 child Views of 50dp height with different colours to LinearLayout with total height greater than 200dp will be like below (Scroll is required) (ScrollView has its max height to 200dp):
It is not clear from your question what the goal of your layout is. It seems to me that ScrollView is making some assumption about the height of its child being unbounded (and it can have only one child.) If you want the LinearLayout to have a specific height, set that height on the ScrollView itself.
Background
I'm developing a custom notification layout by injecting an OS-generated notification view into my own layout. My layout must be as short as possible, which is 50dp in Android 10.
Problem
The view that I'm injecting into my view has margins that cause it to stretch my layout from 50dp to 66dp.
Code
The following layout is a simplification of what's going on to demonstrate the problem:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
android:id="#+id/activity_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="50dp"
android:orientation="horizontal"
>
<TextView
android:id="#+id/full_height_view"
android:layout_width="10dp"
android:layout_height="match_parent"
android:background="#android:color/holo_blue_bright"
/>
<TextView
android:id="#+id/bad_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="46dp"
android:layout_marginBottom="20dp"
android:background="#android:color/holo_red_light"
>
</TextView>
</LinearLayout>
</FrameLayout>
Note that container has minHeight of 50dp, which I don't want to be exceeded. The problem is the margins from bad_view sum up to 66dp and stretch the parent to 66dp.
Question
How can I prevent the margins on bad_view from stretching the parent beyond its minimum height? I cannot set a fixed height on the parent because the exact height is OS-dependent. And I cannot modify bad_view because it's generated by the OS.
I ended up solving this by setting the visibility of bad_view to gone.
I found another solution: use GridLayout vertical weights to override the problematic view's height. This gave me the flexibility of a weighted horizontal LinearLayout but with the addition of vertical weights.
I have an ImageView and TextView inside a CardView. I can adjust the size of both the ImageView and TextView but when I try and move either of the 2 inside the XML design window, the top left corner of both doesn't move from the top left corner of the CardView, they're just stuck there. Any idea why this happens? I've included an image and my XML code below.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/newsView_container"
android:orientation="vertical"
android:layout_marginBottom="1dp">
<android.support.v7.widget.CardView
android:id="#+id/news_cardView"
android:layout_width="match_parent"
android:layout_height="250dp"
android:layout_gravity="center"
android:layout_marginBottom="1dp"
card_view:cardCornerRadius="8dp"
card_view:cardElevation="1dp"
card_view:cardUseCompatPadding="true"
card_view:cardPreventCornerOverlap="false">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#406490">
<ImageView
android:id="#+id/news_photo"
android:layout_width="177dp"
android:layout_height="221dp"
card_view:srcCompat="#drawable/cast_abc_scrubber_control_off_mtrl_alpha"/>
<TextView
android:id="#+id/news_title"
android:layout_width="157dp"
android:layout_height="99dp"
android:background="#99141414"
android:fontFamily="sans-serif-condensed-light"
android:text="Internet of Things Reaches One Day Volume of $430.00 (XOT) - Modern Readers"
android:textColor="#color/colorPrimary"
android:textSize="22sp"
android:textStyle="bold"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
When working with RelativeLayout, you have basically two different ways to position views inside it.
The first is to use the attributes available in RelativeLayout.LayoutParams, such as centerInParent in order to center views vertically, horizontally, or both. You can also use attributes like below to position views relative to each other.
<ImageView
android:id="#+id/news_photo"
android:layout_width="177dp"
android:layout_height="221dp"
android:layout_centerInParent="true"/>
The other is to use margins in order to push views slightly away from the edge of the parent they're fixed to. In your case, with the views stuck to the top left (the default without any of the other attributes specified), you could use top or left margins.
<ImageView
android:id="#+id/news_photo"
android:layout_width="177dp"
android:layout_height="221dp"
android:layout_marginTop="32dp"/>
You can make this possible with ConstraintLayout, you can set your Views wherever you want and it is so simple and easy. You just have to connect constraints with parent or with other Views.
<!-- Your Parent View Start-->
<androidx.cardview.widget.CardView
android:id="#+id/news_cardView"
android:layout_width="match_parent"
android:layout_height="250dp"
android:layout_gravity="center"
android:layout_marginBottom="1dp"
card_view:cardCornerRadius="8dp"
card_view:cardElevation="1dp"
card_view:cardPreventCornerOverlap="false"
card_view:cardUseCompatPadding="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#406490">
<ImageView
android:id="#+id/news_photo"
android:layout_width="177dp"
android:layout_height="221dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
card_view:srcCompat="#drawable/ic_launcher_background" />
<TextView
android:id="#+id/news_title"
android:layout_width="157dp"
android:layout_height="99dp"
android:background="#99141414"
android:fontFamily="sans-serif-condensed-light"
android:text="Internet of Things Reaches One Day Volume of $430.00 (XOT) - Modern Readers"
android:textColor="#color/colorPrimary"
android:textSize="22sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
<!-- Your Parent View End-->
if you have use relative layout as a parent layout in xml file then RelativeLayout is a view group that displays child views in relative positions. The position of each view can be specified as relative to sibling elements (such as to the left-of or below another view) or in positions relative to the parent RelativeLayout area (such as aligned to the bottom, left or center).In relative layout by default views are set in relative layout left top corner. you need to add view relative to anothers views
for Example
if you want to set image view center in layout then you so add this attribute in child view android:layout_centerInParent="true"
follow these tutorial to design layout in relative layout
relative layout
relative layout
I have a LinearLayout which is a view that I need to display under another view, all within a ConstraintLayout. I want to LinearLayout's height to be dynamically equal to the space between the bottom of the above view, and the bottom of the parent. I've tried
<android.support.v7.widget.LinearLayoutCompat
android:id="#+id/sample_layout"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:gravity="center_vertical"
android:orientation="vertical"
android:visibility="gone"
without success. I am very new at Android UI work so I'm not sure if I'm using the right layout. Can anyone suggest a better implementation, or a fix to my current attempt?
You means this?:
<TextView
android:id="#+id/your_linear_layout"
android:layout_width="200dp"
android:layout_height="0dp"
android:layout_marginEnd="56dp"
android:background="#0ff"
android:text="your LinearLayout"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/above_view"
app:layout_constraintVertical_bias="0.0"/>
you can put the LinearLayout inside a RelativeLayout that is under the needed view, and make the height of the relative layout to fill the space, while you can make the linear layout to be in the center of the relative layout such as:
<RelativeLayout ... >
<LinearLayout
....
android:centerVertical="true"
</RelativeLayout>
I have a weird behavior I cant figure out - I'm trying to stick a view to bottom of scrollview with no luck. I've already tried clipToPadding and fillViewport but none of them help. Any help?
My xml layout is -
<LinearLayout>
<FrameLayout/>
<ScrollView>
<LinearLayout>
<LinearLayout/>
<RelativeLayout/> <-- This is the problematic view
</LinearLayout>
</ScrollView>
</LinearLayout>
I want to stick the relative layout to bottom even when the scroll view is shorter then the screen length, it does fit the screen when clipToPadding is set to false however the relativelayout just laid in middle of screen after the linearlayout which ontop of him, when I set the fillviewport to true on the scrollview (and remove the cliptopadding) the scrollview is longer than screen but unscrollable which lead to the relativelayout being "invisible", any suggestions?
You can try using ConstraintLayout inside ScrollView:
Set fillviewport in ScrollView to True
Last element must be attached on the bottom with constraints
Last but one element (one who goes before last) should have constraint set to last element. Also you can add margin to have minimum distance between this and last element and manage its position with constraintVertical_bias.
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
… Some elements with Constraints …
<TextView
android:id="#+id/last_but_one_element”
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#+id/some_previous_element"
app:layout_constraintTop_toBottomOf="#+id/last_element"
android:layout_marginBottom=“40dp"
app:layout_constraintVertical_bias="0.1"/>
<Button
android:id="#+id/last_element”
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Try using a Relative layout instead of Linear layout inside scroll view and align the relative layout to bottom. But I'm not sure whether it will scroll after there is content.
<LinearLayout>
<FrameLayout/>
<ScrollView>
<RelativeLayout>
<LinearLayout android:alignParentTop="true" android:id="#+id/linearLayout" />
<RelativeLayout android:alignParentBottom="true" android:layoutBelow="#+id/linearLayout"/> <-- This is the problematic view
</LinearLayout>
</ScrollView>
Check if this works for you or not.