Home / Videos / Erstellen eines Bildschiebereglers mit Picasso + ViewPager – Android Studio Tutorial

Erstellen eines Bildschiebereglers mit Picasso + ViewPager – Android Studio Tutorial



In diesem Video verwenden wir das ViewPager-Widget zusammen mit der Picasso-Bildladebibliothek, um einen Bildschieberegler zu erstellen, mit dem die Bilder aus dem Web geladen werden. Dazu erstellen wir einen PagerAdapter und überschreiben die Methoden getCount, instantiateItem, isViewFromObject und destroyItem. Wir erstellen dann dynamisch ImageViews und fügen sie als Seiten zu unserem ViewPager hinzu. In diese ImageViews laden wir die Bilder von URLs, die wir mit Hilfe von Picasso in einem String-Array speichern.

Beispielcode, GitHub-Link, Anleitung usw.:

____________________
❗ Abonniere den Kanal:

⏯ Weitere Tutorials ansehen:

⭐ Werden Sie Channel-Mitglied für exklusive Tutorials und andere Vorteile:

㊙ Hilf beim Übersetzen der Videos:

💚 Unterstützen Sie den Inhalt:
 

💬 Am Discord-Chat teilnehmen:

🎧 Hörbücher und Podcasts für Programmierer:
 

👶 So fangen Sie mit der Android-Entwicklung an:
 

📣 Folgen Sie Coding in Flow in den sozialen Medien:

Facebook:

Instagram:

Twitter:

Blog:
  .

About AndroidWeltEditor

Check Also

Android 10: Die Zukunft?

Bei Pocketnow Daily wechselt Google von Gebäck zu einer Umbenennung von Android in Android 10. …

