Блог

Я пытаюсь создать пользовательские кнопки для своего приложения Android. Эти кнопки предназначены просто для добавления / редактирования / удаления данных на экране. Тем не менее, я хотел бы придать кнопкам приятный стиль, но у меня возникли некоторые трудности с тем, как работает программирование на Android.

Идея состоит в том, чтобы иметь границу заданной толщины (скажем, 2dp), цвет которой является градиентом. Однако это означает, что центр прозрачен, и я считаю это одной из основных трудностей. Наряду с этим я хотел бы, чтобы внутри кнопки был значок, представляющий ее функцию.

В настоящее время у меня есть градиент и его закругленные края, подобные этому:

 <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:gravity="top">
        <shape android:shape="rectangle">
            <gradient
                android:startColor="@color/colorPrimaryDark"
                android:centerColor="@color/colorAccent"
                android:endColor="@android:color/white"
                android:angle="270" />
            <corners android:radius="20dp"/>
        </shape>
    </item>
</layer-list>
  

Это соответствует тому, что я хочу по цвету. Однако наличие прозрачного центра кажется невозможным в файле ресурсов, доступном для рисования.

Наряду с этой проблемой в моем коде у меня есть ListView выше LinearLayout , содержащее три кнопки, к которым в конечном итоге должен быть применен этот стиль. Однако я не могу даже изменить цвет фона кнопок.

Вот код, представляющий действие:

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".AddPlayersActivity"
    android:orientation="vertical"
    android:paddingRight="10dp"
    android:paddingLeft="10dp"
    android:background="@drawable/background_gradient">

    <TextView
        android:id="@ id/add_players_activity_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:fontFamily="@font/lato_bold"
        android:text="@string/app_name"
        android:textAlignment="center"
        android:textColor="@android:color/white"
        android:textSize="36sp" />

    <TextView
        android:layout_below="@ id/add_players_activity_title"
        android:id="@ id/add_players_activity_current_players"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fontFamily="@font/lato"
        android:text="@string/current_players"
        android:textColor="@android:color/white"
        android:textSize="20sp" />

    <ListView
        android:id="@ id/add_players_activity_player_list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/add_players_activity_current_players"
        android:layout_above="@id/add_players_activity_button_layout" />

    <LinearLayout
        android:id="@ id/add_players_activity_button_layout"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginHorizontal="10dp"
            android:text="Add"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginHorizontal="10dp"
            android:text="Edit"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginHorizontal="10dp"
            android:text="Delete" />
    </LinearLayout>
</RelativeLayout>
  

Ни один из других вопросов StackOverflow не решил ни одну из моих проблем. Даже самый распространенный «Установите style атрибут кнопок».

Я очень открыт для решений, которые могут потребовать внешних инструментов или других вещей, поэтому не чувствую себя ограниченным внутренними функциями. Однако я чувствую, что в Android Studio должен быть способ обойти это.

Заранее спасибо всем, кому требуется время, чтобы разобраться в этом!

Вот пример по запросу (разница только в том, что я буду использовать drawable / image вместо текста)

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

Прочитайте больше пользовательских представлений здесь. Вы также можете просмотреть серию кодовых таблиц, начиная с этой.

attrs.xml (values/attrs.xml ):

 <?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Custom attributes for the button -->
    <declare-styleable name="StyledButton">
        <attr name="cornerRadius" format="dimension" />
        <attr name="borderWidth" format="dimension" />
        <attr name="startColor" format="color" />
        <attr name="centerColor" format="color" />
        <attr name="endColor" format="color" />
    </declare-styleable>
</resources>
  

StyledButton.kt:

 import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.LinearGradient
import android.graphics.Paint
import android.graphics.Path
import android.graphics.Shader
import android.util.AttributeSet
import androidx.appcompat.widget.AppCompatImageButton
import androidx.core.content.withStyledAttributes

class StyledButton @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : AppCompatImageButton(context, attrs, defStyleAttr) {

    private var cornerRadius = 0f
    private var borderWidth = 0f
    private var startColor = 0
    private var centerColor = 0
    private var endColor = 0

    private val path = Path()
    private val borderPaint = Paint().apply {
        style = Paint.Style.FILL
    }

    init {
        //Get the values you set in xml
        context.withStyledAttributes(attrs, R.styleable.StyledButton) {
            borderWidth = getDimension(R.styleable.StyledButton_borderWidth, 10f)
            cornerRadius = getDimension(R.styleable.StyledButton_cornerRadius, 10f)
            startColor = getColor(R.styleable.StyledButton_startColor, Color.WHITE)
            centerColor = getColor(R.styleable.StyledButton_centerColor, Color.RED)
            endColor = getColor(R.styleable.StyledButton_endColor, Color.BLACK)
        }
    }

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)

        // Create and set your gradient here so that the gradient size is always correct
        borderPaint.shader = LinearGradient(
            0f,
            0f,
            width.toFloat(),
            height.toFloat(),
            intArrayOf(startColor, centerColor, endColor),
            null,
            Shader.TileMode.CLAMP
        )
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)

        //Remove inner section (that you require to be transparent) from canvas
        path.rewind()
        path.addRoundRect(
            borderWidth,
            borderWidth,
            width.toFloat() - borderWidth,
            height.toFloat() - borderWidth,
            cornerRadius - borderWidth / 2, 
            cornerRadius - borderWidth / 2,
            Path.Direction.CCW
        )
        canvas.clipOutPath(path)

        //Draw gradient on the outer section
        path.rewind()
        path.addRoundRect(
            0f,
            0f,
            width.toFloat(),
            height.toFloat(),
            cornerRadius,
            cornerRadius,
            Path.Direction.CCW
        )
        canvas.drawPath(path, borderPaint)
    }
}
  

Использование:

 <com.example.andriod.myapplication.StyledButton
    android:layout_width="100dp"
    android:layout_height="40dp"
    android:src="@drawable/ic_android"
    android:scaleType="center"
    android:layout_gravity="center"
    app:borderWidth="2dp"
    app:cornerRadius="20dp"
    app:startColor="@color/colorPrimaryDark"
    app:centerColor="@android:color/holo_red_dark"
    app:endColor="@color/colorPrimary"/>
  

Результат

Я не знаю, является ли это лучшим решением, но вы можете сделать это легко таким образом:

1. Создать gradient_back.xml :

 <shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="10dp" />
    <gradient
        android:endColor="@color/colorPrimary"
        android:startColor="@color/colorAccent" />
</shape>
  

2. Создать shape_front.xml :

 <shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="9dp" />
    <solid android:color="@android:color/white" />
</shape>
  

3. Теперь в вашем макете создайте кнопку, подобную этой:

 <FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/gradient_back">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="3dp"
        android:background="@drawable/shape_front"
        android:text="WOW" />

</FrameLayout>
  

Результат:

Версия с прозрачным корпусом, но без градиента:

1. В ваш build.gradle (модуль: приложение) добавить:

 implementation "com.google.android.material:material:1.2.1"
  

2. в res/values/styles измените родительский стиль на:

 parent="Theme.MaterialComponents.Light.DarkActionBar"
  

3. Теперь в макет вы можете добавить кнопку:

 <com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.Button.OutlinedButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="WOW"
    android:textColor="@color/textColor"
    app:cornerRadius="10dp"
    app:strokeWidth="2dp"
    app:strokeColor="@color/colorAccent" />
  

Результат: