Desafío 01

Clase 47 de 96 • Curso Definitivo de Android 2016

Resumen

Crea la pantalla de search y muestra los resultados en forma de grid.

Pablo Gabriel Mederos Caballero

student•

fragment_search.xml

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.pmcoder.platzigram.view.fragments.SearchFragment">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

    <android.support.v7.widget.SearchView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:queryHint="@string/searchhinttext"
        
        />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/searchFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="4dp"
        android:paddingRight="4dp"/>

    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>

SearchFragment.class

package com.pmcoder.platzigram.view.fragments;


import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.pmcoder.platzigram.R;
import com.pmcoder.platzigram.adapter.PictureAdapterRecyclerView;
import com.pmcoder.platzigram.model.Picture;

import java.util.ArrayList;

/**
 * A simple {@link Fragment} subclass.
 */
public class SearchFragment extends Fragment {


    public SearchFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.fragment_search, container, false);
        RecyclerView picturesRecycler = (RecyclerView) view.findViewById(R.id.searchFragment);

        GridLayoutManager gridLayoutManager = new GridLayoutManager(getContext(), 2, GridLayoutManager.VERTICAL, false);

        picturesRecycler.setLayoutManager(gridLayoutManager);

        PictureAdapterRecyclerView pictureAdapterRecyclerView =
                new PictureAdapterRecyclerView(buildPictures(), R.layout.cardview_picture, getActivity());
        picturesRecycler.setAdapter(pictureAdapterRecyclerView);

        return view;
    }

    public ArrayList<Picture> buildPictures(){
        ArrayList<Picture> pictures = new ArrayList<>();
        pictures.add(new Picture("https://img.difoosion.com/wp-content/blogs.dir/28/files/2016/06/fondo5.jpg", "Gabriel Mederos", "4 días", "3 Me gusta"));
        pictures.add(new Picture("http://images.eldiario.es/canariasahora/sociedad/fondos-acentejojpg_EDIIMA20140403_0542_13.jpg", "Gabriel Caballero", "2 días", "5 Me gusta"));
        pictures.add(new Picture("http://coolmusic.jinradio.com/wp-content/uploads/sites/2/2014/03/CoolBack7.jpg", "Pablo Dina", "1 días", "4 Me gusta"));
        return pictures;
    }

}

Wilfredo Bardales

student•

Tengo una pregunta

GridLayoutManager gridLayoutManager = new GridLayoutManager(getContext(), 3, GridLayoutManager.VERTICAL, false);```

como tendria q poner para cambiar el tamaño de la imagen?

Edwin Enrique Jorge Arroyo

student•

    <android.support.v7.widget.SearchView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:queryHint="@string/searchhinttext"
        
        />```Que tengo que insertar en string? se pone rojo

Henry Cumbicus Rivera

student•

Listo, desafío #1 completo 😃
https://drive.google.com/open?id=0B-o6Fbtn5xprUVlvTVlsV2psZDg

Juan Carlos Pinzón

student•

Oye seria cool saber cómo hiciste para que te haya quedado así tan bien hecho

adrian Ortiga

student•

yo también termine mi desafío, les dejo el código en GitHub

Oscar M Reyes

student•

Muy bien, gracias por el video… estoy complementando.

Una pregunta, usted solo ha visto esta capacitación? porque es mi primera capacitación y estoy aburrido porque aunque entendi lo del curso no pude hacer el Desafio? que me falto… Gracias

Juan Felipe Lara Martinez

student•

Dejo mi desafio realizado con el código. Si tienen dudas pregunten.

XML FRAGMENT

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:fitsSystemWindows="true"
    android:background="#f9f9f9"
    tools:context=".views.fragment.SearchFragment">


    <!-- TODO: Update blank fragment layout -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingTop="@dimen/fab_margin"
        android:paddingLeft="@dimen/fab_margin"
        android:paddingRight="@dimen/fab_margin"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:orientation="vertical"
        >

        <EditText
            android:paddingLeft="10dp"
            android:paddingTop="10dp"
            android:paddingBottom="10dp"
            android:id="@+id/edt_search_fragment"
            android:ems="10"
            android:inputType="text"
            android:textSize="20sp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/search_layout"
            android:drawablePadding="10dp"
            android:drawableLeft="@android:drawable/ic_menu_search"
            android:elevation="5dp"
            android:hint="Buscar fotos..."/>

            <android.support.v7.widget.RecyclerView
                android:layout_marginTop="5dp"
                android:id="@+id/search_recyclerview_photos"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scrollbars="vertical"/>

    </LinearLayout>

