Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Evolución Android en Material Design

Evolución Android en Material Design

SegundaActivity de Androidinight meetup en la Ciudad de México

Erik Jhordan Rey

July 07, 2015
Tweet

More Decks by Erik Jhordan Rey

Other Decks in Programming

Transcript

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

    es Design Library? • Explorar componentes de Design Library • CodeLab Design Library • Preguntas y Respuestas
  2. • NavigationView • TextInputLayout • FloatingButton • SnackBar • TabLayout

    • Coordinator Layout • AppBarLayout • CollapsingToolbarLayout Fase 3
  3. 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.
  4. 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
  5. 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
  6. • 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
  7. 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
  8. 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
  9. 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
  10. 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.
  11. 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.
  12. 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
  13. #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/
  14. #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
  15. #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>
  16. #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
  17. #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 ...
  18. #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>
  19. #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); } }
  20. #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.
  21. #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