Android sliding panel that is part of the view hierarchy, not above it.

Overview

sliding-panel

Build Status core Android Arsenal

share on twitter

A ViewGroup that implements a sliding panel that is part of the view hierarchy, not above it.

Difference from other libraries

All other implementations of the bottom sheet pattern and sliding panel pattern implement a panel that sits above all the other Views of the app. When the panel is collapsed (but visible) the only way to set its position is by using a peek factor (its distance from the bottom of the screen).

With this library the sliding panel is placed exactly where it is supposed to be in the view hierarchy, just like it would be in a vertical (or horizontal) LinearLayout. It doesn't sit above other Views.

Overview

SlidingPanel is a ViewGroup exending FrameLayout.

It has exacly two children: a non sliding view and a sliding view.

  • The non sliding view is just a view that doesn't move, positioned as if SlidingPanel was a LinearLayout.
  • The sliding view is a View that can be dragged by the user. It slides over the non sliding view, both vertically and horizontally.

The sliding view can be collapsed or expanded.

  • When collapsed, the sliding view is exactly where it would be if SlidingPanel was a LinearLayout.
  • When expanded, the sliding view is positioned to exactly cover the non sliding view. (Therefore the maximum amount of movement allowed to the sliding view is equal to the height (or width) of the non sliding view)

Sample app

You can download the apk of the sample app at this link, or on the PlayStore.

Get it on Google Play

The code of the sample app is available at this link.

Having the sample apps installed is a good way to be notified of new releases. Although watching this repository will allow GitHub to email you whenever a new release is published.

Download

The Gradle dependency is available via jCenter. jCenter is the default Maven repository used by Android Studio.

The minimum API level supported by this library is API 15.

dependencies {
  implementation 'com.psoffritti.slidingpanel:core:1.0.0'
}

Quick start

In order to start using the library you need to add a SlidingPanel to your layout.

<com.psoffritti.slidingpanel.SlidingPanel
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:id="@+id/sliding_panel"
  android:layout_width="match_parent"
  android:layout_height="match_parent"

  app:orientation="vertical"
  app:nonSlidingView="@id/non_sliding_view"
  app:slidingView="@id/sliding_view"
  app:elevation="4dp" >

  <TextView
    android:id="@+id/non_sliding_view"
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:gravity="center"
    android:text="non sliding view"
    android:background="#af4448" />

  <TextView
    android:id="@+id/sliding_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:text="sliding view"
    android:background="#e57373" />

</com.psoffritti.slidingpanel.SlidingPanel>

non_sliding_view and sliding_view can be whatever View or ViewGroup you need.

If you want to listen to slide events, you can add a OnSlideListener to the SlidingPanel.

sliding_panel.addSlideListener { slidingPanel, state, currentSlide ->
  when(state) {
    PanelState.COLLAPSED -> { }
    PanelState.EXPANDED -> { }
    PanelState.SLIDING -> { }
  }
}

API documentation

Table of contents

  1. SlidingPanel attributes
    1. slidingView
    2. nonSlidingView
    3. dragView
    4. fitToScreenView
    5. orientation
    6. elevation
  2. API
    1. Panel state
    2. slideTo
    3. slideDuration
    4. Programmatically set drag view
    5. Listen to events

SlidingPanel attributes

SlidingPanel has a set of attributes that you can set to customize its behviour. Some of this attributes are mandatory.

slidingView

Mandatory: yes -- Value: view reference -- Default: null

This mandatory attribute is used to tell SlidingPanel which of its two children is the sliding view. If this attribute is not set SlidingPanel will throw an Excpetion.

<com.psoffritti.slidingpanel.SlidingPanel
  ...
  app:slidingView="@id/sliding_view" >

  ...
</com.psoffritti.slidingpanel.SlidingPanel>

nonSlidingView

Mandatory: yes -- Value: view reference -- Default: null

This mandatory attribute is used to tell SlidingPanel which of its two children is the non sliding view. If this attribute is not set SlidingPanel will throw an Excpetion.

<com.psoffritti.slidingpanel.SlidingPanel
  ...
  app:nonSlidingView="@id/non_sliding_view" >

  ...
</com.psoffritti.slidingpanel.SlidingPanel>

dragView

Mandatory: no -- Value: view reference -- Default: slidingView

This attribute is used to tell SlidingPanel which View should be used to drag the sliding view. If not set this value defaults to the sliding view. Therefore the whole panel will be sensible to dragging.

Note that if the whole panel is draggable it won't be possible to use scrollable views inside the sliding view.

<com.psoffritti.slidingpanel.SlidingPanel
  ...
  app:dragView="@id/drag_view" >

  ...
</com.psoffritti.slidingpanel.SlidingPanel>

fitToScreenView

Mandatory: no -- Value: view reference -- Default: null

