Saltar al contenido principal

Ejemplos de Android DialogFragment

La forma más flexible de crear un diálogo no es usando la clase andorid.app.Dialog sino usando la clase DialogFragment. A través de ella se obtiene la capacidad completa de fragmentación incluyendo la capacidad de observar el ciclo de vida del diálogo, así como utilizar ViewModels.

¿Qué es un DialogFragment?​

Un DialogFragment es un fragment que muestra una ventana de diálogo, flotando sobre la ventana de su activity. Este fragmento contiene un objeto Dialog, que muestra según el estado del fragmento.

En esta clase utilizamos el soporte dialogfragment ya que el framework android.app.dialogFragment quedó obsoleto en el nivel 28 de la API.

Nuestra implementación sobrescribirá esta clase e implementará
el onCreateView(LayoutInflater, ViewGroup, Bundle) para suministrar el contenido del diálogo. Alternativamente, podemos anular onCreateDialog(Bundle) para crear un diálogo totalmente personalizado, como un AlertDialog, con su propio contenido.

En este artículo aprenderemos lo siguiente:

  1. Creación de un diálogo con ListView en kotlin.
    1. Usar DialogFragment para crear diálogos con un diseño personalizado como alertdialogs, diálogos de entrada, etc.
  3. Creación de menús emergentes

(a). Kotlin Android DialogFragment con ListView​

*Tutorial Kotlin Android DialogFragment con ListView

Queremos ver cómo abrir un DialogFragment cuando se pulsa un simple botón. El dialogFragment estará compuesto por un título y un listview.

De hecho lo inflamos mediante la clase LayoutInflater a partir de una especificación de layout xml.

Cuando el usuario hace clic en un elemento del ListView lo mostramos en un Toast. Cuando el usuario hace clic fuera del DialogFragment, lo descartamos (el DialogFragment).

Vamos.

Video Tutorial​

Bueno tenemos un video tutorial como alternativa a esto. Si prefieres tutoriales como este entonces sería bueno que te suscribieras a nuestro canal de YouTube. Básicamente tenemos una televisión de programación donde hacemos tutoriales diarios sobre todo de android.

Kotlin Android DialogFragment con ListView simple​

Veamos un ejemplo completo.

Herramientas​

  1. IDE: Android Studio - el IDE oficial de android apoyado por Jetbrains y Google.
  2. Lenguaje : Kotlin -Statically Typed Language desarrollado por primera vez por Jetbrains.
  3. Emulador : Nox Player - Un emulador lo suficientemente rápido para mi lenta máquina.

Scripts Gradle​

Comenzamos explorando nuestros scripts de Gradle.

(a). build.gradle(App)​

Aquí está nuestro archivo build.gradle a nivel de aplicación. Tenemos el DSL de dependencias donde añadimos nuestras dependencias.

Este archivo se llama build.gradle de nivel de aplicación ya que se encuentra en la carpeta app del proyecto.

Si estás usando la versión 3 y superior de Android Studio usa la palabra clave implementation mientras que si estás usando una versión menor a la 3 entonces sigue usando la palabra clave compile.

Una vez que hayas modificado este archivo build.gradle tienes que sincronizar tu proyecto. Android Studio le pedirá que lo haga.

apply plugin: 'com.android.application'

apply plugin: 'kotlin-android'

apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "info.camposha.kotlindialogfragment"
        minSdkVersion 15
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation"org.jetbrains.kotlin:kotlin-stdlib-jre7:$kotlin_version"
    implementation 'com.android.support:appcompat-v7:28.0.0-rc01'
}

También puedes ver que hemos empezado aplicando dos plugins específicos de kotlin en nuestro archivo build.gradle:

apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'

que son kotlin-android y kotlin-android-extensions.

Código Kotlin​

Las aplicaciones Android pueden ser escritas principalmente en Java o Kotlin. Sin embargo, hoy en día hay muchos frameworks como Flutter que utilizan lenguajes como Dart.

En esta clase estamos utilizando el lenguaje de programación Kotlin.

Tendremos estas clases en nuestro proyecto.

