Как создать пользовательскую кнопку в Android с помощью стилей XML

Я хочу сделать такие кнопки [одинаковые цвета фона и текста] с помощью стилей XML

enter image description here

что только для примера, я хочу написать некоторые другие тексты, например: Обо мне

Тем не менее, я использую кнопку, созданную дизайнером в 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.

Ответы

Ответ 1

Вы когда-нибудь пытались создать форму фона для любых кнопок?

Проверьте это ниже:

Ниже представлено разделенное изображение с вашего изображения кнопки.

enter image description here

Теперь поместите это в свой ImageButton для 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>

Просто попробуйте реализовать это с помощью этого. Возможно, вам потребуется изменить значение цвета в соответствии с вашим требованием.

Сообщите мне, если это не сработает.

Ответ 2

Скопируйте с помощью рецепта, написанного "Adrián Santalla" на androidcookbook.com: https://www.androidcookbook.com/Recipe.seam?recipeId=3307

1. Создайте XML файл, который представляет состояния кнопок

Создайте xml в drawable, названный 'button.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>

Ответ 3

Посмотрите Styled Button, это наверняка поможет вам. Есть много примеров, которые можно найти в Интернете.

например: стиль

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

вы можете использовать свой селектор вместо 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>

Кнопка

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

Ответ 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>

1.add это в ваших доступных

2.set в качестве фона для вашей кнопки