如何在 Neumorphism 设计概念中更改 Android 中的按钮背景?
How to change button background in Android in Neumorphism design concept?
我在我的项目中从事基于 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>
使用此 属性 更改 xml
中的背景 app:neumorph_backgroundColor="@color/background_color"
如果不行,NeumorphButton
里面有一个方法是setBackgroundDrawable
。您可以通过编程方式设置可绘制对象
编辑
您不能在此库中设置自定义背景,因为它说
Setting a custom background is not supported.
我在我的项目中从事基于 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>
使用此 属性 更改 xml
中的背景app:neumorph_backgroundColor="@color/background_color"
如果不行,NeumorphButton
里面有一个方法是setBackgroundDrawable
。您可以通过编程方式设置可绘制对象
编辑
您不能在此库中设置自定义背景,因为它说
Setting a custom background is not supported.