• Stars
    star
    115
  • Rank 305,916 (Top 7 %)
  • Language
    Kotlin
  • License
    Apache License 2.0
  • Created over 5 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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