Слайд-изображение с recyclerview в полноэкранном режиме android

Question

У меня есть приложение для обоев, в котором я загружаю изображения из базы данных firebase в recyclerview. Когда я нажимаю на элемент recyclerview (изображение), URL-адрес изображения этого элемента отправляется следующему действию, а затем этот URL-адрес загружается в imageView с помощью скольжения.

Теперь я хочу изменить это на что-то вроде Image-Slider. Нажимая на элемент recyclerView, я хочу показать это изображение в полноэкранном режиме, а также сдвинуть его слева или справа (к следующему или предыдущему), но я не знаю, как это сделать.

Вот мой код.

        recyclerView.setHasFixedSize(true);
        recyclerView.setLayoutManager(new GridLayoutManager(getContext(), 3));
        adapter = new FeaturedAdapter(list);
        recyclerView.setAdapter(adapter);

        databaseReference = FirebaseDatabase.getInstance().getReference().child("Wallpaper All");
        Query query = databaseReference.orderByChild("dark").equalTo(true);
        query.addListenerForSingleValueEvent(new ValueEventListener() {
            @Override
            public void onDataChange(@NonNull DataSnapshot dataSnapshot) {

                list.clear();
                for (DataSnapshot dataSnapshot1 : dataSnapshot.getChildren()) {

                    FeaturedModel model = dataSnapshot1.getValue(FeaturedModel.class);
                    list.add(model);
                    
                }

                adapter.notifyDataSetChanged();

            }

            @Override
            public void onCancelled(@NonNull DatabaseError databaseError) {

                Log.e("TAG_DATABASE_ERROR", databaseError.getMessage());

            }
        });

FeaturedAdapter.java

public class FeaturedAdapter extends RecyclerView.Adapter<FeaturedAdapter.ViewHolder> {

    private List<FeaturedModel> featuredModels;

    public FeaturedAdapter(List<FeaturedModel> featuredModels) {
        this.featuredModels = featuredModels;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.custom_image, parent, false);

        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {

        holder.setData(featuredModels.get(position).getImageLink()
                , position,
                featuredModels.get(position).isPremium());

    }

    @Override
    public int getItemCount() {
        return featuredModels.size();
    }

    class ViewHolder extends RecyclerView.ViewHolder {

        private ImageView imageView;
        private ImageView premiumImage;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);

            imageView = itemView.findViewById(R.id.imageview);
            premiumImage = itemView.findViewById(R.id.premium);

        }

        private void setData(final String url, final int position, boolean premium) {

            Glide.with(itemView.getContext().getApplicationContext()).load(url).into(imageView);

            if (premium) {

                premiumImage.setVisibility(View.VISIBLE);

                itemView.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Intent setIntent = new Intent(itemView.getContext(), PremiumViewActivity.class);
                        //setIntent.putExtra("title", url);
                        setIntent.putExtra("images", featuredModels.get(getAdapterPosition()).getImageLink());
                        setIntent.putExtra("id", featuredModels.get(position).getId());
                        itemView.getContext().startActivity(setIntent);

                    }
                });


            } else {

                premiumImage.setVisibility(View.GONE);

                itemView.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Intent setIntent = new Intent(itemView.getContext(), ViewActivity.class);
                        //setIntent.putExtra("title", url);
                        setIntent.putExtra("images", featuredModels.get(getAdapterPosition()).getImageLink());
                        setIntent.putExtra("id", featuredModels.get(position).getId());
                        itemView.getContext().startActivity(setIntent);

                    }
                });

            }

        }

    }

}

ViewActivity

Random rnd = new Random();
        int color = Color.argb(255, rnd.nextInt(256), rnd.nextInt(256), rnd.nextInt(256));

        relativeLayout.setBackgroundColor(color);

        Glide.with(this)
                .load(getIntent().getStringExtra("images"))
                .timeout(6000)
                .listener(new RequestListener<Drawable>() {
                    @Override
                    public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {
                        relativeLayout.setBackgroundColor(Color.TRANSPARENT);
                        return false;
                    }

                    @Override
                    public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
                        relativeLayout.setBackgroundColor(Color.TRANSPARENT);
                        return false;
                    }
                })
                .into(imageView);
