BottomSheets
Android library designed to enrich your application with the beautiful stutter-free Material Design Bottom Sheets
BottomSheets will help you make your application more appealing to your end users with its sleek stutter-free implementation of the Material Bottom Sheets.
Contents
- Demo
- Getting Started
- Structure
- Basic Custom Implementation
- Action Picker Implementation
- Custom Action Picker Implementation
- Advanced Use
- Contribution
- Hall of Fame
- License
Demo
- Demo Video
- Screenshots
Getting Started
- Make sure that you've added the
jcenter()repository to your top-levelbuild.gradlefile.
buildscript {
//...
repositories {
//...
jcenter()
}
//...
}- Add the library dependency to your module-level
build.gradlefile.Latest version:
ext {
//...
bottomSheetsLibraryVersion = "1.0.0"
}
dependencies {
//...
implementation "com.arthurivanets.bottomsheet:bottomsheets-core:1.0.0"
}- Enable the jetifier and androidX support in the top-level
gradle.propertiesfile.
//...
android.enableJetifier=true
android.useAndroidX=true
//....- Update your
compileSdkVersionin the module-levelbuild.gradlefile to 28+.
//...
android {
//...
compileSdkVersion 28
//...
}
//...- Update your
com.android.support.appcompat.*dependency to the newandroidx.appcompat.*alternative.
//...
dependencies {
//...
implementation "androidx.appcompat:appcompat:1.0.2"
//...
}
//...- Proceed with the implementation.
Structure
The library is comprised of 3 modules, namely:
bottomsheets-core- core functionality (Required)bottomsheets-sheets- concrete implementations of the common bottom sheet types (Optional)bottomsheets-ktx- common extensions and utils (Optional)
The first module - bottomsheets-core - is a base module the other modules depend on, it is the starting point for all of your custom bottom sheet implementations and is a required module. This module provides you with the base classes required for the bottom sheet implementation, such as the BaseBottomSheet.java which should be extended by your custom implementations of the bottom sheet and BottomSheet.java contract which exposes its supported public APIs, here you will also find the Config.java class which will help you customize the bottom sheet.
The second module - bottomsheets-sheets - is an optional module which includes the implementations of the most common bottom sheet types. Here you will find the ActionPickerBottomSheet.java, CustomActionPickerBottomSheet.java, as well as the coresponding configuration class - Config.java. This module depends on the bottomsheets-core and the Adapster library.
The third and last module - bottomsheets-ktx - is a collection of the extensions and general utils. Here you'll be able to find the BottomSheetsExtensions.kt which will simplify the creation of the common bottom sheet types in your Activities and Fragments. This module depends on the bottomsheets-core, bottomsheets-sheets and the Adapster library.
Basic Custom Implementation
IMPORTANT: In order to prevent the visual inconsistencies which might be caused by certain UI elements of the Application Theme, it is recommended that you specify the Application/Activity Theme without the Action Bar (any variant of the Theme.NoActionBar will suffice). You might also want to make your Status Bar translucent for more immersive experience.
In order to implement a basic custom bottom sheet you need to follow three simple steps:
1) Create a new class and extend it from the BaseBottomSheet.java.
2) Provide the custom content view for your bottom sheet in the onCreateSheetContentView(...).
3) Use the created bottom sheet in your Activity/Fragment.
So, let's create a custom bottom sheet class - SimpleCustomBottomSheet and provide our own content view:
Kotlin (click to expand)
````kotlin class SimpleCustomBottomSheet( hostActivity : Activity, config : BaseConfig = Config.Builder(hostActivity).build() ) : BaseBottomSheet(hostActivity, config) { override fun onCreateSheetContentView(context : Context) : View { return LayoutInflater.from(context).inflate( R.layout.view_simple_custom_bottom_sheet, this, false ) } } ````
Java (click to expand)
````java public class SimpleCustomBottomSheet extends BaseBottomSheet { public SimpleCustomBottomSheet(@NonNull Activity hostActivity) { this(hostActivity, new Config.Builder(hostActivity).build()); } public SimpleCustomBottomSheet(@NonNull Activity hostActivity, @NonNull BaseConfig config) { super(hostActivity, config); } @NonNull @Override public final View onCreateSheetContentView(@NonNull Context context) { return LayoutInflater.from(context).inflate( R.layout.view_simple_custom_bottom_sheet, this, false ); } } ````
And now let's use the created [`SimpleCustomBottomSheet`](https://github.com/arthur3486/bottomsheets/blob/master/app/src/main/java/com/arthurivanets/demo/ui/widget/SimpleCustomBottomSheet.kt) in our Activity:
Kotlin (click to expand)
````kotlin class MainActivity : AppCompatActivity() { private var bottomSheet : BaseBottomSheet? = null private fun showCustomBottomSheet() { //... bottomSheet = SimpleCustomBottomSheet(this).also(BottomSheet::show) } } ````
Java (click to expand)
````java public class MainActivity extends AppCompatActivity { private BottomSheet bottomSheet; private void showCustomBottomSheet() { //... bottomSheet = new SimpleCustomBottomSheet(this); bottomSheet.show(); } } ````
## Action Picker Implementation The implementation of the Action Picker Bottom Sheet becomes a trivial task with [`ActionPickerBottomSheet.java`](https://github.com/arthur3486/bottomsheets/blob/master/bottomsheets-sheets/src/main/java/com/arthurivanets/bottomsheets/sheets/ActionPickerBottomSheet.java), as all you need to do here is simply provide a list of options and a bottom sheet configuration. Let's use the [`ActionPickerBottomSheet.java`](https://github.com/arthur3486/bottomsheets/blob/master/bottomsheets-sheets/src/main/java/com/arthurivanets/bottomsheets/sheets/ActionPickerBottomSheet.java) in our Activity: * **With [`bottomsheets-ktx`](https://bintray.com/arthurimsacc/maven/bottomsheets-ktx/_latestVersion)**
Kotlin (click to expand)
````kotlin class MainActivity : AppCompatActivity() { private var bottomSheet : BottomSheet? = null private fun showActionsBottomSheet() { bottomSheet = showActionPickerBottomSheet( options = getActionOptions(), onItemSelectedListener = OnItemSelectedListener { // do something... } ) } fun getActionOptions() : List
Java (click to expand)
````java public class MainActivity extends AppCompatActivity { private BottomSheet bottomSheet; private void showActionsBottomSheet() { bottomSheet = BottomSheetsUtils.showActionPickerBottomSheet( this, getActionOptions(), new OnItemSelectedListener
* **Without [`bottomsheets-ktx`](https://bintray.com/arthurimsacc/maven/bottomsheets-ktx/_latestVersion)**
Kotlin (click to expand)
````kotlin class MainActivity : AppCompatActivity() { private var bottomSheet : BottomSheet? = null private fun showActionsBottomSheet() { bottomSheet = ActionPickerBottomSheet.init( this, getActionOptions().map(::ActionItem), Config.Builder(this).build() ) bottomSheet.setOnItemSelectedListener { // do something... } bottomSheet.show() } fun getActionOptions() : List
Java (click to expand)
````java
public class MainActivity extends AppCompatActivity {
private BottomSheet bottomSheet;
private void showActionsBottomSheet() {
bottomSheet = ActionPickerBottomSheet.init(
this,
getActionOptions(),
new Config.Builder(this).build()
);
bottomSheet.setOnItemSelectedListener(new OnItemSelectedListener
## Custom Action Picker Implementation The implementation of the Custom Action Picker Bottom Sheet is not that much different from the [`Action Picker Implemenetation`](#action-picker-implementation), you just need to use the [`CustomActionPickerBottomSheet.java`](https://github.com/arthur3486/bottomsheets/blob/master/bottomsheets-sheets/src/main/java/com/arthurivanets/bottomsheets/sheets/CustomActionPickerBottomSheet.java) instead of the [`ActionPickerBottomSheet.java`](https://github.com/arthur3486/bottomsheets/blob/master/bottomsheets-sheets/src/main/java/com/arthurivanets/bottomsheets/sheets/ActionPickerBottomSheet.java) in conjunction with your custom [`BaseActionItem`](https://github.com/arthur3486/bottomsheets/blob/master/bottomsheets-sheets/src/main/java/com/arthurivanets/bottomsheets/sheets/adapters/actionpicker/BaseActionItem.java)-based Items and that's it. See the example of a [Custom Action Picker in Action](https://github.com/arthur3486/bottomsheets/blob/master/app/src/main/java/com/arthurivanets/demo/ui/MainActivity.kt#L99). ## Advanced Use See the [Sample app](https://github.com/arthur3486/bottomsheets/tree/master/app/src/main/java/com/arthurivanets/demo). ## Contribution See the [CONTRIBUTING.md](CONTRIBUTING.md) file. ## Hall of Fame
|
Reminder |
|
Owly |