37 comments

  1. please relaunching with ViewPager2.

  2. Thanx so much that was so helpful

  3. How to make add to favourite button and show on the favourite list

  4. Nice work
    but i have question please how i can start at position 10 for example not from the 0

  5. help i dont have the support.v4.view.ViewPager from 0:59
    i have this
    androidx.viewpager.widget.ViewPager

  6. Thank you !! it is great information for me !! 🙂
    I have one question. How do you zoom this?

  7. Hello my app is launching real good but the images are not showing …. i have added all the dependencies and permission if some one can help me it will be life saving…

  8. How can I set the current image, as wallpaper?

  9. thanx man .. awesome work .. great explanation

  10. how can we add share option in image? Ive done in XML, I need help for code.

  11. Very useful tutorial ,Thanks for sharing your knowledge and Good Luck

  12. How can we do to autoplay sound in every switch images? Thanks!

  13. Nice tutorial with perfect presentation 👍

  14. Sir plz make a video in this topic
    "Continuous Shared Element Transitions: RecyclerView to ViewPager"

    https://android-developers.googleblog.com/2018/02/continuous-shared-element-transitions.html?m=1

    Plz sir I need help

  15. how to add next, prev buttons in this?

  16. Error is showing while adding latest dependency

  17. Very good explanation. How do I load images dynamically using JSON in imageUrls

  18. I'm retrieving Images from firebase into viewpager there is no error but images are not coming into view my firebase has image links and it is correctly retrieving into the app(I have checked through logcat) is there something I'm missing.

    if anyone can solve this it would be a great help

  19. How to download the image from view pager… Whenever you slide to the next image it will set the download link to the current image from ViewPager…

    Please make video

  20. Is there a way to connect it to firebase iamges?

  21. How to implement onClick image and view it in another fragment ?

  22. public class GrideView extends AppCompatActivity {

    RecyclerView recyclerView;

    Context context;

    FirebaseDatabase database;

    DatabaseReference imageList;

    String categoryId = "";

    FirebaseRecyclerAdapter<Gallery, GalleryViewHolder> adapter;

    ConstraintSet set = new ConstraintSet();

    ArrayList<Gallery> mvalues = new ArrayList<>();;

    ImageView previousView;

    ImageView nextView;

    private int selectedPosition;

    private ViewPager viewPagerView;

    private Dialog dialog;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_gride_view);

    //Firebase Database reference

    database = FirebaseDatabase.getInstance();

    imageList = database.getReference("Gallery");

    recyclerView = (RecyclerView) findViewById(R.id.stagRecycleView);

    recyclerView.setHasFixedSize(true);

    StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);

    recyclerView.setLayoutManager(layoutManager);

    recyclerView.setHasFixedSize(true);

    if (getIntent() != null)

    categoryId = getIntent().getStringExtra("CategoryId");

    if (!categoryId.isEmpty() && categoryId != null) {

    loodListGallery(categoryId);

    }

    }

    private void loodListGallery(String categoryId) {

    Query query = imageList.orderByChild("menuId").equalTo(categoryId);

    FirebaseRecyclerOptions options = new FirebaseRecyclerOptions.Builder<Gallery>()

    .setQuery(query, Gallery.class).build();

    adapter = new FirebaseRecyclerAdapter<Gallery, GalleryViewHolder>(options) {

    @Override

    protected void onBindViewHolder(@NonNull GalleryViewHolder viewHolder, final int position, @NonNull final Gallery model) {

    Glide.with(GrideView.this).load(model.getGalleryImage()).into(viewHolder.imageView);

    Random r = new Random();

    int mHeight = r.nextInt(300 – 50) + 100;

    String ratio = String.format("%d:%d", 100, mHeight);

    set.clone(viewHolder.constraintLayout);

    set.setDimensionRatio(viewHolder.imageView.getId(), ratio);

    set.applyTo(viewHolder.constraintLayout);

    final Gallery local = model;

    viewHolder.constraintLayout.setOnClickListener(new View.OnClickListener() {

    @Override

    public void onClick(View v) {

    ShowImgSlider(position);

    }

    });

    }

    private void ShowImgSlider(int position) {

    //init Dialog

    dialog = new Dialog(GrideView.this, android.R.style.Theme_Black_NoTitleBar_Fullscreen);

    dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);

    dialog.setContentView(R.layout.dialog_slider);

    dialog.getWindow().setBackgroundDrawableResource(R.color.primary_light);

    nextView = dialog.findViewById(R.id.slider_next);

    previousView = dialog.findViewById(R.id.slider_previous);

    dialog.show();

    selectedPosition = position;

    viewPagerView = dialog.findViewById(R.id.slider_viewpager_img);

    final SliderPagerAdapter sliderPagerAdapter = new SliderPagerAdapter();

    viewPagerView.setAdapter(sliderPagerAdapter);

    viewPagerView.setCurrentItem(selectedPosition + 1);

    previousView.setOnClickListener(new View.OnClickListener() {

    @Override

    public void onClick(View v) {

    if (selectedPosition == 0) {

    viewPagerView.setCurrentItem(mvalues.size() – 1);

    } else {

    selectedPosition = selectedPosition – 1;

    viewPagerView.setCurrentItem(selectedPosition);

    }

    }

    });

    nextView.setOnClickListener(new View.OnClickListener() {

    @Override

    public void onClick(View v) {

    if (selectedPosition == mvalues.size() – 1) {

    viewPagerView.setCurrentItem(0);

    } else {

    selectedPosition = selectedPosition + 1;

    viewPagerView.setCurrentItem(selectedPosition);

    }

    }

    });

    viewPagerView.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

    int jumpPosition = -1;

    @Override

    public void onPageScrolled(int i, float v, int i1) {

    }

    @Override

    public void onPageSelected(int i) {

    if (i == 0) {

    //prepare to jump to the last page

    jumpPosition = sliderPagerAdapter.getRealCount();

    } else if (i == sliderPagerAdapter.getRealCount() + 1) {

    //prepare to jump to the first page

    jumpPosition = 1;

    } else {

    }

    }

    @Override

    public void onPageScrollStateChanged(int i) {

    if (i == ViewPager.SCROLL_STATE_IDLE && jumpPosition >= 0) {

    //Jump without animation so the user is not aware what happened.

    viewPagerView.setCurrentItem(jumpPosition, false);

    selectedPosition = jumpPosition;

    //Reset jump position.

    jumpPosition = -1;

    }

    }

    });

    }

    @NonNull

    @Override

    public GalleryViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int i) {

    View itemview = LayoutInflater.from(parent.getContext()).inflate(R.layout.gallery_menu, parent, false);

    return new GalleryViewHolder(itemview);

    }

    };

    adapter.startListening();

    adapter.notifyDataSetChanged();

    recyclerView.setAdapter(adapter);

    recyclerView.getAdapter().notifyDataSetChanged();

    }

    // adapter

    @Override

    protected void onStop() {

    super.onStop();

    if(adapter != null)

    adapter.stopListening();

    }

    @Override

    protected void onResume() {

    super.onResume();

    loodListGallery(categoryId);

    }

    public class GViewHolder extends RecyclerView.ViewHolder {

    ConstraintLayout constraintLayout;

    final ImageView img;

    public GViewHolder(@NonNull View itemView) {

    super(itemView);

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

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

    }

    }

    // adapter

    public class SliderPagerAdapter extends PagerAdapter {

    @NonNull

    @Override

    public Object instantiateItem(@NonNull ViewGroup container, int position) {

    LayoutInflater mlayoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

    View view = mlayoutInflater.inflate(R.layout.item_slider, container, false);

    ImageView bigImgSlider = view.findViewById(R.id.img_slider);

    TextView text_nb = view.findViewById(R.id.text_nb);

    ImageView closeView = view.findViewById(R.id.close_slider);

    int modelPosition = mapPagerPositionToModelPosition(position);

    closeView.setOnClickListener(new View.OnClickListener() {

    @Override

    public void onClick(View v) {

    dialog.dismiss();

    }

    });

    Gallery image = mvalues.get(modelPosition);

    Glide.with(context).load(image.getGalleryImage()).into(bigImgSlider);

    int y = modelPosition+1;

    text_nb.setText("" +y + "/" + mvalues.size());

    container.addView(view);

    return view;

    }

    @Override

    public void destroyItem(ViewGroup container, int position, Object object) {

    container.removeView((View) object);

    }

    @Override

    public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {

    return view == (View) o;

    }

    private int mapPagerPositionToModelPosition(int pagerPosition) {

    int a = 0;

    if (pagerPosition == 0) {

    a = getRealCount() – 1;

    } else if (pagerPosition == getRealCount() + 1) {

    a = 0;

    } else a = pagerPosition – 1;

    return a;

    }

    @Override

    public int getCount() {

    int x;

    if (mvalues.size() == 0)

    x = 0;

    else

    x = mvalues.size() + 2;

    return x;

    }

    public int getRealCount() {

    return mvalues.size();

    }

    }

    }

    not show the image

  23. Picasso.get function is not showing to me.how to fix this?

  24. Have questions!!! I Log.d( ) on instantiateItem(Object instantiateItem(@NonNull ViewGroup container, int position) and it is called twice when initializing sample app. I don`t know why it is called twice. Does it mean that ViewPager has loaded 2 pages? if so, then Can i change the number of times its called ?

  25. Thank you.. very clear tutorial and video..

  26. what about i'm using Glide instead of Picasso, could it be work as well?

  27. Thanks. but image is strech ??

  28. Hello sir, nice tutorial!

    But as always, i have a question according to my case which is i want to load the image not from the string source, but from the GSON response.
    I got this error:
    java.lang.NullPointerException: Attempt to invoke interface method 'int java.util.List.size()' on a null object reference
    at com.testapp.adapter.AdapterVpPromo.getCount(AdapterVpPromo.java:29)
    at android.support.v4.view.ViewPager.setAdapter(ViewPager.java:532)
    at com.testapp.activity.PromoActivity$3.onResponse(PromoActivity.java:130)

    Am i right use size(), not length()?
    I thought i have to create something like when we created Recycler view method like (MyViewHolder, onBindViewHolder, MyViewHolder extends Recylcerview, etc.) is it true?

    Oh, and i use Glide instead of Picasso, the script like this:
    Glide.with(context).load(vwPgPromoList.get(position).getPromoImages()).into(imageView);

    Thank you..

  29. thanks
    Pls, How can we retrieve this images from firebase realtime

  30. Thanks the code will really helpfull

Leave a Reply

Your email address will not be published. Required fields are marked *