DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
16-01-2017

Un bottom sheets no es más que una sección o panel deslizante, tal como lo es el Drawer, por lo tanto ahora contamos con una nuevo panel deslizante para agregar elementos o ampliar fácilmente funcionalidades de nuestra aplicación.

Este panel deslizante llamado bottom sheets cuenta con cinco estatus; en general cada uno de los estatus es bastante descriptivo pero aun así agregaremos una pequeña descripción a cada uno de ellos:

De los cuales a mi parecer los más importantes son estos dos:

Los cuales fueron explicados anteriormente y puedes ver ejemplificados en esta imagen:

Bottom sheets ejemplo en android

Cómo podrás darte cuenta, cuando el panel o bottom sheets está totalmente abierto, se establece el estado BottomSheetBehavior.STATE_EXPANDED, ahora si el mismo está plegado se establece el estado BottomSheetBehavior.STATE_COLLAPSED.

Para el caso de BottomSheetBehavior.STATE_COLLAPSED se muestra una pequeña sección del bottom sheets o panel, mientras que con BottomSheetBehavior.STATE_EXPANDED se muestra todo el layout que definamos aunque con el sistema de eventos podemos ocultar/mostrar layout fácilmente o realizar cualquier otra operación.

Cómo prácticamente todos los elementos en Android, son personalizables, por lo tanto podemos agregar cualquier elementos o cantidad de ellos así como un diseño y eventos personalizados contenidos dentro del panel; hasta hacer cosas como un reproductor personalizado como el mostrado en la imagen de presentación de esta entrada.

Creando el bottom sheets en Android

Desde nuestro layout de nuestra actividad principal lucirá como el siguiente:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:fitsSystemWindows="true"
   tools:context="samples.despotoski.nikola.com.bottomsheetsample.MainActivity">

   <android.support.design.widget.AppBarLayout
       android:id="@+id/app_bar"
       android:layout_width="match_parent"
       android:layout_height="@dimen/app_bar_height"
       android:fitsSystemWindows="true"
       android:theme="@style/AppTheme.AppBarOverlay">

       <android.support.design.widget.CollapsingToolbarLayout
           android:id="@+id/toolbar_layout"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:fitsSystemWindows="true"
           app:contentScrim="?attr/colorPrimary"
           app:layout_scrollFlags="scroll|exitUntilCollapsed">

           <android.support.v7.widget.Toolbar
               android:id="@+id/toolbar"
               android:layout_width="match_parent"
               android:layout_height="?attr/actionBarSize"
               app:layout_collapseMode="pin"
               app:popupTheme="@style/AppTheme.PopupOverlay" />

       </android.support.design.widget.CollapsingToolbarLayout>
   </android.support.design.widget.AppBarLayout>

   <include layout="@layout/bottom_sheet_content_view" />

</android.support.design.widget.CoordinatorLayout>

Cómo ves agregamos el código del bottom sheets a través de un include aunque puedes incluir el código directamente si así lo prefieres; en fin, nuestro layout de nuestro bottom sheets el cual lucirá de la siguiente manera:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:id="@+id/ll_bottom_sheet"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:background="@android:color/white"
   android:orientation="vertical"
   app:behavior_peekHeight="60dp"
   app:layout_behavior="@string/bottom_sheet_behavior">

   <TextView
       android:layout_width="match_parent"
       android:layout_height="60dp"
       android:background="#CCCCCC"
       android:gravity="center"
       android:text="@string/arrastrar"
       android:textAppearance="?android:attr/textAppearanceLarge" />

   <TextView
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:gravity="center"
       android:text="@string/contenido"
       android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>

Como puedes ver hay dos atributos "extraños" los cuales son:

Si no queremos que el bottom sheets ocupe todo el alto del contenedor, simplemente debemos variar el atributo android:layout_height del contenedor padre del panel que en nuestro ejemplo es el contenedor con el atributo android:id="@+id/ll_bottom_sheet".

Código java para el del bottom sheets en Android

Ahora vamos a ver algo de código Android el cual es necesario (lo mínimo) para indicar a Android que cree el bottom sheets a partir de los layouts anteriores; declaramos una variable de tipo BottomSheetBehavior:

private BottomSheetBehavior bottomSheetBehavior;

Ahora simplemente referenciamos nuestra vista y con el método from() creamos el bottom sheet; asi de simple:

LinearLayout linearLayout = (LinearLayout) findViewById(R.id.ll_bottom_sheet);

