Hello everyone,
This is a short tutorial about how to make a carousel viewpager in sketchware.
Explanation
In a viewpager there is only a single view available at a moment. But in carousel viewpager there is a small portion of next and previous views visible along with our actual view.
Tutorial
To make this type of view in sketchware, open your sketchware and put a viewpager inside the view. Be careful that you do not put it in any type of scroll view. In my case I drag and drop a viewpager with id viewpager1.
Then create a custom view for your viewpager and bind it to your viewpager. Then in this set the margin of top parent container to a good number in my case I set it to 10dp. You can customize it accordingly.
Our view work is done, so now let's head to coding section. In oncreate I used 3 blocks.
1. First to set listmap to viewpager. (Here I have not shown how to set data in your listmap. You can set any data to listmap as usual you do for any listview.)
2. This is to make changes live in the viewpager.
3. Third is ASD block to convert our viewpager into carousel viewpager.
ASD code
Here is the ASD code for this task ->
final float scaleFactor = 0.94f; viewpager1.setPageMargin(-15); viewpager1.setOffscreenPageLimit(3); viewpager1.setPageTransformer(false, new ViewPager.PageTransformer() { @Override public void transformPage(@NonNull View page1, float position) { page1.setScaleY((1 - Math.abs(position) * (1 - scaleFactor))); page1.setScaleX(scaleFactor + Math.abs(position) * (1 - scaleFactor)); } });
In this code you need to perform some changes like setting your viewpager id and setting margins. There is no need to alter the offscreen page limit, but you can do it if your project show error.
Custom Library
There is no need of any local library, but you need to enable app compact and design option.
On bind custom view for viewpager
There is no need of any special code to be inserted in this event. For example I only added the blocks to get data from listmap.
Final Result
So this is the final result after the coding. Here I used some ui code to improve the look. You can do it at your own.
Thanks for reading...
Thank you dear, for reading the article to the full length. I wish you achieved your desired result. If you stuck at any condition then you can come to my telegram group, where members may help you out.
Thanks again!