When collapsed, the sliding view is shifted down (or right) by an amount equal to the height (or width) of the non sliding view. Therefore, when collapsed, the bottom (or right) part of the sliding view will be out of the screen.

This attribute is used to tell SlidingPanel that we want a view to be shifted up (or left) so that it is always visible.

See the screenshots below to better understand. In the first one fitToScreenView is set, in the second one it isn't.

fitToScreenView

Notice the white text at the bottom of the screen. It is not visible in the second screen, it is visible only when the panel is expanded.

The sample app has an example specific for this attribute.

<com.psoffritti.slidingpanel.SlidingPanel
  ...
  app:fitToScreenView="@id/fit_to_screen_view" >

  ...
</com.psoffritti.slidingpanel.SlidingPanel>

orientation

Mandatory: no -- Value: vertical | horizontal -- Default: vertical

This attribute is used to set the orientation of SlidingPanel in the same way that it is used for a LinearLayout. By default it is set to vertical.

<com.psoffritti.slidingpanel.SlidingPanel
  ...
  app:orientation="horizontal" >

  ...
</com.psoffritti.slidingpanel.SlidingPanel>

elevation

Mandatory: no -- Value: dimension -- Default: 4dp

This attribute is used to set the length of the shadow drawn to the top (or left) side of the sliding view.

<com.psoffritti.slidingpanel.SlidingPanel
  ...
  app:elevation="10dp" >

  ...
</com.psoffritti.slidingpanel.SlidingPanel>

API

You can interact with SlidingPanel programmatically through its API.

Panel state

SlidingPanel has a state that can be one of: EXPANDED, COLLAPSED and SLIDING.

You can get the state but are not allowed to set it directly.

To programmatically change the state of the panel you should use the slideTo method.

slideTo

This method takes as argument one of the possible states of the panel: EXPANDED, COLLAPSED. If you try to pass SLIDING the panel will throw an IllegalArgumentException.

When this method is called the panel will automatically animate to to match the state passed as argument.

slideDuration

You can set the duration of the slide animation using the slideDuration property.

This property affects:

  • the duration of the slide triggered by slideTo.
  • the speed at which the panel autocompletes the slides when the user stops dragging it before reaching the EXPANDED or COLLAPSED state.

You can use the constants defined in SlidingPanel (SlidingPanel.SLIDE_DURATION_SHORT, SlidingPanel.SLIDE_DURATION_LONG) or set it to an arbitrary duration in millisecond.

sliding_panel.slideDuration = SlidingPanel.SLIDE_DURATION_SHORT
sliding_panel.slideDuration = SlidingPanel.SLIDE_DURATION_LONG

Programmatically set drag view

Sometimes it is usefull to change the dragView at runtime.

An example is give in the sample app, in the "advanced example". In this case a list is shown when the panel is expanded, therefore the drag view has to be changed. Otherwise the list wouldn't be scrollable.

Use the setDragView(view: View) method to programmatically set the drag view.

Listen to events

You can listen to slide events, by adding an OnSlideListener to the SlidingPanel.

sliding_panel.addSlideListener { slidingPanel, state, currentSlide ->
  when(state) {
    PanelState.COLLAPSED -> { }
    PanelState.EXPANDED -> { }
    PanelState.SLIDING -> { }
  }
}

or

sliding_panel.addSlideListener(object : SlidingPanel.OnSlideListener {
  override fun onSlide(slidingPanel: SlidingPanel, state: PanelState, currentSlide: Float) { }
})
  • The first argument is a referece to the SlidingPanel emitting the event.
  • The second argument is the current state of the panel.
  • The third argument is a value between 0 and 1. The value is 0 when the state is COLLAPSED and 1 when EXPANDED.

For any question feel free to open an issue on the GitHub repository.

