Convert Figma logo to code with AI

woxingxiao logoSlidingUpPanelLayout

A vertical-handled and multi-panel support SlidingPanelLayout. 一个竖直方向的SlidingPanelLayout,支持加载多个Panel,可以灵活地实现漂亮的的交互效果。

1,564
233
1,564
2

Top Related Projects

SlideUp is a small library that allows you to add sweet slide effect to any view.

2,677

Easily add slide to dismiss functionality to an Activity

A small android library for tagging views inside a ScrollView as "sticky" making them stick to the top of the scroll container until a new sticky view comes and takes it's place

Android library used to create an awesome Android UI based on a draggable element similar to the last YouTube graphic component.

Quick Overview

SlidingUpPanelLayout is an Android library that provides a draggable sliding up panel, similar to the one used in Google Maps and Google Music apps. It allows developers to easily implement a two-pane layout where the bottom pane can be dragged up to reveal more content, enhancing the user interface and interaction experience.

Pros

  • Easy integration with existing Android projects
  • Highly customizable with various attributes and methods
  • Smooth animation and gesture handling
  • Supports both Java and Kotlin

Cons

  • Limited documentation and examples
  • Some reported issues with compatibility on newer Android versions
  • Lack of recent updates (last update was in 2019)

Code Examples

  1. Basic implementation in XML layout:
<com.xw.repo.supl.SlidingUpPanelLayout
    android:id="@+id/sliding_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:suplPanelHeight="68dp"
    app:suplShadowHeight="4dp">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!-- Main content goes here -->
    </FrameLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <!-- Sliding panel content goes here -->
    </LinearLayout>

</com.xw.repo.supl.SlidingUpPanelLayout>
  1. Listening for panel state changes in Kotlin:
slidingLayout.setPanelSlideListener(object : SlidingUpPanelLayout.PanelSlideListener {
    override fun onPanelSlide(panel: View?, slideOffset: Float) {
        // Handle panel slide
    }

    override fun onPanelStateChanged(panel: View?, previousState: SlidingUpPanelLayout.PanelState?, newState: SlidingUpPanelLayout.PanelState?) {
        when (newState) {
            SlidingUpPanelLayout.PanelState.EXPANDED -> {
                // Panel is fully expanded
            }
            SlidingUpPanelLayout.PanelState.COLLAPSED -> {
                // Panel is collapsed
            }
            else -> {
                // Other states
            }
        }
    }
})
  1. Programmatically controlling the panel:
// Expand the panel
slidingLayout.setPanelState(SlidingUpPanelLayout.PanelState.EXPANDED)

// Collapse the panel
slidingLayout.setPanelState(SlidingUpPanelLayout.PanelState.COLLAPSED)

// Check if the panel is slideable
val isSlideable = slidingLayout.isSlideable

Getting Started

  1. Add the dependency to your app's build.gradle file:
dependencies {
    implementation 'com.github.woxingxiao:SlidingUpPanelLayout:1.2.0'
}
  1. Add the SlidingUpPanelLayout to your XML layout as shown in the first code example.

  2. In your Activity or Fragment, initialize the SlidingUpPanelLayout:

val slidingLayout: SlidingUpPanelLayout = findViewById(R.id.sliding_layout)
slidingLayout.setPanelSlideListener(object : SlidingUpPanelLayout.PanelSlideListener {
    // Implement listener methods
})
  1. Customize the panel behavior and appearance using XML attributes or programmatically in your code.

Competitor Comparisons

SlideUp is a small library that allows you to add sweet slide effect to any view.

Pros of SlideUp-Android

  • Simpler implementation with fewer dependencies
  • More customizable animation options
  • Supports both vertical and horizontal sliding

Cons of SlideUp-Android

  • Less comprehensive documentation
  • Fewer built-in features compared to SlidingUpPanelLayout
  • May require more manual configuration for complex layouts

Code Comparison

SlidingUpPanelLayout:

<com.sothree.slidinguppanel.SlidingUpPanelLayout
    android:id="@+id/sliding_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="bottom">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</com.sothree.slidinguppanel.SlidingUpPanelLayout>

SlideUp-Android:

View slideView = findViewById(R.id.slideView);
SlideUp slideUp = new SlideUp.Builder(slideView)
    .withStartGravity(Gravity.BOTTOM)
    .withLoggingEnabled(true)
    .withStartState(SlideUp.State.HIDDEN)
    .build();