(a). PioneersFragment.kt​

Representa nuestro FragmentDialog y de hecho derivará de él.

1. Creación de un DialogFragment

Empezamos creando una clase Kotlin que derive de android.support.v4.app.DialogFragment. Utilizamos la librería de soporte fragment ya que android.app.DialogFragment está obsoleta.

class PioneersFragment : DialogFragment() {..}

Observa que en la declaración anterior se ha incluido un constructor vacío por defecto para nuestro DialogFragment. Esto lo hacemos utilizando los paréntesis(()) en Kotlin.

2. Sobreescribiendo el OnCreateView() de DialogFragment.

A continuación anularemos el método onCreateView() de la clase Fragment.

 override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {..}

Pasamos tres parámetros:

  1. Objeto LayoutInflater.
  2. Objeto ViewGroup.
  3. Objeto Bundle.

3. Inflando un Layout en un DialogFragment

Dentro del método primero inflamos el layout R.layout.fraglayout mediante el método inflate, utilizando la instancia LayoutInflater.

        val rootView = inflater.inflate(R.layout.fraglayout, container)

4. Creando un Array Kotlin

A continuación creamos un array Kotlin utilizando el método arrayOf(). Esto actuará como nuestra fuente de datos para alojar a los pioneros. Esto es lo que enlazaremos al ListView que mostraremos en nuestro DialogFragment.

var pioneers = arrayOf("Dennis Ritchie", "Rodney Brooks", "Sergey Brin", "Larry Page", "Cynthia Breazeal", "Jeffrey Bezos", "Berners-Lee Tim", "Centaurus A", "Virgo Stellar Stream")

5. Vinculación de un ListView a un Array de Kotlin usando ArrayAdapter

Luego hacemos referencia a nuestro ListView y establecemos su adaptador. Utilizaremos arrayadapter.

        val myListView = rootView.findViewById(R.id.myListView) as ListView
        myListView!!.adapter = ArrayAdapter<String>(activity, android.R.layout.simple_list_item_1, pioneers)

6. Establecer el título de un DialogFragment

Establecemos el título del DialogFragment usando el método setTitle(), se pasa un String a este método.

        this.dialog.setTitle("Tech Pioneers")

7. Escuchando los eventos Click del ListView en Kotlin

Digamos que queremos mostrar un mensaje Toast cuando se hace clic en un ListView, mostrando el elemento pulsado:

        myListView.setOnItemClickListener {
            adapterView,
            view,
            position,
            l
            -> Toast.makeText(activity, pioneers[position], Toast.LENGTH_SHORT).show()
        }

Aquí está el código completo de la clase PioneersFragment:

package info.camposha.kotlindialogfragment

import android.os.Bundle
import android.support.v4.app.DialogFragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ArrayAdapter
import android.widget.ListView
import android.widget.Toast

class PioneersFragment : DialogFragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val rootView = inflater.inflate(R.layout.fraglayout, container)
        var pioneers = arrayOf("Dennis Ritchie", "Rodney Brooks", "Sergey Brin", "Larry Page", "Cynthia Breazeal", "Jeffrey Bezos", "Berners-Lee Tim", "Centaurus A", "Virgo Stellar Stream")

        val myListView = rootView.findViewById(R.id.myListView) as ListView
        //with arrayadapter you have to pass a textview as a resource, and that is simple_list_item_1
        myListView!!.adapter = ArrayAdapter<String>(activity, android.R.layout.simple_list_item_1, pioneers)

        this.dialog.setTitle("Tech Pioneers")

        myListView.setOnItemClickListener {
            adapterView,
            view,
            position,
            l
            -> Toast.makeText(activity, pioneers[position], Toast.LENGTH_SHORT).show()
        }

        return rootView
    }
}
(c). MainActivity.kt​

Esta es nuestra MainActivity. Contendrá un botón que al ser pulsado mostrará o abrirá nuestro DialogFragment.

1. Crear una actividad en Kotlin

Sólo tienes que crear una clase, darle un identificador y luego hacer que derive de android.support.v7.app.AppCompatActivity:

