neumorphism

neumorphism copied to clipboard

Describe the request you'd like: Supports two styles to the corner shapes like MDC.

Additional context:

<LinearLayout 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:orientation="vertical" android:weightSum="10" tools:context=".WorkoutActivity">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:orientation="horizontal"
    android:layout_weight="1">
    <soup.neumorphism.NeumorphFloatingActionButton
        android:id="@+id/fab_backBtn"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:layout_margin="12dp"
        app:neumorph_shadowColorLight="#FFF"
        app:neumorph_strokeColor="#fff"

        app:neumorph_shapeAppearance="@style/CustomShapeAppearance"
        android:scaleType="centerInside"
        android:src="@drawable/ic_arrow_back_black_24dp" />
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="1"/>
    <TextView
        android:id="@+id/workout_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="monospace"
        android:gravity="center"
        android:layout_margin="16dp"
        android:text="운동"
        android:textColor="#2a344f"
        android:textSize="32sp"
        android:textStyle="bold" />

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <soup.neumorphism.NeumorphFloatingActionButton
        android:id="@+id/fab_addBtn"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:layout_margin="10dp"
        android:scaleType="centerInside"
        android:src="@drawable/add_room"
        app:neumorph_shapeAppearance="@style/CustomShapeAppearance" />


</LinearLayout>


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:orientation="horizontal"
    android:layout_weight="9">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/workOut_recyclerview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:nestedScrollingEnabled="false" />
</LinearLayout>

현재 이러한 레이아웃인데 버튼들이 사각형 형태로 떠져있는데 해결할 방법이 있을까요..?

추가적으로 혹시 레이아웃안에 레이아웃에서 버튼을 추가하면 버튼이 뜨던데 안뜨게 하는 방법을 알 수 있을까요? 플로팅 버튼을 예로들었다면 '원' 형태가 아닌 '사각형' 형태로 그대로 보여지게 되더라구요..

@Rabbitg 본 이슈는 Feature를 위한 목적으로 생성되었습니다. 문의는 별도 이슈로 만들어주시면 좋을 것 같습니다.

이와 별개로 말씀하신 내용을 들어보니, Style 문제로 보입니다. App Theme가 Neumorph theme 기반이 아니라면,

• (Option 1) 아래처럼 기본 widget style을 추가해주셔야 합니다.

<soup.neumorphism.NeumorphFloatingActionButton
    style="@style/Widget.Neumorph.FloatingActionButton"
    ...
    />

• (Option 2) 혹은 직접 Shape를 정의해주셔야 합니다.

<soup.neumorphism.NeumorphFloatingActionButton
    ...
    app:neumorph_shapeAppearance="@style/CustomShapeAppearance" />

<style name="CustomShapeAppearance">
    <item name="neumorph_cornerFamily">{rounded|oval}</item>
    <item name="neumorph_cornerSize">32dp</item>
</style>

아무래도 현재 구체적인 내용이 Document로 정리되지 않았고, 샘플도 간단한 것만 구현되어 있어서 그런 것 같은데요. 이건 별도로 업데이트 해두겠습니다.

빠른 답변 정말 감사합니다. 지금도 하고 있는데 한 가지 이슈가 더 있는 것 같아요.. 바쁘신데 계속 질문드려 죄송합니다. <soup.neumorphism.NeumorphImageButton android:id="@+id/profile_btn" style="@style/Widget.Neumorph.ImageButton" android:layout_width="64dp" android:layout_height="64dp" android:scaleType="centerInside" android:src="@drawable/settings" app:neumorph_shapeType="flat" /> <soup.neumorphism.NeumorphImageButton android:id="@+id/fab_backBtn" android:layout_width="66dp" android:layout_height="66dp" app:neumorph_shapeType="flat" style="@style/ShapeAppearance.Neumorph.ImageButton" android:scaleType="centerInside" android:src="@drawable/settings" />

두개를 보면 똑같은데 제가 NeumorphFloatingActionButton 에서 NeumorphImageButton 으로 변경을 하였습니다. 처음에 사이즈가 달라서 width height도 똑같이 주었지만 변경이 되지가 않고, 원의 모양이 아닌 사각형의 모양으로 변경이 되더라구요..

@Rabbitg 본 이슈는 Feature를 위한 목적으로 생성되었습니다. 문의는 별도 이슈로 만들어주시면 좋을 것 같습니다.

이와 별개로 말씀하신 내용을 들어보니, Style 문제로 보입니다. App Theme가 Neumorph theme 기반이 아니라면,

• (Option 1) 아래처럼 기본 widget style을 추가해주셔야 합니다.

<soup.neumorphism.NeumorphFloatingActionButton
    style="@style/Widget.Neumorph.FloatingActionButton"
    ...
    />

• (Option 2) 혹은 직접 Shape를 정의해주셔야 합니다.

<soup.neumorphism.NeumorphFloatingActionButton
    ...
    app:neumorph_shapeAppearance="@style/CustomShapeAppearance" />

<style name="CustomShapeAppearance">
    <item name="neumorph_cornerFamily">{rounded|oval}</item>
    <item name="neumorph_cornerSize">32dp</item>
</style>

아무래도 현재 구체적인 내용이 Document로 정리되지 않았고, 샘플도 간단한 것만 구현되어 있어서 그런 것 같은데요. 이건 별도로 업데이트 해두겠습니다.

일단 다른 레이아웃에 되던걸 복사붙이기해서 해결은 완료되었습니다. !! 답변 정말 감사드리고 좋은 자료를 공유해주셔서 정말 감사합니다. 이슈가 생기면 계속 말해드리겠습니다 감사합니다 !!

일단 다른 레이아웃에 되던걸 복사붙이기해서 해결은 완료되었습니다. !!

엌ㅋㅋ 해결되셨다니, 다행이네요. 네, 사용해보고 리포트해주시면 저는 감사하죠. ㅎㅎ