Search code examples
androidandroid-layoutandroid-drawableandroid-button

How to change button background in Android in Neumorphism design concept?


I am working in Neumorphism based designs in my project. I am using this library https://github.com/fornewid/neumorphism for Neumorphism effect. My issue is I can't able to change the background of the button or any other views.

This is my layout file

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>

I have two buttons in this xml. One is normal button and another is neumorphism. I have set background for both but it's only applies for normal button.

Below given is drawable file for background

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>

Below given is styles.

<?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>

enter image description here


Solution

  • use this property to change background app:neumorph_backgroundColor="@color/background_color" in your xml

    if not working, there is one method inside NeumorphButton is setBackgroundDrawable. you can set drawable programmatically

    Edit

    you can't set the custom background in this lib because it says

    Setting a custom background is not supported.