Como criar um botão personalizado no Android usando estilos XML

quero fazer este tipo de Botão [mesmo fundo & texto] cores, usando estilos XML

enter image description here

Por exemplo, quero escrever outros textos sobre mim.

Ainda estou a usar o botão criado pelo designer no Photoshop 

    <ImageButton
        android:id="@+id/imageButton5"
        android:contentDescription="AboutUs"
        android:layout_width="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_height="wrap_content"
        android:layout_below="@+id/view_pager"
        android:layout_centerHorizontal="true"
        android:background="@drawable/aboutus" />

Nota: preciso deste tipo de botão em todos os tamanhos e formas

Eu não quero usar qualquer imagem no meu aplicativo Android eu quero torná-lo usando apenas XML

Author: Sneha, 2013-08-29
Source

4 answers

Já tentou criar a forma de fundo para botões?

Vê isto abaixo:

Abaixo está a imagem separada da sua imagem de um botão.

enter image description here

Agora, coloque isso em seu ImageButton para android: src "fonte" assim: 
android:src="@drawable/twitter"
Agora, basta criar a forma do ImageButton para ter um fundo escuro. 
android:background="@drawable/button_shape"

E o button_ Shape é o ficheiro xml no recurso desenhável: 

    <?xml version="1.0" encoding="UTF-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke 
        android:width="1dp" 
        android:color="#505050"/>
    <corners 
        android:radius="7dp" />

    <padding 
        android:left="1dp"
        android:right="1dp"
        android:top="1dp"
        android:bottom="1dp"/>

    <solid android:color="#505050"/>

</shape>
Apenas tente implementá-lo com presente. Você pode precisar mudar o valor da cor de acordo com a sua exigência. Avisa-me se não funcionar.
 62
Author: iDroid Explorer, 2015-07-15 06:00:52
Copiado de uma receita escrita por "Adrián Santalla" em androidcookbook.com: https://www.androidcookbook.com/Recipe.seam?recipeId=3307

1. Criar um ficheiro XML que represente os estados do botão

Crie um xml no botão desenhável chamado'.xml ' para indicar o botão indica: 

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_enabled="false"
        android:drawable="@drawable/button_disabled" />
    <item
    	android:state_pressed="true"
    	android:state_enabled="true"
        android:drawable="@drawable/button_pressed" />
    <item
    	android:state_focused="true"
    	android:state_enabled="true"
        android:drawable="@drawable/button_focused" />
    <item
    	android:state_enabled="true"
        android:drawable="@drawable/button_enabled" />
</selector>

2. Criar um ficheiro XML que represente cada Estado do botão

Crie um ficheiro xml para cada dos quatro estados botões. Todos eles devem estar sob a pasta drawables. Vamos seguir os nomes definidos no botão.ficheiro xml.

Button_enabled.xml: 

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <gradient
        android:startColor="#00CCFF"
        android:centerColor="#0000CC"
        android:endColor="#00CCFF"
        android:angle="90"/>
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <stroke
        android:width="2dip"
        android:color="#FFFFFF" />
    <corners android:radius= "8dp" />
</shape>

Button_focused.xml: 

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <gradient
        android:startColor="#F7D358"
        android:centerColor="#DF7401"
        android:endColor="#F7D358"
        android:angle="90"/>
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <stroke
        android:width="2dip"
        android:color="#FFFFFF" />
    <corners android:radius= "8dp" />
</shape>

Button_pressed.xml: 

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <gradient
        android:startColor="#0000CC"
        android:centerColor="#00CCFF"
        android:endColor="#0000CC"
        android:angle="90"/>
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <stroke
        android:width="2dip"
        android:color="#FFFFFF" />
    <corners android:radius= "8dp" />
</shape>
Button_ disabled.xml: 

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <gradient
        android:startColor="#F2F2F2"
        android:centerColor="#A4A4A4"
        android:endColor="#F2F2F2"
        android:angle="90"/>
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <stroke
        android:width="2dip"
        android:color="#FFFFFF" />
    <corners android:radius= "8dp" />
</shape>

3. Criar um ficheiro XML isso representa o estilo do botão

Uma vez que você criou os arquivos mencionados acima, é hora de criar o seu estilo de botão de Aplicação. Agora, você precisa criar um novo arquivo XML, chamado styles.xml (se ainda não o tiver), onde poderá incluir mais estilos personalizados, na pasta de valores de de.

Este ficheiro irá conter o novo estilo do botão da sua aplicação. Você precisa definir suas novas características de estilo de botão nele. Note que uma dessas características, o fundo do seu novo estilo, deve ser definido com uma referência ao botão (botão.xml) desenhável que foi criado no primeiro passo. Para se referir ao novo estilo do botão, usamos o atributo name.

O exemplo abaixo mostra o conteúdo dos estilos.ficheiro xml: 

<resources>
    <style name="button" parent="@android:style/Widget.Button">
        <item name="android:gravity">center_vertical|center_horizontal</item>
        <item name="android:textColor">#FFFFFFFF</item>
        <item name="android:shadowColor">#FF000000</item>
        <item name="android:shadowDx">0</item>
        <item name="android:shadowDy">-1</item>
        <item name="android:shadowRadius">0.2</item>
        <item name="android:textSize">16dip</item>
        <item name="android:textStyle">bold</item>
        <item name="android:background">@drawable/button</item>
        <item name="android:focusable">true</item>
        <item name="android:clickable">true</item>
    </style>
</resources>

4. Criar um XML com o seu próprio tema de Aplicação personalizado

Finalmente, você precisa substituir o Estilo padrão do Botão Android. Para isso, você precisa criar um novo arquivo XML, chama-se temas.xml (se ainda não o tiver), para a pasta de valores e sobreponha o estilo predefinido do Botão Android.

O exemplo abaixo mostra o conteúdo dos temas.xml: 

<resources>
    <style name="YourApplicationTheme" parent="android:style/Theme.NoTitleBar">
        <item name="android:buttonStyle">@style/button</item>
    </style>
</resources>
Espero que tenham a mesma sorte que eu tive com isto, quando procurava botões personalizados. Desfrutar.
 74
Author: Gramowski, 2016-05-05 18:10:13

Dê uma olhada em Botão estilizado isso certamente vai ajudá-lo. Existem muitos exemplos, por favor, procure na INTERNET.

Eg: style 

<style name="Widget.Button" parent="android:Widget">
    <item name="android:background">@drawable/red_dot</item>
</style>

Pode usar o seu selector em vez de red_ Dot

Red_dot: 

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"  >

    <solid android:color="#f00"/>
    <size android:width="55dip"
        android:height="55dip"/>
</shape>

Botão: 

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="49dp"
        style="@style/Widget.Button"
        android:text="Button" />
 17
Author: Siddhesh, 2013-08-29 09:58:48 
<?xml version="1.0" encoding="utf-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

   <solid 
       android:color="#ffffffff"/>

   <size 
       android:width="@dimen/shape_circle_width"
        android:height="@dimen/shape_circle_height"/>
</shape>

1.adicione isto no seu desenhador

2.definir como fundo para o seu botão

 5
Author: Gru, 2013-08-29 09:42:44