I'm trying to make this bottom sheet only expand to the bottom of another view but haven't been able to figure it out. I'd like the locations_list_sheet to expand to the bottom of view1.
I've tried setting the offset, bottomSheet.setExpandedOffset(48) but no luck with that. I've also tried setting a margin to the top of the bottom sheet layout, but that didn't look right either.
<layout xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/view1"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#android:color/transparent" />
<include
android:id="#+id/map_content"
layout="#layout/content_locations_stoneco" />
<include
android:id="#+id/locations_list_content"
layout="#layout/bottom_sheet_locations" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</layout>
I don't know which particular layout you are using as bottom sheet I think it must be in one of those included layouts...
add an attribute android:translationY="48dp" for the bottom sheet layout
<LinearLayout
android:layout_width="match_parent"
android:id="#+id/botto_sheet"
android:translationY="48dp"
android:background="#color/colorPrimary"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
android:layout_height="match_parent"/>
What it does is basically it will push the view to down... just like margin but kinda different.
Note: I don't know whether it's the correct way to do this but it does
the job ...Suggestions are always welcome
BTW you can add top margin also both will work
I believe this library could help you achieve what you want!
Example from site:
<com.sothree.slidinguppanel.SlidingUpPanelLayout
xmlns:sothree="http://schemas.android.com/apk/res-auto"
android:id="#+id/sliding_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
sothree:umanoPanelHeight="68dp"
sothree:umanoShadowHeight="4dp">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Main Content"
android:textSize="16sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center|top"
android:text="The Awesome Sliding Up Panel"
android:textSize="16sp" />
Related
I am trying to achieve a layout shown in the image.
So I would like to have two views that pin on top of the screen after the users scrolls to a certain point. Other views should collapse until they are fully hidden (except for View 3 which is basically the main view of the layout. So far I have tried a few approaches.
One, that kinda works, is to use the collapsing toolbar with Pinnable View 1 and Pinnable View 2 anchored to other views (I attached the snippet of the code so you know what I managed to achieve). The problem with this approach is that, because these pinnable views are not inside a nestedScrollView, it is impossible to scroll when user starts the scroll from these two views.
So my question is, is that possible to achieve the desired effect using my current approach or is there a way to do it differently?
<?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:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar_layout_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<View
android:id="#+id/view_1"
android:layout_width="match_parent"
android:layout_marginBottom="32dp"
android:layout_height="200dp"
android:background="#0071BD"
app:layout_collapseMode="parallax">
</View>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:layout_marginTop="32dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".ScrollingActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:id="#+id/view_2"
android:layout_width="wrap_content"
android:background="#5495BD"
android:layout_height="300dp"/>
<View
android:id="#+id/pinnable_view_2_anchor_view"
android:layout_width="match_parent"
android:layout_height="41dp"
android:background="#null" />
<View
android:id="#+id/view_3"
android:layout_width="match_parent"
android:background="#57B1BC"
android:layout_height="1000dp" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
<View
android:id="#+id/pinnable_view_1"
android:layout_width="match_parent"
android:layout_height="64dp"
android:background="#00015E"
android:nestedScrollingEnabled="true"
app:layout_anchor="#id/app_bar_layout_view"
app:layout_anchorGravity="bottom">
</View>
<View
android:id="#+id/pinnable_view_2"
android:layout_width="match_parent"
android:background="#000002"
android:layout_height="40dp"
android:layout_marginTop="64dp"
app:layout_anchor="#id/pinnable_view_2_anchor_view"
app:layout_anchorGravity="center">
</View>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
maybe it's too late, anyway, check code from here https://github.com/Y-E-P/DoubleCollapsingToolbar, maybe it will helps other developers, who faced with the same problem. I've prepared two example how to use it, free to use this code in your projects. Here is result below.
Enjoy!
I am a Android newbie programmer and I am stuck with a UI problem. My goal is to achieve something closer to this:
desirable layout
I thought about it and I decided to do it with a CoordinatorLayout, AppBarLayout / CollapsingToolbarLayout and a NestedScrollView with a CardView. Sounds just fine for this problem, right?
With my actual XML I already have the toolbar, image and the scroll feature.
However, the scroll feature isn't 100% like I wanted. First of all, it's not possible to scroll down since around mid screen (probably because of android:layout_height="275dp"), it is only possible to scroll up. (and of course collapse the toolbar). My main goal is to "open" the image fullscreen. Do you have any idea how can I achieve this behaviour? Maybe controlling % in .java?
Also have one annoying bug, but I can leave with it for now, just try to help if it also gives you some OCD condition
I tried to add an transparent property to my LinearLayout but it didn't work.
Normal scroll:
Current scroll
Buggy 'panel' as it is close to collapse:
buggy panel image
My all XML:
<android.support.design.widget.CoordinatorLayout
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:id="#+id/annonce.main.coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="RtlHardcoded"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/flexible.example.appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/flexible_example_collapsing"
android:layout_width="match_parent"
android:layout_height="275dp"
app:title="Mosteiro dos Jerónimos"
app:expandedTitleMarginBottom="94dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:expandedTitleTextAppearance="#style/CollapsingTextAppearance.Inverse"
app:contentScrim="?attr/colorPrimary"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:src="#drawable/mosteiro_dos_jeronimos"
android:scaleType="centerCrop"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/flexible.example.toolbar"
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="#null"
app:layout_collapseMode="pin"
app:title="Mosteiro dos Jerónimos"
style="#style/ToolBarWithNavigationBack"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none"
app:behavior_overlapTop="78dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<android.support.v7.widget.CardView
android:id="#+id/flexible.example.cardview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentPaddingBottom="16dp"
app:contentPaddingLeft="16dp"
app:contentPaddingRight="16dp"
app:cardCornerRadius="16dp"
app:cardBackgroundColor="#android:color/white"
app:cardElevation="4dp"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<View
android:id="#+id/myRectangleView"
android:layout_width="40dp"
android:layout_height="4dp"
android:layout_gravity="center"
android:layout_marginTop="4dp"
android:background="#drawable/rectangle"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Lisboa"
android:textAppearance="#style/TextAppearance.Header"
style="#style/TextComponent.ItemRow"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:lineSpacingExtra="8dp"
android:textSize="16sp"
android:text="#string/lorem"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/flexible.example.fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="32dp"
android:elevation="8dp"
android:src="#drawable/ic_adb_24dp"
app:layout_anchor="#id/flexible.example.cardview"
app:layout_anchorGravity="top|right|end"
tools:ignore="RtlHardcoded"
/>
</android.support.design.widget.CoordinatorLayout>
I think your layout is fine (works on my side), but maybe the behavior you want is more something like a Bottomsheet behavior.
Have you had a look at it?
Basically this will make you able something like google maps, so you would be able to scroll like you want.
Here is a tutorial to have a better understanding of what it is like.
Please let me know if this is what you're looking for.
I have a next problem.
Structure of my layout is:
<RelativeLayout>
<AppBarLayout>
<Toolbar></Toolbar>
</AppBarLayout>
<FrameLayout> Here I load fragments </FrameLayout>
<Footer></Footer>
</RelativeLayout>
I want to use feature:
android:windowSoftInputMode="adjustResize"
in my activity, but the problem is that the footer going up on keyboard open. I don't know how to prevent only footer to be moved but all other views to be. I'm searching for days for the solution but without success.
When I set:
android:windowSoftInputMode="adjustPan"
footer is not moving which is good, but forms with EditText are covered with keyboard which is annoying and bad UI/UX.
My footer has a
android:layout_alignParentBottom="true"
Here is the full XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/activity_logged_in"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/main_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/main_app_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:orientation="horizontal"
android:paddingBottom="5dp"
android:paddingTop="5dp">
<!-- Footer goes here -->
</LinearLayout>
<FrameLayout
android:id="#+id/fragment_logged_in_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/bottom_navigation"
android:layout_below="#id/main_app_bar" />
</RelativeLayout>
Thanks in advance
<?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="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/main_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/main_app_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/fragment_logged_in_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
</FrameLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
</LinearLayout>
</LinearLayout>
This worked for me.
First of all, use <RelativeLayout> as your layout root.
Now you can stack your content in two ways:
From above
From below
Say you have five pieces of content A - E. You want only E to move up when your app window resizes from the bottom (that is: the keyboard shows from below). So what you want to do is, start stacking A - D from above, and stack E from below.
Here is an example. Unnecessary attributes are left out for sake of brevity.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<AnyView
android:id="#+id/A"
android:layout_alignParentTop="true"/>
<AnyView
android:id="#+id/B"
android:layout_below="#+id/A"/>
<AnyView
android:id="#+id/C"
android:layout_below="#+id/B"/>
<AnyView
android:id="#+id/D"
android:layout_below="#+id/C"
android:layout_above="#+id/E"/> <!-- this one will fill any space left out after adding views A, B, C, and E -->
<AnyView
android:id="#+id/E"
android:layout_alignParentBottom="true"/>
</Relativelayout>
So basically what happens is that when your keyboard shows, the bottom anchor of the screen moves up. When you say android:layout_alignParentBottom="true", this will keep that view just above this bottom anchor.
But as far as other views (A, B, C, and D) are concerned, they are not directly dependent upon that bottom anchor. So, they will not move or adjust themselves.
Just one thing to keep in mind. When you build your layout like this (a little stacked from the top, and a little from the bottom), there will always be one specific view that will have a variable height, and will adjust to changing screen heights. In the above example, that view is D.
I use the mode adjustResize, RecyclerView and EditText, when the keyboard appears, the window shrinks but the visible elements in the RecyclerView go down.
The structure of the layout looks like this:
<LinearLayout
android:orientation="vertical">
<android.support.v7.widget.RecyclerView />
<LinearLayout
android:orientation="vertical"
android:layout_gravity="bottom"/>
</LinearLayout>
I set setStackFromEnd to true, in LinearManager but it does not help.
Versions of libraries: 25.3.0
How can this unpleasant problem be avoided?
instead of using linear layout on top use Relative layout like following...
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/bottom_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical"/>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/bottom_view"/>
</RelativeLayout>
Hi I am a beginner for android and in my app I have to show SlidingPaneLayout at the right side but using my below code it's coming from left side.
Please help me.
How can I make it be at right side?
And second my requirement is my SlidingPaneLayout must be overlapped on Action bar but using my below xml code SlidingPaneLayout showing like my below image
please suggest me how can resolve this two problem
toolbar_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="wrap_content"
android:background="#color/ColorPrimary"
android:elevation="4dp"
>
</android.support.v7.widget.Toolbar>
activity_sliding:-
<android.support.v4.widget.SlidingPaneLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/SlidingPanel"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="right">
<ListView
android:id="#+id/MenuList"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</ListView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="right"
android:background="#101010"
android:orientation="vertical" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/android_robot" />
</LinearLayout>
</android.support.v4.widget.SlidingPaneLayout>
main_layout:-
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/tool_bar"
layout="#layout/toolbar_layout">
</include>
<include
android:id="#+id/SlidingPanel"
layout="#layout/activity_sliding">
</include>
</LinearLayout>
In your manifest, add the following attribute to the opening <application> tag.
android:supportsRtl="true"
Then add this attribute to the opening SlidingPaneLayout tag in your layout.
android:layoutDirection="rtl"
And finally, move the tool_bar <include> element into the main content LinearLayout within the SlidingPaneLayout, and adjust the ImageView's height and weight.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#101010"
android:orientation="vertical">
<include
android:id="#+id/tool_bar"
layout="#layout/toolbar_layout">
</include>
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/android_robot" />
</LinearLayout>
Please note that the child Views of the SlidingPaneLayout will inherit the rtl layoutDirection. This may cause problems in child Views if their layout behavior is affected by the direction. For example, a horizontally-oriented LinearLayout will lay out its children starting from the right. This is easily remedied by setting android:layoutDirection="ltr" on the affected Views.
Also note that this example hard codes the direction in the layout. If you need to support both LTR and RTL layouts application-wide, you'll need to do this programmatically, accounting for the device's default direction.