Convert Figma logo to code with AI

pedrovgs logoDraggablePanel

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

2,987
606
2,987
56

Top Related Projects

18,777

Implementation of ImageView for Android that supports zooming, by various touch gestures.

This library provides a simple way to add a draggable sliding up panel (popularized by Google Music and Google Maps) to your Android application. Brought to you by Umano.

The Most Powerful Swipe Layout!

swipe display drawer with flowing & bouncing effects.

Side menu with some categories to choose.

Android library to observe scroll events on scrollable views.

Quick Overview

DraggablePanel is an Android UI component that allows developers to create a draggable panel similar to the one used in the YouTube Android app. It provides a smooth and interactive way to display content in a panel that can be expanded, collapsed, or dragged to different positions on the screen.

Pros

  • Easy integration into existing Android projects
  • Customizable appearance and behavior
  • Smooth animations and gestures
  • Well-documented and maintained

Cons

  • Limited to Android platform
  • May require additional effort to adapt to specific design requirements
  • Potential performance impact on older devices
  • Dependency on external libraries

Code Examples

  1. Basic implementation of DraggablePanel:
DraggablePanel draggablePanel = findViewById(R.id.draggable_panel);
draggablePanel.setTopFragment(new VideoFragment());
draggablePanel.setBottomFragment(new PlaylistFragment());
draggablePanel.initializeView();
  1. Customizing panel behavior:
draggablePanel.setTopViewHeight(200);
draggablePanel.setEnableHorizontalAlphaEffect(true);
draggablePanel.setTopFragmentMarginRight(50);
draggablePanel.setTopFragmentMarginBottom(100);
  1. Listening for panel state changes:
draggablePanel.setDraggableListener(new DraggableListener() {
    @Override
    public void onMaximized() {
        // Panel is fully expanded
    }

    @Override
    public void onMinimized() {
        // Panel is collapsed
    }

    @Override
    public void onClosedToLeft() {
        // Panel is closed to the left
    }

    @Override
    public void onClosedToRight() {
        // Panel is closed to the right
    }
});

Getting Started

  1. Add the dependency to your build.gradle file:
dependencies {
    implementation 'com.github.pedrovgs:draggablepanel:1.9'
}
  1. Add the DraggablePanel to your layout XML:
<com.github.pedrovgs.DraggablePanel
    android:id="@+id/draggable_panel"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
  1. Initialize the DraggablePanel in your Activity or Fragment:
DraggablePanel draggablePanel = findViewById(R.id.draggable_panel);
draggablePanel.setTopFragment(new YourTopFragment());
draggablePanel.setBottomFragment(new YourBottomFragment());
draggablePanel.initializeView();

Competitor Comparisons

18,777

Implementation of ImageView for Android that supports zooming, by various touch gestures.

Pros of PhotoView

  • Specialized for image viewing with zooming and panning capabilities
  • Lightweight and focused on a single functionality
  • Extensive documentation and examples provided

Cons of PhotoView

  • Limited to image viewing, lacks drag-and-drop panel functionality
  • May require additional libraries for more complex UI interactions
  • Less customizable for non-image content

Code Comparison

PhotoView implementation:

PhotoView photoView = findViewById(R.id.photo_view);
photoView.setImageResource(R.drawable.image);
photoView.setScaleType(ImageView.ScaleType.CENTER_CROP);

DraggablePanel implementation:

DraggablePanel draggablePanel = findViewById(R.id.draggable_panel);
draggablePanel.setTopFragment(new PhotoFragment());
draggablePanel.setBottomFragment(new DetailFragment());
draggablePanel.initializeView();

Key Differences

  • PhotoView focuses on image manipulation, while DraggablePanel provides a draggable UI component
  • PhotoView is more suitable for image galleries or photo viewers
  • DraggablePanel offers more flexibility for creating custom layouts with draggable elements

Use Cases

PhotoView is ideal for:

  • Image galleries
  • Photo viewing applications
  • Zoomable image displays