class MainActivity : AppCompatActivity() {..}

2. Anular el método onCreate() de la actividad

El método onCreate() es un método que se levanta cuando se crea nuestra actividad.

Aquí llamamos al método onCreate() de la super class. Luego usamos el método setContentView() para inflar nuestra activity_main.xml:

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

3. Referenciando Widgets en Kotlin

Puedes referenciar los widgets desde su respectivo layout usando el método findViewById() de la actividad.

Como hacemos con nuestro botón.

        val openFragmentBtn = findViewById(R.id.openFragmentID) as Button

4. Obtener el FragmentManager de una actividad

Los Fragmentos son alojados por Actividades. Por lo tanto, una actividad mantiene un supportFragmentManager como propiedad.

Podemos obtenerlo de esta manera:

        val fm = supportFragmentManager

5. Abrir/Mostrar un Fragmento

Podemos abrir un Fragment o mostrarlo. Pero primero tenemos que instanciar ese Fragment:

        val pioneersFragment = PioneersFragment()

Luego podemos abrirlo cuando el usuario pulse un botón invocando el método show() de la clase Fragment:


        openFragmentBtn.setOnClickListener(object : View.OnClickListener {
            override fun onClick(view: View) {
                pioneersFragment.show(fm, "PioneersFragment_tag")
            }
        })

Este es el código completo de la MainActivity:

package info.camposha.kotlindialogfragment

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Button

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val openFragmentBtn = findViewById(R.id.openFragmentID) as Button

        val fm = supportFragmentManager
        val pioneersFragment = PioneersFragment()

        openFragmentBtn.setOnClickListener(object : View.OnClickListener {
            override fun onClick(view: View) {
                pioneersFragment.show(fm, "PioneersFragment_tag")
            }
        })
    }
}
//end

Recursos de diseño​

(a). activity_main.xml​

Este es el layout de nuestra actividad principal. Contendrá nuestro botón que al ser pulsado abrirá nuestro DialogFragment.

Este diseño se inflará en la interfaz de usuario de la actividad principal. Esto ocurrirá a través del método setContentView() de la actividad que requerirá que le pasemos el layout.

Lo haremos dentro del método onCreate() de Activity.

Utilizamos los siguientes elementos:

    1. RelativeLayout
  2. Botón
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout

    android_layout_width="match_parent"
    android_layout_height="match_parent"
    tools_context=".MainActivity">

    <Button
        android_id="@+id/openFragmentID"
        android_text="Open Fragment"
        android_background="@color/colorAccent"
        android_layout_centerInParent="true"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content" />

</RelativeLayout>
(b). fraglayout.xml​

Nuestro DialogFragment layout. Este layout será inflado en la interfaz de usuario para nuestro Fragmento de Diálogo.

Contendrá un simple ListView.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android_orientation="vertical" android_layout_width="match_parent"
    android_layout_height="match_parent">

    <ListView
        android_id="@+id/myListView"
        android_layout_width="match_parent"
        android_layout_height="wrap_content"/>

</LinearLayout>

Recursos de valor​

(a). colors.xml​

Los colores de nuestro material design:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="material_amber_700">#ffffa000</color>
    <color name="material_amber_800">#ffff8f00</color>
    <color name="material_amber_900">#ffff6f00</color>
    <color name="material_amber_A100">#ffffe57f</color>
    <color name="material_amber_A200">#ffffd740</color>
    <color name="material_amber_A400">#ffffc400</color>

</resources>

(b). styles.xml​

El estilo de nuestra aplicación.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/material_amber_A400</item>
        <item name="colorPrimaryDark">@color/material_amber_900</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

(b). Android DialogFragment - Mostrar RecyclerView​

Este ejemplo mostrará un recyclerview en diaogfragment.

Cuando el usuario hace clic en un botón de mostrar, abrimos un dialogfragment, mostrando un RecyclerView en él.

Resumen del proyecto​

---

