🦋 Expands and collapses a layout horizontally and vertically sequentially.
Inspired by "Viewing Labels" from the Trello.
Add below codes to your root build.gradle
file (not your module build.gradle file).
allprojects {
repositories {
mavenCentral()
}
}
And add a dependency code to your module's build.gradle
file.
dependencies {
implementation "com.github.skydoves:doublelift:1.0.4"
}
Add following XML namespace inside your XML layout file.
xmlns:app="http://schemas.android.com/apk/res-auto"
Here is a basic example of implementing DoubleLiftLayout
.
<com.skydoves.doublelift.DoubleLiftLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:doubleLift_foldedWidth="50dp" // sets the width size when collapsed.
app:doubleLift_foldedHeight="10dp" // sets the height size when collapsed.
app:doubleLift_horizontalDuration="400" // sets the duration of horizontal lifting.
app:doubleLift_verticalDuration="300" // sets the duration of vertical lifting.
app:doubleLift_cornerRadius="4dp" // sets the corner radius.
app:doubleLift_autoExpand="false" // expand initially or not.
app:doubleLift_startOrientation="horizontal"
app:doubleLift_animation="bounce" // sets the lifting animation when expanding and collapsing
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Feature"
android:textColor="@color/white_87"
android:textStyle="bold" />
// something complicated views or layouts
</com.skydoves.doublelift.DoubleLiftLayout>
We can create an instance of DoubleLiftLayout
using the DoubleLiftLayout.Builder
class.
DoubleLiftLayout doubleLiftLayout = new DoubleLiftLayout.Builder(context)
.setFoldedWidth(200)
.setFoldedHeight(100)
.setCornerRadius(6)
.setLiftHorizontalDuration(400)
.setLiftVerticalDuration(200)
.setOnExpandListener(new OnExpandListener() {
@Override public void onExpand(boolean isExpanded) {
toast("expanded: " + isExpanded);
}
}).build();
val myDoubleLiftLayout = DoubleLiftLayout.Builder(context)
.setFoldedWidth(200)
.setFoldedHeight(100)
.setCornerRadius(6)
.setLiftHorizontalDuration(400)
.setLiftVerticalDuration(200)
.setOnExpandListener { toast("expanded: $it") }
.build()
Or we can create using the kotlin-dsl.
val myDoubleLiftLayout = doubleLiftLayout(this) {
setFoldedWidth(200)
setFoldedHeight(100)
setCornerRadius(6)
setLiftHorizontalDuration(400)
setLiftVerticalDuration(200)
setOnExpandListener { toast("expanded: $it") }
}
We can expand and collapse using the below methods.
doubleLiftLayout.expand(); // expand the width and height size sequentially.
doubleLiftLayout.collapse(); // collapse the width and height size sequentially.
or we can do something after expanded using lambda in Kotlin.
doubleLiftLayout.expand { toast("expanded!") }
doubleLiftLayout.collapse { toast("collapsed!") }
We can listen to the DoubleLiftLayout
is expanded or collapsed.
.setOnExpandListener(new OnExpandListener() {
@Override public void onExpand(boolean isExpanded) {
toast("expanded: " + isExpanded);
}
}
doubleLiftLayout.onExpandListener = object : OnExpandListener {
override fun onExpand(isExpanded: Boolean) {
toast("Expanded : $it")
}
}
// or we can listen using a lambda expression.
doubleLiftLayout.setOnExpandListener {
if (it) {
toast("expanded")
} else {
toast("collapse")
}
}
We can customize the expanding and collapsing animation.
LiftAnimation.NORMAL
LiftAnimation.ACCELERATE
LiftAnimation.BOUNCE
NORMAL | ACCELERATE | BOUNCE |
---|---|---|
Attributes | Type | Default | Description |
---|---|---|---|
foldedWidth | Dimension | 0 | sets the width size when collapsed. |
foldedHeight | Dimension | 0 | ets the height size when collapsed. |
horizontalDuration | Long | 500L | sets the duration of horizontal lifting. |
verticalDuration | Long | 300L | sets the duration of vertical lifting. |
cornerRadius | Dimension | 4dp | sets the corner radius. |
autoExpand | Boolean | false | invkoe expand() method initially or not. |
startOrientation | LiftStartOrientation | LiftStartOrientation.HORIZONTAL | sets the starting orientation of the lifting. |
animation | LiftAnimation | LiftAnimation.NORMAL | sets the lifting animation when expanding and collapsing |
Support it by joining stargazers for this repository. ⭐
And follow me for my next creations! 🤩
Copyright 2019 skydoves (Jaewoong Eum)
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.