 |
|
||
|
#1
15/09/11, 22:10:13
|
||||
|
||||
|
New NiteUI - Interfaz de escritorio basada en NiteUI
Los chicos del blog “El Androide Libre” publicaron el otro día un artículo sobre una interfaz para Android llamada NiteUI con las instrucciones de cómo conseguirla. Esta interfaz intenta imitar el estilo gráfico del nuevo Market. Me pareció bastante atractiva y me decidí a crear una nueva versión de ésta, adaptándola a mi gusto.
Artículo del “Androide Libre”: http://www.elandroidelibre.com/2011/...aginacion.html Agradecer a Androidatnightdesigns por el trabajo de la interfaz original.  A continuación escribiré paso a paso qué se tiene que hacer para conseguir dejar el teléfono tal como aparece en las imágenes. Mis bases – un zip con tres archivos en formato PSD (Photoshop) - con las que podéis modificar a vuestro antojo lo que queráis de mi versión están AQUI Si modificáis alguna de las tres bases, tenéis que “Guardar como..” la base modificada para conseguir un PNG. ACTUALIZACIÓN 21/09/2011 Como he visto que alguno de vosotros se ha interesado por añadir más escritorios, he creado una nueva base PSD , donde he agrupado todo en un mismo archivo, agrupado por carpetas, por lo que activando/desactivando las vistas de éstas con el Photoshop, se pueden sacar rápidamente diferentes versiones de 3 y 4 escritorios . La nueva BASE Ejemplos con los 4 escritorios: Fondo1 - Fondo2 - Fondo3 - Fondo4 Multimedia de 3 escritorios - con SoundHound - AQUI Multimedia de 4 escritorios - con SoundHound - AQUI Social de 3 escritorios - con Google+ / Twitter - AQUI Social de 4 escritorios - con Google+ / Twitter - AQUI Social de 3 escritorios - con Google+ / Gtalk - AQUI Social de 4 escritorios - con Google+ / Gtalk - AQUI INICIO DEL TUTORIOAL: 1. Tener 3 archivos* PNG correspondientes a cada uno de los escritorios: Fondo1– Fondo2 – Fondo3 - Fondo3 (con Gtalk en lugar de Facebook) * los links corresponden a los de mi versión ACTUALIZACIÓN: Nuevos colores para el tema! Verde: Fondo1 - Fondo2 - Fondo3 - Fondo3 (con Gtalk en lugar de Facebook) Naranja: Fondo1 - Fondo2 - Fondo3 - Fondo3 (con Gtalk en lugar de Facebook) 2. Descargar 1 archivo PNG transparente (servirá para hacer invisibles elementos del escritorio que no queremos que se vean) – Icono_transparente 3. Copiar estos archivos en el teléfono 4. Descargar e instalar: ADWLauncher EX, Multipicture Live Wallpaper y Desktop Visualizer 5. Configurar el ADW Launcher: El ADW Launcher viene con 5 escritorios por defecto. Tenemos que dejarlo con 3. Pare ello, en cualquier escritorio, apretamos el botón de opciones (el táctil izquierdo) y seleccionamos “Editar”. Borramos los dos últimos. Dejamos limpios de iconos i widgets los 3 restantes. Pasamos a configurar las opciones del Launcher. Para ello, en cualquier escritorio, apretamos botón de opciones, y seleccionamos Más > ADWSettings Vamos a Interfaz > Barra Principal > Estilo barra principal > seleccionamos: 5 iconos, en el mismo menú: Tamaño barra principal > seleccionamos 4 Después vamos a Interfaz > Pantalla > Columnas escritorio y filas escritorio: seleccionamos 10. Deseleccionamos el Mostrar indicador de pantalla. En Posición de la papelera: marcamos No mostrar. Seleccionamos la opción: Solapar widgets y en Opciones avanzadas marcamos Auto Ajuste. Para que no se rote automáticamente el escritorio (incluso teniendo la rotación activada para las otras aplicaciones) dentro del menú de Pantalla ir a Orientación y seleccionar Vertical. En el menú Lista de Apps, a vuestro gusto. En Dockbar oculto, deseleccionar todo. En Animaciones y Efectos: deseleccionamos Scroll infinito. El Efecto de transición puesto en Normal y el Rebote puesto a 0. Marcamos la opción Desplazar Wallpaper. Todo lo demás a vuestro gusto. Por último, en Preferencias de Tema > Barra Principal > seleccionamos Nada. 6. Seleccionamos Fondo de pantalla > Fondos de pantalla en movimiento > MultiPicture Live Wallpaper > Ajustes. Apretamos en “Add individual settings” hasta añadir Screen 1 settings, Screen 2 settings y Screen 3 settings en el menú. Entramos en Screen 1 settings. Picture source > Single Picture > seleccionamos el Fondo_1 (por defecto, el Multimedia, el que quedará más a la izquierda). En Crop/Resize Ratio seleccionamos Fit to Fullscreen. Hacemos lo mismo en los otros Screen Settings pero cambiando seleccionando Fondo_2 y Fondo_3 en cada caso. En Transition Type marcamos Wipe y en Color Depth marcamos 24 bits (para que los degradados se vean correctamente). Tiramos atrás y apretamos Definir fondo de pantalla. Ahora tendremos los 3 escritorios con cada uno de los 3 fondos. 7. Configurar el Dock. Apretamos en el escritorio en cualquier punto hasta que aparezca una ventana y seleccionamos Laucher Actions > Abre/Cierra la lista de apps. Creamos otro. Tenemos que arrastrar estos dos iconos encima de los “ + “ que coinciden en la parte inferior donde pone “Menú Aplicaciones”. Para hacerlos invisibles mantenemos apretados hasta que aparezca el menú en burbuja y apretamos Editar. En la nueva ventana apretamos en la foto del icono, Seleccionar imagen > Galería > seleccionamos el Icono_transparente que habíamos guardado en el teléfono previamente y presionamos Aceptar. En el “ + “ del medio hacemos lo mismo pero en lugar de crear el acceso directo a Abre/Cierra la lista de apps ponemos, por ejemplo, el ADWSettings. Finalmente hacemos otra vez los mismo con los dos “ + “ del teléfono, esta vez creando un acceso directo a la aplicación Teléfono. 8. Desktop Visualizer. Este es el paso más pesado de todo el proceso. Tenemos que ir creando widgets y rellenar los 3 escritorios de esta manera:  El proceso para crearlos es el siguiente. Apretamos en cualquier punto del escritorio, Widgets > Desktop Visualzer > Destop Visualizer (2x1). En la configuración de tamaño le damos a Aceptar. Veremos que se ha creado un widget muy pequeño aun habiendo seleccionado un tamaño de 2x1. Eso es así por qué antes hemos configurado que el espacio del escritorio a 10x10 unidades, en lugar de las típicas 6x4 que vienen por defecto. Para redimensionar el widget que hemos creado, mantenemos pulsado sobre él hasta que aparezca el menú burbuja y seleccionamos Editar. Con las felchas lo dimensionamos a su tamaño correcto. Cuando tengamos todos los widgets creados toca configurarlos. Para ello apretamos sobre uno y se abrirá la app para configurar. En “Seleccione icono” escogemos el Icono_transparente. En “Seleccionar acción” marcamos la misma aplicación donde está situado el widget. Borramos la “Etiqueta” y el “Toque Efecto” marcamos Ninguno. P.D. Para los widgets centrales (donde estan los widgets de Música, el Calendario y la Previsión Climática y el Texto) no hace falta crear un widget con el Desktop Visualizer, ya que se agregan de manera tradicional. P.D.2 Los widgets encima de “Multimedia”, “Inicio” y “Social” en lugar de seleccionar una app, seleccionaremos una Launcher Action > Screen 1, correspondiente a cada una de las pantallas. 9. Otros widgets. Si en alguna de las casillas (en este caso, Juegos) tenemos más de una app, podemos crear un widget invisible (usando el Icono_transparente) con el programa SiMi Folder. Esto sirve para crear una carpeta que al ser seleccionada, despliegue un menú con las diferentes aplicaciones que hayamos configurado en ella. Los demás widgets que no se han creado con el Desktop Visualizer son: El Widget de música (4x1) se trata de la aplicación UberMusic. El Calendario es el Simple Calendar - con la opción Skin de Reloj SiMi (eventos múltiples). Y el widget de clima es el Beautiful Widgets. Los textos con el Minimalistic Text Widget y los accesos directos a: cambio 3G-2G, wifi, bloquear pantalla, brillo y modo avión son con la aplicación Extended Controls. 10. Pantalla de bloqueo. Para la pantalla de bloqueo he usado la aplicación Agile Lock. En ella he configurado un nuevo fondo (LINK) y los cuatro iconos personalizados (LINK). Además del widget del reloj llamado BobClockD3 y un widget de música de la aplicación UberMusic (2x1). Saludos! Última edición por rlostao Día 21/09/11 a las 19:36:42. 
|
| Los siguientes 74 usuarios han agradecido a rlostao su comentario: | ||
|
|
|
#2
15/09/11, 22:41:15
|
||||
|
||||
|
la verdad que queda muy bonito, me gustaría encontrar un tema así, pero sin la necesidad de tener que instalar tantas aplicaciones, ya que terminan dando algún conflicto, lo idea sería algún tema que se pueda instalar directamente en la ROM.
De todos modos te felicito por el curre con el tutorial, más de uno lo agradecerá!! Última edición por pablo563 Día 15/09/11 a las 22:53:20.
|
| Gracias de parte de: | ||
|
#3
15/09/11, 22:49:18
|
||||
|
||||
|
Con 2 cojones, bien explicadito paso a paso para la gente cortita como yo jajaja
Muchísimas gracias por el trabajo que te has pegado, y personalmente, me gusta mas tu interfaz que la original. Edito: Por cierto, que widget es el que tienes puesto encima de Multimedia, Inicio y Social en la ventana principal. El widget de 3g, wifi, bloquear teclado, brillo y modo avión. Última edición por DuRYKuN Día 16/09/11 a las 01:54:22.
|
| Gracias de parte de: | ||
|
#4
16/09/11, 05:06:16
|
||||
|
||||
|
Excelente aporte.
Muy claro el tutorial, me quedó estupendo. La única duda que resta es la lupa al costado superior derecho. ¿A qué corresponde? Muchísimas Gracias. Saludos Cordiales. Última edición por CaraRaja Día 16/09/11 a las 05:19:07.
|
| Gracias de parte de: | ||
|
#5
16/09/11, 05:56:11
|
||||
|
||||
|
¡¡¡Curradísimo!!! ¡Gracias!
|
|
#6
16/09/11, 10:16:58
|
||||
|
||||
 Cita: Originalmente Escrito por CaraRaja
