DraggablePanel icon indicating copy to clipboard operation
DraggablePanel copied to clipboard

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

Please switch to DragView, for the best support, thank you

DraggablePanel

Alt text Alt text Alt text
Alt text Alt text Alt text

Download


	allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}
    
    
    	dependencies {
	        implementation 'com.github.hoanganhtuan95ptit:DraggablePanel:1.2.5'
	}

Using Detail code java

  • Xml
        <com.hoanganhtuan95ptit.draggable.DraggablePanel
                android:id="@+id/draggablePanel"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:height_when_max="300dp"
                app:height_when_min="80dp"
                app:margin_bottom_when_min="8dp"
                app:margin_edge_when_min="8dp"
                app:percent_when_middle="0.9"
                app:state="MIN" />
Alt text Alt text
  • Listener

        draggablePanel.setDraggableListener(object : DraggablePanel.DraggableListener {
            override fun onChangeState(state: DraggablePanel.State) {
            }

            override fun onChangePercent(percent: Float) {
                alpha.alpha = 1 - percent
            }

        })
  • Add frame
        supportFragmentManager.beginTransaction().add(R.id.frameFirst, TopFragment()).commit() // add frame top
        supportFragmentManager.beginTransaction().add(R.id.frameSecond, BottomFragment()).commit() // add frame bottom

Alt text

  • Action
        btnMax.setOnClickListener { draggablePanel.maximize() }// maximize
        btnMin.setOnClickListener { draggablePanel.minimize() }//minimizeo
        btnClose.setOnClickListener { draggablePanel.close() }//close

Custom Detail code java

  • Custom
        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
        <com.hoanganhtuan95ptit.example.custom.DraggableSource
                android:id="@+id/draggablePanel"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:height_when_max="300dp"
                app:height_when_min="80dp"
                app:margin_bottom_when_min="8dp"
                app:margin_edge_when_min="8dp"
                app:percent_when_middle="0.9"
                app:state="MIN" />
  • Code
        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() }