Create a Draggable Panel like Youtube in Android

    In Youtube app, when you watch a video, you can drag it to move, zoomout, maximine or close it by swipe to right/left.  There is a library which can help us to crate an awesome UI like that: DraggablePanel. This is an Android library that lets you create a draggable user interface similar to the new YouTube draggable video component based on Fragments or Views. The library provides two main classes to use and create your own awesome user interfaces, DraggablePanel to use it with fragments and DraggableView to use it with views.
   Ofcourse, in this small tip, I will present a simple example app to implement it. Hope this help! :)

1. Import/ Installation

    For using it, like the docs say, you must add dependency to your local build.gradle file (usally in "app" module):

2. Coding sample app:

    There are 2 widgets in this library can make a draggable panel: DraggablePanel and DraggableView. In this project, I use DraggableView (this is more complex), another one is similar.
Create a layout for our activity:
For more customizing view effects, you can see library docs to deep understand.
Create a object model for our app (Employee.java) use for ListView elements:
Customizing a ListView adapter based on ArrayAdapter like this:
In MainActivity, the most important part of our code, when click at each ListView row, DraggablePanel will appear and show this element details, we can drag it to see it's effects.
    Full MainActivity.java code:

3. Adding some necessary files:

- Layout for each ListView row:
- Header layout for ListView:
- Colors resoure:

4. Ouput of application:

5. References:

- Official Library Project page in Github: https://github.com/pedrovgs/DraggablePanel
- Author Twitter page: https://twitter.com/pedro_g_s

(sorry for having ads)

Author : Hong Thai

Share