Livro 2 - Projeto da Mini-Calculadora

4.4. Configurando os elementos

Siga os passos a seguir para fazer a configuração de cada elemento.

Configurando amountEditText

Nas configurações do EditText iremos fazer com que ele aceite apenas números e tenha um tamanho máximo. Para isso, localize as propriedades abaixo nesse componente e coloque os valores adequados:

• digits: 0123456789 – isso fará com que sejam aceitos apenas números, e não símbolos numéricos com -, “,” ou “.” presentes no teclado numérico.
• maxLength: 6 – limita o tamanho (número de caracteres) para o valor de entrada. Logo o valor mais alto aceito é 999999

Configurando amountTextView

Nas configurações localize as propriedades abaixo e coloque os valores adequados:

• background: #BBDEFB – essa propriedade especifica a cor de fundo com componente
• padding– essa propriedade especifica o espaçamento em volta do conteúdo da View. Nesse caso iremos selecionar a opção geral e alocar um novo tipo de recurso (similar as strings criadas no arquivo strings.xml) clicando no botão branco ao lado da caixa de entrada. Similar a quando se cria um novo recurso string, crie um novo recurso com o nome textview_padding e coloque seu valor como 16dp.

• elevation–propriedade para adicionar o efeito de sombra a View. Novamente crie um novo recurso e coloque o nome textview_elevation com o valor 4dp.

Note que, ambos recursos criados nessa etapa (padding e elevation) serão usados nos demais componentes da tela por isso é necessário criar eles dessa forma ao invés de digitar manualmente pois seus valores serão compartilhados. Isto é, se eu modificar futuramente o valor de elevação então todos os componentes serão automaticamente configurados também.

Configurando percentSeekBar

Por padrão o componente SeekBar possui a margem de valor de 0 a 100, iremos modificar essa barra para ir de 0 a 30. Também iremos definir o valor inicial como 15. Assim, selecione esse componente e localize as propriedades abaixo para colocar os valores adequados:

• max: 30
• progress: 15 – essa propriedade especifica a cor de fundo com componente

Configurando tipTextView e totalTextView

Selecione esses componentes e localize as propriedades abaixo para colocar os valores adequados:

• background: #FFE0B2
• gravity: center - essa propriedade faz com que o texto seja centralizado no meio do componente
• padding: selecione o recurso textview_padding
• elevation: selecione o recurso textview_elevation

Omitindo a EditText

Usar uma EditText para representar o símbolo da moeda corrente é um tarefa complicada, mas existem diversas soluções na comunidade para lidar com o problema. Por exemplo, é possível usar uma biblioteca para incorporar ao projeto uma EditText personalizada.

Nesse aplicativo iremos fazer um pequeno truque para lidar com o padrão de moeda (R$, U$, etc). Vamos omitir a EditText fazendo com que amountTextView fique em cima dela, para tanto vamos suar a propriedade elevação. O usuário continuará digitando valores mas não verá especificamente a caixa de texto, o que ele verá será a TextView apresentando o valor digitado corretamente em padrão de moeda, por exemplo: R$ 120,00.

Para aplicar essa mudança no aplicativo selecione amountTextView e modifique a restrição do topo para criar uma relação com o parent. Use margem 16dp.

Observação: esse pequeno truque foi baseado no projeto do livro e só da certo porque nesse aplicativo só existe uma única EditText. Isso faz com que o aplicativo ao abrir já inicie o teclado numérico focado a EditText oculta.

Resultado final

Se você executou com exatidão os passos acima terá como resultado final a seguinte tela do aplicativo: