Los componentes son los elementos que combinamos para crear nuestras aplicaciones. Algunos son muy simples, como por ejemplo una etiqueta que muestra un texto en la pantalla, o un botón, mediante el cual podemos iniciar una determinada acción. Otros componentes son más elaborados; un componente Canvas que permite visualizar imágenes o animaciones; el acelerómetro, un sensor de movimiento que detecta cuando movemos o agitamos el teléfono; o componentes que nos permiten enviar mensajes de texto, reproducir música y video, obtener información desde páginas web, etc.
Cuando abrimos el Diseñador de Componentes, aparecerá la siguiente ventana.
El Diseñador de Componentes está dividido en varias partes:
En la parte central encontramos un área denominada Viewer. Aquí es donde colocaremos nuestros componentes en función de cómo queramos que sea el diseño visual de nuestra aplicación. Una vez especificados y añadidos los componentes, debemos probar como se visualiza realmente nuestra aplicación en un dispositivo Android, utilizando para ello un dispositivo físico o el emulador.
A la izquierda de la aplicación encontramos un área denominada Palette, en la que podemos encontrar la lista completa de componentes de AppInventor. La Palette está dividida en varias 20 categorías. Haciendo clic en cada una de ellas podremos ir viendo todos los componentes disponibles.
A la derecha del Viewer podemos ver el listado de Componentes, el cual muestra una lista de todos los componentes que vamos añadiendo a nuestra aplicación. Todos los componentes que vayamos añadiendo al Viewer, se irán mostrando automáticamente en el listado. Por defecto, siempre aparece el componente Screen1, que hace referencia a la pantalla del teléfono.
En la parte inferior podemos observar un área denominada Media que muestra todos los componentes multimedia (imágenes y sonidos) que incluyamos en nuestro proyecto.
Por último en la parte derecha de la aplicación, encontramos la sección de propiedades, mediante la cual podremos ir modificando, según nuestras necesidades, todos y cada uno de los elementos que vayamos incluyendo en la aplicación. La lista de propiedades irá cambiando en función del elemento que estemos editando, para ello haremos clic sobre el elemento deseado en el listado y aparecerán las propiedades que podemos modificar para el elemento actual seleccionado.