1. Crear el proyecto de la actividad básica​

  1. Primero cree un proyecto vacío en android studio. Ve a Archivo --> Nuevo Proyecto.
  2. Escribe el nombre de la aplicación y elige el nombre de la empresa.
  3. Elige el SDK mínimo.
  4. Elija actividad básica.
  5. Haga clic en Finalizar.

La actividad básica tendrá una barra de herramientas y un botón de acción flotante ya añadidos en el diseño

Normalmente se generan dos diseños con esta opción:

---

En este ejemplo he utilizado una actividad básica.

La actividad se registrará automáticamente en el android_manifest.xml. Las actividades de Android son componentes y normalmente necesitan ser registradas como un componente de la aplicación.

Si has creado la tuya manualmente entonces regístrala dentro de la <aplicación>...<aplicación> como sigue, sustituyendo la ActividadPrincipal por el nombre de tu actividad:


        <activity android_name=".MainActivity">

            <intent-filter>

                <action android_name="android.intent.action.MAIN" />

                <category android_name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

Puedes ver que una acción y una categoría se especifican como filtros de intención. La categoría hace que nuestra MainActivity sea una actividad de lanzamiento. Las actividades del lanzador se ejecutan primero cuando se ejecuta la aplicación androide.

3. Crear la interfaz de usuario​

Aquí están nuestros diseños para este proyecto:

activity_main.xml

  • Este diseño se infla a la interfaz de usuario MainActivity.
  • Incluye el content_main.xml.

Estos son algunos de los widgets, vistas y viewgroups que se emplean"

---
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout

    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_fitsSystemWindows="true"
    tools_context="com.tutorials.hp.dialogfragmentrecyclerview.MainActivity">

    <android.support.design.widget.AppBarLayout
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
        android_theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android_id="@+id/toolbar"
            android_layout_width="match_parent"
            android_layout_height="?attr/actionBarSize"
            android_background="?attr/colorPrimary"
            app_popupTheme="@style/AppTheme.PopupOverlay" />

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

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

    <android.support.design.widget.FloatingActionButton
        android_id="@+id/fab"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_gravity="bottom|end"
        android_layout_margin="@dimen/fab_margin"
        android_src="@android:drawable/ic_dialog_email" />

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

content_main.xml

Este diseño se incluye en tu activity_main.xml.
Aquí se definen los widgets de la UI.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout

    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_paddingBottom="@dimen/activity_vertical_margin"
    android_paddingLeft="@dimen/activity_horizontal_margin"
    android_paddingRight="@dimen/activity_horizontal_margin"
    android_paddingTop="@dimen/activity_vertical_margin"
    app_layout_behavior="@string/appbar_scrolling_view_behavior"
    tools_context="com.tutorials.hp.dialogfragmentrecyclerview.MainActivity"
    tools_showIn="@layout/activity_main">

    <TextView
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_text="Hello World!" />
</RelativeLayout>

fraglayout.xml​

Este layout será inflado a nuestro DialogFragment.

Contendrá nuestro RecyclerView como nuestro adapterview:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android_orientation="vertical" android_layout_width="match_parent"
    android_layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android_id="@+id/mRecyerID"
        android_layout_width="match_parent"
        android_layout_height="wrap_content"></android.support.v7.widget.RecyclerView>

</LinearLayout>
model.xml​

Este diseño se inflará en los elementos de la vista para nuestro RecyclerView.

Básicamente una CardView para cada elemento del Recyclerview.

Contiene un simple TextView:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    android_id="@+id/mCard"
    android_orientation="horizontal"
    android_layout_width="match_parent"

    android_layout_margin="10dp"
    card_view_cardCornerRadius="10dp"
    card_view_cardElevation="10dp"

    android_layout_height="wrap_content">

    <RelativeLayout
        android_layout_width="match_parent"
        android_layout_height="match_parent">

        <TextView
            android_layout_width="wrap_content"
            android_layout_height="wrap_content"
            android_textAppearance="?android:attr/textAppearanceLarge"
            android_text="Name"
            android_id="@+id/nameTxt"
            android_padding="10dp"
            android_layout_alignParentLeft="true"
             />

    </RelativeLayout>