DraggablePanel is better suited for:

  • Video players with minimizable windows
  • Multi-pane layouts with collapsible sections
  • Custom UI components requiring drag-and-drop functionality

This library provides a simple way to add a draggable sliding up panel (popularized by Google Music and Google Maps) to your Android application. Brought to you by Umano.

Pros of AndroidSlidingUpPanel

  • More customizable with various attributes for panel behavior and appearance
  • Supports both dragging and programmatic control of the panel
  • Includes built-in support for parallax effects

Cons of AndroidSlidingUpPanel

  • Limited to vertical sliding motion only
  • Lacks built-in support for multiple panels or complex layouts
  • Less actively maintained (last update in 2018)

Code Comparison

AndroidSlidingUpPanel:

<com.sothree.slidinguppanel.SlidingUpPanelLayout
    android:id="@+id/sliding_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="bottom"
    app:umanoPanelHeight="68dp"
    app:umanoShadowHeight="4dp">

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

    <!-- Sliding Panel Content -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"/>

</com.sothree.slidinguppanel.SlidingUpPanelLayout>

DraggablePanel:

<com.github.pedrovgs.DraggablePanel
    android:id="@+id/draggable_panel"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/top_fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <FrameLayout
        android:id="@+id/bottom_fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</com.github.pedrovgs.DraggablePanel>

The Most Powerful Swipe Layout!

Pros of AndroidSwipeLayout

  • More versatile, allowing for swipe actions in multiple directions (left, right, top, bottom)
  • Supports a wider range of UI elements within swipe layouts (buttons, images, etc.)
  • Easier to implement complex swipe interactions with less custom code

Cons of AndroidSwipeLayout

  • May have a steeper learning curve due to more configuration options
  • Potentially higher memory usage and performance overhead for complex layouts
  • Less focused on drag-and-drop functionality compared to DraggablePanel

Code Comparison

AndroidSwipeLayout:

SwipeLayout swipeLayout = findViewById(R.id.swipe_layout);
swipeLayout.addDrag(SwipeLayout.DragEdge.Left, findViewById(R.id.bottom_wrapper));
swipeLayout.addSwipeListener(new SwipeLayout.SwipeListener() {
    @Override
    public void onStartOpen(SwipeLayout layout) {
        // Handle swipe start
    }
});

DraggablePanel:

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

Both libraries offer unique features for creating interactive Android UI elements. AndroidSwipeLayout excels in versatility and complex swipe interactions, while DraggablePanel focuses on drag-and-drop functionality with a simpler implementation. The choice between them depends on the specific requirements of your project.

swipe display drawer with flowing & bouncing effects.

Pros of FlowingDrawer

  • Offers a unique, fluid animation for the drawer opening/closing
  • Provides customizable menu items with icons
  • Simpler implementation for basic drawer functionality

Cons of FlowingDrawer

  • Less flexible in terms of panel positioning and sizing
  • Limited to drawer-style interactions, unlike DraggablePanel's versatility
  • Fewer customization options for the drawer's appearance

Code Comparison

FlowingDrawer:

mLeftDrawer = (FlowingDrawer) findViewById(R.id.drawerlayout);
mLeftDrawer.setMenuIcon(R.drawable.ic_menu);
mLeftDrawer.setMenuListener(new MenuListener() {
    @Override
    public void onMenuOpened() {
        // Handle menu opened event
    }
});

DraggablePanel:

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

Both libraries offer unique UI components for Android applications. FlowingDrawer focuses on providing a visually appealing drawer animation with a simple implementation, while DraggablePanel offers more versatility in terms of panel positioning and interactions. The choice between the two depends on the specific requirements of your project, such as the desired UI layout and level of customization needed.

Side menu with some categories to choose.

Pros of Side-Menu.Android

  • Offers a visually appealing and animated side menu implementation
  • Provides customizable menu items with icons and labels
  • Includes smooth transitions and gestures for menu interaction