</android.support.design.widget.CoordinatorLayout>

FRAGMENT CLASS

package com.juanfelara.platzigram.views.fragment;


import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.juanfelara.platzigram.R;
import com.juanfelara.platzigram.adapter.PictureAdapterRecyclerView;
import com.juanfelara.platzigram.model.Picture;

import java.util.ArrayList;

/**
 * A simple {@link Fragment} subclass.
 */
public class SearchFragment extends Fragment {


    public SearchFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.fragment_search, container, false);

        RecyclerView picturesRecycler = view.findViewById(R.id.search_recyclerview_photos);
        GridLayoutManager linearLayoutManager = new GridLayoutManager(getContext(), 2);
        picturesRecycler.setHasFixedSize(true);
        picturesRecycler.setLayoutManager(linearLayoutManager);

        PictureAdapterRecyclerView pictureAdapterRecyclerView = new PictureAdapterRecyclerView(buildPictures(), R.layout.cardview_picture, getActivity());
        picturesRecycler.setAdapter(pictureAdapterRecyclerView);
        return view;
    }

    public ArrayList<Picture> buildPictures() {
        ArrayList<Picture> pictures = new ArrayList<>();
        pictures.add(new Picture("http://lorempixel.com/400/200/nature", "Uriel Ramírez", "4 días", "3 Me Gusta"));
        pictures.add(new Picture("http://lorempixel.com/400/200/nature/1", "Juan Pablo", "3 días", "10 Me Gusta"));
        pictures.add(new Picture("http://lorempixel.com/400/200/nature/2", "Anahi Salgado", "2 días", "9 Me Gusta"));
        pictures.add(new Picture("http://lorempixel.com/400/200/nature/3", "Oswaldo Rodriguez", "5 días", "4 Me Gusta"));
        pictures.add(new Picture("http://lorempixel.com/400/200/nature/4", "Anahi Salgado", "2 días", "9 Me Gusta"));
        pictures.add(new Picture("http://lorempixel.com/400/200/nature/5", "Anahi Salgado", "2 días", "9 Me Gusta"));
        pictures.add(new Picture("http://lorempixel.com/400/200/nature/6", "Anahi Salgado", "2 días", "9 Me Gusta"));
        pictures.add(new Picture("http://lorempixel.com/400/200/nature/7", "Anahi Salgado", "2 días", "9 Me Gusta"));
        pictures.add(new Picture("http://lorempixel.com/400/200/nature/8", "Anahi Salgado", "2 días", "9 Me Gusta"));
        pictures.add(new Picture("http://lorempixel.com/400/200/nature/9", "Anahi Salgado", "2 días", "9 Me Gusta"));
        return pictures;
    }

}

Francisco Daniel Lara Pereira

student•

Primer Desafío Completado:

Ver Imagen

Tuve un problema con el Hint del searchView, pero al ver los comentarios lo solucione, gracias.

Edwin Enrique Jorge Arroyo

student•

Amigo, como lo solucionaste?

Julio Urian

student•

José Roberto Arroyo García

company_admin•

Que tal compañer@s, Desafío 01 terminado:

El input de búsqueda lo acomple de la siguiente forma:

<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:fitsSystemWindows="true"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.platzi.platzigram.view.fragments.SearchFragment">

    <include layout="@layout/actionbar_toolbar" />

        <android.support.v7.widget.SearchView
            android:id="@+id/inputSearchText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/minusPadding_searchText"
            android:layout_marginLeft="@dimen/padding_searchText"
            android:layout_marginRight="@dimen/padding_searchText"
            android:elevation="100dp"
            android:theme="@style/ThemeOverlay.AppCompat.Dark"
            app:defaultQueryHint="Buscar ..."
            
            />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/gridRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp"
        android:layout_margin="3dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />


