{"id":173,"date":"2017-03-20T00:33:55","date_gmt":"2017-03-20T00:33:55","guid":{"rendered":"https:\/\/blog.jkanework.com\/post.php?idpost=173"},"modified":"2017-03-20T00:33:55","modified_gmt":"2017-03-20T00:33:55","slug":"crear-dialogos-personalizados-en-android","status":"publish","type":"post","link":"https:\/\/blog.jkanetwork.com\/?p=173","title":{"rendered":"Crear dialogos personalizados en Android"},"content":{"rendered":"

Buenas lectores, con el desarrollo de ThiefBuster<\/em>s<\/em>, el juego que estamos creando para Android, cada día nos encontramos con retos más grandes, hace unos días tenía la misión de crear un diálogo para pedir los datos al usuario cuando fuese la primera vez que jugara y aprendí como hacer un diálogo personalizado y que se mostrara y funcionara. En este tutorial os enseñaré como lo hice para que os pueda servir aunque daré por hecho que ya sabéis programar en Java, hacer Layouts para Android y tenéis algo de idea en lo que respecta a un Evento y su captura.<\/p>\n

Lo primero que tenéis que tener claro es que un diálogo es un proceso distinto al programa principal así que cuando lo llamemos tendremos que tener en cuenta que las sentencias siguientes se ejecutarán con normalidad.<\/p>\n

Ahora, realizamos un layout, a ser posible relativo y ponemos en el lo que queremos que aparezca. Aquí os dejo el Layout en cuestión que hicimos para el diálogo:<\/p>\n

<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    android:layout_width=\"match_parent\" android:layout_height=\"match_parent\">\n    <TextView\n        android:id=\"@+id\/welcome\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:text=\"EEEEE\"\n        android:textSize=\"20dp\"\n        android:layout_marginTop=\"12dp\"\n        android:layout_alignParentTop=\"true\"\n        android:layout_centerHorizontal=\"true\" \/>\n    <TextView\n        android:id=\"@+id\/name\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:layout_marginTop=\"5dp\"\n        android:text=\"EEEEE\"\n        android:layout_below=\"@+id\/welcome\"\n        android:layout_centerHorizontal=\"true\" \/>\n    <TextView\n        android:id=\"@+id\/textView\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:layout_below=\"@+id\/welcome\"\n        android:layout_centerHorizontal=\"true\"\n        android:layout_marginTop=\"5dp\"\n        android:text=\"\" \/>\n    <EditText\n        android:id=\"@+id\/nameBox\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:ems=\"10\"\n        android:inputType=\"textPersonName\"\n        android:text=\"\"\n        android:layout_marginTop=\"11dp\"\n        android:layout_below=\"@+id\/name\"\n        android:layout_centerHorizontal=\"true\" \/>\n    <TextView\n        android:id=\"@+id\/sex\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:layout_marginTop=\"12dp\"\n        android:text=\"WWWWWWWWW\"\n        android:layout_below=\"@+id\/nameBox\"\n        android:layout_centerHorizontal=\"true\" \/>\n    <RadioGroup\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:layout_alignLeft=\"@+id\/name\"\n        android:layout_alignStart=\"@+id\/name\"\n        android:layout_below=\"@+id\/sex\"\n        android:layout_marginTop=\"25dp\"\n        android:orientation=\"horizontal\">\n        <RadioButton\n            android:id=\"@+id\/girl\"\n            android:layout_width=\"wrap_content\"\n            android:layout_height=\"wrap_content\"\n            android:text=\"\"\n            android:checked=\"true\"\n            android:layout_alignBaseline=\"@+id\/boy\"\n            android:layout_alignBottom=\"@+id\/boy\"\n            android:layout_alignRight=\"@+id\/textView\"\n            android:layout_alignEnd=\"@+id\/textView\" \/>\n        <RadioButton\n            android:id=\"@+id\/boy\"\n            android:layout_width=\"wrap_content\"\n            android:layout_height=\"wrap_content\"\n            android:text=\"\"\n            android:layout_below=\"@+id\/sex\"\n            android:layout_toRightOf=\"@+id\/textView\"\n            android:layout_toEndOf=\"@+id\/textView\" \/>\n    <\/RadioGroup>\n<\/RelativeLayout><\/code><\/pre>\n
\n
Detalle, la razón por la que los textos son así es porque luego los cambiamos dinámicamente.<\/p>\n<\/blockquote>\n
 Luego de tener el layout bien definido creamos una clase con el nombre que queramos y la extendemos de DialogFragment (ojo DialogFragment de android.app)<\/p>\n
public class NewUserDialog extends DialogFragment<\/code><\/pre>\n
Luego sobrescribimos el método onCreateDialog al que le pasamos un Bundle y que devuelve un Dialog (que no DialogFragment). Aquí la cosa se complica pero voy a intentar explicarlo lo mejor posible.<\/p>\n
Lo primero que tenemos que hacer es definir que Layout vamos a usar. Lo hacemos con esta línea.<\/p>\n
 final View content = getActivity().getLayoutInflater().inflate(R.layout.dialog_new_user,null);<\/code><\/pre>\n
Obviamente el layout será con el nombre que sea.<\/p>\n
Sobre la constante content haremos las funciones para seleccionar partes del layout:<\/p>\n
content.findViewById(R.id.welcome);<\/code><\/pre>\n
Y todas las cosas referentes al manejo dinámico del layout.<\/p>\n
Una vez que hayamos modificado lo necesario el layout de manera dinámica hacemos lo siguiente.<\/p>\n
Creamos un nuevo AlertDialog.Builder (nuevamente de android.app)<\/p>\n
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());<\/code><\/pre>\n
Y ahora creamos el dialogo con el siguiente juego de instrucciones:<\/p>\n
builder.setView(content)\n                \/\/ Add action buttons\n                .setPositiveButton(\"\"\/*Mensaje para el botón positivo*\/, new DialogInterface.OnClickListener() {\n                    @Override\n                    public void onClick(DialogInterface dialog, int id) {\n                        \/\/Código para cuando se haga click en positivo\n                    }\n                })\n                .setNegativeButton(\"\"\/*Mensaje para el botón negativo*\/, new DialogInterface.OnClickListener() {\n                    @Override\n                    public void onClick(DialogInterface dialog, int id) {\n                        \/\/Código para cuando se haga click en negativo\n                    }\n                });\nreturn builder.create();<\/code><\/pre>\n
Recordad que es asíncrono, por lo que tener cuidado si se espera algo del diálogo poner eso en los onClick y no después de abrirlo.<\/p>\n
Ahora, tras generar el cuadro de diálogo tendremos que mostrarlo, pues bien, así es como lo coseguí.<\/p>\n
Nos vamos a la clase donde se mostrará el diálogo (la clase debe disponer del método getFragmentManager()) y en el momento en el que queramos que se muestre el diálogo hacemos lo siguiente.<\/p>\n
DialogFragment d = new NewUserDialog(); \/\/Instanciamos la clase con el dialogo\nd.setCancelable(false);\/\/Hacemos que no se pueda saltar el dialogo (opcional)\nd.show(getFragmentManager(), \"NEWUSER\"\/*Tag que particularmente no le he encontrado utilidad*\/); \/\/Mostramos el dialogo<\/code><\/pre>\n
Y así ya tenemos un diálogo en la pantalla.<\/p>\n
Si alguno de los pasos no está claro, has conseguido hacerlo de otra forma o hay algo erróneo no ovlides dejarlo en los comentarios. Dale me gusta si te ha ayudado y comparte por las redes sociales, muchas gracias por leernos y nos vemos en el próximo artículo.<\/p>\n","protected":false},"excerpt":{"rendered":"
Buenas lectores, con el desarrollo de ThiefBusters, el juego que estamos creando para Android, cada día nos encontramos con retos más grandes, hace unos días tenía la misión de crear un diálogo para pedir los datos al usuario cuando fuese la primera vez que jugara y aprendí como hacer un diálogo personalizado y que se […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-173","post","type-post","status-publish","format-standard","hentry","category-tutoriales"],"_links":{"self":[{"href":"https:\/\/blog.jkanetwork.com\/index.php?rest_route=\/wp\/v2\/posts\/173","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.jkanetwork.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.jkanetwork.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jkanetwork.com\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jkanetwork.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=173"}],"version-history":[{"count":0,"href":"https:\/\/blog.jkanetwork.com\/index.php?rest_route=\/wp\/v2\/posts\/173\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.jkanetwork.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=173"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jkanetwork.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=173"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jkanetwork.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}