Cons of Side-Menu.Android

  • Limited to side menu functionality, less versatile than DraggablePanel
  • May require more setup and customization for complex menu structures
  • Less actively maintained, with fewer recent updates

Code Comparison

Side-Menu.Android:

val menuAdapter = MenuAdapter(items)
resideMenu.setAdapter(menuAdapter)
resideMenu.setOnItemClickListener { view, position ->
    // Handle menu item click
}

DraggablePanel:

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

Side-Menu.Android focuses on creating a side menu with customizable items, while DraggablePanel provides a more flexible draggable panel system for various UI layouts. The code snippets demonstrate the different approaches to setting up and configuring each library in an Android application.

Android library to observe scroll events on scrollable views.

Pros of Android-ObservableScrollView

  • More versatile, supporting various scroll effects and animations
  • Extensive documentation and examples for different use cases
  • Active community and regular updates

Cons of Android-ObservableScrollView

  • Steeper learning curve due to more complex implementation
  • May require more code to achieve simple draggable panel functionality
  • Potentially higher performance overhead for basic scrolling scenarios

Code Comparison

DraggablePanel:

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

Android-ObservableScrollView:

ObservableScrollView scrollView = (ObservableScrollView) findViewById(R.id.scroll);
scrollView.setScrollViewCallbacks(new ObservableScrollViewCallbacks() {
    @Override
    public void onScrollChanged(int scrollY, boolean firstScroll, boolean dragging) {
        // Handle scroll changes
    }
});

Android-ObservableScrollView offers more flexibility for complex scrolling behaviors, while DraggablePanel provides a simpler implementation for basic draggable panel functionality. The choice between the two depends on the specific requirements of your project and the level of customization needed for scroll interactions.

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

Draggable Panel Maven Central

DEPRECATED. This project is not maintained anymore.

Draggable Panel is an Android library created to build a draggable user interface similar to the new YouTube draggable video component based on Fragments or Views.

This Android library offers you two main classes to use and create your own awesome user interfaces. If you want to use it with fragments add DraggablePanel to your layout. If you want to use it with views use DraggableView and put your views inside.

This new component has been created using some concepts described on Flavien Laurent Blog and Denevell Blog.

To create this library I've used an Android component called ViewDragHelper and ViewDragHelper.Calback. This component doesn't have too much documentation and that's the reason why I've added some javadoc to my code in order to clarify the component usage.

This library works on Android 4.X or higher versions but not in lower versions because the scale effect is not going to work properly when the user try to drag the view. The clickable zone on a scaled view in Android 2.X is bigger than the real scaled zone.

Screenshots

Demo Screenshot 1 Demo Screenshot 2 Demo Screenshot 4 Demo Screenshot 3

Usage

To use Draggable Panel library and get your new awesome UI working you can use two different Android widgets:

    1. Add DraggablePanel widget to your layout. Configure the view customization elements using styleable attributes or programatically and configure your fragments to work as top or bottom fragment inside the DraggablePanel widget.
<com.github.pedrovgs.DraggablePanel
        android:id="@+id/draggable_panel"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"/>
private void initializeDraggablePanel() throws Resources.NotFoundException {
      draggablePanel.setFragmentManager(getSupportFragmentManager());
      draggablePanel.setTopFragment(placeFragment);
      draggablePanel.setBottomFragment(mapFragment);
      draggablePanel.initializeView();
}
    1. Add DraggableView widget to your layout. Configure the view to use two children views as the draggable view and the second view. Configure the customization elements using styleable attributes or programatically.