</android.support.design.widget.CoordinatorLayout>```

KEVIN BRAYAN LUNA FIGUEROA

student•

Este es mi codigo en SearchFragment.java, pero cuando lo ejecuto me sale este error : om\kevinlunaweb\proyectofinal\view\fragment\SearchFragment.java:
uses or overrides a deprecated API.
Recompile with -Xlint:deprecation for details.

Me pueden ayudar por favor!!

package mx.com.kevinlunaweb.proyectofinal.view.fragment;


import android.os.Bundle;
import android.os.Handler;
import android.support.v4.app.Fragment;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.SearchView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.EditText;

import java.util.ArrayList;

import mx.com.kevinlunaweb.proyectofinal.R;
import mx.com.kevinlunaweb.proyectofinal.adapter.PictureAdapterRecyclerView;
import mx.com.kevinlunaweb.proyectofinal.model.Picture;

/**
 * A simple {@link Fragment} subclass.
 */
public class SearchFragment extends Fragment {


    public SearchFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.fragment_search, container, false);
        SearchView searchView = view.findViewById(R.id.searchView);
        EditText searchviewedit =  searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
        searchviewedit.setTextColor(getResources().getColor(R.color.editTextColorWhite));
        searchviewedit.setHintTextColor(getResources().getColor(R.color.editTextColorWhite));
        RecyclerView picturesReycler = (RecyclerView) view.findViewById(R.id.searchRecycler);

        GridLayoutManager gridLayoutManager = new GridLayoutManager(getContext(),2, GridLayoutManager.VERTICAL, false);

        picturesReycler.setLayoutManager(gridLayoutManager);
        PictureAdapterRecyclerView pictureAdapterRecyclerView = new PictureAdapterRecyclerView(buidPictures(),R.layout.cardview_picture, getActivity());
        picturesReycler.setAdapter(pictureAdapterRecyclerView);

        //final Handler handler = new Handler()

        return view;

    }

    public ArrayList<Picture> buidPictures(){
        ArrayList<Picture> pictures = new ArrayList<>();
        pictures.add(new Picture("http://www.novalandtours.com/images/guide/guilin.jpg", "Kevin Luna", "4 días", "3 Me gusta"));
        pictures.add(new Picture("http://www.enjoyart.com/library/landscapes/tuscanlandscapes/large/Tuscan-Bridge--by-Art-Fronckowiak-.jpg", "Hector Luna", "10 días", "13 Me gusta"));
        pictures.add(new Picture("http://www.educationquizzes.com/library/KS3-Geography/river-1-1.jpg", "Brayan Luna", "1 día", "23 Me gusta"));

        pictures.add(new Picture("http://kevinlunaweb.com.mx/assets/images/Certificado-Platzi-Vuejs.jpg", "Certificación", "4 días", "3 Me gusta"));
        pictures.add(new Picture("http://kevinlunaweb.com.mx/assets/images/Certificado-Platzi-PHP.jpg", "Certificación", "10 días", "13 Me gusta"));
        pictures.add(new Picture("http://kevinlunaweb.com.mx/assets/images/Certificacion-Java-EE-Web.jpg", "Certificación", "1 día", "23 Me gusta"));

        return pictures;
    }

}

KEVIN BRAYAN LUNA FIGUEROA

student•

Lo siento ya vi cual fue mi error!!

Germán Arevalo Jerez

student•

¡Desafío 01 completo!

Nadir Antonio Soza Solis

student•

Listo el reto #1

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".views.fragments.SearchCardFragment">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:paddingLeft="@dimen/margin_10dp"
        android:paddingRight="@dimen/margin_10dp"
        android:paddingTop="@dimen/margin_5dp">

        <android.support.v7.widget.SearchView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:queryHint="@string/menu_option_search">

        </android.support.v7.widget.SearchView>


        <android.support.v7.widget.RecyclerView
            android:id="@+id/search_recycler_card"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margin_10dp"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            >

        </android.support.v7.widget.RecyclerView>

    </LinearLayout>

</android.support.design.widget.CoordinatorLayout>

package com.nadirss14.msn.views.fragments;


import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.nadirss14.msn.R;
import com.nadirss14.msn.adapter.RecyclerViewAdapter;
import com.nadirss14.msn.model.SimpleCard;

import java.util.ArrayList;

/**
 * A simple {@link Fragment} subclass.
 */
public class SearchCardFragment extends Fragment {


    public SearchCardFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view =inflater.inflate(R.layout.fragment_search_card, container, false);
       // showToolbar(getResources().getString(R.string.menu_option_home),false,view);

        RecyclerView recyclerView= (RecyclerView) view.findViewById(R.id.search_recycler_card);
       GridLayoutManager gridLayoutManager =new GridLayoutManager(getActivity(),2,GridLayoutManager.VERTICAL,false);
       recyclerView.setLayoutManager(gridLayoutManager);

       RecyclerViewAdapter adapter= new RecyclerViewAdapter(buildPicture(),R.layout.cardview_simple,getActivity());

        recyclerView.setAdapter(adapter);

        return view;
    }

    public void showToolbar(String _title,boolean _backUp,View view){
        Toolbar tollbar=(Toolbar) view.findViewById(R.id.my_toolbar);
        ((AppCompatActivity)getActivity()).setSupportActionBar(tollbar);
        ((AppCompatActivity)getActivity()).getSupportActionBar().setTitle(_title);
        ((AppCompatActivity)getActivity()).getSupportActionBar().setDisplayHomeAsUpEnabled(_backUp);

    }
    public ArrayList<SimpleCard> buildPicture(){
        ArrayList<SimpleCard> _simpleCard=new ArrayList<>();
        _simpleCard.add(new SimpleCard("https://i.ytimg.com/vi/hW9PUzl7j9w/maxresdefault.jpg","Paisaje 1","","1 dia","10"));
        _simpleCard.add(new SimpleCard("https://mott.pe/noticias/wp-content/uploads/2016/11/Janette-Asche.jpg","Paisaje 2","","2 dia","20"));
        _simpleCard.add(new SimpleCard("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7B_XkmN1JqS-d5rh70xwycsTCEPS8TcZFEQ3qKI2jmDFh_opE","Paisaje 3","","1 dia","10"));
        _simpleCard.add(new SimpleCard("https://cronicaglobal.elespanol.com/uploads/s1/36/29/99/6/paisaje-bonito-playa-de-las-catedrales-lugo.png","Paisaje 4","","1 dia","10"));

        return _simpleCard;
    }


}

Juan Guillermo Perez Cardozo

student•

Estoy haciendo una aplicacion con la explicacion del platzigram. La idea mia es buscar por nombre de cardView, va asi:

<?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" tools:context=".MainActivity" android:background="@android:color/holo_blue_dark">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <SearchView
        android:id="@+id/searchV"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:queryHint="Buscar Factura"
        />

    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/recyclerView"
        android:orientation="horizontal"></android.support.v7.widget.RecyclerView>

</LinearLayout>

</android.support.design.widget.CoordinatorLayout>

Johan Manuel Perez Soto

student•

Pan comido 😎😎

Alexander Julio

student•

Ann como es la lógica del código para el search o donde encuentro documentación al respecto.

Pablo Gabriel Mederos Caballero

student•

Acá está mi Desafío 1

https://github.com/pablomederos/Platzigram/tree/ca9cb14367f8d6bc1f4c4b02c3a45e2c0e630a80

Mateo Zeas Zeas

student•

Listo, si me pueden ayudar como separar entre si las imágenes.

Mateo Zeas Zeas

student•

https://www.dropbox.com/s/8taxli5octz3k2s/Desafio1.png?dl=0

Ricardo Azpeitia P.

student•

Haz intentado añadir un padding?

Hernán Antonio Ramírez Osorio

student•

Desafió completado.
Dejo código por si le sirve a alguien, los puntos implementados son:

Se implementa setOnQueryTextListener en SearchView para realizar búsquedas, simulando petición a servidor con delay de 1,5 seg (Solo realizando búsqueda cuando el usuario deje de digitar, evitando peticiones innecesarias), y se actualiza grid con “resultado obtenido”.
Se implementa ItemDecoration para separación de imágenes. (Se deben eliminar los padding en xml).

SearchFragment.java

package com.platzi.plazigram.view.fragment;


import android.os.Bundle;
import android.os.Handler;
import android.support.v4.app.Fragment;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.SearchView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.platzi.plazigram.R;
import com.platzi.plazigram.Util.EqualSpacingItemDecoration;
import com.platzi.plazigram.adapter.PictureAdapterRecyclerView;
import com.platzi.plazigram.model.Picture;

import java.util.ArrayList;

/**
 * A simple {@link Fragment} subclass.
 */
public class SearchFragment extends Fragment {

    PictureAdapterRecyclerView pictureAdapterRecyclerView;

    public SearchFragment() {
        // Required empty public constructor
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment

        View viewSearch = inflater.inflate(R.layout.fragment_search, container, false);

        RecyclerView picturesRecycler = (RecyclerView) viewSearch.findViewById(R.id.search_result);
        //Define separación para elementos de recycler
        picturesRecycler.addItemDecoration(new EqualSpacingItemDecoration((int)getResources().getDimension(R.dimen.activity_vertical_margin), EqualSpacingItemDecoration.GRID));

        GridLayoutManager gridLayoutManager = new GridLayoutManager(getContext(), 2, GridLayoutManager.VERTICAL, false);

        picturesRecycler.setLayoutManager(gridLayoutManager);

        pictureAdapterRecyclerView = new PictureAdapterRecyclerView(buildPictures(""), R.layout.cardview_picture, getActivity());
        picturesRecycler.setAdapter(pictureAdapterRecyclerView);

        final Handler mHandler = new Handler();

        SearchView searchView = (SearchView) viewSearch.findViewById(R.id.search_view);
        searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            @Override
            public boolean onQueryTextSubmit(String query) {
                RealizarBusqueda(query);
                return true;
            }

            @Override
            public boolean onQueryTextChange(String newText) {
                final String queryString = newText;
                mHandler.removeCallbacksAndMessages(null);

                mHandler.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        RealizarBusqueda(queryString);
                    }
                }, 1500);
                return true;
            }



        });


        return viewSearch;
    }

    /**
     * Ejecuta la búsqueda de acuerdo a texto ingresado por usuario.
     * @param query
     */
    private void RealizarBusqueda(String query) {
        pictureAdapterRecyclerView.setPictures(buildPictures(query));
        pictureAdapterRecyclerView.notifyDataSetChanged();
    }


    /**
     * Realiza petición de búsqueda a servidor
     * @return
     */
    public ArrayList<Picture> buildPictures(String query){
        ArrayList<Picture> pictures = new ArrayList<>();

        StringBuilder titulo;
        for(int i=0; i<50; i++){
            titulo =  new StringBuilder();
            titulo.append("Hernán Ramírez ").append(query.trim()).append(" ").append(i);
            pictures.add(new Picture("http://www.novalandtours.com/images/guide/guilin.jpg",titulo.toString(),"4 días","3"));
        }

        return pictures;
    }
}

EqualSpacingItemDecoration.java

package com.platzi.plazigram.Util;

import android.graphics.Rect;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;

public class EqualSpacingItemDecoration extends RecyclerView.ItemDecoration {
    private final int spacing;
    private int displayMode;

    public static final int HORIZONTAL = 0;
    public static final int VERTICAL = 1;
    public static final int GRID = 2;

    public EqualSpacingItemDecoration(int spacing) {
        this(spacing, -1);
    }

    public EqualSpacingItemDecoration(int spacing, int displayMode) {
        this.spacing = spacing;
        this.displayMode = displayMode;
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        int position = parent.getChildViewHolder(view).getAdapterPosition();
        int itemCount = state.getItemCount();
        RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();
        setSpacingForDirection(outRect, layoutManager, position, itemCount);
    }

    private void setSpacingForDirection(Rect outRect,
                                        RecyclerView.LayoutManager layoutManager,
                                        int position,
                                        int itemCount) {

        // Resolve display mode automatically
        if (displayMode == -1) {
            displayMode = resolveDisplayMode(layoutManager);
        }

        switch (displayMode) {
            case HORIZONTAL:
                outRect.left = spacing;
                outRect.right = position == itemCount - 1 ? spacing : 0;
                outRect.top = spacing;
                outRect.bottom = spacing;
                break;
            case VERTICAL:
                outRect.left = spacing;
                outRect.right = spacing;
                outRect.top = spacing;
                outRect.bottom = position == itemCount - 1 ? spacing : 0;
                break;
            case GRID:
                if (layoutManager instanceof GridLayoutManager) {
                    GridLayoutManager gridLayoutManager = (GridLayoutManager) layoutManager;
                    int cols = gridLayoutManager.getSpanCount();
                    int rows = itemCount / cols;

                    outRect.left = spacing;
                    outRect.right = position % cols == cols - 1 ? spacing : 0;
                    outRect.top = spacing;
                    outRect.bottom = position / cols == rows - 1 ? spacing : 0;
                }
                break;
        }
    }

    private int resolveDisplayMode(RecyclerView.LayoutManager layoutManager) {
        if (layoutManager instanceof GridLayoutManager) return GRID;
        if (layoutManager.canScrollHorizontally()) return HORIZONTAL;
        return VERTICAL;
    }
}

Hernán Antonio Ramírez Osorio

student•

Desafío completado.
Dejo código por si le sirve a alguien, los puntos implementados son:

Se implementa setOnQueryTextListener en SearchView para realizar búsquedas, simulando petición a servidor con delay de 1,5 seg (Solo realizando búsqueda cuando el usuario deje de digitar, evitando peticiones innecesarias), y se actualiza grid con “resultado obtenido”.
Se implementa ItemDecoration para separación de CardViews. (Se deben eliminar los padding en xml).

SearchFragment.java

package com.platzi.plazigram.view.fragment;


import android.os.Bundle;
import android.os.Handler;
import android.support.v4.app.Fragment;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.SearchView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.platzi.plazigram.R;
import com.platzi.plazigram.Util.EqualSpacingItemDecoration;
import com.platzi.plazigram.adapter.PictureAdapterRecyclerView;
import com.platzi.plazigram.model.Picture;

import java.util.ArrayList;

/**
 * A simple {@link Fragment} subclass.
 */
public class SearchFragment extends Fragment {

    PictureAdapterRecyclerView pictureAdapterRecyclerView;

    public SearchFragment() {
        // Required empty public constructor
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment

        View viewSearch = inflater.inflate(R.layout.fragment_search, container, false);

        RecyclerView picturesRecycler = (RecyclerView) viewSearch.findViewById(R.id.search_result);
        //Define separación para elementos de recycler
        picturesRecycler.addItemDecoration(new EqualSpacingItemDecoration((int)getResources().getDimension(R.dimen.activity_vertical_margin), EqualSpacingItemDecoration.GRID));

        GridLayoutManager gridLayoutManager = new GridLayoutManager(getContext(), 2, GridLayoutManager.VERTICAL, false);

        picturesRecycler.setLayoutManager(gridLayoutManager);

        pictureAdapterRecyclerView = new PictureAdapterRecyclerView(buildPictures(""), R.layout.cardview_picture, getActivity());
        picturesRecycler.setAdapter(pictureAdapterRecyclerView);

        final Handler mHandler = new Handler();

        SearchView searchView = (SearchView) viewSearch.findViewById(R.id.search_view);
        searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            @Override
            public boolean onQueryTextSubmit(String query) {
                RealizarBusqueda(query);
                return true;
            }

            @Override
            public boolean onQueryTextChange(String newText) {
                final String queryString = newText;
                mHandler.removeCallbacksAndMessages(null);

                mHandler.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        RealizarBusqueda(queryString);
                    }
                }, 1500);
                return true;
            }



        });


        return viewSearch;
    }

    /**
     * Ejecuta la búsqueda de acuerdo a texto ingresado por usuario.
     * @param query
     */
    private void RealizarBusqueda(String query) {
        pictureAdapterRecyclerView.setPictures(buildPictures(query));
        pictureAdapterRecyclerView.notifyDataSetChanged();
    }


    /**
     * Realiza petición de búsqueda a servidor
     * @return
     */
    public ArrayList<Picture> buildPictures(String query){
        ArrayList<Picture> pictures = new ArrayList<>();

        StringBuilder titulo;
        for(int i=0; i<50; i++){
            titulo =  new StringBuilder();
            titulo.append("Hernán Ramírez ").append(query.trim()).append(" ").append(i);
            pictures.add(new Picture("http://www.novalandtours.com/images/guide/guilin.jpg",titulo.toString(),"4 días","3"));
        }

        return pictures;
    }
}

EqualSpacingItemDecoration.java

package com.platzi.plazigram.Util;

import android.graphics.Rect;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;

public class EqualSpacingItemDecoration extends RecyclerView.ItemDecoration {
    private final int spacing;
    private int displayMode;

    public static final int HORIZONTAL = 0;
    public static final int VERTICAL = 1;
    public static final int GRID = 2;

    public EqualSpacingItemDecoration(int spacing) {
        this(spacing, -1);
    }

    public EqualSpacingItemDecoration(int spacing, int displayMode) {
        this.spacing = spacing;
        this.displayMode = displayMode;
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        int position = parent.getChildViewHolder(view).getAdapterPosition();
        int itemCount = state.getItemCount();
        RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();
        setSpacingForDirection(outRect, layoutManager, position, itemCount);
    }

    private void setSpacingForDirection(Rect outRect,
                                        RecyclerView.LayoutManager layoutManager,
                                        int position,
                                        int itemCount) {

        // Resolve display mode automatically
        if (displayMode == -1) {
            displayMode = resolveDisplayMode(layoutManager);
        }

        switch (displayMode) {
            case HORIZONTAL:
                outRect.left = spacing;
                outRect.right = position == itemCount - 1 ? spacing : 0;
                outRect.top = spacing;
                outRect.bottom = spacing;
                break;
            case VERTICAL:
                outRect.left = spacing;
                outRect.right = spacing;
                outRect.top = spacing;
                outRect.bottom = position == itemCount - 1 ? spacing : 0;
                break;
            case GRID:
                if (layoutManager instanceof GridLayoutManager) {
                    GridLayoutManager gridLayoutManager = (GridLayoutManager) layoutManager;
                    int cols = gridLayoutManager.getSpanCount();
                    int rows = itemCount / cols;

                    outRect.left = spacing;
                    outRect.right = position % cols == cols - 1 ? spacing : 0;
                    outRect.top = spacing;
                    outRect.bottom = position / cols == rows - 1 ? spacing : 0;
                }
                break;
        }
    }

    private int resolveDisplayMode(RecyclerView.LayoutManager layoutManager) {
        if (layoutManager instanceof GridLayoutManager) return GRID;
        if (layoutManager.canScrollHorizontally()) return HORIZONTAL;
        return VERTICAL;
    }
}

Carlos Andrés Millan Satizabal

student•

Listo el Desafío No. 1

<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"
    tools:context="com.example.orion.platzigram.views.fragments.SearchFragment">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.v7.widget.SearchView
            android:id="@+id/searchView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:queryHint="Buscar"/>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@android:color/darker_gray"
            android:elevation="3dp"/>

        <android.support.v7.widget.RecyclerView
            android:id="@+id/searchRecycler"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="15dp" />

    </LinearLayout>

</android.support.design.widget.CoordinatorLayout>```

