Skip to content

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

License

Notifications You must be signed in to change notification settings

hoanganhtuan95ptit/DraggablePanel

Repository files navigation

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'
	}
  • 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
        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() }

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages