Added articles: Material Design and User interface design for the English and Spanish language (#32779)
* Added article Material Design * Spanish translation of Material Design article. * Added article User interface design * Spanish translation of User interface design. * Fixed more information and courses of the article material design (guide english and spanish) * Fixed more information and courses of the article user interface design (guide english and spanish) * Fixed localTitle of the article material design (guide spanish) * Fixed localTitle of the article user interface design (guide spanish) * fix/suggested-changes * fix/suggested-changes
This commit is contained in:
Fahed
Tom
60
guide/english/android-development/material-design/index.md
Normal file
60
guide/english/android-development/material-design/index.md
Normal file
@ -0,0 +1,60 @@
|
||||
---
|
||||
title: Material Design
|
||||
---
|
||||
# Material Design
|
||||
Material Design is a design system to build bold and beautiful digital products. Created by a team of UX engineers and designers on Google. Google added the material design concept in Android 5.0 - Lollipop. Currently used in Android, IOS, Flutter, and Web.
|
||||
|
||||
It uses the experiences of the physical world to make user interfaces (UI) more intuitive, using the following concepts: Light, shadow and volumes of renderings. Material Design focuses on 4 main concepts:
|
||||
|
||||
- Tangible surfaces
|
||||
- Bold graphic design
|
||||
- Significant movement
|
||||
- Adaptive design
|
||||
|
||||
## Tangible surfaces
|
||||
You have an intuition about what objects will feel like, just look at them, we call them Affordances. The material design takes the basic principles of Affordances to make our UI more intuitive.
|
||||
|
||||
In material design, the UI has pieces of digital paper called surfaces, so everything on the screen is on a surface. The shadows transmit relative elevation.
|
||||
|
||||
Floating Action Button is a distinctive pattern of Material Design. It is easy to access and communicates importance, it has elevation and interaction characteristics.
|
||||
|
||||
There are two forms of visual feedback in response to touch:
|
||||
|
||||
- Subtle wave effect, based on the ink ripple, a radial movement that goes to the limits of the surface.
|
||||
- Elevation of Surface, feeling as if the touch attracts the surface.
|
||||
|
||||
## Graphic Design Bold
|
||||
Material Design uses color with a bold purpose, not only for aesthetics but to make apps easier to use. The Material Design color palette recommends 2 shades and an accent color.
|
||||
|
||||
- Primary color: Usually used for the bottom of the action bar.
|
||||
- Primary dark color: Usually used for the background of the status bar.
|
||||
- Accent color: Highlighting color, enveloping and completely adaptable to your app.
|
||||
|
||||
Roboto typography is the standard typeface on Android. The use of Roboto ensures us to work with a variety of languages, it is clearer and readable on any screen.
|
||||
|
||||
Good images make us form a connection with the theme, sympathize with their joy, pain or pleasure, for this you use photography to convey a bold and dynamic meaning, the illustration to convey a playful and elegant meaning, the iconography conveys an elegant meaning and refined. All this helps create an immersive experience.
|
||||
|
||||
|
||||
## Significant Movement
|
||||
Animations on Android have evolved since its inception. In the first versions, the animation only allowed to move, scale and vanish. In the version of Android 3.0 and 4.0, it became simpler and easier to use. In Android 4.4 we started talking about the scenes and transitions generating a new paradigm for the animation of objects in the UI. In Android 5.0, new ways the choreographing movements were added.
|
||||
|
||||
The animation in Android became very powerful in each version, nowadays there are many animation effects, with the purpose of providing continuity between different states of UI to create more comprehensible experiences.
|
||||
|
||||
|
||||
## Adaptive Design
|
||||
The adaptive design changes the UI based on the size of the screen, whether it is on a Nexus 4 (4.7 inches), Pixel XL (5.5 inches), Nexus 6 (6.0 inches) or a Nexus 10 (10.1 inches) phone ).
|
||||
|
||||
Breakpoints are points where the UI changes. When finding a breakpoint you should start to change the UI. You can start with the drawable, string, layout, orientation files. For specific adaptations, you can vary the number of columns, heights, and width of margins, space.
|
||||
|
||||
### More information
|
||||
- [Material Design para Android](https://developer.android.com/design/material/?hl=es-419)
|
||||
- [Material Components for Android](https://github.com/material-components/material-components-android)
|
||||
- [Material design specifications](https://material.io/design/introduction/#)
|
||||
- [Material Design](https://www.youtube.com/watch?v=Q8TXgCzxEnw)
|
||||
- [Material Design in the Google I/O App](https://www.youtube.com/watch?v=XOcCOBe8PTc&hl=es-419)
|
||||
- [Google I/O 2014 - Material design: Structure and components](https://www.youtube.com/watch?v=dZqzz5lZFvo)
|
||||
- [User interfaces using Material Design by Uplabs](https://www.uplabs.com/android)
|
||||
|
||||
### Courses
|
||||
- [Material Design for Android Developers](https://www.udacity.com/course/material-design-for-android-developers--ud862)
|
||||
- [Codelab](https://codelabs.developers.google.com/codelabs/material-design-style-sp/index.html#0)
|
||||
@ -0,0 +1,71 @@
|
||||
---
|
||||
title: User Interface Design
|
||||
---
|
||||
# User Interface Design
|
||||
The layout defines the user interface (UI) of an activity or [widget of an app](https://developer.android.com/guide/topics/appwidgets/?hl=en-419). You can declare the layout in 2 ways:
|
||||
1. Declare elements in the UI in XML.
|
||||
2. Create instances of design elements programmatically.
|
||||
|
||||
Programmers usually use default app layouts in XML, then we modify the state of the objects on the screen using the code, including those declared in XML.
|
||||
|
||||
The Android SDK includes many design elements, which you can configure to achieve the desired appearance and behavior. Each of these elements is an instance of the View class or one of its subclasses, for example, TextView or Button.
|
||||
|
||||
## ViewGroup vs View
|
||||
|
||||
The view is the superclass of all Android components. These are some of the components derived from View: TextView, EditText, ImageView, ProgressBar, Button, ImageButton, CheckBox, DatePicker, and others
|
||||
|
||||
ViewGroup is a collection of Views, similar to a container. It can contain Views and other ViewGroups. Some of these components derived from ViewGroup are the following: LinearLayout, RelativeLayout, CoordinatorLayout, ListView, GridView, ConstraintLayout, RecyclerView.
|
||||
|
||||
## The hierarchy of views
|
||||
The design elements are in a hierarchy of View objects called the view hierarchy.
|
||||
|
||||
The root element of this hierarchical view shown in the image is a LinearLayout object. LinearLayout inherits from a subclass of View called ViewGroup. We use LinearLayout to sort the elements in a single row or column.
|
||||
|
||||
## Attributes
|
||||
Each View and ViewGroup object supports its own variety of XML attributes.
|
||||
Some attributes are common among all elements because they inherit from View, such as the following:
|
||||
```
|
||||
android:id="@+id/button"
|
||||
```
|
||||
- The attribute **android:id** allows to have any element an ID to identify it exclusively in the hierarchy of views
|
||||
```
|
||||
android:layout_width="wrap_parent"
|
||||
android:layout_height="match_parent"
|
||||
```
|
||||
- The attributes **android:layout_width** and **android:layout_height**. Any design element uses them. Its typical values are match_parent or wrap_content.
|
||||
- match_parent: The view will be as big as your father.
|
||||
- wrap_content: The view will be as large as you need the elements that contain it.
|
||||
|
||||
Other attributes are specific, which vary depending on the element:
|
||||
```
|
||||
android:orientation="horizontal"
|
||||
```
|
||||
- The **android:orientation** attribute present in the LinearLayout element determines whether your children appear horizontally or vertically.
|
||||
```
|
||||
android:textSize="10sp"
|
||||
```
|
||||
- The **android:textsize** attribute present in Button or TextView. It tells the elements the size of the text to be used.
|
||||
|
||||
## Character string resources
|
||||
In each Android project, you have the file called **string.xml**, to store the character string. Recommended to put all the strings of characters in this file and then we refer to it from each particular element, this allows us to easily find its location.
|
||||
|
||||
Although by default the file with the character string resources is called **string.xml** we can call it as we want and even have several in the project, as long as we maintain its format.
|
||||
|
||||
## From layout.xml to View
|
||||
Every Activity created needs a UI to manage, to provide it we call the setContentView method of the Activity.
|
||||
```
|
||||
setContentView(R.layout.main_activity);
|
||||
```
|
||||
The setContentView method displays a layout, that is, an interface and displays it on the screen. When deploying a layout, an instance of each design element contained in the layout file is created, according to the definition of its attributes. To specify which layout is deployed, we pass to the method the resource Id of that layout.
|
||||
```
|
||||
Button button = (Button) findViewById(R.id.button);
|
||||
```
|
||||
To connect an element of the layout file to the Activity we use the findViewById method. This method accepts the resource Id of a widget as an argument and returns a View object.
|
||||
|
||||
### More Information
|
||||
- [Layouts](https://developer.android.com/guide/topics/ui/declaring-layout?hl=en-419)
|
||||
- [Layout resource](https://developer.android.com/guide/topics/resources/layout-resource?hl=es-419)
|
||||
|
||||
### Courses
|
||||
- [Material Design for Android Developers](https://www.udacity.com/course/material-design-for-android-developers--ud862)
|
||||
- [CodeLabs](https://codelabs.developers.google.com/codelabs/material-design-style-sp/index.html#0)
|
||||
59
guide/spanish/android-development/material-design/index.md
Normal file
59
guide/spanish/android-development/material-design/index.md
Normal file
@ -0,0 +1,59 @@
|
||||
---
|
||||
title: Material Design
|
||||
localeTitle: Diseño de Materiales
|
||||
---
|
||||
# Diseño de Materiales
|
||||
Material Design es un sistema de diseño para construir productos digitales audaces y hermosos. Creado por un equipo de ingenieros y diseñadores de UX en Google. Google agrego el concepto material design en Android 5.0 - Lollipop. Actualmente utilizado en Android, IOS, Flutter y Web.
|
||||
|
||||
Emplea las experiencias del mundo físico para hacer interfaces de usuario (UI) mas intuitivos, utilizando los siguientes conceptos: La luz, la sombra y volúmenes de renderizados. Material Design se centra en 4 conceptos principales:
|
||||
|
||||
- Superficies tangibles.
|
||||
- Diseño grafico audaz.
|
||||
- Movimiento significativo.
|
||||
- Diseño adaptativo.
|
||||
|
||||
## Superficies Tangibles
|
||||
Tu tienes intuición sobre que objetos se sentirán como, con solo mirarlos, a estos los llamamos Affordances. Material design toma los principios básicos de Affordances para hacer nuestra UI mas intuitiva.
|
||||
|
||||
En material design la UI tiene de piezas de papel digital llamados superficies, por lo tanto todo en pantalla esta sobre una superficie. Las sombras transmiten elevación relativa.
|
||||
|
||||
Floating Action Button es un patrón distintivo del Material Design. Es de fácil acceso y comunica importancia, cuenta con características de elevación y de interacción.
|
||||
|
||||
Existen dos formas de retroalimentación visual en respuesta al tacto:
|
||||
|
||||
- Efecto de Onda Sutil, basada en la ondulación de tinta, un movimiento radial que va hasta los limites de la superficie.
|
||||
- Elevación de Superficie, sensación como si el toque atrae la superficie.
|
||||
|
||||
## Diseño Grafico Audaz
|
||||
Material Design usa el color con un propósito audaz, no solo por estética sino para hacer apps mas fáciles de usar. La paleta de colores de Material Design recomienda 2 tonalidades y un color de acento.
|
||||
|
||||
- Color primario : Usualmente usado para el fondo de la barra de acción.
|
||||
- Color oscuro primario : Usualmente usado para el fondo de la barra de estado.
|
||||
- Color de acento : Color resaltante, envolvente y completamente adaptable a su app.
|
||||
|
||||
La tipografía Roboto es el tipo de letra estándar en Android. El uso de Roboto nos asegura trabajar con una variedad de idiomas, es mas claro y legible en cualquier pantalla.
|
||||
|
||||
Buenas imágenes nos hacen formar una conexión con el tema, simpatizar su alegría, dolor o placer, para ello usted utiliza la fotografía para transmitir un significado audaz y dinámico,la ilustración para transmitir un significado lúdico y elegante, la iconografía transmite un significado elegante y refinado. Todo ello ayuda a crear una experiencia de inmersión.
|
||||
|
||||
## Movimiento Significativo
|
||||
Las animaciones en Android han evolucionado desde sus inicios. En las primeras versiones la animación solo permitía mover, escalar y desvanecer. En la versión de Android 3.0 y 4.0 se hizo mas simple y fácil de usar. En Android 4.4 comenzamos a hablar sobre las escenas y transiciones generando un nuevo paradigma para la animación de objetos en la UI. En Android 5.0 se agrego nuevas formas de coreografiar el movimiento.
|
||||
|
||||
La animación en Android se volvió muy poderoso en cada versión, en la actualidad existen muchos efectos de animación, con el propósito de proporcionar continuidad entre diferentes estados de UI para crear experiencias más comprensibles.
|
||||
|
||||
## Diseño Adaptativo
|
||||
El diseño adaptativo cambia la UI basado en el tamaño de la pantalla, ya sea que se encuentre en un teléfono Nexus 4 (4.7 pulgads), Pixel XL (5.5 pulgadas), Nexus 6 (6.0 pulgadas) o una tablet Nexus 10 (10.1 pulgadas).
|
||||
|
||||
Los breakpoints son puntos donde la UI cambia. Al encontrar un breakpoint debe empezar a cambiar la UI. Usted puede empezar por los archivos drawables, string, layout, orientación. Para adaptaciones especificas usted puede variar el numero de columnas, alturas y anchura de márgenes, espacio.
|
||||
|
||||
### Más Información
|
||||
- [Material Design para Android](https://developer.android.com/design/material/?hl=es-419)
|
||||
- [Material Components for Android](https://github.com/material-components/material-components-android)
|
||||
- [Material design specifications](https://material.io/design/introduction/#)
|
||||
- [Material Design](https://www.youtube.com/watch?v=Q8TXgCzxEnw)
|
||||
- [Material Design in the Google I/O App](https://www.youtube.com/watch?v=XOcCOBe8PTc&hl=es-419)
|
||||
- [Google I/O 2014 - Material design: Structure and components](https://www.youtube.com/watch?v=dZqzz5lZFvo)
|
||||
- [User interfaces using Material Design by Uplabs](https://www.uplabs.com/android)
|
||||
|
||||
### Cursos
|
||||
- [Material Design for Android Developers](https://www.udacity.com/course/material-design-for-android-developers--ud862)
|
||||
- [Codelab](https://codelabs.developers.google.com/codelabs/material-design-style-sp/index.html#0)
|
||||
@ -0,0 +1,72 @@
|
||||
---
|
||||
title: User Interface Design
|
||||
localeTitle: Diseño de Interfaz de Usuario
|
||||
---
|
||||
# Diseño de Interfaz de Usuario
|
||||
El layout define la interfaz de usuario(UI) de un activity o un [widget de una app](https://developer.android.com/guide/topics/appwidgets/?hl=en-419). Puedes declarar el layout de 2 maneras:
|
||||
1. Declarar elementos en la UI en XML.
|
||||
2. Crear instancias de elementos de diseño de manera programática.
|
||||
|
||||
Generalmente los programadores usan diseños predeterminados de la app en XML, luego modificamos el estado de los objetos en la pantalla mediante código, incluidos los declarados en XML.
|
||||
|
||||
El SDK de Android incluye muchos elementos de diseño, los cuales puedes configurar hasta lograr la apariencia y el comportamiento deseado. Cada uno de estos elementos es una instancia de la clase View o de una de sus subclases, por ejemplo TextView o Button.
|
||||
|
||||
## ViewGroup vs View
|
||||
|
||||
La View es la súper clase de todos los componentes de Android. Estos son algunos de los componentes derivados de View : TextView, EditText, ImageView, ProgressBar, Button, ImageButton, CheckBox, DatePicker y otros
|
||||
|
||||
ViewGroup es una colección de Views, similar a un contenedor. Puede contener Views y otros ViewGroups. Algunos de estos componentes derivados de ViewGroup son los siguientes: LinearLayout, RelativeLayout, CoordinatorLayout, ListView, GridView, ConstraintLayout, RecyclerView.
|
||||
|
||||
## La jerarquía de vistas
|
||||
Los elementos de diseño se encuentran en una jerarquía de objetos View denominado jerarquía de vistas.
|
||||
|
||||
El elemento raíz de esta vista jerárquica mostrado en la imagen es un objeto LinearLayout. LinearLayout hereda de una subclase de View llamada ViewGroup. Utilizamos LinearLayout para ordenar los elementos en una sola fila o columna.
|
||||
|
||||
## Atributos
|
||||
Cada objeto View y ViewGroup admite su propia variedad de atributos XML.
|
||||
Algunos atributos son comunes entre todos los elementos porque heredan de View, como los siguiente:
|
||||
```
|
||||
android:id="@+id/button"
|
||||
```
|
||||
- El atributo **android:id** permite tener a cualquier elemento un ID para identificarlo de forma exclusiva en la jerarquía de vistas.
|
||||
```
|
||||
android:layout_width="wrap_parent"
|
||||
android:layout_height="match_parent"
|
||||
```
|
||||
- Los atributos **android:layout_width** y **android:layout_height** se utilizan para casi cualquier elemento de diseño. Sus valores típicos son match_parent o wrap_content.
|
||||
- match_parent: La vista será tan grande como su padre.
|
||||
- wrap_content: La vista será tan grande como lo necesite los elementos que lo contengan.
|
||||
|
||||
Otros atributos son específicos, los cuales varían dependiendo del elemento:
|
||||
```
|
||||
android:orientation="horizontal"
|
||||
```
|
||||
- El atributo **android:orientation** presente en el elemento LinearLayout determina si sus hijos aparecen de forma horizontal o vertical.
|
||||
```
|
||||
android:textSize="10sp"
|
||||
```
|
||||
- El atributo **android:textsize** presente en Button o TextView. Le indica a los elementos el tamaño de texto a usar.
|
||||
|
||||
## Recursos de cadenas de caracteres
|
||||
En cada proyecto Android se tiene el archivo llamado **string.xml**, para almacenar las cadena de caracteres. Recomendado juntar todas la cadenas de caracteres en este archivo y luego hacemos referencia a ella desde cada elemento particular, esto nos permite encontrar fácilmente su ubicación.
|
||||
|
||||
Aunque de forma predeterminada el archivo con los recursos de cadenas de caracteres se denomina **string.xml** lo podemos llamar como queramos e incluso tener varios en el proyecto, mientras mantengamos su formato.
|
||||
|
||||
## De layout.xml a View
|
||||
Toda Activity creada necesita una UI que gestionar, para proporcionársela llamamos al método setContentView de la Activity.
|
||||
```
|
||||
setContentView(R.layout.main_activity);
|
||||
```
|
||||
El método setContentView despliega un layout, es decir una interfaz y la muestra en pantalla. Al desplegar un layout, se crea una instancia de cada elemento de diseño contenido en el archivo de layout, de acuerdo con la definición de sus atributos. Para especificar que layout se despliega pasamos al método el Id de recurso de dicho layout.
|
||||
```
|
||||
Button button = (Button) findViewById(R.id.button);
|
||||
```
|
||||
Para conectar un elemento del archivo layout a la Activity utilizamos el método findViewById. Este método acepta el Id de recurso de un widget como argumento y devuelve un objeto View.
|
||||
|
||||
### Más Información
|
||||
- [Layouts](https://developer.android.com/guide/topics/ui/declaring-layout?hl=en-419)
|
||||
- [Layout resource](https://developer.android.com/guide/topics/resources/layout-resource?hl=es-419)
|
||||
|
||||
### Cursos
|
||||
- [Material Design for Android Developers](https://www.udacity.com/course/material-design-for-android-developers--ud862)
|
||||
- [CodeLabs](https://codelabs.developers.google.com/codelabs/material-design-style-sp/index.html#0)
|
||||
Reference in New Issue
Block a user