Google Support design library

Deja un comentario

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

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.

    Snackbar.make(this.findViewById(android.R.id.content), "Mensaje",Snackbar.LENGTH_LONG)
            .show();

Screenshot_2015-06-30-12-50-55 (1)

En caso de que queramos interactuar con nuestro snackbar digamos un boton o algo podriamos hacerlo asi:

        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();

Screenshot_2015-06-30-12-57-34 (1)
Podemos tambien cambiar el color de nuestro snackbar de esta forma:

        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();

Screenshot_2015-06-30-14-25-59 (1)

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.

<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

FloattingButton

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
<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.


    @Override
    protected 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);
    }

<?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.

Screenshot_2015-06-30-20-16-31 (1)

Solo hay que cambiar un poco nuestro toolbar y agregar un elemento padre CollapsingToolbarLayout sobre el Toolbar.

    <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>

Screenshot_2015-06-30-20-26-12

NavigationView

Es esta libreria tenemos algo que remplazara el ListView que usábamos para listar los elementos del drawer menu en versiones anteriores.

<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

<?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

<?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="[email protected]" />
    </LinearLayout>

</RelativeLayout>

En nuestra actividad tendremos que implementar DrawerLayout.DrawerListener y NavigationView.OnNavigationItemSelectedListener.

DrawerLayout.DrawerListener: Para poder manejar los eventos del drawer.

@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.

    @Override
    public boolean onNavigationItemSelected(MenuItem menuItem) {

        switch(menuItem.getItemId()){
            default:
                //action
        }

        menuItem.setChecked(true);

        return false;
    }

Drawer

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.

Referencia

Google Design Library

Projecto con todos los ejemplos