Criando um botão customizado no Android via XML \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 18 Horas 49 Min 06 Seg Tempo restante da oferta: 18 49 06 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Criando um botão customizado no Android via XML [ Android ](https://www.treinaweb.com.br/blog/categoria/android) # Criando um botão customizado no Android via XML No Android é possível modificar a aparência de um botão (tamanho, cor, borda, alinhamento etc) via XML. Veja nesse artigo como podemos fazer isso. [ Daniel Viana ](https://www.treinaweb.com.br/blog/autor/daniel-viana) 10 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/xml-android-1.jpg) Ao adicionarmos um botão no layout pelo Android Studio ele fica com a seguinte aparência: ![](https://d2m498l008ebpa.cloudfront.net/2017/04/botao-inicial-android.png) Mas não quer dizer que devemos utilizá-la em todos os botões do aplicativo. É possível modificá-la (tamanho, cor, borda, alinhamento etc) por meio de arquivos XML. Para entender melhor as propriedades que definem a aparência, vamos criar um botão como o da imagem abaixo: ![](https://d2m498l008ebpa.cloudfront.net/2017/04/botao-customizado-android.png) Para isso, crie um novo arquivo do tipo **Drawable Resource File**. Basta clicar com o botão direito sobre a pasta **drawable > New**: ![](https://d2m498l008ebpa.cloudfront.net/2017/04/criando-novo-arquivo-drawable.png) Depois basta definir o nome do arquivo que deseja criar: ![](https://d2m498l008ebpa.cloudfront.net/2017/04/criando-novo-arquivo-drawable-2.png) Neste caso, criei o arquivo com o nome **botao\_customizado** e implementei o seguinte código: ```xml ``` Primeiro é montado um *shape*, que define a forma geométrica do botão, neste caso é um retângulo (`android:shape="rectangle"`). Está propriedade também aceita os valores **line, oval** e **ring** que definem outras geometrias para o botão. [ ![Delphi 10 Seattle Básico](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/delphi.svg) Curso Delphi 10 Seattle Básico Conhecer o curso ](https://www.treinaweb.com.br/curso/delphi-seattle-basico) No elemento `` definimos a propriedade `android:radius="..."` para determinar o valor do arredondamento dos cantos do botão. O elemento `` determina a cor de fundo do botão por meio da propriedade `android:color="..."/>`. E por fim, o elemento `` define a espessura da borda (`android:width="..."`) e a cor para a mesma (`android:color="..."`). Para que o botão passe a ter esse novo modelo, basta definir o arquivo criado na propriedade `android:background="@drawable/botao_customizado"` do botão. Além dos elementos utilizados até agora, temos o elemento `` para definir o fundo do botão com cores formando um gradiente ao invés de utilizar uma cor sólida. Como neste exemplo: ![](https://d2m498l008ebpa.cloudfront.net/2017/04/botao-customizado-android-2.png) ```xml ``` Neste elemento temos as propriedades `android:startColor="..."`, `android:endColor="..."` e `android:centerColor="..."` para definir a cor inicial, final e central do gradiente, respectivamente. E também é utilizado a propriedade `android:angle="..."` que determina o ângulo do gradiente. Com estes elementos e suas propriedades é possível criar uma infinidade de modelos diferentes para utilizar nos botões. [ ![React Native - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react-native.svg) Curso React Native - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/react-native-fundamentos) Para automatizar parte do processo de customização de um botão, é possível utilizar o site [AngryTools](http://angrytools.com/android/button/) que determina os valores da propriedade e ele vai te mostrando um preview do botão e ao finalizar ele gera os arquivos XML para utilizar. o/ Agora que você conhece um pouco sobre esta customização, faça diversos exemplos, modifique as propriedades e veja a diferença entre elas. Afinal, nada melhor que praticar para aprender! Um abraço e até a próxima! - [ #Android ](https://www.treinaweb.com.br/blog/tag/android) - [ #Mobile ](https://www.treinaweb.com.br/blog/tag/mobile) - [ #Desenvolvimento ](https://www.treinaweb.com.br/blog/tag/desenvolvimento) Autor ![Daniel Viana](//secure.gravatar.com/avatar/ee77d0cb4491d2d130f9f1093aabff4f?d=mm) ## Daniel Viana Instrutor, Desenvolvedor Android, Mestrando em Bioinformática pela UFMG, MBA Executivo em Gerenciamento de Projetos pela UCAM, Graduado em Ciência da Computação pela FUNIP, Membro da SBC, ACM e AB3C. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/daniel-viana) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/gerando-apis-clients-com-as-ferramentas-de-openapi-do-net-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 6 anos atrás ## [ Gerando APIs clients com as ferramentas de OpenAPI do .NET ](https://www.treinaweb.com.br/blog/gerando-apis-clients-com-as-ferramentas-de-openapi-do-net) Aprenda como gerar APIs clientes com a global tool Microsoft.dotnet-openapi. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/04133725/novo-painel-treinaweb-ava-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 7 anos atrás ## [ O que há de novo na plataforma da TreinaWeb? Conheça as novas funcionalidades! ](https://www.treinaweb.com.br/blog/o-que-ha-de-novo-na-plataforma-da-treinaweb-conheca-as-novas-funcionalidades) Venha conhecer as novas funcionalidades da nova plataforma de ensino da TreinaWeb e aprenda dicas para aproveitá-la melhor. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/11/07171806/GITHUB-pages-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 8 anos atrás ## [ Criando páginas para repositórios com o GitHub Pages ](https://www.treinaweb.com.br/blog/criando-paginas-para-repositorios-com-o-github-pages) Veremos como criar uma página para os seus repositórios públicos do GitHub utilizando o GitHub Pages. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/10/30133314/swagger-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 7 anos atrás ## [ Documentando uma API Spring Boot com o Swagger ](https://www.treinaweb.com.br/blog/documentando-uma-api-spring-boot-com-o-swagger) Porque documentar uma aplicação API Spring Boot com o Swagger? Quando se trabalha em equipe, uma má documentação pode dificultar (e muito) o trabalho dos demais desenvolvedores. Mas com o Swagger, via SpringFox, é possível documentar uma API Spring Boot com poucas linhas de código. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/10/30133314/swagger-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 8 anos atrás ## [ Documentando uma ASP.NET Core Web API com o Swagger ](https://www.treinaweb.com.br/blog/documentando-uma-asp-net-core-web-api-com-o-swagger) Aprenda a documentar uma aplicação ASP .NET Core Web API com o Swagger. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/05/Criando_componente_snackbar_com_JavaScript_e_CSS-400x280.jpg) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 3 anos atrás ## [ Criando componente snackbar com JavaScript e CSS ](https://www.treinaweb.com.br/blog/criando-componente-snackbar-com-javascript-e-css) Nesse artigo, você irá ter o passo a passo de como criar um componente de snackbar do zero. Sendo capaz de adapta-lo como preferir. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/02/criando-componentes-tailwindcss-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Criando componentes com Tailwind CSS ](https://www.treinaweb.com.br/blog/criando-componentes-com-tailwind-css) Neste artigo veremos por que os componentes nos ajudam durante o desenvolvimento do nosso projeto e como conseguimos criá-los com Tailwind CSS Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/01/criando-uma-api-com-spring-data-jpa-e-spring-web-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 5 anos atrás ## [ Criando uma API com Spring Data JPA e Spring Web ](https://www.treinaweb.com.br/blog/criando-uma-api-com-spring-data-jpa-e-spring-web) Neste artigo vamos aprender como criar uma API com persistência de dados utilizando o Spring Web MVC e o Spring Data JPA. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/criando-interfaces-graficas-no-c-com-gtk-400x280.png) [ C ](https://www.treinaweb.com.br/blog/categoria/c) 6 anos atrás ## [ Criando interfaces gráficas no C com GTK ](https://www.treinaweb.com.br/blog/criando-interfaces-graficas-no-c-com-gtk) Aplicações Desktop ainda são muito utilizadas. Neste artigo aprenda como utilizar o GTK para criar interfaces gráficas no C. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/10/criando-primeiro-projeto-flutter-400x280.png) [ Flutter ](https://www.treinaweb.com.br/blog/categoria/flutter) 6 anos atrás ## [ Criando primeiro projeto Flutter ](https://www.treinaweb.com.br/blog/criando-primeiro-projeto-flutter) Veja neste artigo como criar o primeiro projeto Flutter. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/05/15113107/BITBUCKET-400x280.png) [ Controle de versão ](https://www.treinaweb.com.br/blog/categoria/controle-de-versao) 7 anos atrás ## [ Criando repositório no BitBucket ](https://www.treinaweb.com.br/blog/criando-repositorio-no-bitbucket) Veja neste artigo como criar repositório no BitBucket. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/14165347/GITHUB-400x280.png) [ Tecnologia ](https://www.treinaweb.com.br/blog/categoria/tecnologia) 7 anos atrás ## [ Criando repositório no GitHub ](https://www.treinaweb.com.br/blog/criando-repositorio-no-github) Veja neste artigo como criar um repositório no GitHub. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **18h 49min 06s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58