如何使用XML样式在Android中创建自定义按钮

Question

我想通过使用XML样式制作这种按钮[相同的背景和文本]颜色

这只是一个例子,我想写一些其他文本,如:关于我

我还在使用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" />

注意:我需要各种尺寸和形状的按钮

我不想在我的Android应用程序中使用任何图像,我只想使用XML

Answer 1

从"AdriánSantalla"在androidcookbook.com上写的食谱上复制粘贴:https://www.androidcookbook.com/Recipe.seam ？ recipeId = 3307

1.创建表示按钮状态的XML文件

在一个名为'button.xml'的drawable中创建一个xml来命名按钮状态:

<?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.创建表示每个按钮状态的XML文件

为四个按钮状态中的每一个创建一个xml文件.所有这些都应该在drawables文件夹下.让我们按照button.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.创建表示按钮样式的XML文件

创建上述文件后,就可以创建应用程序按钮样式了.现在,您需要创建一个新的XML文件,名为styles.xml(如果您还没有),您可以在de values目录中包含更多自定义样式.

此文件将包含应用程序的新按钮样式.您需要在其中设置新的按钮样式功能.请注意,其中一个功能(新样式的背景)应设置为引用第一步中创建的按钮(button.xml)drawable.要引用新的按钮样式,我们使用name属性.

下面的示例显示了styles.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.使用您自己的自定义应用程序主题创建XML

最后,您需要覆盖默认的Android按钮样式.为此,您需要创建一个名为themes.xml的新XML文件(如果您还没有),进入values目录并覆盖默认的Android按钮样式.

下面的示例显示了themes.xml的内容:

<resources>
    <style name="YourApplicationTheme" parent="android:style/Theme.NoTitleBar">
        <item name="android:buttonStyle">@style/button</item>
    </style>
</resources>

当我在寻找自定义按钮时,希望你们能拥有与此相同的运气.请享用.

Answer 2

你有没有试过为任何按钮创建背景形状？

请查看以下内容:

下面是与按钮图像分离的图像.

现在,把它放在你的ImageButton for android:src"source"中,如下所示:

android:src="@drawable/twitter"

现在,只需创建ImageButton的形状即可获得黑色着色器背景.

android:background="@drawable/button_shape"

button_shape是可绘制资源中的xml文件:

    <?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>

试着用它来实现它.您可能需要根据您的要求更改颜色值.

如果它不起作用,请告诉我.

Answer 3

看看Styled Button一定会对你有所帮助.有很多例子请在INTERNET上搜索.

例如:风格

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

你可以使用你的选择器而不是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>

按钮:

<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" />

Answer 4

<?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>

在你的绘画中添加这个

2.设置为按钮的背景