</android.support.v7.widget.CardView>

4. Crear clases Java​

Las aplicaciones Android están escritas en lenguaje de programación Java, así que vamos a crear algunas clases.

1. MyHolder.java​

Nuestra clase ViewHolder.

package com.tutorials.hp.dialogfragmentrecyclerview.mRecycler;

import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.TextView;
import com.tutorials.hp.dialogfragmentrecyclerview.R;

public class MyHolder extends RecyclerView.ViewHolder {

    TextView nameTxt;

    public MyHolder(View itemView) {
        super(itemView);
        nameTxt= (TextView) itemView.findViewById(R.id.nameTxt);
    }
}

2. MyAdapter.java​

Nuestra clase adaptadora de recyclerview:

package com.tutorials.hp.dialogfragmentrecyclerview.mRecycler;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.tutorials.hp.dialogfragmentrecyclerview.R;

public class MyAdapter extends RecyclerView.Adapter<MyHolder> {

    Context c;
    String[] tvshows;

    public MyAdapter(Context c, String[] tvshows) {
        this.c = c;
        this.tvshows = tvshows;
    }

    //INITIALIE VH
    @Override
    public MyHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v= LayoutInflater.from(parent.getContext()).inflate(R.layout.model,parent,false);
        MyHolder holder=new MyHolder(v);
        return holder;
    }

    //BIND DATA
    @Override
    public void onBindViewHolder(MyHolder holder, int position) {
       holder.nameTxt.setText(tvshows[position]);
    }

    @Override
    public int getItemCount() {
        return tvshows.length;
    }
}

TVShowFragment.java​

Este es nuestro DialogFragment. Deriva de android.app.DiloagFragment.

Esta clase mostrará nuestro RecyclerView:

package com.tutorials.hp.dialogfragmentrecyclerview;

import android.app.DialogFragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
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.tutorials.hp.dialogfragmentrecyclerview.mRecycler.MyAdapter;

public class TVShowFragment extends DialogFragment {

    String[] tvshows={"Crisis","Blindspot","BlackList","Game of Thrones","Gotham","Banshee"};
    RecyclerView rv;
    MyAdapter adapter;

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

        View rootView=inflater.inflate(R.layout.fraglayout,container);

        //RECYCER
        rv= (RecyclerView) rootView.findViewById(R.id.mRecyerID);
        rv.setLayoutManager(new LinearLayoutManager(this.getActivity()));

        //ADAPTER
        adapter=new MyAdapter(this.getActivity(),tvshows);
        rv.setAdapter(adapter);

        this.getDialog().setTitle("TV Shows");

        return rootView;
    }
}

4. MainActivity.java​

Nuestra MainActivity.
Contendrá un botón que al ser pulsado mostrará nuestro DialogFragment:

package com.tutorials.hp.dialogfragmentrecyclerview;

import android.app.FragmentManager;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);

         final FragmentManager fm=getFragmentManager();
        final  TVShowFragment tv=new TVShowFragment();

        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
              tv.show(fm,"TV_tag");
            }
        });
    }

}

Ejemplo 2 - Android DialogFragment - ListView Search/Filter​

La idea de los diálogos es genial porque podemos sacarlos de la nada. El usuario puede entonces realizar su cosa y luego descartar el diálogo.

