Как да изрежете ъглите на ImageView (заоблени ъгли) извън екрана

Имам изображения, заредени в пейджър за преглед със заоблени ъгли. Въпреки това, поради причини, свързани с дизайна, искам само горните ъгли да са закръглени, когато визуализаторът е установен, но всички ъгли да изглеждат заоблени, когато страниците се променят. Постигнах това, като закръглих всички ъгли и натиснах изображението надолу с около 8dp.

Проблемът, който имам, е, че въпреки че съм закръглил всички ъгли с помощта на .transform(new RoundedCorners(8)) на glide, когато прегледателят се плъзне, той показва само горните ъгли като заоблени. Публикувах няколко екранни снимки:

ViewPager е уреден:

Преместване на ViewPager:

Трябва да спомена, че използвам PageTransformer, за да анимирам прехода между страниците, поради което страниците са свити на втората екранна снимка. Ето пълния код на Glide:

    Glide.with(albumArt)
            .load(trackModel.getAlbumCoverArtUrl())
            .apply(new RequestOptions()
                    .fitCenter()
                    .transform(new RoundedCorners(8)))
            .into(albumArt);

Също така се опитах да дефинирам контур за ImageView и да задам setClipToOutline(true) като по-долу:

    albumArt.setClipToOutline(true);
    albumArt.setOutlineProvider(new ViewOutlineProvider() {
        @Override
        public void getOutline(View view, Outline outline) {
            outline.setRoundRect(0, 0, view.getWidth(), view.getHeight(), 16);
        }
    });

Това обаче води до следното, което не е това, което искам: Всички ъгли са заоблени, когато ViewPager се установи:

Опитах се да променя layout_margins на ImageView в XML, както и фрагмента на контейнера на ImageView, но това винаги оставя всички ъгли закръглени и видими, когато ViewPager е уреден.

Това, което бих искал да се случи, е всички ъгли да бъдат закръглени, но когато ViewPager е установен, долните ъгли да бъдат „избутани“ извън екрана, така че да виждате само горните ъгли като заоблени. Когато ViewPager се плъзга, бих искал всички ъгли да са видими и заоблени.

Ето пълния клас и XML:

клас:

public class NowPlayingPageFragment extends Fragment {
    private static final String TAG = "NowPlayingPageFragment";


    public static NowPlayingPageFragment newInstance(TrackModel trackModel) {
        NowPlayingPageFragment fragment = new NowPlayingPageFragment();
        Bundle argument = new Bundle();
        argument.putSerializable(TrackModel.class.getSimpleName(), trackModel);
        fragment.setArguments(argument);
        return fragment;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container,
                             Bundle savedInstanceState) {
        ViewGroup rootView = (ViewGroup) inflater.inflate(
                R.layout.now_playing_page, container, false);

        Bundle arguments = getArguments();
        TrackModel trackModel = (TrackModel) arguments.getSerializable(TrackModel.class.getSimpleName());
        Log.d(TAG, "NowPlayingPage: " + trackModel.getAlbumCoverArtUrl());
        ImageView albumArt = rootView.findViewById(R.id.nowPlayingAlbumArtPage);

//          Alternate method to round corners

//        albumArt.setClipToOutline(true);
//        albumArt.setOutlineProvider(new ViewOutlineProvider() {
//            @Override
//            public void getOutline(View view, Outline outline) {
//                outline.setRoundRect(0, 0, view.getWidth(), view.getHeight(), 16);
//            }
//        });

        Log.d(TAG, "NowPlayingPage: setClipToOutline" + albumArt.getClipToOutline());

        Glide.with(albumArt)
                .load(trackModel.getAlbumCoverArtUrl())
                .apply(new RequestOptions()
                        .fitCenter()
                        .transform(new RoundedCorners(8))
                )
                .into(albumArt);

        return rootView;
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
    }

}

Трябва да споменем, че оформлението е вложено в оформление на фрагмент на viewpager, което е вложено в оформление на долен лист.

XML:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"

    android:layout_height="match_parent"
    android:layout_marginTop="0dp"
    android:background="@drawable/round_corner_dialog"
    android:clipChildren="false"
    android:clipToPadding="false"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/nowPlayingAlbumArtPage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp"
        android:contentDescription="@string/album_art_large"
        android:cropToPadding="false"
        android:scaleType="centerCrop"
        android:visibility="visible" />
</LinearLayout>