La única duda que resta es la lupa al costado superior derecho. ¿A qué corresponde?
 Cita: Originalmente Escrito por DuRYKuN
Por cierto, que widget es el que tienes puesto encima de Multimedia, Inicio y Social en la ventana principal. El widget de 3g, wifi, bloquear teclado, brillo y modo avión.
Saludos! Última edición por rlostao Día 16/09/11 a las 12:16:34.
|
|
#8
16/09/11, 13:47:23
|
||||
|
||||
|
¡Felicidades rlostao! Un trabajo muy bueno, y gracias!!! porque con el NiteUI "original" no era capaz de configurarlo, no cuadraban los botones, con el tuyo perfecto
 Un detallito, yo en el transition effect del wallpaper, en vez de fade he puesto wipe, para mi gusto queda mucho mejor, así los widgets parece que acompañan al propio wallpaper, de la otra forma quedaba raro, los widgets por un lado y el wall por otro. Un mini fallo sin mucha importancia, pero que si lo corriges perfecto! en el fondo "multimedia" si te fijas en el borde justo encima de los titulos hay un pequeño degradado entre la parte superior y este. Este degradado no existe en los otros dos fondos, sino que es un corte directo, tienes que fijarte para verlo, y con el Wipe que te digo, se nota mucho más.  A ver si busco un hueco para incluir algún desktop más, que yo acostumbrado a 7 ahora me faltan por todos lados 
