Giter VIP home page Giter VIP logo

bottomsheet's Introduction

#BottomSheet BottomSheet is an Android component which presents a dismissible view from the bottom of the screen. BottomSheet can be a useful replacement for dialogs and menus but can hold any view so the use cases are endless. This repository includes the BottomSheet component itself but also includes a set of common view components presented in a bottom sheet. These are located in the commons module.

BottomSheet has been used in production at Flipboard for a while now so it is thoroughly tested. Here is a GIF of it in action inside of Flipboard!

FlipUI gif

##Installation If all you want is the BottomSheet component and don't need things from commons you can skip that dependency.

dependencies {
    compile 'com.flipboard:bottomsheet-core:1.0.0'
    compile 'com.flipboard:bottomsheet-commons:1.0.0' // optional
}

##Getting Started Get started by wrapping your layout in a BottomSheet. So if you currently have this:

<LinearLayout
	android:id="@+id/root"
	android:orientation="vertical"
	android:layout_width="match_parent"
	android:layout_height="match_parent">

	<View
		android:id="@+id/view1"
		android:layout_width="match_parent"
		android:layout_height="match_parent"/>

	<View
		android:id="@+id/view2"
		android:layout_width="match_parent"
		android:layout_height="match_parent"/>

</LinearLayout>

You would have to update it to look like this:

<com.flipboard.bottomsheet.BottomSheet
	android:id="@+id/bottomsheet"
	android:layout_width="match_parent"
	android:layout_height="match_parent">

	<LinearLayout
		android:id="@+id/root"
		android:orientation="vertical"
		android:layout_width="match_parent"
		android:layout_height="match_parent">

		<View
			android:id="@+id/view1"
			android:layout_width="match_parent"
			android:layout_height="match_parent"/>

		<View
			android:id="@+id/view2"
			android:layout_width="match_parent"
			android:layout_height="match_parent"/>

	</LinearLayout>

</com.flipboard.bottomsheet.BottomSheet>

Back in your activity or fragment you would get a reference to the BottomSheet like any other view.

BottomSheet bottomSheet = (BottomSheet) findViewById(R.id.bottomsheet);

Now all you need to do is show a view in the bottomSheet:

bottomSheet.showWithSheetView(LayoutInflater.from(context).inflate(R.layout.my_sheet_layout, bottomSheet, false));

You could also use one of the sheet views from the commons module.

