fornewid / neumorphism

Try to Neumorphism in Android (Just experimental!! 🧪)
https://medium.com/@fornewid/neumorphism-in-android-9cf15e2122dc
Apache License 2.0
977 stars 159 forks source link

how to use circle ?? #105

Open AnkitT77 opened 2 years ago

AnkitT77 commented 2 years ago

Version used: Devices/Android versions reproduced on:

I would appreciate if you could attach:

kia1349 commented 2 years ago

i make it in this way:

    <soup.neumorphism.NeumorphButton
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginTop="10dp"
        android:text="Û²Ûµ"
        android:layout_gravity="center"
        android:textSize="16dp"
        android:textColor="@color/text_color"

        app:neumorph_backgroundColor="@color/background_color"
        app:neumorph_strokeColor="@color/grey_5"
        app:neumorph_strokeWidth="1dp"

        app:neumorph_inset="12dp"
        app:neumorph_insetStart="12dp"
        app:neumorph_insetEnd="12dp"
        app:neumorph_insetTop="12dp"
        app:neumorph_insetBottom="12dp"

        app:neumorph_shadowElevation="5dp"

        style="@style/Widget.Neumorph.ButtonCircle">
    </soup.neumorphism.NeumorphButton>

and for style="@style/Widget.Neumorph.ButtonCircle" i make these change in theme.xml:

<style name="Widget.Neumorph.ButtonCircle" 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:paddingLeft">10dp</item>
    <item name="android:paddingRight">10dp</item>
    <item name="android:paddingTop">10dp</item>
    <item name="android:paddingBottom">10dp</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">20dp</item>
    <item name="neumorph_shadowElevation">5dp</item>
    <item name="neumorph_shadowColorLight">@color/extra_light</item>
    <item name="neumorph_shadowColorDark">@color/grey_500</item>
    <item name="neumorph_shapeType">flat</item>
    <item name="neumorph_shapeAppearance">@style/ShapeAppearance.Neumorph.ButtonCircle</item>
</style>
<style name="ShapeAppearance.Neumorph.ButtonCircle" parent="">
    <item name="neumorph_cornerFamily">oval</item>
    <item name="neumorph_cornerSize">0dp</item>
</style>