|
|
#10
17/09/11, 03:05:19
|
||||
|
||||
|
Autentica chulada!! soberbio!! en mi opinión más guapo que el original, lo ví en el android libre y pensaba ponermelo, pero como no tengo photoshop y la versión original no me cuadraba mucho decedí dejarlo, ahora con tu versión me ha quedado todo muy bien, lo único que cambiaría el icono de facebook por el gtalk(no uso facebook), pero como estoy sin photoshop tendrè que aguantarme. Muy buen curro te has pegado y maginifico Tuto, muchas gracias.
|
|
#11
17/09/11, 11:11:30
|
||||
|
||||
|
Muchisimas gracias!!
 La verdad esq lo vi el otro dia en elandroidelibre pero no supe hacerlo y con tu tutorial es facilisimo ... Pero tengo unas cuantas dudas colega, creo que soy el unico de aqui que lo ha hecho en un HTC Desire y al poner el tlf en horizontal el findo de pantalla no me cuadra logicamente, habria alguna forma de arreglarlo??? Y la otra duda, ya que has puesto los archivos de las imagenes en PSD, podrias decirme cual es la fuente que has usado para las imagenes?? Saludos!!
|
|
#12
17/09/11, 15:31:04
|
||||
|
||||
|
Cita: Originalmente Escrito por goteki
Un detallito, yo en el transition effect del wallpaper, en vez de fade he puesto wipe, para mi gusto queda mucho mejor, así los widgets parece que acompañan al propio wallpaper, de la otra forma quedaba raro, los widgets por un lado y el wall por otro.
Un mini fallo sin mucha importancia, pero que si lo corriges perfecto! en el fondo "multimedia" si te fijas en el borde justo encima de los titulos hay un pequeño degradado entre la parte superior y este. Este degradado no existe en los otros dos fondos, sino que es un corte directo, tienes que fijarte para verlo, y con el Wipe que te digo, se nota mucho más. Lo de poner el fondo el Wipe, lo he provado y si que queda mucho mejor. En el tuto puse que tenia puesto el FadeIn/Out pero me lié, llevaba puesto el CrossFade, pero mucho mejor el Wipe! Cita: Originalmente Escrito por DuRYKuN
En el Agile Lock me aparece Press Menu To Unlock, y no se quitarlo, que opcion tengo que quitar? Estoy investigando y ni idea... jaja
Cita: Originalmente Escrito por Jorgefc82
lo único que cambiaría el icono de facebook por el gtalk(no uso facebook), pero como estoy sin photoshop tendrè que aguantarme.
Fondo_3_Gtalk Cita: Originalmente Escrito por W2789
Pero tengo unas cuantas dudas colega, creo que soy el unico de aqui que lo ha hecho en un HTC Desire y al poner el tlf en horizontal el findo de pantalla no me cuadra logicamente, habria alguna forma de arreglarlo???
Y la otra duda, ya que has puesto los archivos de las imagenes en PSD, podrias decirme cual es la fuente que has usado para las imagenes?? La fuente para las imágenes del fondo de escritorio es la Arial. Saludos!
|
|
#14
17/09/11, 16:03:01
|
||||
|
||||
|
Última edición por rlostao Día 17/09/11 a las 16:08:39.
|
|
#15
17/09/11, 16:56:20
|
||||
|
||||
|
Por cierto, para los que hacemos muchos wipes para flashear roms, haciendo backup con titanium de ADWLauncher EX, Multipicture Live Wallpaper y Desktop Visualizer se quedará como estaba?
|
|
#16
17/09/11, 16:58:54
|
||||
|
||||
|
Cita: Originalmente Escrito por rlostao
Lo de la pantalla horizontal, no es problema de tu Desire, pasa en todos los teléfonos. Es imposible que el tema coincida en horizontal, ya que la imágenes son estáticas... Yo lo he solucionado de la siguiente manera. He desactivado en las opciones del ADWLauncher que se gire al poner el teléfono en horizontal, aun teniendo el sensor activado, para que me funcione en otras aplicaciones: navegador, galería de fotos, etc.
La fuente para las imágenes del fondo de escritorio es la Arial. Saludos!
|
|
#17
17/09/11, 17:31:34
|
||||
|
||||
|
Esta muy currado, muchas gracias !
No me gusta pedir pero es que soy nulo editando imagenes asi qe si alguien se anima a cambiar lo del twiter por el tuenti vamos ya me qedaria perfecto Un saludo !!!
|
|
#18
17/09/11, 19:01:30
|
||||
|
||||
|
Me lo he puesto todo todito esta mañana y queda de lujo!!
Ademas todo muy bien explicado, eso si, creo que veoy a tener que cambiar alguna cosilla por photosop, ya que el google reader mas bien no lo utilizo, aunque tampoco se que poner! jeje Pero muy currao! queda muy profesional!! si me curro alguna modificación del tuyo lo cuelgo por aqui
|
|
#19
17/09/11, 19:01:45
|
||||
|
||||
|
lo primero de todo gracias x el tutorial, esta perfecto
 pero tengo un par de dudas: 1º como se configura el simple calendar para que salga mas de un evento? 2º como se pone la hora en letras? graciass
