android - 如何在 Neumorphism 设计概念中更改 Android 中的按钮背景?
问题描述
我在我的项目中从事基于 Neumorphism 的设计。我正在使用这个库https://github.com/fornewid/neumorphism来实现 Neumorphism 效果。我的问题是我无法更改按钮或任何其他视图的背景。
这是我的布局文件
activity_neumorphism.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
android:background="@drawable/screen_background_gradient"
tools:context=".NeumorphismActivity">
<soup.neumorphism.NeumorphButton
android:id="@+id/button"
style="@style/Widget.Neumorph.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="36dp"
android:drawablePadding="8dp"
android:background="@drawable/res_transparent_yellow_roundedfilled_corner"
android:text="Button"
android:textColor="#FFFFFF"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="@+id/normal_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button"
android:layout_marginTop="50dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:background="@drawable/res_transparent_yellow_roundedfilled_corner"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@+id/normal_button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:text="THIS IS NORMAL BUTTON"
android:textColor="#FFFFFF"
android:layout_marginTop="30dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@+id/button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:text="THIS IS Neumorphism effect BUTTON"
android:textColor="#FFFFFF"
android:layout_marginTop="30dp"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
我在这个 xml 中有两个按钮。一个是普通按钮,另一个是神经拟态。我已经为两者设置了背景,但它只适用于普通按钮。
下面给出的是背景的可绘制文件
res_transparent_yellow_roundedfilled_corner.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:shape="rectangle">
<corners
android:radius="10dp"
/>
<gradient
android:startColor="#C8A800"
android:endColor="#FFD80A"/>
</shape>
下面给出的是样式。
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Widget.Neumorph.Button" parent="Widget.AppCompat.Button">
<item name="android:textAppearance">?android:attr/textAppearanceButton</item>
<item name="android:minHeight">72dip</item>
<item name="android:minWidth">112dip</item>
<item name="android:background">@drawable/res_transparent_yellow_roundedfilled_corner</item>
<item name="android:paddingLeft">@dimen/design_btn_padding_left</item>
<item name="android:paddingRight">@dimen/design_btn_padding_right</item>
<item name="android:paddingTop">@dimen/design_btn_padding_top</item>
<item name="android:paddingBottom">@dimen/design_btn_padding_bottom</item>
<item name="android:stateListAnimator">@animator/button_state_list_anim_neumorph</item>
<item name="android:focusable">true</item>
<item name="android:clickable">true</item>
<item name="android:gravity">center_vertical|center_horizontal</item>
<item name="neumorph_inset">@dimen/design_default_inset</item>
<item name="neumorph_shadowElevation">6dp</item>
<item name="neumorph_shadowColorLight">#FFFFFF</item>
<item name="neumorph_shadowColorDark">#000000</item>
<item name="neumorph_shapeType">flat</item>
<item name="neumorph_shapeAppearance">@style/ShapeAppearance.Neumorph.Button</item>
</style>
<style name="ShapeAppearance.Neumorph.Button" parent="">
<item name="background"> @drawable/res_transparent_yellow_roundedfilled_corner</item>
</style>
</resources>
解决方案
使用此属性更改app:neumorph_backgroundColor="@color/background_color"
xml 中的背景
如果不工作,里面有一种方法NeumorphButton
是setBackgroundDrawable
. 你可以以编程方式设置drawable
编辑
你不能在这个库中设置自定义背景,因为它说
不支持设置自定义背景。
推荐阅读
- ruby - 继续 Mixlib::ShellOut::CommandTimeout
- java - Azure Spring Boot - 获取登录用户的 OAuth 2.0 访问令牌
- mongodb - 如何在 Mongo 的“根”上向数组中添加元素
- javascript - d3js donut chart - highlight first data
- java - 如何在多阶段 docker build 中使用 maven 本地存储库?
- java - 代码在return语句后继续执行
- solr - solr: ltr (reranking) 结合 cursorMarks
- r - 如何为闪亮的应用程序预设小数点分隔符
- c# - 如何在 Visual Studio 项目中初始化自动映射器
- shady - osx 重新安装后,Shady 因 SyntaxError 失败