The SlidingUpPanelLayout uses a custom layout in XML, while SlideUp-Android utilizes a builder pattern in Java code for setup. SlideUp-Android offers a more programmatic approach, potentially allowing for easier runtime modifications.

2,677

Easily add slide to dismiss functionality to an Activity

Pros of Slidr

  • Simpler implementation for basic sliding functionality
  • Supports multiple sliding directions (left, right, top, bottom)
  • Lightweight library with minimal dependencies

Cons of Slidr

  • Limited customization options compared to SlidingUpPanelLayout
  • Lacks built-in support for complex panel layouts
  • May require additional work for advanced use cases

Code Comparison

SlidingUpPanelLayout:

<com.sothree.slidinguppanel.SlidingUpPanelLayout
    android:id="@+id/sliding_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="bottom">

    <!-- Main Content -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <!-- Sliding Panel -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</com.sothree.slidinguppanel.SlidingUpPanelLayout>

Slidr:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    Slidr.attach(this)
}

SlidingUpPanelLayout offers more control over the panel layout and behavior, while Slidr provides a simpler implementation for basic sliding functionality. SlidingUpPanelLayout is better suited for complex sliding panel designs, whereas Slidr is ideal for quick implementation of slide-to-dismiss or similar features.

A small android library for tagging views inside a ScrollView as "sticky" making them stick to the top of the scroll container until a new sticky view comes and takes it's place

Pros of StickyScrollViewItems

  • Focuses specifically on creating sticky headers within scroll views
  • Lightweight and easy to implement for simple sticky header scenarios
  • Supports both ListView and ScrollView implementations

Cons of StickyScrollViewItems

  • Limited to sticky headers, doesn't provide sliding panel functionality
  • Less actively maintained (last update was several years ago)
  • Fewer customization options compared to SlidingUpPanelLayout

Code Comparison

StickyScrollViewItems implementation:

StickyScrollView scrollView = (StickyScrollView) findViewById(R.id.scroll);
scrollView.addHeaderView(findViewById(R.id.header));

SlidingUpPanelLayout implementation:

SlidingUpPanelLayout layout = (SlidingUpPanelLayout) findViewById(R.id.sliding_layout);
layout.setPanelState(SlidingUpPanelLayout.PanelState.COLLAPSED);
layout.addPanelSlideListener(new PanelSlideListener() {
    // Implement listener methods
});

While both libraries aim to enhance scrolling experiences, they serve different purposes. StickyScrollViewItems is more focused on creating sticky headers within scroll views, while SlidingUpPanelLayout provides a more comprehensive solution for creating sliding panels with various states and animations. SlidingUpPanelLayout offers more flexibility and customization options, making it suitable for complex UI implementations. However, if you only need simple sticky headers, StickyScrollViewItems might be a more lightweight option.

Android library used to create an awesome Android UI based on a draggable element similar to the last YouTube graphic component.

Pros of DraggablePanel

  • Supports both vertical and horizontal dragging, offering more flexibility
  • Provides smooth animations and transitions out of the box
  • Allows for customization of the dragging behavior and appearance

Cons of DraggablePanel

  • Less actively maintained, with the last update being several years ago
  • Limited documentation and examples compared to SlidingUpPanelLayout
  • May require more setup and configuration for basic use cases

Code Comparison

DraggablePanel:

DraggablePanel draggablePanel = (DraggablePanel) findViewById(R.id.draggable_panel);
draggablePanel.setTopFragment(topFragment);
draggablePanel.setBottomFragment(bottomFragment);
draggablePanel.initializeView();

SlidingUpPanelLayout:

SlidingUpPanelLayout layout = (SlidingUpPanelLayout) findViewById(R.id.sliding_layout);
layout.addPanelSlideListener(new PanelSlideListener() {
    @Override
    public void onPanelSlide(View panel, float slideOffset) {}
    @Override
    public void onPanelStateChanged(View panel, PanelState previousState, PanelState newState) {}
});

Both libraries offer similar functionality for creating sliding panels in Android applications. DraggablePanel provides more flexibility in terms of dragging directions and animations, while SlidingUpPanelLayout focuses on vertical sliding with a simpler implementation. SlidingUpPanelLayout is more actively maintained and has better documentation, making it potentially easier to integrate for basic use cases. The choice between the two depends on specific project requirements and the desired level of customization.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

SlidingUpPanelLayout

License

中文说明

logo

A powerful and flexible SlidingPanelLayout, which can support multiple panels in the vertical direction.


