Блог

Например, эта кнопка:

Я хочу, чтобы он так сиял:

Как я могу это сделать без использования кнопки внешней библиотеки?
Кроме того, я бы очень хотел знать, как это сделать и в режиме просмотра изображений. Все, что я смог найти, — это использование внешних кнопок и представлений изображений из библиотек, что в моем случае не подходит.

Заранее большое спасибо!

XML-код кнопки:

 <com.google.android.material.button.MaterialButton
    android:id="@ id/btAddMyCard"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/add_another_my_card"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="24dp"
    android:layout_below="@id/topAppBar"
    style="@style/Widget.App.Button.OutlinedButton" />
 

Хотя виджеты новых материалов вполне функциональны, они заблокированы, поэтому их нелегко настроить не предписанными способами. Я могу показать вам один способ сделать то, что вам нужно.

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

Возможно, вам потребуется внести некоторые коррективы в вашу ситуацию.

Если вы действительно не видите свечение, вот увеличение:

Это изображение было создано из пользовательского представления, основанного на кнопке MaterialButton.

 class MyMaterialGlowButton @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null
) : MaterialButton(context, attrs) {
    private val mPaddedRect = RectF()
    private val mBlurRadius = strokeWidth.toFloat() * BLUR_RADIUS_FACTOR

    private val mLinePaint = Paint().apply {
        isAntiAlias = true
        strokeWidth = this@MyMaterialGlowButton.strokeWidth.toFloat()
        style = Paint.Style.STROKE
        color = ROUNDED_RECT_COLOR
    }

    private val mBlurPaint = Paint().apply {
        isAntiAlias = true
        strokeWidth = this@MyMaterialGlowButton.strokeWidth.toFloat()
        style = Paint.Style.STROKE
        color = ROUNDED_RECT_COLOR
        maskFilter = BlurMaskFilter(mBlurRadius, BlurMaskFilter.Blur.NORMAL)
    }

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        val halfStrokeWidth = strokeWidth.toFloat() / 2f
        mPaddedRect.left = halfStrokeWidth   mBlurRadius
        mPaddedRect.top = halfStrokeWidth   mBlurRadius
        mPaddedRect.right = w.toFloat() - halfStrokeWidth - mBlurRadius
        mPaddedRect.bottom = h.toFloat() - halfStrokeWidth - mBlurRadius
    }

    override fun onDrawForeground(canvas: Canvas?) {
        super.onDrawForeground(canvas)
        val corners = cornerRadius.toFloat()
        canvas?.drawRoundRect(mPaddedRect, corners, corners, mBlurPaint)
        canvas?.drawRoundRect(mPaddedRect, corners, corners, mLinePaint)
    }

    private companion object {
        const val ROUNDED_RECT_COLOR = 0xFF2b86e6.toInt()
        const val BLUR_RADIUS_FACTOR = 1.0f
    }
}
 

Используемый XML:

 <androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.example.blurredline.MyMaterialGlowButton
        android:id="@ id/btAddMyCard"
        style="@style/Widget.App.Button.OutlinedButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:textAllCaps="false"
        android:insetLeft="4dp"
        android:insetRight="4dp"
        android:text="@string/add_another_my_card"
        app:cornerRadius="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
 

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

И стиль. Я не был уверен, каковы ваши ценности, поэтому я использовал эти:

 <style name="Widget.App.Button.OutlinedButton" parent="Widget.MaterialComponents.Button.OutlinedButton">
    <item name="strokeColor">@android:color/transparent</item>
    <item name="strokeWidth">4dp</item>
    <item name="android:textColor">#FF2b86e6</item>
    <item name="cornerRadius">16dp</item>
    <item name="textAllCaps">false</item>
    <item name="fontFamily">sans-serif-light</item>
</style>
 

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