Livro 2 - Projeto da Mini-Calculadora

5. Configurando os componentes da tela

5.3. Configurando os elementos EditText e TextView

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.
• maxLenght: 6 – logo o valor mais alto aceito é 999999

Configurando amountTextView

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

• layout:gravity:  fill_horizontal  –  para  indicar  que  a  view  deve  ocupar  todo  o  espaço
• restante na linha
• 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 12dp.

• 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 percentTextView

Configure o alinhamento do componente percentTextView para ficar mais alinhado com a SeekBar, incluindo  na  propriedade  layout:gravity  a  opção  center_vertical.  Note  que  isso  fará  a  view  ficar  tanto alinhado à direita (etapa realizada anteriormente) quanto verticalmente, isto é, mais de uma opção pode ser selecionada na propriedade layout:gravity.

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
• layout:gravity:  fill_horizontal  –  faz  com  que  a  barra  de  progresso  se  expanda horizontalmente para preencher visualmente o restante da coluna
• layout:height: 40dp

Configurando tipTextView e TotalTextView

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

• layout:gravity: fill_horizontal
• 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

Resultado final

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

No próximo capítulo iremos incrementar a tela do aplicativo com o uso de temas e cores personalizadas.