Fill vertical space between two views (+scroll) - android

I have 3 views.
1. View A has a fixed height and aligned to the top of the screen.
2. View B has a fixed height and aligned to the bottom of the screen.
3. View C has to fill a vertical space between views A and B but has to be minimum X height. If the vertical space between A and B is less than Xdp, the vertical scroll bar has to appear (and view B has to scroll, not to be sticked to bottom).
What I have so far (a bit simplified), it may be completely wrong:
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/layout_banner_top"
android:layout_width="match_parent"
android:layout_alignParentTop="true"
android:layout_height="#dimen/statistics_probanner_height">
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" <!-- UPD here as McAdam331 suggested -->
android:minHeight="#dimen/statistics_circular_progress_container_height"
android:layout_below="#+id/layout_banner_top"
android:layout_above="#+id/layout_banner_bottom">
<!-- here is some content -->
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="#dimen/statistics_bottom_bar_height"
android:id="#+id/layout_banner_bottom"
android:layout_alignParentBottom="true">
</RelativeLayout>
</RelativeLayout>
</ScrollView>
How it looks:
Picture 1
Picture 2
Currently minHeight of the view in between (view C) is set to 600dp, but as you see on Picture 2 view C is filling an available space between top and bottom views, height is too small and scroll not appearing.
Is it possible to implement? How can I achieve that behaviour?

The issue is that you've set both height and minheight to the same value:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="#dimen/statistics_circular_progress_container_height"
android:minHeight="#dimen/statistics_circular_progress_container_height"
android:layout_below="#+id/layout_banner_top"
android:layout_above="#+id/layout_banner_bottom">
In other words, the view won't exceed the hight you've given it already. What I would do is set the layout_height to wrap_content, and keep the min_height attribute as it is.
this way, if the space is larger than the dimension given, it wil just bind above and below the banners. Otherwise, it will hold that minimum value.

Resolved.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="#dimen/statistics_probanner_height"
android:gravity="top">
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:minHeight="#dimen/statistics_circular_progress_container_height">
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/statistics_bottom_bar_height"
android:layout_gravity="bottom">
</LinearLayout>
</LinearLayout>
</ScrollView>

Related

Custom view with horizontalScrollview in RecyclerView match_parent not working

I have a RecyclerView that includes my custom view.
My custom view not get all the width even so I configure it as match_parent.
what i want is that the horizontal scroll view will take all screen, and also the card will take screen width (so the yelow part will stay outside at beginning)
I've tried to use LayoutInflater.from(getContext()).inflate(R.layout.view_home_screen_card, (ViewGroup) this, false), but didn't work
Also I've tried to set width programmatically, but I'm seeing the wrong size for few milliseconds before it's change and its look ugly.
The weird thing is that when i'm taking out the horizontal scroll view, the view take all place.
attached the layout
<?xml version="1.0" encoding="utf-8"?> <merge
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">
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/horizontal_scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:scrollbars="none">
<LinearLayout
android:id="#+id/view_home_card_and_button_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="100dp"
android:layout_height="150dp"
android:background="#color/amber_200" />
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/half_unit"
app:cardCornerRadius="#dimen/8dp">
</android.support.v7.widget.CardView>
</LinearLayout>
</HorizontalScrollView>
</merge>
any more ideas?
Is your recyclerview have match_parent width? If no then make it.

How to make a DialogFragment wrap its content and align a view to the bottom at the same time?

I would like to build a DialogFragment which contains a ListView and a bottom View (holding some buttons).
The ListView can show a variable number of items and thus has a variable height.
The bottom View has fixed height.
This is the Layout:
<?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">
<ListView
android:id="#+id/myListView"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
<!-- Any kind of view. e.g. Button... -->
<View
android:id="#+id/myBottomView"
android:layout_width="match_parent"
android:layout_height="50dp" >
</View>
</LinearLayout>
Using a LinearLayout works fines as long as the ListView contains only a few items and the total height of the dialog is not larger than the screen size. In this case the dialog automatically wraps its content and is only as height as it needs to be be.
However, when the ListView contains a large number of items and the size exceeds the screensize, the dialog is automatically adjusted to its max height and the bottom view is not visible anymore.
This can be solved by using a RelativeLayout as root instead:
<?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="wrap_content"
android:orientation="vertical">
<ListView
android:id="#+id/myListView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/myBottomView" >
</ListView>
<!-- Any kind of view. e.g. Button... -->
<View
android:id="#+id/myBottomView"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true" >
</View>
</RelativeLayout>
This solves the problem described before: The bottom view is always visible at the bottom, no matter how hight the ListView is. However, now the dialog always occupies its max. height and is not adjusted to the actual height of the ListView?
So each layouts solve one part of the problem but not both. How do I get both automatic sizing and bottom layout at the bottom at the same time?
EDIT:
Just need android:layout_weight="1" for ListView .
So your layout should look 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">
<ListView
android:layout_weight="1" <!-- this will force listview to expand according to it's height.. -->
android:id="#+id/myListView"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
<View
android:id="#+id/myBottomView"
android:layout_width="match_parent"
android:layout_height="50dp" >
</View>
</LinearLayout>