|
|
|
|
#20
17/09/11, 19:11:47
|
||||
|
||||
|
Cita: Originalmente Escrito por fran10kid
2º como se pone la hora en letras?
|
 |
Estás aquí
|
||||||
|
||||||
![Array
[xs_avatar]](https://avatar.htcmania.com/avatares/avatar459706_2.gif){kind=avatar}
![Array
[xs_avatar]](https://avatar.htcmania.com/avatares/avatar495545_3.gif){kind=avatar}
![Array
[xs_avatar]](https://avatar.htcmania.com/avatares/unknown.gif)
![Array
[xs_avatar]](https://avatar.htcmania.com/avatares/avatar584552_1.gif){kind=avatar}
![Array
[xs_avatar]](https://avatar.htcmania.com/avatares/avatar213101_2.gif){kind=avatar}
![Array
[xs_avatar]](https://avatar.htcmania.com/avatares/avatar329686_3.gif){kind=avatar}
![Array
[xs_avatar]](https://avatar.htcmania.com/avatares/avatar527242_4.gif){kind=avatar}
![Array
[xs_avatar]](https://avatar.htcmania.com/avatares/avatar317147_13.gif){kind=avatar}
![Array
[xs_avatar]](https://avatar.htcmania.com/avatares/avatar354406_1.gif){kind=avatar}