{"id":3635,"date":"2025-04-14T07:10:15","date_gmt":"2025-04-14T07:10:15","guid":{"rendered":"https:\/\/alsaeeddev.com\/?p=3635"},"modified":"2025-04-14T07:20:11","modified_gmt":"2025-04-14T07:20:11","slug":"professional-auto-sliding-layout-slider-in-android-java","status":"publish","type":"post","link":"https:\/\/alsaeeddev.com\/shop\/professional-auto-sliding-layout-slider-in-android-java\/","title":{"rendered":"Professional Auto-Sliding Layout Slider In Android Java with ViewPager2"},"content":{"rendered":"<p>Creating a smooth and engaging user experience is crucial for any Android app. One common UI component that helps achieve this is a Professional Auto-Sliding Layout Slider In Android Java. Perfect for highlighting key features, showcasing products, or creating onboarding screens<\/p>\n<h3>\ud83d\udd27 Key Features Implemented<\/h3>\n<ul>\n<li>\u2705 ViewPager2-based layout slider<\/li>\n<li>\u2705 Auto-slide every 4 seconds<\/li>\n<li>\u2705 Dot indicators with click support<\/li>\n<li>\u2705 Smooth animations using PageTransformer<\/li>\n<li>\u2705 Fully customizable titles and descriptions<\/li>\n<\/ul>\n<h3>\ud83e\udde9 Complete Code Overview<\/h3>\n<h4>1. Image Slider Setup<\/h4>\n<pre><code>private int[] images = {\r\n    R.drawable.image_1,\r\n    R.drawable.image_2,\r\n    R.drawable.image_3\r\n};\r\n\r\nprivate String[] titles = {\"Title 1\", \"Title 2\", \"Title 3\"};\r\nprivate String[] descriptions = {\r\n    \"Description for image 1\",\r\n    \"Description for image 2\",\r\n    \"Description for image 3\"\r\n};<\/code><\/pre>\n<p>These arrays hold the images, titles, and descriptions for the slider. You can easily replace them with your own assets or data from an API.<\/p>\n<h4>2. ViewPager2 Configuration<\/h4>\n<pre><code>viewPager = findViewById(R.id.viewPager);\r\nsliderAdapter = new LayoutSliderAdapter(images, titles, descriptions);\r\nviewPager.setAdapter(sliderAdapter);\r\nviewPager.setPageTransformer(new BookPageTransformer());<\/code><\/pre>\n<p>The <code>LayoutSliderAdapter<\/code> binds data to each page. You can use any animation class (like <code>BookPageTransformer<\/code>) to create swipe effects.<\/p>\n<h4>3. Dot Indicator Setup<\/h4>\n<pre><code>private void setupDots(int count) {\r\n    for (int i = 0; i &lt; count; i++) {\r\n        ImageView dot = new ImageView(this);\r\n        dot.setImageResource(R.drawable.dot_unselected);\r\n        ...\r\n        dotLayout.addView(dot);\r\n    }\r\n    highlightDot(0);\r\n}<\/code><\/pre>\n<p>Dots are added dynamically and respond to user interaction, allowing manual slide navigation.<\/p>\n<h4>4. Auto-Slide Functionality<\/h4>\n<pre><code>private void setupLayoutAutoSlide() {\r\n    slideRunnable = () -&gt; {\r\n        int nextItem = (viewPager.getCurrentItem() + 1) % images.length;\r\n        viewPager.setCurrentItem(nextItem, true);\r\n        slideHandler.postDelayed(slideRunnable, DELAY_IN_MILLI_SEC);\r\n    };\r\n    slideHandler.postDelayed(slideRunnable, DELAY_IN_MILLI_SEC);\r\n}<\/code><\/pre>\n<p>This function enables the <code>ViewPager2<\/code> to auto-slide every 4 seconds using a <code>Handler<\/code> and <code>Runnable<\/code>.<\/p>\n<h3>Complete Code Classes<\/h3>\n<h4>1. BookPageTransformer.java<\/h4>\n<pre><code>\r\npublic class BookPageTransformer implements ViewPager2.PageTransformer {\r\n\r\n    @Override\r\n    public void transformPage(@NonNull View page, float position) {\r\n        if (position &lt; -1) { \r\n            page.setAlpha(0f);\r\n        } else if (position &lt;= 0) { \r\n            page.setAlpha(1f); \r\n            page.setTranslationX(0f);\r\n            page.setPivotX(page.getWidth());\r\n            page.setRotationY(-90f * Math.abs(position));\r\n        } else if (position &lt;= 1) { \r\n            page.setAlpha(1f); \r\n            page.setTranslationX(0f); \r\n            page.setPivotX(0f); \r\n            page.setRotationY(90f * Math.abs(position)); \r\n        } else { \r\n            page.setAlpha(0f); \r\n        }\r\n    }\r\n}\r\n<\/code><\/pre>\n<h4>2. LayoutSliderAdapter.java<\/h4>\n<pre><code>\r\npublic class LayoutSliderAdapter extends RecyclerView.Adapter {\r\n\r\n    private int[] images;\r\n    private String[] titles;\r\n    private String[] descriptions;\r\n    private int[] colors;\r\n\r\n    public LayoutSliderAdapter(int[] images, String[] titles, String[] descriptions) {\r\n        this.images = images;\r\n        this.titles = titles;\r\n        this.descriptions = descriptions;\r\n        colors = new int[]{R.color.col1,R.color.col2,R.color.col3};\r\n    }\r\n\r\n    @NonNull\r\n    @Override\r\n    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {\r\n        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.image_slider_item, parent, false);\r\n        return new ViewHolder(view);\r\n    }\r\n\r\n    @Override\r\n    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {\r\n        holder.rootItem.setBackgroundColor(ContextCompat.getColor(holder.rootItem.getContext(),colors[position]));\r\n        holder.imageView.setImageResource(images[position]);\r\n        holder.titleTextView.setText(titles[position]);\r\n        holder.descriptionTextView.setText(descriptions[position]);\r\n    }\r\n\r\n    @Override\r\n    public int getItemCount() {\r\n        return images.length;\r\n    }\r\n\r\n    public static class ViewHolder extends RecyclerView.ViewHolder {\r\n        LinearLayout rootItem;\r\n        ImageView imageView;\r\n        TextView titleTextView;\r\n        TextView descriptionTextView;\r\n\r\n        public ViewHolder(@NonNull View itemView) {\r\n            super(itemView);\r\n            rootItem = itemView.findViewById(R.id.rootItem);\r\n            imageView = itemView.findViewById(R.id.imageView);\r\n            titleTextView = itemView.findViewById(R.id.titleTextView);\r\n            descriptionTextView = itemView.findViewById(R.id.descriptionTextView);\r\n        }\r\n    }\r\n}\r\n<\/code><\/pre>\n<h4>3. ZoomOutPageTransformer.java<\/h4>\n<pre><code>\r\npackage com.alsaeed.imageslider;\r\n\r\nimport android.view.View;\r\n\r\nimport androidx.annotation.NonNull;\r\nimport androidx.viewpager2.widget.ViewPager2;\r\n\r\npublic class ZoomOutPageTransformer implements ViewPager2.PageTransformer {\r\n\r\n    private static final float MIN_SCALE = 0.85f;\r\n    private static final float MIN_ALPHA = 0.5f;\r\n\r\n    @Override\r\n    public void transformPage(@NonNull View page, float position) {\r\n        if (position &lt; -1) { \r\n            page.setAlpha(0f);\r\n        } else if (position &lt;= 1) {\r\n            \/\/ Scale the page\r\n            float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));\r\n            float vertMargin = page.getHeight() * (1 - scaleFactor) \/ 2;\r\n            float horzMargin = page.getWidth() * (1 - scaleFactor) \/ 2;\r\n            if (position &lt; 0) {\r\n                page.setTranslationX(horzMargin - vertMargin \/ 2);\r\n            } else {\r\n                page.setTranslationX(-horzMargin + vertMargin \/ 2);\r\n            }\r\n\r\n            \/\/ Scale and fade\r\n            page.setScaleX(scaleFactor);\r\n            page.setScaleY(scaleFactor);\r\n            page.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE) \/ (1 - MIN_SCALE) * (1 - MIN_ALPHA));\r\n        } else {\r\n            page.setAlpha(0f);\r\n        }\r\n    }\r\n}\r\n<\/code><\/pre>\n<h4>4. MainActivity.java<\/h4>\n<pre><code>\r\npublic class MainActivity extends AppCompatActivity {\r\n\r\n    private ViewPager2 viewPager;\r\n    private LinearLayout dotLayout;\r\n    private final static int DELAY_IN_MILLI_SEC = 4000;\r\n\r\n    private int[] images = {\r\n            R.drawable.image_1,\r\n            R.drawable.image_2,\r\n            R.drawable.image_3\r\n    }; \/\/ Replace with your images\r\n    private String[] titles = {\"Title 1\", \"Title 2\", \"Title 3\"};\r\n    private String[] descriptions = {\r\n            \"Description for image 1\",\r\n            \"Description for image 2\",\r\n            \"Description for image 3\"\r\n    };\r\n\r\n    private LayoutSliderAdapter sliderAdapter;\r\n    private Handler slideHandler;\r\n    private Runnable slideRunnable;\r\n\r\n    @Override\r\n    protected void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n        setContentView(R.layout.activity_main);\r\n\r\n        viewPager = findViewById(R.id.viewPager);\r\n        dotLayout = findViewById(R.id.dotSignLayout);\r\n\r\n        \/\/ Set Adapter for ViewPager2\r\n        sliderAdapter = new LayoutSliderAdapter(images, titles, descriptions);\r\n        viewPager.setAdapter(sliderAdapter);\r\n\r\n        \/\/ Add PageTransformer for animations\r\n        viewPager.setPageTransformer(new BookPageTransformer());\r\n\r\n        \/\/ Initialize Dots\r\n        setupDots(images.length);\r\n\r\n        \/\/ Highlight Dot on Page Change\r\n        viewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {\r\n            @Override\r\n            public void onPageSelected(int position) {\r\n                highlightDot(position);\r\n            }\r\n        });\r\n\r\n        \/\/ Auto-Slide Functionality\r\n        slideHandler = new Handler(Looper.getMainLooper());\r\n        setupLayoutAutoSlide();\r\n    }\r\n\r\n    private void setupDots(int count) {\r\n        for (int i = 0; i &lt; count; i++) { ImageView dot = new ImageView(this); dot.setImageResource(R.drawable.dot_unselected); \/\/ Default dot drawable LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT ); params.setMargins(8, 0, 8, 0); dot.setLayoutParams(params); final int index = i; dot.setOnClickListener(v -&gt; {\r\n                viewPager.setCurrentItem(index);\r\n                resetAutoSlide();\r\n            });\r\n\r\n            dotLayout.addView(dot);\r\n        }\r\n\r\n        highlightDot(0);\r\n    }\r\n\r\n    private void highlightDot(int position) {\r\n        for (int i = 0; i &lt; dotLayout.getChildCount(); i++) {\r\n            ImageView dotIv = (ImageView) dotLayout.getChildAt(i);\r\n            if (i == position) {\r\n                dotIv.setImageResource(R.drawable.dot_selected);\r\n            } else {\r\n                dotIv.setImageResource(R.drawable.dot_unselected);\r\n            }\r\n        }\r\n    }\r\n\r\n    private void setupLayoutAutoSlide() {\r\n        slideRunnable = new Runnable() {\r\n            @Override\r\n            public void run() {\r\n                int nextItem = (viewPager.getCurrentItem() + 1) % images.length;\r\n                viewPager.setCurrentItem(nextItem, true);\r\n                slideHandler.postDelayed(this, DELAY_IN_MILLI_SEC);\r\n            }\r\n        };\r\n        slideHandler.postDelayed(slideRunnable, DELAY_IN_MILLI_SEC);\r\n    }\r\n\r\n    private void resetAutoSlide() {\r\n        slideHandler.removeCallbacks(slideRunnable);\r\n        slideHandler.postDelayed(slideRunnable, DELAY_IN_MILLI_SEC);\r\n    }\r\n\r\n    @Override\r\n    protected void onDestroy() {\r\n        super.onDestroy();\r\n        slideHandler.removeCallbacks(slideRunnable);\r\n    }\r\n}\r\n<\/code><\/pre>\n<h4>5. activity_main.xml<\/h4>\n<pre><code>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;androidx.constraintlayout.widget.ConstraintLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    tools:context=\".MainActivity\"&gt;\r\n\r\n    &lt;!-- ViewPager2 for Image Slider --&gt;\r\n    &lt;androidx.viewpager2.widget.ViewPager2\r\n        android:id=\"@+id\/viewPager\"\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"0dp\"\r\n        app:layout_constraintBottom_toTopOf=\"@+id\/dotSignLayout\"\r\n        app:layout_constraintEnd_toEndOf=\"parent\"\r\n        app:layout_constraintStart_toStartOf=\"parent\"\r\n        app:layout_constraintTop_toTopOf=\"parent\" \/&gt;\r\n\r\n    &lt;!-- Dots Indicator --&gt;\r\n    &lt;LinearLayout\r\n        android:id=\"@+id\/dotSignLayout\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_marginTop=\"16dp\"\r\n        android:gravity=\"center\"\r\n        android:orientation=\"horizontal\"\r\n        android:padding=\"8dp\"\r\n        app:layout_constraintBottom_toBottomOf=\"parent\"\r\n        app:layout_constraintEnd_toEndOf=\"parent\"\r\n        app:layout_constraintStart_toStartOf=\"parent\"\r\n        app:layout_constraintTop_toBottomOf=\"@id\/viewPager\" \/&gt;\r\n\r\n&lt;\/androidx.constraintlayout.widget.ConstraintLayout&gt;\r\n<\/code><\/pre>\n<h4>6. image_slider_item<\/h4>\n<pre><code>&lt;LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    android:id=\"@+id\/rootItem\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:background=\"@color\/white\"\r\n    android:orientation=\"vertical\"\r\n    android:padding=\"16dp\"&gt;\r\n\r\n    &lt;androidx.cardview.widget.CardView\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"200dp\"\r\n        app:cardCornerRadius=\"16dp\"&gt;\r\n\r\n        &lt;ImageView\r\n            android:id=\"@+id\/imageView\"\r\n            android:layout_width=\"match_parent\"\r\n            android:layout_height=\"200dp\"\r\n            android:scaleType=\"centerCrop\"\r\n            android:src=\"@drawable\/image_1\" \/&gt;\r\n\r\n    &lt;\/androidx.cardview.widget.CardView&gt;\r\n\r\n    &lt;TextView\r\n        android:id=\"@+id\/titleTextView\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_marginTop=\"8dp\"\r\n        android:text=\"Title\"\r\n        android:textColor=\"@color\/black\"\r\n        android:textSize=\"18sp\" \/&gt;\r\n\r\n    &lt;TextView\r\n        android:id=\"@+id\/descriptionTextView\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_marginTop=\"4dp\"\r\n        android:text=\"Description\"\r\n        android:textColor=\"@color\/black\"\r\n        android:textSize=\"14sp\" \/&gt;\r\n\r\n&lt;\/LinearLayout&gt;\r\n<\/code><\/pre>\n<hr \/>\n<p><iframe loading=\"lazy\" title=\"Professional Auto-Sliding Layout Slider In Android Java | Free Source Code #shorts #androidstudio\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/ZIpaYgrctkk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<hr \/>\n<p><a href=\"https:\/\/github.com\/alsaeeddev\/LayoutSlider\/archive\/refs\/heads\/main.zip\">Download Source Code<\/a><\/p>\n<h3>\ud83d\udee0 Tips for Customization<\/h3>\n<ul>\n<li>\u2705 Add fade-in or zoom animations for enhanced UX<\/li>\n<li>\u2705 Replace static arrays with dynamic content from Firebase or REST API<\/li>\n<li>\u2705 Use MotionLayout for more advanced transitions<\/li>\n<li>\u2705 Customize the dot shapes and colors for better brand alignment<\/li>\n<\/ul>\n<h3 style=\"margin-top: 20px;\">\ud83d\ude80 Final Thoughts<\/h3>\n<p>Using <code>ViewPager2<\/code> with auto-scroll and dot indicators is a powerful way to deliver interactive, modern UI components in your Android app. Whether for onboarding, promotional banners, or product showcases, this slider structure is flexible, reusable, and production-ready.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating a smooth and engaging user experience is crucial for any Android app. One common UI component that helps achieve this is a Professional Auto-Sliding Layout Slider In Android Java. Perfect for highlighting key features, showcasing products, or creating onboarding screens \ud83d\udd27 Key Features Implemented \u2705 ViewPager2-based layout slider \u2705 Auto-slide every 4 seconds \u2705 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3639,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,117,164],"tags":[35,33,37,38,36,34],"class_list":["post-3635","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-android","category-java","category-source-codes","tag-android-carousel","tag-android-image-slider","tag-android-slider-tutorial","tag-create-slider-in-android-studio","tag-dot-indicator-viewpager2","tag-viewpager2-auto-scroll"],"_links":{"self":[{"href":"https:\/\/alsaeeddev.com\/shop\/wp-json\/wp\/v2\/posts\/3635","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alsaeeddev.com\/shop\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alsaeeddev.com\/shop\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alsaeeddev.com\/shop\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alsaeeddev.com\/shop\/wp-json\/wp\/v2\/comments?post=3635"}],"version-history":[{"count":19,"href":"https:\/\/alsaeeddev.com\/shop\/wp-json\/wp\/v2\/posts\/3635\/revisions"}],"predecessor-version":[{"id":3794,"href":"https:\/\/alsaeeddev.com\/shop\/wp-json\/wp\/v2\/posts\/3635\/revisions\/3794"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alsaeeddev.com\/shop\/wp-json\/wp\/v2\/media\/3639"}],"wp:attachment":[{"href":"https:\/\/alsaeeddev.com\/shop\/wp-json\/wp\/v2\/media?parent=3635"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alsaeeddev.com\/shop\/wp-json\/wp\/v2\/categories?post=3635"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alsaeeddev.com\/shop\/wp-json\/wp\/v2\/tags?post=3635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}