En este ejemplo creamos un dialogfragment que se muestra cuando se hace clic en un simple botón de nuestra [actividad] principal (https://camposha.info/android/activity).

Nuestro fragmento de diálogo contendrá un simple ListView y un SearchView. El ListView contendrá una lista de jugadores.

El searchview se puede utilizar para buscar los jugadores de la lista.

1. Nuestra clase MainActivity​

Esta es nuestra actividad principal.

Como clase es una activity ya que deriva de android.app.Activity.

---
package com.tutorials.dialogfragmenter;

import android.app.Activity;
import android.app.FragmentManager;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class MainActivity extends Activity {

  Button btn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final FragmentManager fm=getFragmentManager();
        final PlayersFragment p=new PlayersFragment();

        btn=(Button) findViewById(R.id.button1);
        btn.setOnClickListener(new OnClickListener() {

      @Override
      public void onClick(View arg0) {
        // TODO Auto-generated method stub
        p.show(fm, "Best Players");
      }
    });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}

2. Nuestra clase PlayerFragment.​

Esta es nuestra clase PlayerFragment.

---
package com.tutorials.dialogfragmenter;

import android.app.DialogFragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ListView;
import android.widget.SearchView;
import android.widget.SearchView.OnQueryTextListener;

public class PlayersFragment extends DialogFragment {

  Button btn;
  ListView lv;
  SearchView sv;
  ArrayAdapter<String> adapter;
  String[] players={"Lionel Messi","Christiano Ronaldo","Neymar","Gareth Bale"};

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
      Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    View rootView=inflater.inflate(R.layout.sports, null);

    //SET TITLE DIALOG TITLE
    getDialog().setTitle("Best Players In The World");

    //BUTTON,LISTVIEW,SEARCHVIEW INITIALIZATIONS
    lv=(ListView) rootView.findViewById(R.id.listView1);
    sv=(SearchView) rootView.findViewById(R.id.searchView1);
    btn=(Button) rootView.findViewById(R.id.dismiss);

    //CREATE AND SET ADAPTER TO LISTVIEW
    adapter=new ArrayAdapter<String>(getActivity(), android.R.layout.simple_list_item_1,players);
    lv.setAdapter(adapter);

    //SEARCH
    sv.setQueryHint("Search..");
    sv.setOnQueryTextListener(new OnQueryTextListener() {

      @Override
      public boolean onQueryTextSubmit(String txt) {
        // TODO Auto-generated method stub
        return false;
      }

      @Override
      public boolean onQueryTextChange(String txt) {
        // TODO Auto-generated method stub

        adapter.getFilter().filter(txt);
        return false;
      }
    });

    //BUTTON
    btn.setOnClickListener(new OnClickListener() {

      @Override
      public void onClick(View arg0) {
        // TODO Auto-generated method stub
        dismiss();
      }
    });

    return rootView;
  }

}

3. Nuestro diseño de la actividad principal​

Este es nuestro diseño principal de actividad.

---
<RelativeLayout

    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_paddingBottom="@dimen/activity_vertical_margin"
    android_paddingLeft="@dimen/activity_horizontal_margin"
    android_paddingRight="@dimen/activity_horizontal_margin"
    android_paddingTop="@dimen/activity_vertical_margin"
    tools_context=".MainActivity" >

    <Button
        android_id="@+id/button1"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_layout_alignParentLeft="true"
        android_layout_alignParentTop="true"
        android_layout_marginLeft="97dp"
        android_layout_marginTop="163dp"
        android_text="Show" />

</RelativeLayout>

4. Nuestro diseño de PlayerFragment​

Este es el diseño de nuestro DialogFragment.

Aquí están sus funciones:

---
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_orientation="vertical" >

    <SearchView
        android_id="@+id/searchView1"
        android_layout_width="match_parent"
        android_layout_height="wrap_content" >
    </SearchView>

    <ListView
        android_id="@+id/listView1"
        android_layout_width="match_parent"
        android_layout_height="326dp" >
    </ListView>

    <Button
        android_id="@+id/dismiss"
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
        android_text="Dismiss" />

</LinearLayout>

Nuestro Manifiesto​

Nuestro manifest.xml de android. Aquí se registra nuestra actividad.

<?xml version="1.0" encoding="utf-8"?>
<manifest
    package="com.tutorials.dialogfragmenter"
    android_versionCode="1"
    android_versionName="1.0" >

    <uses-sdk
        android_minSdkVersion="19"
        android_targetSdkVersion="19" />

    <application
        android_allowBackup="true"
        android_icon="@drawable/ic_launcher"
        android_label="@string/app_name"
        android_theme="@style/AppTheme" >
        <activity
            android_name="com.tutorials.dialogfragmenter.MainActivity"
            android_label="@string/app_name" >
            <intent-filter>
                <action android_name="android.intent.action.MAIN" />

                <category android_name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>