En vista de la nueva tendencia de material design y toda la movida, google libero en su ultima conferencia de desarrolladores una libreria para ayudar a developer con esto de componentes de UI mas complejos y ya digamos construidos ya listo para ser usados.
Componentes como los siguientes fueron agregados y/o mejorados en esta libreria:
- Snackbar
- FloatingActionButton
- Toolbar
- Collapsing Toolbars
- NavigationView
Para poder usar esta libreria tenemos que agregar esta dependencia a nuestro gradle file
001 | compile 'com.android.support:design:22.2.0' |
**Nota: Recuerden que tienen que actualizar su Android sdk y el repositorio de librerías locales, todo esto via el sdk manager.
Snackbar
Snackbar es como el sucesor de los Toast pero con super poderes, estos te permiten mostrar o dar cierto feedback al usuario y la posibilidad de que estos pueda interactuar con el mismo.
001 002 | Snackbar.make(this.findViewById(android.R.id.content), "Mensaje",Snackbar.LENGTH_LONG) .show(); |
En caso de que queramos interactuar con nuestro snackbar digamos un boton o algo podriamos hacerlo asi:
001 002 003 004 005 006 007 008 | Snackbar.make(this.findViewById(android.R.id.content), "Mensaje", Snackbar.LENGTH_LONG) .setAction("Click", new View.OnClickListener() { @Override public void onClick(View view) { //do some awesome stuff } }) .show(); |
Podemos tambien cambiar el color de nuestro snackbar de esta forma:
001 002 003 004 005 006 007 008 009 010 011 | Snackbar snack = Snackbar.make(this.findViewById(android.R.id.content), "Mensaje", Snackbar.LENGTH_LONG) .setAction("Click", new View.OnClickListener() { @Override public void onClick(View view) { //do some awesome stuff } });snack.getView().setBackgroundColor(Color.CYAN);snack.show(); |
Floating Action Button
Floating Action Button son no mas que botones utilizados para una acción en especifica en nuestra aplicación, normalmente usados para algo digamos importante y bien predecible en nuestra aplicación, como agregar, darle favoritos, cosas primordiales.
001 002 003 004 005 006 007 008 | <android.support.design.widget.FloatingActionButton android:id="@+id/floatingButton" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_gravity="end|bottom" android:layout_margin="25dp" android:src="@mipmap/icon" android:clickable="true"/> |
Con la propiedad layout_gravity podemos jugar con la posición en la que queramos colocar nuestro botón flotante, para agregar un evento a este boton es tan simple como setearle un actionListener
001 002 003 004 005 006 007 008 | FloatingActionButton button = (FloatingActionButton)findViewById(R.id.floating_button); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { //here } }); |
Toolbar
Este es el sucesor de el ActionBar que se mantuvo por muchas versiones de android. Con esta nueva libreria de android podemos lograr que nuestro toolbar se oculte mientras hacemos scrolling down y que se muestre en case de que sea scrolling up.
Para usar el toolbar es un poco mas complejo que los ejemplos anteriores, hay que setear nuestro estilo para que no utilice actionbars:
.Style.xml
001 002 003 004 005 | <style name="AppTheme.NoActionBar"> <!-- Both of these are needed --> <item name="windowActionBar">false</item> <item name="windowNoTitle">true</item> </style> |
En nuestra actividad tenemos que indicar que usaremos un toolbar como ActionBar.
001 002 003 004 005 006 007 008 009 | @Overrideprotected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_hide_toolbar); Toolbar toolbar = (Toolbar) findViewById(R.id.place_details_toolbar); setSupportActionBar(toolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true);} |
001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028 029 030 031 032 033 034 035 036 037 038 039 040 041 042 043 044 045 046 047 | <?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout ... > <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:id="@+id/appbar" android:layout_height="?attr/actionBarSize" > <android.support.v7.widget.Toolbar android:id="@+id/place_details_toolbar" android:layout_height="?attr/actionBarSize" android:layout_width="match_parent" app:layout_collapseMode="pin" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" > </android.support.v7.widget.Toolbar> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" > <LinearLayout ... > <TextView ... /> <TextView ... /> <TextView ... /> <TextView ... /> <TextView ... /> </LinearLayout> </android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout> |
**Nota: Extender nuestra Activity de AppCompatActivity y no de ActionarBarActivity que parece estar deprecada.
Quien Realiza la magia en este ejemplo es CoordinatorLayout, para que esto del scrolling funcione, tenemos que indicar a nuestro toolbar app:layout_scrollFlags=»scroll|enterAlways».
scroll: lo que quiere decir que la vista que use esto se ocultara mientras se realice scroll, si una vista no tiene este flag esta se quedara fija en su posición.
enterAlways: Esto indicara que una vez se realice un scroll hacia abajo la vista sera visible.
Collapsing Toolbars
Es basado en el toolbar y una imagen estilo google play o Play music.
Solo hay que cambiar un poco nuestro toolbar y agregar un elemento padre CollapsingToolbarLayout sobre el Toolbar.
001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028 029 030 031 032 033 | <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:id="@+id/appbar" android:layout_height="200dp" > <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" app:expandedTitleMarginStart="48dp" app:layout_scrollFlags="scroll|exitUntilCollapsed" > <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@mipmap/header_background" app:layout_collapseMode="parallax" /> <android.support.v7.widget.Toolbar android:id="@+id/place_details_toolbar" android:layout_height="?attr/actionBarSize" android:layout_width="match_parent" app:layout_collapseMode="pin" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" > </android.support.v7.widget.Toolbar> </android.support.design.widget.CollapsingToolbarLayout></android.support.design.widget.AppBarLayout> |
NavigationView
Es esta libreria tenemos algo que remplazara el ListView que usábamos para listar los elementos del drawer menu en versiones anteriores.
001 002 003 004 005 006 007 008 | <android.support.design.widget.NavigationView android:background="@android:color/white" android:id="@+id/navigation_view" android:layout_width="250dp" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/drawer_header_layout" app:menu="@menu/drawer"/> |
Tener en cuenta las propiedades app:headerLayout y app:menu=»@menu/drawer».
app:menu : Layout menu para nuestro drawer.
app:headerLayout : Header para nuestro menu.
menu/drawer.xml
001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 | <?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:checkableBehavior="single"> <item android:checked="true" android:icon="@mipmap/drawer_icon" android:title="Item" /> <item android:checked="true" android:icon="@mipmap/drawer_icon" android:title="Item 4" /> </group></menu> |
layout/Drawer header
001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028 029 030 031 032 | <?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:background="@mipmap/header_background" android:layout_height="192dp"> <View android:layout_width="match_parent" android:layout_height="match_parent" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_margin="@dimen/activity_horizontal_margin"> <TextView android:id="@+id/drawer_user_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Blashadow" /> <TextView android:id="@+id/drawer_user_email" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="blashadow@email.com" /> </LinearLayout></RelativeLayout> |
En nuestra actividad tendremos que implementar DrawerLayout.DrawerListener y NavigationView.OnNavigationItemSelectedListener.
DrawerLayout.DrawerListener: Para poder manejar los eventos del drawer.
001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 | @Override public void onDrawerSlide(View drawerView, float slideOffset) { } @Override public void onDrawerOpened(View drawerView) { } @Override public void onDrawerClosed(View drawerView) { } @Override public void onDrawerStateChanged(int newState) { } |
NavigationView.OnNavigationItemSelectedListener: Para manejar los eventos de clicks sobre los elementos del navigation view.
001 002 003 004 005 006 007 008 009 010 011 012 | @Overridepublic boolean onNavigationItemSelected(MenuItem menuItem) { switch(menuItem.getItemId()){ default: //action } menuItem.setChecked(true); return false;} |
Hasta aqui esta muestra de lo nuevo que nos brinda google en su nueva libreria de soporte, una vez ayudando al developer un poco con esto de los componentes de UI.