<com.github.pedrovgs.DraggableView
          xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:draggable_view="http://schemas.android.com/apk/res-auto"
          android:id="@+id/draggable_view"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          draggable_view:top_view_id="@+id/iv_fan_art"
          draggable_view:bottom_view_id="@+id/lv_episodes"
          draggable_view:top_view_x_scale_factor="@dimen/x_scale_factor"
          draggable_view:top_view_y_scale_factor="@dimen/y_scale_factor"
          draggable_view:top_view_margin_right="@dimen/top_fragment_margin"
          draggable_view:top_view_margin_bottom="@dimen/top_fragment_margin"
          android:background="@color/black">

      <!-- ListView Episodes -->

      <ListView
              android:id="@+id/lv_episodes"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:layout_below="@+id/iv_fan_art"
              style="@style/episodes_list_view"/>

      <!-- TvShow Fan Art -->

      <ImageView
              android:id="@+id/iv_fan_art"
              android:layout_width="fill_parent"
              android:layout_height="@dimen/tv_show_fan_art_height"
              android:layout_alignParentTop="true"
              style="@style/image_view"/>

</com.github.pedrovgs.DraggableView>

**If you are going to use DraggablePanel or DraggableView combined with a DrawerLayout review Famous Places Sample Activity

Import DraggablePanel dependency

Download the project, compile it using maven or gradle and import draggablepanel-1.9.aar into your project.

Or declare it into your pom.xml. This library uses NineOldAndroid library and Android support library v4 version 19.1.0, you have to provide this dependencies from your local artifact repository or from maven central repository.

<dependency>
  <groupId>com.github.pedrovgs</groupId>
  <artifactId>draggablepanel</artifactId>
  <version>1.9</version>
  <type>aar</type>
</dependency>

Or into your build.gradle

dependencies {
    compile 'com.github.pedrovgs:draggablepanel:1.9'
}

Customization

You can customize some of the view effects programatically or using xml styleable attributes. The elements to customize are:

  • Draggable view / fragment height.
  • Draggable view X scale factor.
  • Draggable view Y scale factor.
  • Draggable view margin right applied when the view is minimized.
  • Draggable view margin bottom applied when the view is minimized.
  • Enable or disable the horizontal alpha effect applied while the view is being horizontally dragged.
  • Enable or disable touch on minimized/maximized view to minimize/maximize.
<com.github.pedrovgs.DraggableView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:draggable_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/draggable_view"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        draggable_view:top_view_id="@+id/iv_fan_art"
        draggable_view:bottom_view_id="@+id/lv_episodes"
        draggable_view:top_view_x_scale_factor="@dimen/x_scale_factor"
        draggable_view:top_view_y_scale_factor="@dimen/y_scale_factor"
        draggable_view:top_view_margin_right="@dimen/top_fragment_margin"
        draggable_view:top_view_margin_bottom="@dimen/top_fragment_margin"
        draggable_view:enable_click_to_maximize_view="false"
        draggable_view:enable_click_to_minimize_view="true"
        android:background="@color/black">

        <!-- ....... -->

</com.github.pedrovgs.DraggableView>
draggablePanel.setTopFragment(placeFragment);
draggablePanel.setBottomFragment(mapFragment);
draggablePanel.setXScaleFactor(xScaleFactor);
draggablePanel.setYScaleFactor(yScaleFactor);
draggablePanel.setTopViewHeight(topViewHeight);
draggablePanel.setTopFragmentMarginRight(topViewMarginRight);
draggablePanel.setTopFragmentMarginBottom(topViewMargnBottom);
draggablePanel.setClickToMaximizeEnabled(enableClickToMaximize);
draggablePanel.setClickToMinimizeEnabled(enableClickToMinimize);

Similar customizable attributes are available programatically or using styleable attributes in DraggableView.

Do you want to resize the top view instead of scale it? Add dragable_view:top_view_resize attribute to your DraggableView:

<com.github.pedrovgs.DraggableView
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:draggable_view="http://schemas.android.com/apk/res-auto"
            android:id="@+id/draggable_view"
            draggable_view:top_view_resize="true">

Do you want to contribute? TODO

  • Support landscape mode when DraggableView is using ResizeTransformer.

Developed By

Follow me on Twitter Add me to Linkedin

*Does your app use DraggablePanel? If you want to be featured on this list tell me on Twitter

Libraries used on the sample project

License

Copyright 2014 Pedro Vicente Gómez Sánchez

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.