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

Telegram messenger para Android

Telegram messenger para Android

Librería oficial de PayPal para Android

Librería oficial de PayPal  para Android

Creando increibles Drawer en Android con MaterialDrawer

Creando increibles Drawer en Android con MaterialDrawer

Algunos artículos que te pueden interesar

Primeros pasos con Android Studio

Primeros pasos con Android Studio

Esta entrada ofrece una introducción para Android Studio; veremos como instalarlo, sus herramientas, crear proyectos, los archivos Gradle, combinación de teclas, etc.

Andrés Cruz 17-08-2015

Cómo establecer fragments en los tags en Android

Cómo establecer fragments en los tags en Android

Se explica un simple caso de cómo podemos establecer varios fragments en tags y de esta forma crear vistas deslizables, además de poder cambiar de un fragment a otro cuando lo deseemos.

Andrés Cruz 13-07-2016

Usar la consola de salida en Eclipse System.out.println y Log

Usar la consola de salida en Eclipse System.out.println y Log

La API de Android incorpora la clase Log para desplegar distinto tipos de información.

Andrés Cruz 13-02-2014