how to make app a percent of the screen size

I am trying to make my app look like the image below, but by setting my app as a percent of my whole screen (not setting the dp), so that no matter what type of phone I am using, the app will take up the same screen percentage. This is my main activity which just consists of two fragments in one LinearLayout. 
android:layout_width="300dp"
android:layout_height="300dp"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_gravity="center"
android:background="#drawable/rounded_edges"
android:theme="#style/Theme.AppCompat.Light.Dialog.Alert">
<!-- Create a container (FrameLayout) for Body Fragment to switch with other Fragments on button clicks-->
<fragment
android:id="#+id/menuFragment"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_margin="5dp"
class="it.anddev.bradipao.janus.MenuFragment"
tools:layout="#layout/fr_menu">
</fragment>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="end" />
enter image description here
I want my height and width to be a percent of the phone height and width like shown here.
You should use LinearLayout as a container, and use these properties:
weightSum in LinearLayout, set it to 1.
layout_weight in every child of the LinearLayout. For example:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1">
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.75">
....
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25">
....
</LinearLayout>
</LinearLayout>
First layout will take 75% of the screen and the second 25%.
Note that when using weights, height and/or width has to be 0dp. You can now make it as complex as you need.

Android: how to show a TextView below a ScrollView layout?

I am trying to show a rectangular box with a centered TextView as a footer bar at the bottom of a UI (just like the toolbar/actionbar is shown as a header bar above the main UI). The TextView should be below the main UI (which is a ScrollView) and the TextView doesn't show at all. Everything else shows correctly. Any ideas on what I'm doing wrong?
layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:focusableInTouchMode="true"
tools:context=".CardViewActivity">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" >
</include>
<ScrollView
android:id="#+id/ScrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
...>
...
</ScrollView>
<TextView
android:id="#+id/skychilltext2"
android:text="skychill"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textStyle="bold"
android:textColor="#FFFFFF"
android:background="#color/colorPrimary"
android:textAppearance="?android:attr/textAppearanceMedium"
android:clickable="true" />
</LinearLayout>
because you set the height to match_parent, it will take up all the room. I'm not sure exactly how you want it, but you could add a weight to it to expand to as much room as possible.
<ScrollView
android:id="#+id/ScrollView1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
...>
...
</ScrollView>
Weight specifies how much percentage of the screen the view will take, so if every view has the same weight they will equally take up the same amount of space on the screen.
view 1 - weight 1
view 2 - weight 1
view 3 - weight 1
view 4 - weight 3 since this is weight 3 and all the weights above add up to
| 3, this view will take up exactly half the screen.
| the other ones will take 1/6 of the screen because (1+1+1+3 = 6)
Try below
<RelativeLayout
(...)>
<LinearLayout android:id="#+id/ll1"
android:layout_alignParentTop="true"
(...)/>
<TextView android:id="#+id/button"
android:layout_alignParentBottom="true"
(...)/>
<ScrollView
android:layout_above="#id/button"
android:layout_below="#id/ll1"
(...)/>
</RelativeLayout>
For reference see here How to make a static button under a ScrollView? or How can I place new items under scrollview
The problem is android:layout_height="match_parent" in ScrollView. It directs LinearLayout to give all the height to it, leaving nothing for TextView.
Change ScrollView:
android:layout_height="wrap_content"
android:layout_weight="1"
Change TextView:
android:layout_weight="0"
set android:layout:weight on TextView.
You need weightsum to scale layout. Your code set match_parent for height scrollView
<ScrollView
android:id="#+id/ScrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
...>
...

How to Prevent Scrolling within FrameLayouts and Instead Have the Parent LinearLayout Handle all Scrolling?

I have a scrollable LinearLayout parent with a few FrameLayouts nested inside it as follows:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:scrollbars="vertical"
android:orientation="vertical">
<FrameLayout
android:id="#+id/hb_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<FrameLayout
android:id="#+id/gn_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<FrameLayout
android:id="#+id/yt_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
I would like FrameLayouts to take up the space they need, allowing for scrolling of the full view through the LinearLayout.
Issue is: the LinearLayout will only take up the screen, it won't scroll, instead the FrameLayout's will scroll if the content overflows the bottom of the screen.
To be clear, I just want the FrameLayouts to fill whatever space they need, and the LinearLayout can scroll it like one long view. Must I fix the FrameLayout heights to achieve this? If so, is there risk of my layout breaking on different screen sizes/densities (or does DP really work in all cases?).
Thank you immensely!
EDIT: I have confirmed that setting fixed heights in the FrameLayout does exactly what I want this to do: scroll as one. However, why doesn't wrap_content measure the height and then go from there? That is what I expected the case was... I'm not certain how to judge the right heights for each element.
Try adding a scrollview to the layout
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:orientation="vertical">
<FrameLayout
android:id="#+id/hb_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<FrameLayout
android:id="#+id/gn_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<FrameLayout
android:id="#+id/yt_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</ScrollView>

Categories

Resources