Comments
  • Fix sliding freezes when touch outside

    Fix sliding freezes when touch outside

    The idea is to complete sliding and stop consuming new touch events when touch goes outside of sliding area. It usually happens when DragView is small, so that the sliding view "freezes"

    opened by iRYO400 1
  • Fix that prevents multiple listener calls when EXPANDED or COLLAPSED

    Fix that prevents multiple listener calls when EXPANDED or COLLAPSED

    Hi! Thanks for the lib. Cool that it's written in Kotlin!

    I found it's not correct that listener triggers with Expanded/Collapsed state while it's already Expanded/Collapsed;

    Tried to not use CMD + OPT + L to make PR keep small

    opened by iRYO400 1
  • Add XML argument to set bottom offset from slidable view.

    Add XML argument to set bottom offset from slidable view.

    Something like:

    <com.pierfrancescosoffritti.slidingdrawer.SlidingDrawer
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      android:id="@+id/sliding_panel"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:preventSlidableViewContentFromGoingOffscreen="false|true">
    </com.pierfrancescosoffritti.slidingdrawer.SlidingDrawer>
    

    If the attribute is ture a bottom padding should be added to slidable view. Instead of adding it to sliding_drawer_collapsed_view.

    enhancement 
    opened by PierfrancescoSoffritti 0
  • How to set default state to EXPANDED

    How to set default state to EXPANDED

    I call in onCreate() in activity

    slidingPanel.slideTo(PanelState.EXPANDED);

    but it error: java.lang.RuntimeException: Unable to start activity ComponentInfo{pl.novitus.bill/pl.novitus.bill.ui.sale.SaleActivity}: kotlin.UninitializedPropertyAccessException: lateinit property slidingView has not been initialized at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2666) at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2727) at android.app.ActivityThread.-wrap12(ActivityThread.java) at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1478)

    opened by marekbil 0
  • RecyclerView is not getting scrolled inside slidingview

    RecyclerView is not getting scrolled inside slidingview

    Hi , I have a recyclerview inside the slidingview , slidingview slides perfectly but recyclerview is not getting scrolled. little help will be appreciated , thanks !

    opened by shan-tws 0
  • Slide value

    Slide value "1.615012" should be normalized, between 0 and 1

    /AndroidRuntime: FATAL EXCEPTION: main Process: com.xeinebiu.anplayer, PID: 9730 java.lang.IllegalArgumentException: Slide value "1.615012" should be normalized, between 0 and 1. at com.psoffritti.slidingpanel.SlidingPanel.updateState(SlidingPanel.kt:366) at com.psoffritti.slidingpanel.SlidingPanel.onTouchEvent(SlidingPanel.kt:177) at android.view.View.dispatchTouchEvent(View.java:12513) at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:3024) at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2705) at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:3030) at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2719) at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:3030) at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2719) at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:3030) at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2719) at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:3030) at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2719) at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:3030) at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2719) at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:3030) at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2719) at com.android.internal.policy.DecorView.superDispatchTouchEvent(DecorView.java:440) at com.android.internal.policy.PhoneWindow.superDispatchTouchEvent(PhoneWindow.java:1830) at android.app.Activity.dispatchTouchEvent(Activity.java:3400) at androidx.appcompat.view.WindowCallbackWrapper.dispatchTouchEvent(WindowCallbackWrapper.java:69) at com.android.internal.policy.DecorView.dispatchTouchEvent(DecorView.java:398) at android.view.View.dispatchPointerEvent(View.java:12752) at android.view.ViewRootImpl$ViewPostImeInputStage.processPointerEvent(ViewRootImpl.java:5106) at android.view.ViewRootImpl$ViewPostImeInputStage.onProcess(ViewRootImpl.java:4909) at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:4426) at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:4479) at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:4445) at android.view.ViewRootImpl$AsyncInputStage.forward(ViewRootImpl.java:4585) at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:4453) at android.view.ViewRootImpl$AsyncInputStage.apply(ViewRootImpl.java:4642) at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:4426) at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:4479) at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:4445) at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:4453) at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:4426) at android.view.ViewRootImpl.deliverInputEvent(ViewRootImpl.java:7092) at android.view.ViewRootImpl.doProcessInputEvents(ViewRootImpl.java:7061) at android.view.ViewRootImpl.enqueueInputEvent(ViewRootImpl.java:7022) at android.view.ViewRootImpl$WindowInputEventReceiver.onInputEvent(ViewRootImpl.java:7195) at android.view.InputEventReceiver.dispatchInputEvent(InputEventReceiver.java:186) at android.view.InputEventReceiver.nativeConsumeBatchedInputEvents(Native Method) at android.view.InputEventReceiver.consumeBatchedInputEvents(InputEventReceiver.java:177) at android.view.ViewRootImpl.doConsumeBatchedInput(ViewRootImpl.java:7166) at android.view.ViewRootImpl$ConsumeBatchedInputRunnable.run(ViewRootImpl.java:7218) at android.view.Choreographer$CallbackRecord.run(Choreographer.java:949) at android.view.Choreographer.doCallbacks(Choreographer.java:761) at android.view.Choreographer.doFrame(Choreographer.java:690) at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:935) at android.os.Handler.handleCallback(Handler.java:873) at android.os.Handler.dispatchMessage(Handler.java:99) E/AndroidRuntime: at android.os.Looper.loop(Looper.java:193) at android.app.ActivityThread.main(ActivityThread.java:6669) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)

    question 
    opened by xeinebiu 3
Releases(v1.0.0)
Owner
Pierfrancesco Soffritti
Software engineer @google
Pierfrancesco Soffritti
This repository is part of a Uni-Project to write a complete Compiler for a subset of Java.

