Para  criar  a  tela  do  aplicativo  usamos  a  ferramenta  de  desenho  do  Android  Studio  onde selecionamos os elementos gráficos na janela Palette e o arrastamos até a posição desejada na tela. Neste projeto serão utilizados os componentes EditText, TextView e SeekBar. Mas antes de arrasta-los, configuraremos o layout da tela.

GridLayout  é  um  tipo  de  layout  que  organiza  a  tela  como  uma  grade  retangular  com  linhas e colunas. Cada célula da grade ocupa uma linha e coluna, mas também pode ser configurada para usar mais de uma linha e coluna (propriedades span). É possível especificar as propriedades rows e  columns do GridLayout para definir quantas linhas e colunas a grade possui. Cada célula da grade  pode estar em branco, possuir uma ou mais Views, ou ainda incluir outro layout com outras views. A altura de uma linha é definida pela view mais alta da linha, similarmente, a largura de uma coluna é definida pela largura da maior view.

Cada  view  pode  especificar  em  qual  linha  e  coluna  se  encontra,  como  mostrado  na  Tabela  1.  A View1  possui  as  propriedades  row  e  column  como  0,  a  View2  possui  as  propriedades  row  0  e column 1. Já a View3, além especificar as propriedades row 1 e column 0, ela se expande por mais uma coluna. Esse comportamento é atingido através da propriedade layout:columnSpan 1.

Na  construção  da  tela  para  o  aplicativo  MiniCalculadora  iremos  criar  um  GridLayout  de  duas colunas  e  organizar  os  elementos  em  quatro  linhas.  Nesse  layout  cada  célula  irá  possuir  um componente, exceto a primeira linha onde haverá um EditText e TextView sobreescritos e ocupando toda a primeira linha.