Evolución Android en Material Design

Evolución Android en Material Design

SegundaActivity de Androidinight meetup en la Ciudad de México

9f523401a845a29c93ff73cde4c3db2b?s=128

Erik Jhordan Rey

July 07, 2015
Tweet

Transcript

  1. GDG Androidtitlan Androidinights SegundaActivity.java

  2. Evolución Android en Material Design Erik Jhordan Gonzalez Reyes

  3. Aprenderemos • Fases de Android en Material Design • ¿Qué

    es Design Library? • Explorar componentes de Design Library • CodeLab Design Library • Preguntas y Respuestas
  4. Fases de Android en Material Design Material Design

  5. • Toolbar • ActionBarDrawerToogle • Palette Fase 1

  6. #Android Developers https://github.com/erikcaffrey/MaterialDesign-NavigationDrawerToggle

  7. • RecyclerView • Cardview • Swiperefreshlayout Fase 2

  8. #Android Developers https://github.com/erikcaffrey/Androidtitlan-MaterialDesign

  9. • NavigationView • TextInputLayout • FloatingButton • SnackBar • TabLayout

    • Coordinator Layout • AppBarLayout • CollapsingToolbarLayout Fase 3
  10. Design Library Android Support Library

  11. Navigation View Navigation Drawer Navigation View Es un componente importante

    dentro de una aplicación android y se ha convertido en una sencilla forma de navegar dentro de una aplicación principalmente para nuevos usuarios. Hace más fácil la creación de un Navigation Drawer ya que tiene la habilidad de inflar sus ítems a través de un recurso menu.
  12. Antes de com.android.support:design:22.2.0 Navigation Drawer

  13. #Android Developers

  14. #Android Developers

  15. #Android Developers

  16. #Android Developers

  17. #Android Developers

  18. La creación de un Navigation Drawer debe ser fácil !

    #Android Developers
  19. Usando android.support.design.widget.NavigationView Navigation View

  20. #Android Developers

  21. #Android Developers

  22. #Android Developers

  23. Floating labels for editing text TextInputLayout Los EditText han mejorado

    en su aspecto material design antes el texto de sugerencia se ocultaba al escribir un carácter. Ahora se puede hacer uso de android.support.design.widget.TextInputLayout para envolver un EditText de tal manera que al ingresar algún texto la etiqueta de sugerencia tendrá un efecto flotante quedando por encima del EditText y así el usuario nunca perderá el contexto de lo que está escribiendo. #Android Developers
  24. Usando android.support.design.widget.TextInputLayout TextInputLayout

  25. #Android Developers

  26. Floating Action Button Se encuentra disponible dentro de la biblioteca

    Design Library usando por defecto el accent color del tema, denota una acción primaria en su interfaz y para implementarlo solo necesitamos usar android.support.design.widget.FloatingActionButton. #Android Developers
  27. Usando android.support.design.widget.FloatingActionButton FloatingActionButton

  28. • Size app:fabSize="normal" or app:fabSize="mini" • Shadow app:elevation= "6dp" app:pressedTranslationZ=

    "12dp" *Lollipop Bug shadow solución app:borderWidth="0" #Android Developers
  29. Snackbar Es un mensaje que proporciona una rápida retroalimentación acerca

    de una operación, se muestran en la parte inferior de la pantalla y contienen texto con una acción individual opcional.Desaparecen automáticamente después de la duración de tiempo determinado por la animación de la pantalla. Ademá los usuarios pueden eliminarlo antes de que el tiempo de espera termine. #Android Developers
  30. Usando SnackBar

  31. #Android Developers

  32. Tabs El cambio entre diferentes secciones de una aplicación a

    través de las pestañas no es un nuevo concepto de material design se mantienen como un patrón de navegación en el nivel superior para la organización de diferentes agrupaciones de contenido. Ahora es más facíl hacer tabs con android.support.design.widget.TabLayout. #Android Developers
  33. Antes de com.android.support:design:22.2.0 Tabs

  34. #Android Developers

  35. #Android Developers

  36. #Android Developers

  37. Usando android.support.design.widget.TabLayout TabLayout

  38. • Scroll app:tabMode"scrollable" • TabGravity app:tabGravity="fill" #Android Developers

  39. #Android Developers • Scroll app:tabMode"scrollable" • TabGravity app:tabGravity="fill"

  40. Visuals and Motions

  41. Coordinator Layout Es un FrameLayout con super poderes, el cual

    tiene la habilidad de manejar la interacción entre vistas hijas teniendo el control de sus eventos (como scroll), también se puede visualizar como un contenedor que permite a vistas hijas anidarse a este layout. Por ejemplo cuando hacemos un scroll a una de sus vistas anidadas (como un recyclerview o NestedScrollView) es lo suficiente inteligente para saber que debe colapsar el toolbar u ocultarse. #Android Developers
  42. Usando android.support.design.widget.CoordinatorLayout Coordinator Layout

  43. #Android Developers

  44. AppBarLayout Es un LinearLayout vertical que permite al Toolbar y

    otras vistas hijas (como un TabLayout) responder ante algún evento de scroll, las cuales deben proporcionar un comportamiento de desplazamiento haciendo uso de setScrollFlags o app:layout_scrollFlags. #Android Developers Está fuertemente ligado a un Coordinador Layout ya que es usado como un hijo directo.
  45. Usando android.support.design.widget.AppBarLayout AppBarLayout

  46. #Android Developers

  47. CollapsingToolbarLayout Envuelve un Toolbar y controla la forma en que

    colapsa y está diseñado para ser usado como un hijo directo de AppBarLayout. Un Toolbar puede colapsar de diversas maneras: • Fijar componentes a la parte superior de la pantalla mientras colapsa • Introduciendo parallax scrolling of components such as an ImageView • Añadiendo un scrim color cuando la vista se colapsa de forma parcial. #Android Developers Está fuertemente ligado a un AppBarLayout el cual también está ligado de igual manera a un Coordinador Layout ya que es usado como un hijo directo.
  48. Usando android.support.design.widget.CollapsingToolbarLayout CollapsingToolbarLayout

  49. #Android Developers

  50. #Android Developers https://github.com/erikcaffrey/AndroidDesignSupportLibrary

  51. Tips • Android Developers usalo como diccionario • Una android

    feature o lectura por noche antes de dormir • Crea y comparte código con la comunidad • Si usas librerías intenta entender cómo funciona • Crea códigos para tus compañeros no para la máquina
  52. Log.i(“By GDG Androidtitlan”,”Gracias”); +Erik Jhordan Rey Caffrey @ErikJhordan_Rey erikcaffrey10@gmail.com #siganprogramando

  53. /* Manos a la Obra */

  54. Material Design 2015 CodeLab Es tu turno!!

  55. #Android Developers Usa tus habilidades y Genera una vista con

    Design Library. Nota: Si eres nuevo y sientes que te cuesta algo de trabajo no te preocupes hecha un vistazo. http://gdgandroidtitlan.blogspot.mx/
  56. #Android Developers Crea un nuevo proyecto y asigna un nombre!

  57. Elige mínimo SDK google recomienda api 14. #Android Developers

  58. Elige Blank Activity comenzaremos desde cero. #Android Developers

  59. #Android Developers Asigna un nombre a tu primera Actividad

  60. #Android Developers Genial ahora debe lucir así!

  61. #Android Developers Entra al build.gradle! Agregamos Design Library Recuerda escribiri

    tu propio codigo solo es una guia.
  62. #Android Developers Genera una vista como se muestra en la

    imagen y nombra un nuevo XML en mi caso de llama fragment_tweet.xml Estructura en orden de Jerarquia android.support.design.widget.CoordinatorLayout android.support.design.widget.AppBarLayout android.support.design.widget.CollapsingToolbarLayout android.support.v7.widget.Toolbar android.support.v7.widget.RecyclerView android.support.design.widget.FloatingActionButon
  63. #Android Developers Debe quedar algo asi! fragment_tweet.xml <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"

    android:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="@dimen/detail_backdrop_height" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollFlags="scroll|exitUntilCollapsed" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginStart="48dp" app:expandedTitleMarginEnd="64dp"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:layout_collapseMode="pin" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerview_tweets" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> <android.support.design.widget.FloatingActionButton android:layout_height="wrap_content" android:layout_width="wrap_content" app:layout_anchor="@id/appbar" app:layout_anchorGravity="bottom|right|end" android:src="@drawable/ic_action_add" android:layout_margin="@dimen/fab_margin" app:fabSize="mini" android:clickable="true"/> </android.support.design.widget.CoordinatorLayout>
  64. #Android Developers Genera una lista customizada necesitas crear un Adapter

    • Necesitas un layout que represente tu item en mi caso item_tweet.xml • Necesitas un Adaptador en mi caso se llama TweetAdapter.java • Un lugar donde se hará la mezcla de los ingredientes
  65. #Android Developers Genera una vista que será como se muestra

    en la imagen y nombra un nuevo XML en mi caso de llama item_tweet.xml esta vista será el item de nuestra lista mejor dicho de nuestro recyclerView. Widgets Nota: recuerda que hay diferentes formas de crear una vista usando diferentes vistas • TextView Username • TextView Tweet description • Textview Datos extras • Usa un ImageView (customizalo o usa un librería para dar efecto circular) Crea un Item ...
  66. #Android Developers Debe quedar algo asi! item_tweet.xml <?xml version="1.0" encoding="utf-8"?>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="16dp"> <de.hdodenhof.circleimageview.CircleImageView android:id="@+id/circule_view_photo" android:layout_width="@dimen/list_item_avatar_size" android:layout_height="@dimen/list_item_avatar_size" android:layout_marginRight="@dimen/spacing_medium" /> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical"> <TextView android:id="@+id/txt_user" android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="16sp" android:textColor="?attr/colorPrimary" android:text="@string/user"/> <TextView android:id="@+id/txt_tweet" android:layout_width="match_parent" android:layout_height="wrap_content" android:maxLines="1" android:textSize="14sp" android:text="@string/tweet_txt"/> <TextView android:id="@+id/txt_extra" android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="14sp" android:text="@string/extras_tweet"/> </LinearLayout> </LinearLayout>
  67. #Android Developers Creamos el adaptador que será quien decida que

    item se pinta. Crea un adapter ... public class TweetAdapter extends RecyclerView.Adapter<TweetAdapter.ViewHolder>{ List<Tweet> tweetList; public TweetAdapter(){ tweetList = new ArrayList<>(); } @Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_tweet,parent,false); return new ViewHolder(view); } @Override public void onBindViewHolder(ViewHolder holder, int position) { final Tweet tweet = getListItems().get(position); holder.txtUser.setText(tweet.user.name); holder.txtTweet.setText(tweet.text); holder.txtExtra.setText("Favorito" + " " +Integer.toString(tweet.favoriteCount) + " " + " retweets " +Integer.toString(tweet.retweetCount) ); Glide.with(holder.circleImageViewUser.getContext()).load(tweet.user.profileImageUrl) .fitCenter().into(holder.circleImageViewUser); } } } @Override public int getItemCount() { return tweetList.size(); } public void setListItems(List<Tweet> listItems){ if(listItems != null){ clear(); this.tweetList.addAll(listItems); notifyDataSetChanged(); } } public List<Tweet> getListItems(){ return this.tweetList; } public void clear(){ if(this.tweetList != null){ this.tweetList.clear(); notifyDataSetChanged(); } } public class ViewHolder extends RecyclerView.ViewHolder{ @Bind(R.id.txt_user) TextView txtUser; @Bind(R.id.txt_tweet) TextView txtTweet; @Bind(R.id.txt_extra) TextView txtExtra; @Bind(R.id.circule_view_photo) CircleImageView circleImageViewUser; public ViewHolder(View view){ super(view); ButterKnife.bind(this, view); } }
  68. #Android Developers public class TweetFragment extends FragmentBase { public static

    TweetFragment getInstance() { return new TweetFragment(); } @Bind(R.id.recyclerview_tweets) RecyclerView recyclerViewTweets; @Bind(R.id.collapsing_toolbar) CollapsingToolbarLayout collapsingToolbarLayout; TweetAdapter tweetAdapter; @Override public void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); tweetAdapter = new TweetAdapter(); } @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_tweet, container, false); settingsToolbar(rootView,""); ButterKnife.bind(this, rootView); setUpRecyclerView(recyclerViewTweets); collapsingToolbarLayout.setTitle("Lista de Tweets"); return rootView; } @Override public void onResume() { super.onResume(); getTweets(ConfigPreferences.getPreferenceId(getActivity())); // aqui hago la peticion y actualizo la lista } private void setUpRecyclerView(RecyclerView recyclerView) { recyclerView.setLayoutManager(new LinearLayoutManager(recyclerView.getContext())); recyclerView.setAdapter(tweetAdapter); } Mezclando el adaptador y usando nuestra vista en el Fragmento a mostrar! Necesitas sacar una lista de datos en mi caso use la API twitterr.
  69. #Android Developers public class MainActivity extends AppCompatActivity { @Override protected

    void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); if(savedInstanceState == null){ getSupportFragmentManager().beginTransaction() .replace(R.id.container, TweetFragment.getInstance()).commit(); } } Genera los cambios necesarios para visualizar el fragmento que contiene todos los ingredientes y prueba tu aplicación. Aquí se visualiza como seria mostrar el fragmento contenido en una Activity
  70. #Android Developers Felicidades lo haz logrado!

  71. Descarga el proyecto completo aqui https://github.com/erikcaffrey/DesignLibraryFirebase