bottomSheet.showWithSheetView(new IntentPickerSheetView(this, shareIntent, "Share with...", new IntentPickerSheetView.OnIntentPickedListener() {
	@Override
	public void onIntentPicked(Intent intent) {
		bottomSheet.dismissSheet();
		startActivity(intent);
	}
});

That's it for the simplest of use cases. Check out the API documentation below to find out how to customize BottomSheet to fit your use cases.

##API ###BottomSheet

/**
* Set the presented sheet to be in an expanded state.
*/
public void expandSheet();

/**
* Set the presented sheet to be in a peeked state.
*/
public void peekSheet();

/**
* @return The peeked state translation for the presented sheet view. Translation is counted from the bottom of the view.
*/
public float getPeekSheetTranslation();

/**
* @return The maximum translation for the presented sheet view. Translation is counted from the bottom of the view.
*/
public float getMaxSheetTranslation();

/**
* @return The currently presented sheet view. If no sheet is currently presented null will returned.
*/
public View getContentView();

/**
* @return The currently presented sheet view. If no sheet is currently presented null will returned.
*/
public View getSheetView();

/**
* Set the content view of the bottom sheet. This is the view which is shown under the sheet
* being presented. This is usually the root view of your application.
*
* @param contentView The content view of your application.
*/
public void setContentView(View contentView);

/**
* Convenience for showWithSheetView(sheetView, null, null)
*/
public void showWithSheetView(View sheetView);

/**
* Convenience for showWithSheetView(sheetView, viewTransformer, null)
*/
public void showWithSheetView(View sheetView, ViewTransformer viewTransformer);

/**
* Present a sheet view to the user.
*
* @param sheetView The sheet to be presented.
* @param viewTransformer The view transformer to use when presenting the sheet.
* @param onSheetDismissedListener The listener to notify when the sheet is dismissed.
*/
public void showWithSheetView(View sheetView, ViewTransformer viewTransformer, OnSheetDismissedListener onSheetDismissedListener);

/**
* Dismiss the sheet currently being presented.
*/
public void dismissSheet();

/**
* @return The current state of the sheet.
*/
public State getState();

/**
* @return Whether or not a sheet is currently presented.
*/
public boolean isSheetShowing();

/**
* Set the default view transformer to use for showing a sheet. Usually applications will use
* a similar transformer for most use cases of bottom sheet so this is a convenience instead of
* passing a new transformer each time a sheet is shown. This choice is overridden by any
* view transformer passed to showWithSheetView().
*
* @param defaultViewTransformer The view transformer user by default.
*/
public void setDefaultViewTransformer(ViewTransformer defaultViewTransformer);

/**
* Enable or disable dimming of the content view while a sheet is presented. If enabled a
* transparent black dim is overlaid on top of the content view indicating that the sheet is the
* foreground view. This dim is animated into place is coordination with the sheet view.
* Defaults to true.
*
* @param shouldDimContentView whether or not to dim the content view.
*/
public void setShouldDimContentView(boolean shouldDimContentView);

/**
* @return whether the content view is being dimmed while presenting a sheet or not.
*/
public boolean shouldDimContentView();

/**
* Enable or disable the use of a hardware layer for the presented sheet while animating.
* This settings defaults to true and should only be changed if you know that putting the
* sheet in a layer will negatively effect performance. One such example is if the sheet contains
* a view which needs to frequently be re-drawn.
*
* @param useHardwareLayerWhileAnimating whether or not to use a hardware layer.
*/
public void setUseHardwareLayerWhileAnimating(boolean useHardwareLayerWhileAnimating);

/**
* Set a OnSheetStateChangeListener which will be notified when the state of the presented sheet changes.
*
* @param onSheetStateChangeListener the listener to be notified.
*/
public void setOnSheetStateChangeListener(OnSheetStateChangeListener onSheetStateChangeListener);

###OnSheetDismissedListener

/**
 * Called when the presented sheet has been dismissed.
 *
 * @param bottomSheet The bottom sheet which contained the presented sheet.
 */
void onDismissed(BottomSheet bottomSheet);

###ViewTransformer

/**
 * Called on every frame while animating the presented sheet. This method allows you to coordinate
 * other animations (usually on the content view) with the sheet view's translation.
 *
 * @param translation The current translation of the presented sheet view.
 * @param maxTranslation The max translation of the presented sheet view.
 * @param peekedTranslation The peeked state translation of the presented sheet view.
 * @param parent The BottomSheet presenting the sheet view.
 * @param view The content view to transform.
 */
void transformView(float translation, float maxTranslation, float peekedTranslation, BottomSheet parent, View view);

##Common Components These are located in the optional bottomsheet-commons dependency and implement common use cases for bottom sheet.

###IntentPickerSheetView This component presents an intent chooser in the form of a BottomSheet view. Give it an intent such as a share intent and let the user choose what activity they want to share the intent with in a BottomSheet. Here is a GIF of it in action!

IntentPickerSheetView gif

Here is a sample use case of this component taken from the sample application.

IntentPickerSheetView intentPickerSheet = new IntentPickerSheetView(MainActivity.this, shareIntent, "Share with...", new IntentPickerSheetView.OnIntentPickedListener() {
	@Override
	public void onIntentPicked(Intent intent) {
		bottomSheet.dismissSheet();
		startActivity(intent);
	}
});
// Filter out built in sharing options such as bluetooth and beam.
intentPickerSheet.setFilter(new IntentPickerSheetView.Filter() {
	@Override
	public boolean include(IntentPickerSheetView.ActvityInfo info) {
		return !info.componentName.getPackageName().startsWith("com.android");
	}
});
// Sort activities in reverse order for no good reason
intentPickerSheet.setSortMethod(new Comparator<IntentPickerSheetView.ActvityInfo>() {
	@Override
	public int compare(IntentPickerSheetView.ActvityInfo lhs, IntentPickerSheetView.ActvityInfo rhs) {
		return rhs.label.compareTo(lhs.label);
	}
});
bottomSheet.showWithSheetView(intentPickerSheet);

##Contributing We welcome pull requests for bug fixes, new features, and improvements to BottomSheet. Contributors to the main BottomSheet repository must accept Flipboard's Apache-style Individual Contributor License Agreement (CLA) before any changes can be merged.

bottomsheet's People

Contributors

zacsweers avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.