Compiler This repository is part of a Uni-Project to write a complete Compiler for a subset of Java. Features error recovery using context sensitive a

null 3 Jan 10, 2022
Location Reminder App build as part of the udacity nanodegree program

Location Reminder a Location Reminder App with notifications that remind the user to do something when the user is at a specific location. built as pa

André Wagner 0 Dec 26, 2021
ConstraintSetChangesTest - Simple project showing Changes of ConstraintSet value as part of mutable state in JetpackCompose.

ConstraintSetChangesTest Simple project showing Changes of ConstraintSet value as part of mutable state in JetpackCompose. Version: implementation

Mateusz Perlak 1 Feb 13, 2022
👋 A common toolkit (utils) ⚒️ built to help you further reduce Kotlin boilerplate code and improve development efficiency. Do you think 'kotlin-stdlib' or 'android-ktx' is not sweet enough? You need this! 🍭

Toolkit [ ?? Work in progress ⛏ ?? ??️ ?? ] Snapshot version: repositories { maven("https://s01.oss.sonatype.org/content/repositories/snapshots") }

凛 35 Jul 23, 2022
Don't write a RecyclerView adapter again. Not even a ViewHolder!

LastAdapter Don't write a RecyclerView adapter again. Not even a ViewHolder! Based on Android Data Binding Written in Kotlin No need to write the adap

Miguel Ángel Moreno 781 Dec 19, 2022
A template that utilizes both Scala and Kotlin because why not (And also because I endorse programming hell)

Fabric-Scala-Kotlin-template A template that utilizes both Scala and Kotlin because why not (And also because I endorse programming hell) I don't care

null 1 Dec 25, 2021
base url not included, rxJava, Retrofit

NewsFeed NewsFeed is an android sample application built using kotlin, androidx artifacts, kotlin-extensions in MVP pattern. Libraries Used Dagger 2 D

Sagar Raval 0 Dec 29, 2021
base url not included, rxJava, Retrofit

NewsFeed NewsFeed is an android sample application built using kotlin, androidx artifacts, kotlin-extensions in MVP pattern. Libraries Used Dagger 2 D

Sagar Raval 0 Dec 29, 2021
WaxedNotWaxed - Adds a simple indicator to know if a copper block is waxed or not

Waxed Not Waxed Adds a simple indicator to know if a copper block is waxed or no

Mateusz 2 Nov 11, 2022
View "injection" library for Android.

Kotter Knife Deprecated: This was a terrible idea because it allocates an object for every view reference. Do not use, and do not use anything like it

Jake Wharton 2.2k Dec 28, 2022
🍞 The ultimate breadcrumbs view for Android!

KrumbsView The ultimate breadcrumbs view for Android! Inspired by JotterPad's breadcrumbs. Features: Custom typeface (from /assets and /res/font folde

Adriel Café 179 Dec 9, 2022
:speedboat: Floating navigation view for displaying a list of items dynamically on Android.

Submarine Fully customizable floating navigation view for listing items dynamically on Android. Including in your project Gradle Add below codes to yo

Jaewoong Eum 460 Dec 21, 2022
Android View Lifecycle Extensions

Android View Lifecycle Extensions Extensions for Android View class that let you access a view lifecycle without having to create a custom view (exten

Thomas Gorisse 22 Dec 6, 2022
A simple project that describes the relationship between the view and it's viewmodel in android development

View-ViewModel-Communication A simple project that describes the relationship between the view and it's viewmodel in android development In MVVM archi

Segun Francis 1 Nov 6, 2021
Custom Sneaker view for Android.

SneakerView How to install ? You can add the library to your project using jitpack.io. Add the code below to your project's settings.gradle file. all

Osman Gül 3 Aug 26, 2022
ZoomHelper will make any view to be zoomable just like Instagram pinch-to-zoom

ZoomHelper ZoomHelper will make any view to be zoomable just like the Instagram pinch-to-zoom. ?? Installation ZoomHelper is available in the JCenter,

AmirHosseinAghajari 238 Dec 25, 2022
Arc Layout is a view group with which you can add a arc-shaped container in your layout.

ArcLayout Arc Layout is a view group with which you can add a arc-shaped container in your layout. Two main variables are the direction and the curvat

Ali Rezaiyan 32 Aug 17, 2022
A simple and easy adapter for RecyclerView. You don't have to make adapters and view holders anymore. Slush will help you.

한국어 No more boilerplate adapters and view holders. Slush will make using RecyclerView easy and fast. The goal of this project is to make RecyclerView,

SeungHyun 26 Sep 13, 2022
Dots indicator that shows the current position on a View Pager. It does all the work for you with a few customisations.

Dots What is Dots? Dots is a library that helps in implementing a simple yet effective dots indicator for the View Pagers used in your android code. I

Deepan 23 Feb 16, 2022