Fill empty space inside a CoordinatorLayout - android-coordinatorlayout

I'm trying to have a bottom sheet layout that will always appear on the screen.
I know I have to use the CoordinatorLayout if i want to use the "app:layout_behaviour" and also the CoordinatorLayout must have a match_parent height so when i'll expand the bottom sheet then it will go all the way to the top.
The problem is that while I want the bottom sheet layout to always appear on the bottom of screen I also need a ScrollView to contain different views, BUT it has to "fill" the empty space between the top of the screen to the top of the bottom sheet layout.
I know its possible to use 0dp to match constraints with ConstraintLayout but that wont work here because bottom sheet behaviour must be used with CoordinatorLayout. How can I achieve it?
Below is the basic code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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/mainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- THIS LAYOUT'S HEIGHT MUST FILL THE SPACE BETWEEN THE TOP OF THE SCREEN TO THE TOP OF
THE BOTTOM SHEET-->
<ScrollView
android:id="#+id/scrollContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!-- Some layouts that the user can scroll-->
<!-- Some layouts that the user can scroll-->
</ScrollView>
<RelativeLayout
android:id="#+id/bottom_sheet_parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/rounded_bottom_fragment"
android:elevation="30dp"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
<LinearLayout
android:id="#+id/bottom_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<View
android:layout_width="48dp"
android:layout_height="6dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="8dp"
android:background="#drawable/rounded_button" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="4dp"
android:padding="10dp"
android:text="Sheet title"
android:textSize="17sp" />
</LinearLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/bottom_view"
android:background="#color/recyclerViewBgColor"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
android:paddingTop="12dp"
android:clipToPadding="false"
/>
</RelativeLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Any kind of help is appreciated!

Related

TextInput align text on top on multiline={false} (with height)

I am forced to use multiline={false} and set the height of TextInput in order to show it like it is a text area. Reason is that multiline={true} doesn't work very well with KeyboardAvoidingView (https://github.com/facebook/react-native/issues/16826).
So here is a simple code:
<TextInput placeholder="Input text here..." style={{height: 200}} multiline={false} />
and the output is: Screenshot
I just want to make it the text align at the top. Works properly with Android though
Set style property textAlignVertical to top on the TextInput
<TextInput ... multiline={true} textAlignVertical: 'top' />

Xamarin Android - How to get rid of inexplicable Margin/Padding around a WebView?

I have a LinearLayout which contains a WebView inside of it. This WebView loads a static HTML file. I want the WebView's size (width and height) to match that of the LinearLayout, but for some inexplicable reason there is this mysterious margin or padding preventing the WebView from filling the LinearLayout. To illustrate, I have given the LinearLayout a black border and the content of the HTML file being loaded by the WebView a red border:
Here is the axml for these elements:
<LinearLayout
android:id="#+id/alertViewProductReplacement_ReplacementProductLinearLayout"
android:layout_width="100dp"
android:layout_height="225dp"
android:layout_margin="0dp"
android:padding="0dp"
android:fillViewport="true"
android:layout_toRightOf="#id/alertViewProductReplacement_arrow"
android:background="#drawable/dpBorder"
android:orientation="vertical">
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/replacementProductsWebView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:layout_margin="0dp"
android:padding="0dp"
android:background="#null"/>
</LinearLayout>
Some likely redundant things to point out above that I have tried is setting the margin and padding for both to 0, setting the height and width of the WebView to "fill_parent", and setting fillViewport="true". I have also tried forcing 0 margin and padding programatically as well as changing the LinearLayout to a RelativeLayout. None of these things have had any effect, it always looks the same with that small amount of space between them.
I'll also point out that the HTML content itself has no margin or padding outside of the red border, this is clearly observed if I load the HTML file up in a browser directly:
I have even tried to just brute force hack it by setting a negative margin both at the axml level as well as at the HTML file level, but I can't get that mysterious margin to budge no matter what I try so I have finally turned here.
WebView is kind of web browser and has some default margin in body (like other web browsers). you can remove that margin using CSS like so:
<body style="margin:0;">
More info: Remove unwanted White Space in WebView Android

Adjust height when parent view layout is vertical in appcelerator ios

I have one window it's layout is vertical,i have added two child views for that window ,those views height will dynamically change.After adding the views to window,First view is not fit to it's contents some gap is coming.Please help me how to solve this.
below is my code
<Alloy>
<NavigationWindow id="profBidPostNav" platform="ios">
<Window id="profBidPostWin" layout="vertical">
<View id="MainView" height="Ti.UI.SIZE"></View>
<View id="customerServiceMainView" height="Ti.UI.SIZE" top="0%"></View>
</Window>
</NavigationWindow>
Can you add a screenshot to see the problem ?
I see two errors on your code, hieght instead of height and top="0%". If your Window have vertical layout, no need to add top property.
<Window id="profBidPostWin" layout="vertical">
<View id="MainView" height="Ti.UI.SIZE"></View>
<View id="customerServiceMainView" height="Ti.UI.SIZE"></View>
</Window>

Is it possible to adjust textview with small picture inside it?

I moved from android to Swift. In android we could assign a drawable to the left or right of the text, we could do this in XML.
for example this XML for a textView with picture on the left:
<TextView
android:id="#+id/myTextView"
android:layout_width="match_parent"
android:text="This is test text view and it is showing"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/myImage" />
so the image "myImage.png" will be same as the picture below.
I wonder if there is something similar in swift for ios ?
In Xcode Interface Builder, you can't really do that with one item. The best solution is to create a textView and an imageView, then pin the two together with aligning and margins in auto layout.

Is there a UIView like a WPF Grid?

In iOS is there a UIView to lay out two child views in a column (or row) such that one view has a fixed height (or width) and the other view expands to fill the empty space?
WPF has the System.Windows.Controls.Grid class, for example. I would use it to solve this problem as follows:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="123" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Content="I have a fixed height" />
<Label Grid.Row="1" Content="My height expands to fill the empty space" />
</Grid>

Resources