android android-5.0-lollipop material-design floating-action-button

Android Cómo implementar la hoja inferior de los documentos de diseño de materiales



android-5.0-lollipop material-design (7)

¿Cómo implementan la especificación de la hoja inferior? http://www.google.com/design/spec/components/bottom-sheets.html

La nueva actualización de Google Drive muestra esto con el botón de acción flotante presionar ->

Por supuesto, las especificaciones nunca dicen nada sobre las esquinas redondeadas, independientemente de lo que sea posible hacer, solo no estoy seguro de cómo hacerlo. Actualmente utiliza la biblioteca AppCompat y el objetivo establecido en 21.

Gracias

Editar

El BottomSheet ahora es parte de la android-support-library . Ver la respuesta de John Shelleys .

Desafortunadamente, actualmente no hay una forma "oficial" de cómo hacer esto (al menos ninguna que yo sepa).
Afortunadamente, hay una biblioteca llamada "BottomSheet" (clic) que imita el aspecto de BottomSheet y es compatible con Android 2.1 y BottomSheet posteriores.

En el caso de la aplicación Drive, así es como se vería el código con esta biblioteca:

new BottomSheet.Builder(this, R.style.BottomSheet_Dialog) .title("New") .grid() // <-- important part .sheet(R.menu.menu_bottom_sheet) .listener(new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { // TODO } }).show();

menu_bottom_sheet (básicamente un recurso /res/menu/*.xml estándar)

<menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/folder" android:title="Folder" android:icon="@drawable/ic_action_folder" /> <item android:id="@+id/upload" android:title="Upload" android:icon="@drawable/ic_action_file_upload" /> <item android:id="@+id/scan" android:title="Scan" android:icon="@drawable/ic_action_camera_alt" /> </menu>

La salida se ve así:

Lo cual, creo, se acerca bastante al original. Si no está satisfecho con los colores, puede personalizarlo; vea esto (haga clic) .

¡Respondiendo mi propia pregunta para que los desarrolladores sepan que la nueva biblioteca de soporte proporciona esto finalmente! ¡Todos saludan al poderoso Google!

Un ejemplo del Blog del desarrollador de Android :

// The View with the BottomSheetBehavior View bottomSheet = coordinatorLayout.findViewById(R.id.bottom_sheet); BottomSheetBehavior behavior = BottomSheetBehavior.from(bottomSheet); behavior.setBottomSheetCallback(new BottomSheetCallback() { @Override public void onStateChanged(@NonNull View bottomSheet, int newState) { // React to state change } @Override public void onSlide(@NonNull View bottomSheet, float slideOffset) { // React to dragging events } });

La respuesta anterior de @reVerse sigue siendo una opción válida, pero es bueno saber que hay un estándar que Google también admite.

Ahora puede usar la API oficial BottomSheetBehavior de la biblioteca de soporte de Android 23.2.

A continuación se muestra un fragmento de código de muestra

bottomSheetBehavior = BottomSheetBehavior.from(findViewById(R.id.bottomSheet)); case R.id.expandBottomSheetButton: bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED); break; case R.id.collapseBottomSheetButton: bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED); break; case R.id.hideBottomSheetButton: bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN); break; case R.id.showBottomSheetDialogButton: new MyBottomSheetDialogFragment().show(getSupportFragmentManager(), "sample");

Consulte el tutorial de YouTube BottomSheet de Android para comprenderlo.

Estas son algunas de las otras opciones:

  • Flipboard tiene uno disponible, sin embargo, la actividad de incrustación debe modificarse para que funcione la hoja inferior.
  • bottomsheet tutti-ch: se ha extraído de ResolverActivity de Android Repo y no es necesario modificar la actividad de lanzamiento.

Siguiendo la publicación del blog: http://android-developers.blogspot.com/2016/02/android-support-library-232.html

Mi xml terminó luciendo así:

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/coordinator_layout" xmlns:app="http://schemas.android.com/apk/res-auto"> <LinearLayout android:id="@+id/bottom_sheet" android:layout_width="match_parent" android:layout_height="100dp" android:orientation="horizontal" app:layout_behavior="android.support.design.widget.BottomSheetBehavior"> <ImageView android:src="@android:drawable/ic_input_add" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> </android.support.design.widget.CoordinatorLayout>

Y en mi onCreateView de mi fragmento:

coordinatorLayout = (CoordinatorLayout)v.findViewById(R.id.coordinator_layout); View bottomSheet = coordinatorLayout.findViewById(R.id.bottom_sheet); BottomSheetBehavior behavior = BottomSheetBehavior.from(bottomSheet); behavior.setPeekHeight(100); behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() { @Override public void onStateChanged(@NonNull View bottomSheet, int newState) { // React to state change } @Override public void onSlide(@NonNull View bottomSheet, float slideOffset) { // React to dragging events } });

El valor predeterminado de setPeekHeight es 0, por lo que si no lo configura, no podrá ver su vista.