SearchFragment.java

package com.example.orion.platzigram.views.fragments;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.example.orion.platzigram.R;
import com.example.orion.platzigram.adapter.PictureAdapterRecyclerView;
import com.example.orion.platzigram.model.Picture;

import java.util.ArrayList;

/**

A simple {@link Fragment} subclass.
*/
public class SearchFragment extends Fragment {

public SearchFragment() {
// Required empty public constructor
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view = inflater.inflate(R.layout.fragment_search, container, false);
RecyclerView searchRecycler = view.findViewById(R.id.searchRecycler);
```
 GridLayoutManager gridLayoutManager = new GridLayoutManager(getActivity(),2, GridLayoutManager.VERTICAL, false);
 
 searchRecycler.setLayoutManager(gridLayoutManager);

 PictureAdapterRecyclerView pictureAdapterRecyclerView = new PictureAdapterRecyclerView(buildPictures(), R.layout.cardview_picture, getActivity());

 searchRecycler.setAdapter(pictureAdapterRecyclerView);

 return view;
```
}

public ArrayList<Picture> buildPictures() {
ArrayList<Picture> pictures = new ArrayList<>();
pictures.add(new Picture(“http://lorempixel.com/400/200/nature/3”, “Carlos Millan”, “4 días”, “3 Me gusta”));
pictures.add(new Picture(“http://lorempixel.com/400/200/nature/1”, “Amy Linger”, “3 días”, “6 Me gusta”));
pictures.add(new Picture(“http://lorempixel.com/400/200/nature/2”, “Robert Carson”, “2 días”, “5 Me gusta”));
```
 return pictures;
```
}

}

Arnold Gustavo Caballero Mantilla

student•

Listo desafio 1! aunque para cuadrar el Searchview le tuve que dar margin al layout de abajo “el que tiene el recycler” para que la búsqueda no me tapara las primera imágenes. Se puede dejar así?

Ann Code

teacher•

Sí puede quedar así Arnold, el reto es precisamente eso, que dejes súper bien esa pantalla

Oscar Abel Clemente Taco

student•

Desafío 01 completo. https://1drv.ms/u/s!AowMhLl-CZ8ClnkRKCFEcNqfxhMI.