https://github.com/hoanganhtuan95ptit/DraggablePanel

Android library used to create an awesome Android UI based on a draggable element similar to the last YouTube New graphic component.
https://github.com/hoanganhtuan95ptit/DraggablePanel

android animation draggable draggablepanel library youtube youtube-anim youtube-ui

Last synced: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/hoanganhtuan95ptit/DraggablePanel
• Owner: hoanganhtuan95ptit
• License: apache-2.0
• Created: 2019-04-10T07:37:22.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-07-20T19:28:30.000Z (over 2 years ago)
• Last Synced: 2024-08-03T22:01:48.745Z (6 months ago)
• Topics: android, animation, draggable, draggablepanel, library, youtube, youtube-anim, youtube-ui
• Language: Kotlin
• Homepage:
• Size: 18.2 MB
• Stars: 115
• Watchers: 6
• Forks: 24
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-android-ui - DraggablePanel2 - 2.0) | <img src="/art/DraggablePanel_1.gif" width="49%"> <img src="/art/DraggablePanel_2.png" width="49%"> (Index)

README

        

## Please switch to [DragView](https://github.com/tuanhav95/DragView), for the best support, thank you

# DraggablePanel

![Alt text](output/ezgif.com-video-to-gif.gif) | ![Alt text](output/Screenshot_20190417-173713.png)  | ![Alt text](output/Screenshot_20190417-173738.png) 

--- | --- | --- 

![Alt text](output/Screenshot_20190417-173732.png) | ![Alt text](output/Screenshot_20190417-173744.png)  | ![Alt text](output/Screenshot_20190417-173721.png) 

#### Download

```java

	allprojects {

		repositories {

			...

			maven { url 'https://jitpack.io' }

		}

	}

    

    

    	dependencies {

	        implementation 'com.github.hoanganhtuan95ptit:DraggablePanel:1.2.5'

	}

```

#### Using [Detail code java](https://github.com/hoanganhtuan95ptit/DraggablePanel/blob/master/example/src/main/java/com/hoanganhtuan95ptit/example/NormalActivity.kt)

* Xml

```java

        

```

![Alt text](output/height_when_max.png) | ![Alt text](output/height_when_min.png)

--- | --- 

* Listener

```java

        draggablePanel.setDraggableListener(object : DraggablePanel.DraggableListener {

            override fun onChangeState(state: DraggablePanel.State) {

            }

            override fun onChangePercent(percent: Float) {

                alpha.alpha = 1 - percent

            }

        })

```

* Add frame

```java

        supportFragmentManager.beginTransaction().add(R.id.frameFirst, TopFragment()).commit() // add frame top

        supportFragmentManager.beginTransaction().add(R.id.frameSecond, BottomFragment()).commit() // add frame bottom

```

![Alt text](output/addFrame.png)

* Action

```java

        btnMax.setOnClickListener { draggablePanel.maximize() }// maximize

        btnMin.setOnClickListener { draggablePanel.minimize() }//minimizeo

        btnClose.setOnClickListener { draggablePanel.close() }//close

```

#### Custom [Detail code java](https://github.com/hoanganhtuan95ptit/DraggablePanel/blob/master/example/src/main/java/com/hoanganhtuan95ptit/example/CustomActivity.kt)

* Custom

```java

        class DraggableSource @JvmOverloads constructor(

                context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0

        ) : DraggablePanel(context, attrs, defStyleAttr) {

        

            var mWidthWhenMax = 0

        

            var mWidthWhenMiddle = 0

        

            var mWidthWhenMin = 0

        

            init {

                getFrameFirst().addView(inflate(R.layout.layout_top))

                getFrameSecond().addView(inflate(R.layout.layout_bottom))

            }

        

            override fun initFrame() {

                mWidthWhenMax = width

        

                mWidthWhenMiddle = (width - mPercentWhenMiddle * mMarginEdgeWhenMin).toInt()

        

                mWidthWhenMin = mHeightWhenMin * 22 / 9

        

                super.initFrame()

            }

        

            override fun refreshFrameFirst() {

                super.refreshFrameFirst()

        

                val width = if (mCurrentPercent < mPercentWhenMiddle) {

                    (mWidthWhenMax - (mWidthWhenMax - mWidthWhenMiddle) * mCurrentPercent)

                } else {

                    (mWidthWhenMiddle - (mWidthWhenMiddle - mWidthWhenMin) * (mCurrentPercent - mPercentWhenMiddle) / (1 - mPercentWhenMiddle))

                }

        

                frameTop.reWidth(width.toInt())

            }

        }

```

* Xml

```java

        

```

* Code

```java

        draggablePanel.setDraggableListener(object : DraggablePanel.DraggableListener {

            override fun onChangeState(state: DraggablePanel.State) {

            }

            override fun onChangePercent(percent: Float) {

                alpha.alpha = 1 - percent

                shadow.alpha = percent

            }

        })

        supportFragmentManager.beginTransaction().add(R.id.frameTop, TopFragment()).commit()

        supportFragmentManager.beginTransaction().add(R.id.frameBottom, BottomFragment()).commit()

        btnMax.setOnClickListener { draggablePanel.maximize() }

        btnMin.setOnClickListener { draggablePanel.minimize() }

        btnClose.setOnClickListener { draggablePanel.close() }

```