bottomSheetBehavior = BottomSheetBehavior.from(linearLayout);

Eventos del bottom sheets en Android

En cuanto a los eventos, podemos ejecutar secciones de código personalizadas en base al estado del panel con un código como el siguiente:

bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
   @Override
   public void onStateChanged(@NonNull View bottomSheet, int newState) {
       switch (newState) {
           case BottomSheetBehavior.STATE_EXPANDED:
               Log.i("BottomSheetBehavior", "STATE_EXPANDED");
               break;
           case BottomSheetBehavior.STATE_DRAGGING:
               Log.i("BottomSheetBehavior", "STATE_DRAGGING");
               break;
           case BottomSheetBehavior.STATE_COLLAPSED:
               Log.i("BottomSheetBehavior", "STATE_COLLAPSED");
               break;
           case BottomSheetBehavior.STATE_HIDDEN:
               Log.i("BottomSheetBehavior", "STATE_HIDDEN");
               break;
           case BottomSheetBehavior.STATE_SETTLING:
               Log.i("BottomSheetBehavior", "STATE_SETTLING");
               break;
       }
   }

   @Override
   public void onSlide(@NonNull View bottomSheet, float slideOffset) {
   }
});

Los estados de los mismos ya fueron explicados anteriormente; finalmente el código completo de nuestra actividad principal es:

public class MainActivity extends AppCompatActivity {

   private BottomSheetBehavior bottomSheetBehavior;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);

       Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
       setSupportActionBar(toolbar);
       LinearLayout linearLayout = (LinearLayout) findViewById(R.id.ll_bottom_sheet);

       bottomSheetBehavior = BottomSheetBehavior.from(linearLayout);
       bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
           @Override
           public void onStateChanged(@NonNull View bottomSheet, int newState) {
               switch (newState) {
                   case BottomSheetBehavior.STATE_EXPANDED:
                       Log.i("BottomSheetBehavior", "STATE_EXPANDED");
                       break;
                   case BottomSheetBehavior.STATE_DRAGGING:
                       Log.i("BottomSheetBehavior", "STATE_DRAGGING");
                       break;
                   case BottomSheetBehavior.STATE_COLLAPSED:
                       Log.i("BottomSheetBehavior", "STATE_COLLAPSED");
                       break;
                   case BottomSheetBehavior.STATE_HIDDEN:
                       Log.i("BottomSheetBehavior", "STATE_HIDDEN");
                       break;
                   case BottomSheetBehavior.STATE_SETTLING:
                       Log.i("BottomSheetBehavior", "STATE_SETTLING");
                       break;
               }
           }

           @Override
           public void onSlide(@NonNull View bottomSheet, float slideOffset) {
           }
       });
   }

   @Override
   public void onBackPressed() {
       if (bottomSheetBehavior.getState() != BottomSheetBehavior.STATE_HIDDEN) {
           bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
       } else {
           super.onBackPressed();
       }
   }

   @Override
   public boolean onCreateOptionsMenu(Menu menu) {

       getMenuInflater().inflate(R.menu.menu_bottom_sheet, menu);
       return true;
   }

   @Override
   public boolean onOptionsItemSelected(MenuItem item) {
       int id = item.getItemId();

       if (id == R.id.action_settings) {
           return true;
       }
       return super.onOptionsItemSelected(item);
   }
}

Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Creando increibles Drawer en Android con MaterialDrawer

Creando increibles Drawer en Android con MaterialDrawer

Templates para Android y iOS

Templates para Android y iOS

Telegram messenger para Android

Telegram messenger para Android

Algunos artículos que te pueden interesar

Creando un Navigation Drawer (menú lateral) en Android

Creando un Navigation Drawer (menú lateral) en Android

El Navigation Drawer es un panel que se expande y contrae desde el lado izquierdo de la pantalla y muestra un menú; en esta primera entrada veremos como crear un menú lateral básico en Android.

Andrés Cruz 22-10-2014

Primeros pasos con Wikitude en Android (parte 1)

Primeros pasos con Wikitude en Android (parte 1)

Se explica como dar los primeros pasos con Wikitude con la cual podemos crear aplicaciones con realidad aumentada con Android Studio, IOS, PhoneGap; se explica como descargar e instalar la SDK de Wikitude en Android Studio.

Andrés Cruz 25-05-2017

Elementos esenciales para desarrollar en Android

Elementos esenciales para desarrollar en Android

Esta entrada muestra los elementos esenciales para desarrollar en Android a través de una infografía.

Andrés Cruz 17-09-2015