Screenshot

demo1 demo2

Download

1. sample apk

2. Gradle

root project:build.gradle

  allprojects {
	 repositories {
		...
		maven { url "https://jitpack.io" }
	 }
  }

app:build.gradle

  dependencies {
     // e.g. compile 'com.github.woxingxiao:SlidingUpPanelLayout:1.1.0'
     compile 'com.github.woxingxiao:SlidingUpPanelLayout:${LATEST_VERSION}'
  }

Usage

1. java (Dynamic way)

SlidingUpPanelLayout.setAdapter(new SlidingUpPanelLayout.Adapter() {

      private final int mSize = mWeatherList.size();

      @Override
      public int getItemCount() {
          return mSize;
      }

      @NonNull
      @Override
      public ISlidingUpPanel onCreateSlidingPanel(int position) {
          WeatherPanelView panel = new WeatherPanelView(DemoActivity1.this);
          if (position == 0) {
              panel.setSlideState(EXPANDED);
          } else {
              panel.setSlideState(HIDDEN);
          }

          return panel;
      }

      @Override
      public void onBindView(final ISlidingUpPanel panel, int position) {
          if (mSize == 0)
              return;

          BaseWeatherPanelView BasePanel = (BaseWeatherPanelView) panel;
          BasePanel.setWeatherModel(mWeatherList.get(position));
          BasePanel.setClickable(true);
          BasePanel.setOnClickListener(new View.OnClickListener() {
              @Override
              public void onClick(View v) {
                  if (panel.getSlideState() != EXPANDED) {
                      mSlidingUpPanelLayout.expandPanel();
                  } else {
                      mSlidingUpPanelLayout.collapsePanel();
                  }
              }
          });
      }
  });

Go to sample for more details.

2. xml (Static way)

<?xml version="1.0" encoding="utf-8"?>
<com.xw.repo.supl.SlidingUpPanelLayout
    android:id="@+id/sliding_up_panel_layout"
    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">

    <!-- background view, the position at 0 can only have one directly view, it can be a view or a layout. -->
    <android.support.constraint.ConstraintLayout
        android:id="@+id/bg_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#616161">

        <TextView
            android:id="@+id/pick_hint_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginTop="120dp"
            android:text="Pick a credit card to pay"
            android:textColor="@android:color/white"
            android:textSize="20sp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

        <TextView
            android:id="@+id/pay_hint_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="260dp"
            android:alpha="0.0"
            android:drawablePadding="8dp"
            android:drawableTop="@mipmap/ic_finger_print"
            android:text="Pay with Touch ID"
            android:textColor="@android:color/white"
            android:textSize="18sp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:alpha="1.0"/>
    </android.support.constraint.ConstraintLayout>

    <!-- panel view, the position from 1 to n must be the one which implemented the interface ISlidingUpPanel.-->
    <com.xw.sample.slidinguppanellayout.demo2.CardPanelView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:cpv_cardCount="4"
        app:cpv_cardImageRes="@mipmap/pic_card1"
        app:cpv_cardPosition="0"/>

    <com.xw.sample.slidinguppanellayout.demo2.CardPanelView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:cpv_cardCount="4"
        app:cpv_cardImageRes="@mipmap/pic_card2"
        app:cpv_cardPosition="1"/>

    <com.xw.sample.slidinguppanellayout.demo2.CardPanelView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:cpv_cardCount="4"
        app:cpv_cardImageRes="@mipmap/pic_card3"
        app:cpv_cardPosition="2"/>

    <com.xw.sample.slidinguppanellayout.demo2.CardPanelView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:cpv_cardCount="4"
        app:cpv_cardImageRes="@mipmap/pic_card4"
        app:cpv_cardPosition="3"/>

</com.xw.repo.supl.SlidingUpPanelLayout>

Go to sample for more details.

Attentions

  • Your calculation must be accurate when your PanelView implement the interface ISlidingUpPanel, which can make sure SlidingUpPanelLayout to work properly. Generally my demos are good reference.
  • Don't set onTouchListener for your PanelView in your own code, or may cause SlidingUpPanelLayout working abnormally.
  • Don't load too many PanelViews because the recycling mechanism have not been considered.

Attributes

    <attr name="spl_disableSliding" format="boolean"/>
    <attr name="spl_expandThreshold" format="float"/>
    <attr name="spl_collapseThreshold" format="float"/>

Welcome to issue or pull request.

License

   Copyright 2017 woxingxiao

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.