Sliding Images with ViewPager Example

As a programmer i'm not giving more information about ViewPager because you people aware on this concept,but i will give small introduction to you.

ViewPager is a layout manager which allows user to flip left and right through pages of data. Such interaction enriches user experience and is useful in displaying sequence of pages seamlessly. This is the reason why many modern apps use ViewPager extensively.

Now, i will apply my coding here is,

Step 1 Adding Dependencies:
===========================
implementation 'com.github.devlight:infinitecycleviewpager:1.0.2'

Step 2 Design layout for your activity
======================================
If your beginner lets copy my code and pate it,

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:shimmer="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@android:color/white">

<com.gigamole.infinitecycleviewpager.HorizontalInfiniteCycleViewPager
android:id="@+id/hz_viewpager"
android:layout_width="match_parent"
android:layout_height="@dimen/_150sdp"
app:icvp_interpolator="@android:anim/accelerate_decelerate_interpolator"
app:icvp_center_page_scale_offset="30dp"
app:icvp_max_page_scale="0.8"
app:icvp_medium_scaled="true"
android:background="@color/textGray"
app:icvp_min_page_scale="0.5"
app:icvp_min_page_scale_offset="5dp"
app:icvp_scroll_duration="500"/>
</LinearLayout>

Step 3 Layout File for ViewPager Item
======================================
i hope you people good at design,so you can you your design pattern.Here is code layout name is item_sample.xml

<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:orientation="vertical">

<FrameLayout
android:id="@+id/fragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white">

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<ImageView
android:id="@+id/imageview_n"
android:layout_width="match_parent"
android:layout_height="0dp"
android:adjustViewBounds="true"
app:layout_constraintDimensionRatio="2:1" />
</androidx.constraintlayout.widget.ConstraintLayout>

<TextView
android:id="@+id/tev_nm"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:padding="@dimen/_5sdp"
android:background="@color/transparent_black"
android:text="@string/app_name"
android:textColor="#F1EDED"
android:fontFamily="@font/alegreya"
android:textSize="@dimen/_18sdp" />
</FrameLayout>
</LinearLayout>

Then,write your adapter class and add this layout to adapter. AutoScrollAdapter.class

import android.content.Context;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import androidx.annotation.NonNull;
import androidx.viewpager.widget.PagerAdapter;
import com.bumptech.glide.Glide;
import java.util.List;
import prudhvi.furnature.R;
import prudhvi.furnature.models.AutoScrollModel;

public class AutoScrollAdapter extends PagerAdapter {

List<AutoScrollModel> images;
Context context;
LayoutInflater layoutInflater;

public AutoScrollAdapter(List<AutoScrollModel> images, Context context) {
this.images = images;
this.context = context;
layoutInflater = LayoutInflater.from(context);
}

@Override
public int getCount() {
return images.size();
}

@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
return view.equals(object);
}

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

container.removeView((View) object);
}

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

View view = layoutInflater.inflate(R.layout.item_sample, container, false);
ImageView imageView = view.findViewById(R.id.imageview_n);
TextView tv_nm = view.findViewById(R.id.tev_nm);

Glide.with(context).load(images.get(position).getPath())
.crossFade()
.into(imageView);
tv_nm.setText(images.get(position).getName());
container.addView(view);

view.setOnClickListener(new View.OnClickListener() {
@Override public void onClick(View v) {
Toast.makeText(context, "Comming soon " + position, Toast.LENGTH_LONG).show();
}
});
return view;

}
}

Once we have implemented AutoScrollAdapter we just need to instantiate it in our MainActivity and associate it with the ViewPager/HorizontalInfiniteCycleViewPager.

Step 4
=======
Once we have implemented hope all thing are done with POJO/Model class
public class AutoScrollModel {

String path,name,id;

public String getPath() {
return path;
}

public void setPath(String path) {
this.path = path;
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public String getId() {
return id;
}

public void setId(String id) {
this.id = id;
}

@Override public String toString() {

return toString();
}
}

lets complete entire process here now, MainActivity.class

public class MainActivity extends AppCompatActivity {

private HorizontalInfiniteCycleViewPager horizontalInfiniteCycleViewPager;
private List<AutoScrollModel> images= new ArrayList<>();

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

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle("View Pager example");
//toolbar.setNavigationIcon(R.mipmap.ic_action_back_btn); setSupportActionBar(toolbar);

ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);

AutoScrollModel model=new AutoScrollModel();
model.setPath("https://www.ikea.com/images/sofa-and-armchairs-living-room-949c78fb58970789a9b74f3815daf306.jpg?f=s");
model.setName("New Arrivals");

AutoScrollModel model2=new AutoScrollModel();
model2.setPath("https://website-images.livmatrix.com/magazine/wp-content/uploads/sites/2/2020/03/27181322/All-About-Floating-Furniture-04-scaled.jpg");
model2.setName("Best Seller");

AutoScrollModel model3=new AutoScrollModel();
model3.setPath("https://www.hometown.in/media/cms/icons/Bhushan/Msite_CLP_summer_Sale_sofa.jpg");
model3.setName("Future Discounts");
images.add(model);
images.add(model2);
images.add(model3);

horizontalInfiniteCycleViewPager=layout.findViewById(R.id.hz_viewpager);
AutoScrollAdapter myAdopter = new AutoScrollAdapter(images,getActivity());
horizontalInfiniteCycleViewPager.setAdapter(myAdopter);
}
}

out put:

Happy coding..have nice day..please share your comment to me to more updates...

Android Real Time

Search This Blog

Sliding Images with ViewPager Example | PagerAdapter

Comments

Post a Comment