When having a CollapsingToolbarLayout inside CoordinatorLayout you need to use app:layout_behavior="#string/appbar_scrolling_view_behavior" so the view below the toolbar moves down the height of the toolbar, but in that case this view below the toolbar goes beyond the window itself on the bottom, thus if I want to center something in it between the toolbar and the bottom of the screen it's not really possible?
Here is my code:
<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:orientation="vertical">
<include layout="#layout/generic_toolbar_collapsing" />
<LinearLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:id="#android:id/empty"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="#string/list_view_empty_string"
android:visibility="gone"
tools:visibility="visible" />
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
And here a screenshot from the layout editor:
The selected view on the picture is the LinearLayout, you can see how the dots go beyond the bottom window line, so the text is centered inside the view, but not centered relative to the toolbar and the bottom of the window, is it possible to achieve this?
Related
I want to create Button which will move together with BottomSheet. It should be positioned above BottomSheet parent. So I used CoordinatorLayout to achieve this. But if I anchor this Button above BottomSheet layout, its bottom half is cut off (I want to position it above BottomSheet layout like in RelativeLayout). Also if BottomSheet is hidden, its overlapping TabBar. Also Button is for some reason not following BottomSheet. I thought CoordinatorLayout would solve this issue. I dont wanna hand animate Button movement based on BottomSheet peek.
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false"
android:clipToPadding="false"
android:orientation="vertical"
tools:ignore="UselessParent">
<ImageButton
android:id="#+id/but_location"
android:layout_width="#dimen/button_height"
android:layout_height="#dimen/button_height"
android:layout_margin="#dimen/padding_medium"
app:layout_anchor="#id/bottomSheetContainer"
app:layout_anchorGravity="end|top"
android:src="#drawable/ic_location_icon"
style="#style/button.shadow" />
<RelativeLayout
android:id="#+id/bottomLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
android:id="#+id/bottomSheetContainer"
layout="#layout/bottom_sheet_container"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_above="#id/tabBar" />
<include
android:id="#+id/tabBar"
layout="#layout/tab_bar_layout"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="66dp" />
</RelativeLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
UI:
I have a persistent bottom sheet with a LinearLayout that acts like a header, and a SwipeRefreshLayout with a NestedScrollView in it. I want to be able to drag the bottom sheet by dragging that LinearLayout, but it does not work when nested scrolling enabled on that bottom sheet's root view.
Here's my bottom sheet layout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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/list_bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:elevation="10dp"
android:nestedScrollingEnabled="true"
android:orientation="vertical"
app:behavior_hideable="false"
app:layout_behavior="AnchorSheetBehavior">
<LinearLayout
android:id="#+id/list_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:nestedScrollingEnabled="false"
android:orientation="vertical">
<!-- I want to be able to drag the bottom sheet by dragging this layout. -->
<LinearLayout
android:id="#+id/list_header_linear_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/layout_list_header_height"
android:background="?selectableItemBackground"
android:baselineAligned="false"
android:clickable="true"
android:focusable="true"
android:nestedScrollingEnabled="false"
android:orientation="horizontal">
<!-- Some other views here. -->
</LinearLayout>
<!-- While the user interacting with this view, the bottom sheet should not slide. -->
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="#+id/swipe_to_refresh_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.core.widget.NestedScrollView
android:id="#+id/bottom_sheet_scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</LinearLayout>
</FrameLayout>
To give you an overview:
1. FrameLayout # root view of the bottom sheet
2. LinearLayout # container
3. LinearLayout # header view, I want to be able to slide the bottom sheet by dragging this view
3. SwipeRefreshLayout # while interacting with this view, the bottom sheet should not slide
4. NestedScrollView
How can I achieve such behaviour?
I'm having an issue with getting a Bottom Sheet to work properly
In the bottom sheet I have an item above a RecyclerView (a TextView in this case) - both of which I wish to scroll, so they're both wrapped in a NestedScrollView.
Issue is, when the screen loads, the TextView is hidden, and I must scroll the RecyclerView downward to reveal it, before being able to scroll the whole view up again to have the bottom sheet overlay the rest of the screen.
How can I make it so that the TextView is already in view?
```
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:behavior_hideable="false"
app:behavior_peekHeight="auto"
app:layout_behavior="#string/bottom_sheet_behavior">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#color/colorPrimaryDark"
android:gravity="center"
android:text="GYUHGHJG"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</FrameLayout>
```
how it starts
how it looks after scrolling it down (how it SHOULD start)
I have tried a workaround and it worked!!!
It is not a valid solution but no other option..
In your example, try to use Relative layout instead of Linear layout. and provide top padding to Recycler view.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#color/colorPrimaryDark"
android:gravity="center"
android:text="GYUHGHJG"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="25dp"/>
</RelativeLayout>
I have a Toolbar, and it seems no matter what I set the height to, the menu items I've added to it remain in the same spot vertically. I'm trying to make the Toolbar smaller, and because the items aren't moving, they get clipped when I make the Toolbar the height I want it to be. Is there any way to center the menu items vertically in the Toolbar?
Toolbar src:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#color/red">
<include
android:id="#+id/search_items"
layout="#layout/search_items"
android:visibility="gone"/>
</android.support.v7.widget.Toolbar>
Doesn't work:
setting android:gravity="center_vertical" for the Toolbar
Put it inside Linear or Relative Layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#color/red">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"/>
<include
android:id="#+id/search_items"
layout="#layout/search_items"
android:visibility="gone"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
I have a RelativeLayout at the top of my app. Below the RelativeLayout I have a ViewPager.
To explain this in a way that will make sense, imagine the screen's height is 700 pixels. The RelativeLayout is about 200 pixels high.
I want the RelativeLayout to be position absolutely at the top of the app such that the ViewPager is behind it. I then want to add a 200 pixel paddingTop to the ViewPager so that it appears under the RelativeLayout.
Here is the layout I have now (which is obviously not working):
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content">
...
</RelativeLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
I load a ListView with some data under the header:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/listview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
How can I do this?
Try changing the linearlayout to a framelayout. This will allow the views to be placed on top of each other.
Then put the code for the pageviewer above the relativelayout. This will make the pageviewer appear to be behind the relativelayout as it is rendered first, and the relativelayout rendered on top of it. Android will render views in the order in which they are declared.
Lastly, add a top margin/padding to the pageviewer to make it seem positioned below the relativelayout.
Here's what you can do:
Use RelativeLayout instead of LinearLayout as the root.
Move the ViewPager(pager) view to the top of child RelativeLayout(header)
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:paddingTop="200px"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</RelativeLayout>
</RelativeLayout>