setBackgroundWall.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                setBackgroundImage();

            }
        });

}

 private void setBackgroundImage() {

        Bitmap bitmap = ((BitmapDrawable) imageView.getDrawable()).getBitmap();

        WallpaperManager manager = WallpaperManager.getInstance(getApplicationContext());
        try {
            manager.setBitmap(bitmap);
            Toasty.success(getApplicationContext(), "Set Wallpaper Successfully", Toast.LENGTH_SHORT, true).show();

        } catch (IOException e) {
            Toasty.warning(this, "Wallpaper not load yet!", Toast.LENGTH_SHORT, true).show();
        }
        

    }

activity_view.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"
    tools:context=".activity.PremiumViewActivity">

    <ImageView
        android:id="@+id/viewImage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"
        android:contentDescription="@null"
        android:scaleType="centerCrop"
        android:src="#00BCD4"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent" />

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lottieSuccess"
        android:layout_width="180dp"
        android:layout_height="180dp"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:lottie_fileName="checked.json" />

    <RelativeLayout
        android:id="@+id/wallpaper_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="16dp"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent">

        <ImageButton
            android:id="@+id/saveImage"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="20dp"
            android:background="@drawable/set_as_wallpaper_btn"
            android:contentDescription="@null"
            android:src="@drawable/save" />

        <Button
            android:id="@+id/setWallpaper"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="4dp"
            android:layout_marginEnd="8dp"
            android:background="@drawable/set_as_wallpaper_btn"
            android:minWidth="230dp"
            android:text="Set as wallpaper"
            android:textColor="#000"
            android:textStyle="bold" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:orientation="horizontal">

            <CheckBox
                android:id="@+id/favoritesBtn_checkbox"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="6dp"
                android:button="@drawable/favourite_checkbox_selector" />

            <ImageButton
                android:id="@+id/shareBtn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="6dp"
                android:background="@drawable/share"
                android:contentDescription="@null" />


        </LinearLayout>


    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/ads_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="12dp"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="parent">

        <Button
            android:id="@+id/watch_ads"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:layout_marginEnd="20dp"
            android:background="@drawable/set_as_wallpaper_btn"
            android:drawableStart="@drawable/advertizing"
            android:paddingStart="50dp"
            android:paddingEnd="50dp"
            android:stateListAnimator="@null"
            android:text="Watch Video Ad"
            android:textColor="#000"
            android:textStyle="bold" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/watch_ads">

            <Button
                android:id="@+id/unlock_withCoins"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginStart="20dp"
                android:layout_marginTop="15dp"
                android:layout_marginEnd="20dp"
                android:background="@drawable/set_as_wallpaper_btn"
                android:drawableStart="@drawable/diamond"
                android:paddingStart="50dp"
                android:paddingEnd="50dp"
                android:stateListAnimator="@null"
                android:text="Unlock with diamonds"
                android:textColor="#000"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/diamonds_tv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="50dp"
                android:gravity="center"
                android:text="Total Diamonds: 0"
                android:textSize="10sp"
                android:textStyle="bold" />

        </RelativeLayout>


    </RelativeLayout>


</androidx.constraintlayout.widget.ConstraintLayout>

custom_image.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="wrap_content">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_centerHorizontal="true"
        android:background="#fff"
        app:cardCornerRadius="10dp"
        app:cardUseCompatPadding="true">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/imageview"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:contentDescription="@null"
                android:scaleType="centerCrop"
                android:src="@color/colorPrimary" />

            <ImageView
                android:id="@+id/premium"
                android:contentDescription="@null"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:layout_alignParentTop="true"
                android:layout_alignParentEnd="true"
                android:layout_margin="10dp"
                app:srcCompat="@drawable/diamond" />

        </RelativeLayout>


    </androidx.cardview.widget.CardView>

</RelativeLayout>

Structure

MainActivity
    |
    | //Click button to open
    |
FragActivity
    |
    | //FrameLayout
    |
 Fragment
    |
    | //here is the recyclerView
    | //Open new Activity to view image 
    
ViewActivity

Запись экрана

Answer 1

Это можно решить, используя ViewPager или ViewPager2 в Android

Сначала создайте адаптер

ImageSwiperAdapter2.java

public class ImageSwiperAdapter2 extends RecyclerView.Adapter<ImageSwiperAdapter2.ImageSwiper> {

    private List<FeaturedModel> list;
    private Context context;

    public ImageSwiperAdapter2(List<FeaturedModel> list, Context context) {
        this.list = list;
        this.context = context;
    }

