Bem vindo ao curso de introdução ao desenvolvimento de aplicativos Android. Nesta vídeo aula, você irá criar a interface gráfica do aplicativo. Vamos utilizar como gerenciador de layout o linear layout, que é o gerenciador que coloca os elementos da interface gráfica lado a lado. Para criar a interface gráfica, podemos utilizar ou a aba design e arrastar elementos para a representação gráfica do dispositivo, ou escrever diretamente no código xml, ou usar misto das duas abordagens. Eu costumo escrever diretamente no código xml, que é o que você provavelmente irá preferir no futuro, quando estiver mais acostumado com programação para dispositivos móveis. A minha interface gráfica eu vou configurar primeiramente como linear layout. Aqui, por padrão, o Android Studio criou relative layout, que eu vou trocar para linear layout. Feito isso, eu sei que dos atributos obrigatórios de linear layout é orientation, que eu vou colocar como vertical. Nessa minha interface gráfica, a primeira coisa que eu vou gerar, a primeira coisa que eu quero que o usuário veja, é uma list view. Essa list view eu vou configurar com largura, ocupando todo espaço da tela, e altura, sendo suficiente para conter o conteúdo dela. Como eu sei que eu vou precisar acessar esta list view do código Java, eu vou colocar uma id para minha list view. E a id da minha list view será simplesmente list view, com tudo minúsculo. Abaixo da list view eu vou colocar uma text view. Essa text view, ela será como se fosse rodapé da minha list view. Eu vou configurar a largura como match parent, e a altura como wrap content. Nesse rodapé, eu vou querer colocar a soma de tudo que o usuário colocou na lista. Como eu sei que eu vou querer colocar alguma coisa nesse rodapé, eu vou precisar dar uma id para ele. Então eu vou chamar essa id simplesmente de footer. Eu vou querer que o texto que esteja nesse rodapé seja centralizado. Então eu vou utilizar o atributo gravity para centralizar. E o valor desse atributo será center horizontal. Nessa minha text view, que é o rodapé, eu vou colocar uma cor para ela. Eu vou aumentar o texto dessa minha text view para que ele fique pouco mais visível. Vou colocar 18, sp, como o texto. Eu também vou colocar background para esta minha text view, e esse background eu vou colocar como cor essa opção color primary, que já veio por padrão no Android Studio. Agora o que fica faltando fazer é escrever aqui uma opção de qual texto será informado para o usuário. No momento que o usuário carregar o aplicativo, nada estará selecionado na text view. Então o que eu posso fazer, é aqui colocar texto do tipo avisando que a soma é zero e que os produtos urgentes também custam zero reais na text view. Não pretendo colocar esse texto aqui. Então eu vou colocar colocar esse texto dentro do arquivo strings, ponto, xml, que está dentro da pasta values. Então aqui dentro eu vou colocar uma variável de nome soma e o texto dessa soma será soma igual a zero, ponto, zero, zero. Dois pontos, urgente igual a zero, ponto, zero, zero. Indicando que o preço do que está na list view é zero reais e o preço do que é urgente também é zero reais. Feito isso, eu tenho uma list views com o seu rodapé. Essa text view que veio por padrão não me é útil agora. E agora eu vou colocar os elementos que servem para capturar as opções, ou melhor, a capturar tudo aquilo que foi inserido pelo usuário. Eu vou criar linear layout, configurar a largura como match parent, altura com wrap content, Este meu linear layout agora ele vai correr da esquerda para a direita. Então a orientação dele não é mais vertical, é horizontal. Dentro desse linear layout, eu vou adicionar spinner. Dentro desse spinner estarão todas as opções do que o usuário pode comprar, por exemplo, arroz, macarrão, e tudo mais. A largura deste spinner eu vou colocar como wrap content. Altura eu também vou colocar como wrap content. Vou precisar colocar id para esse spinner, para que ele possa ser acessado de dentro do código Java. E também pretendo preencher esse spinner com alguns produtos. Como já dito aulas anteriores, eu preciso colocar o atributo Android entries e configurar algum array aqui. Vou chamar o nome do array de produtos. Este array de produtos eu preciso configurar na interface gráfica. Eu preciso configurar, quer dizer, no código strings, ponto, xml. Aqui no strings, ponto, xml eu vou precisar criar string array. O nome será produtos, porque eu já declarei que o nome seria produto. E agora aqui eu vou colocar vários itens. Por exemplo, arroz será o primeiro item. O segundo item pode ser, por exemplo, carne. O terceiro item, eu vou colocar feijão. Isto aqui é só para exemplificar. Mais item aqui. Vou colocar uma fruta. Banana. Isto aqui já será suficiente para demonstrar o que eu quero na interface gráfica. Voltando agora aqui para o código de layout. Nós temos spinner, que já vai estar preenchido com alguns elementos. [BARULHO] Só estou ajeitando aqui as minhas tags xml. O próximo elemento da interface gráfica que eu irei adicionar será uma edit text. Nessa edit text eu vou colocar o preço do produto. Apenas uma estimativa de preços para que eu possa colocar esse preço na text view e também possa calcular a soma dos produtos que o usuário selecionou. Vou colocar como id, edit text. Aqui eu também vou colocar o atributo hint, para que o usuário tenha uma ideia do que ele precisa digitar nessa caixa de texto. Aqui eu poderia escrever diretamente preço, por exemplo, mas eu prefiro fazer uma referência à alguma variável do que está dentro do arquivo strings, ponto, xml. Vou criar essa variável, o nome dela é preço e o valor dela é simplesmente preço. [SEM SOM] Aqui coloquei mais arroba id, mas é arroba, mais id. Por fim, eu vou colocar apenas uma check box. E essa check box serve para o usuário informar se aquele produto é urgente ou não. Largura e altura vou configurar como wrap content. Vou precisar colocar uma id para essa check box. Nesta check box eu não vou colocar nenhum texto. Vamos assumir que o nosso usuário sabem que ao clicar nessa check box ele está dizendo que aquele produto é urgente. Vale ressaltar que ainda falta colocar botão que irá disparar o gatilho de que toda vez que o usuário clicar no botão item será adicionado na list view. Eu não vou precisar de uma referência para esse botão no código Java porque eu pretendo utilizar o atributo on click. Então ele já vai disparar gatilho e vai chamar método chamado de add produto na minha interface gráfica. Eu vou trocar a cor desse botão, a cor de fundo do botão para que ele fique branco. Para que ele não tenha aquela aparência que botão padrão tem no código. E o texto deste botão eu vou colocar apenas aqui três parênteses angulares para indicar que se o usuário clicar nele, a informação que ele inseriu nos elementos que estarão à esquerda dele irá para algum lugar. Vou compilar aqui a minha interface gráfica para ver o resultado. Este é o resultado da minha interface gráfica. A list view aqui cima, ela sumiu porque ela não tem nenhum valor dentro dela. Então o que eu posso fazer para que essa list view fique visível sempre, é dar peso para ela. Então eu vou colocar layout weight na minha list view, agora o Android Studio me sugere, como eu dei peso para ela é melhor ao invés de colocar wrap content no height, para eu colocar zero dp. Segundo a informação me dada pelo Android Studio, isso gera algum ganho de performance. Muito bem. Agora aqui embaixo estão os elementos da interface gráfica onde o usuário irá inserir os produtos que pretende comprar. E aqui cima ficará a list view com os itens que ele já selecionou.
