삐져나오는 이미지 영역을 감싸는 방법

 

 

예시로 위와 같은 이미지 위로 투명도가 있는 액체이미지를 넣으려고 합니다.

 

하지만 액체 이미지는 radius 가 없어서 담기는게 아닌 삐져나오게 됩니다.

 

ex.)

 

 

 

그래서 어떻게 하면 저 이미지 안으로 액체 이미지를 넣을 수 있을까 고민을 했습니다.

 

1. 해당 이미지를 ViewGroup 으로 감싸서 나오지 않게 해봤지만 결론적으로 ViewGroup 의 width 나 height 를 결국 저 사이즈에 맞게 늘리면 삐져 나오는건 마찬가지였습니다.

 

 

2. ViewGroup 으로 감싸되 CardView 를 사용하면 가능했습니다.

 

 

CardView 를 부모뷰로 감싸면 이미지와 같이 그 영역 만큼 이미지가 잘려서 들어갈 수 있습니다.

 

 

코드

 

<FrameLayout
    android:id="@+id/flLiquid"
    android:layout_width="@dimen/dip_190"
    android:layout_height="@dimen/dip_230"
    android:layout_marginTop="@dimen/dip_30"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    >

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/ivFuelBack"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitCenter"
        android:src="@drawable/fuel_back"
        android:layout_gravity="center"
       />

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        app:cardElevation="@dimen/dip_0"
        app:cardCornerRadius="@dimen/dip_45"
        app:cardBackgroundColor="@android:color/transparent"
        >

        <com.airbnb.lottie.LottieAnimationView
            android:id="@+id/lottieLiquid"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="fitXY"
            app:lottie_autoPlay="true"
            app:lottie_loop="true"
            app:lottie_rawRes="@raw/fuel_liquid_total1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            />

    </androidx.cardview.widget.CardView>

</FrameLayout>

 

주의할점!

• CardView는 기본적으로 그림자를 생성하며, 이는 백그라운드가 투명해도 여전히 보일 수 있습니다.
• 그러므로 cardElevation = 0dp 로 설정하고, cardBackgroundColor 도 투명하게 처리했습니다.