    @NonNull
    @Override
    public ImageSwiper onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.slidingimages,
                parent, false);

        return new ImageSwiper(view);
    }

    @Override
    public void onBindViewHolder(@NonNull final ImageSwiper holder, int position) {

        Random rnd = new Random();
        int color = Color.argb(255, rnd.nextInt(256), rnd.nextInt(256), rnd.nextInt(256));
        holder.relativeLayout.setBackgroundColor(color);

        Glide.with(context.getApplicationContext())
                .load(list.get(position).getImageLink())
                .listener(new RequestListener<Drawable>() {
                    @Override
                    public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {
                        holder.relativeLayout.setBackgroundColor(Color.TRANSPARENT);
                        return false;
                    }

                    @Override
                    public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
                        holder.relativeLayout.setBackgroundColor(Color.TRANSPARENT);

                        return false;
                    }
                })
                .into(holder.imageView);


    }

    @Override
    public int getItemCount() {
        return list.size();
    }

    class ImageSwiper extends RecyclerView.ViewHolder {


        private ImageView imageView;
        

        public ImageSwiper(@NonNull View itemView) {
            super(itemView);

            imageView = itemView.findViewById(R.id.imageView);
          

        }


    }
}

В ViewActivity/SwiperActivity.java

public class SwiperActivity extends AppCompatActivity {

    private ViewPager2 viewPager;
    private List<FeaturedModel> list;
    private ImageSwiperAdapter2 adapter2;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_swiper);

        viewPager = findViewById(R.id.view_pager);
        
        final int pos = getIntent().getIntExtra("pos", 0);

        Singleton singleton = Singleton.getInstance();

        list = new ArrayList<>();
        list = singleton.getListSin();

        adapter2 = new ImageSwiperAdapter2(list, this);

        viewPager.setAdapter(adapter2);
        viewPager.setCurrentItem(pos);

        viewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                super.onPageScrolled(position, positionOffset, positionOffsetPixels);
            }

            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);

                Toast.makeText(SwiperActivity.this, "Selected: " + position, Toast.LENGTH_SHORT).show();

            }

            @Override
            public void onPageScrollStateChanged(int state) {
                super.onPageScrollStateChanged(state);
            }
        });

    }

}

Вы можете пройти list и щелкнул позицию элемента в FeaturedAdapter.

В твоем FeaturedAdapter's setData метод

private void setData(final String url, final int position, boolean premium) {
          Glide.with(itemView.getContext().getApplicationContext()).load(url).into(imageView);

            final Singleton a = Singleton.getInstance();
            a.setListSin(featuredModels);

            if (premium) {

                premiumImage.setVisibility(View.VISIBLE);

                itemView.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {

                        Intent setIntent = new Intent(itemView.getContext(), SwiperActivity.class);
                        
                        setIntent.putExtra("pos", position);
                        itemView.getContext().startActivity(setIntent);
                        CustomIntent.customType(itemView.getContext(), "fadein-to-fadeout");



                    }
                });


            } else {

                premiumImage.setVisibility(View.GONE);

                itemView.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        
                        Intent setIntent = new Intent(itemView.getContext(), SwiperActivity.class);
                        setIntent.putExtra("pos", position);
                        itemView.getContext().startActivity(setIntent);
                        CustomIntent.customType(itemView.getContext(), "fadein-to-fadeout");

                    }
                });

            }

        }

Slidingimages.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"
        android:contentDescription="@null"
        android:scaleType="centerCrop" />

    
</RelativeLayout>

activity_swiper.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".SwiperActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:orientation="horizontal"
        android:id="@+id/view_pager"
        android:layoutDirection="inherit"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>
    

Answer 2

Поскольку ViewActivity должен отображать все изображения (при сдвиге), он должен содержать адаптер с набором URL-адресов изображений. Вместо использования ImageView используйте RecyclerView в ViewActivity и подключите адаптер. В вашем коде сделайте следующее, чтобы сделать вид ресайклера горизонтальным и добавить функциональность слайдов.

    recyclerView = view.findViewById(R.id.recycler_view);
    recyclerView.setHasFixedSize(true);
    recyclerView.setLayoutManager(new LinearLayoutManager(getApplicationContext(),LinearLayoutManager.HORIZONTAL,false));
    SnapHelper snapHelper = new PagerSnapHelper();
    snapHelper.attachToRecyclerView(recyclerView);

Answer 3

Несколько дней назад я искал аналогичное требование для показа скользящего просмотра изображений. Эту ситуацию можно решить, используяViewPagerв Android. Вы можете использовать следующие руководства для создания такого представления слайд-изображения с помощьюViewPager

Ресурсы Java

1. Блог Учебник
2. Видеоурок

Ресурсы Котлина

1. Видеоурок