Slide image with recyclerview in full screen android

Question

I have created a wallpaper app where I'm loading images from the firebase database in recyclerview. When I click on recyclerview item(image) that item's image URL is sent to the next activity and then that URL is loaded into imageView using glide.

I want to change this to something like Image-Slider. By clicking on the recyclerView item I want to show that image in full screen and slide from left or right(next or previous). But I don't know how to do that.

Here is my code.

        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

Screen Recording

Answer 1

This can be solved by using ViewPager or ViewPager2 in Android

First create an Adapter

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);
          

        }


    }
}

In 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);
            }
        });

    }

}

You can pass the list and clicked item position in FeaturedAdapter.

In your FeaturedAdapter's setData method

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

Since the ViewActivity must show all the images(when slided) it must contain the adapter with the set of image urls. Instead of using an ImageView, use a RecyclerView in the ViewActivity and attach the adapter. In your code, do the following to make the recycler view horizontal and add slide functionality.

    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

Few Days ago, I had been looking for similar requirement for showing slid-able image View. This situation can be solved using ViewPager in Android. You can use following Tutorials for building such Slide Image View using ViewPager

Java Resources

1. Blog Tutorial
2. Video Tutorial

Kotlin Resources

1. Video Tutorial