¿Cómo convierto un diseño PSD a un diseño XML Android?

UH oh…

Si bien los servicios mencionados por otros sin duda lo ayudarán a llegar allí, en última instancia nunca (estacando mi reputación aquí) una herramienta que realice esta conversión sin problemas. ¿Por qué? Porque al igual que CSS / HTML, hay varias formas de lograr la misma interfaz y cada una tiene sus propias limitaciones de compatibilidad.

Por ejemplo, comenzando con Android 5.0, los desarrolladores tuvieron la posibilidad de teñir cualquier Vista usando una referencia de color, algo que Photoshop logra con un efecto de capa.

Esto no era posible antes de Marshmallow y una solución habría sido superponer su Vista de destino con otra cuyo fondo estaba configurado con el color de tinte con una opacidad moderada. ¿Ves lo que quiero decir?

Esa es la única razón número uno. Otro problema que surge al tratar de convertir directamente desde PSD es el diseño de interacción. Un archivo de Photoshop no puede especificar cómo se comporta una Vista y qué elementos son dispares o parte de un todo mayor.

Esto surgió cuando busqué “buenas noticias”, de nada

Buenas noticias

Existen paralelos entre HTML / CSS y Android XML. Tutorials Point es un buen lugar para comenzar a entender cómo funciona todo, pero aquí hay un desglose aproximado que puede ayudarlo a obtener una mejor imagen:

ViewGroup → div

ViewGroup subclases de LinearLayout ( LinearLayout , RelativeLayout , FrameLayout y otras) actúan como contenedores para otras vistas y, al igual que los divs, podemos anidarlas una dentro de otra.

Advertencias: los grupos de vista generalmente definen cómo se distribuyen sus hijos. En CSS, modificaríamos la position y display propiedades de display de los elementos secundarios para organizarlos dentro del elemento primario, pero en la mayoría de los casos de Android, el grupo de vista elige la disposición.

Las excepciones incluyen RelativeLayout, AbsoluteLayout (en desuso) y algunos otros.

Ver → Literalmente todo lo demás

Si los grupos de vista se comportan como divs, entonces View y sus subclases son los elementos visuales que se encuentran dentro. Texto, entrada, casillas de verificación, imágenes y muchos más son descendientes de View .

Atributos XML / styles.xml → CSS

Al igual que HTML, podemos diseñar cada elemento de Android utilizando activos en línea o externos. Las propiedades en línea se parecen a sus contrapartes HTML:

Y si queremos usar un estilo externo para darle valor a este TextView , definiríamos uno similar en styles.xml (~ CSS):

  
   
      Stanley Idesis

Y aplique el estilo a nuestro TextView :

Advertencias: a diferencia de HTML / CSS, las vistas no aceptarán ningún atributo aleatorio. Las vistas definen sus propios atributos XML y heredan otras de sus padres. Los definidos por Vista, como background y layout_width están disponibles para todas las vistas. Pero solo la vista CompoundButton y sus subclases tienen la propiedad checked .

id → id !

Esta parte permanece prácticamente sin cambios entre Android y HTML / CSS. La principal diferencia entre los dos sistemas es que Android permite identificadores duplicados dentro del mismo diseño, pero no dentro del mismo grupo de vista.

Oh, te estoy aburriendo? LO SIENTO (llora para siempre)

TL; DR

Le recomiendo que use estas herramientas (configure.it, PSD 2 Android, etc.) como una forma de aprender cómo se pueden representar los elementos visuales en Android, pero en última instancia, aprenda cómo el XML y los estilos de Android trabajan juntos para crear diseños. Te encontrarás con situaciones que estas soluciones WYSIWYG no pueden manejar (ahí voy a replantear mi reputación nuevamente).

Si quieres convertirte en un desarrollador profesional de Android, no hay forma de aprender los detalles.

¡Gracias por leer! Si te gustó mi respuesta, por favor ¡” vota ” y sígueme para obtener más respuestas sobre Android, desarrollo de software y otras cosas divertidas!

¿Quieres trabajar juntos? Contáctame !