Home Blog Page 92

Infinite Cycle View Pager – GithubAndroid Library Dev Light

1
infinite cycle view pager android github library
infinite cycle view pager android github library

In this tutorial i will show you how to make an Infinite Cycle View Pager with On Click Listner.

INFINITE CYCLE VIEW PAGER

Demo Screen Recorded

This Github Android Library  comes with with two-way orientation i.e Horizontal and Vertical Orientation and interactive effect.

In a normal ViewPager, you are allowed only  to scroll from the first page to second page until the last Page, from left-to-right. Once you reach the last page, your only option is to scroll backwards, right-to-left. In other words if we say from last page you cannot go back to first page directly, you need to scroll backwards until first page. Therefore I have found a infinite cycle ImageView Card ViewPager that solve the a problem.

Installation of Infinite Card ViewPager in project.

Let us now start adding required dependencies library into our android studio project.

Minimun SDK Version required for this library:

InfiniteCycleViewPager requires a minimum SDK version of 11.

Add Github Dependenices library in to Gradle (Module:app)

implementation 'com.github.devlight:infinitecycleviewpager:1.0.2'

Or Maven:

<dependency>
  <groupId>com.github.devlight</groupId>
  <artifactId>infinitecycleviewpager</artifactId>
  <version>1.0.2</version>
  <type>pom</type>
</dependency>

Library is now been successfully added into your project.

activity_main.xml

<!--<com.gigamole.infinitecycleviewpager.VerticalInfiniteCycleViewPager-->
<com.gigamole.infinitecycleviewpager.HorizontalInfiniteCycleViewPager
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:icvp_interpolator="..."
    app:icvp_center_page_scale_offset="30dp"
    app:icvp_max_page_scale="0.8"
    app:icvp_medium_scaled="true"
    app:icvp_min_page_scale="0.5"
    app:icvp_min_page_scale_offset="5dp"
    app:icvp_scroll_duration="500"/>

Refer Official Github library

Implementation of Infinite Cycle ViewPager Github Android Library.

Create a new Project under Android Studio

File>New>New Project > Emply Project > Give name To the prject.

activity_Main.xml

Add the xml UI design code of  Horizontal Infinite Cycle ViewPager.

You can set vertical or horizontal infinite cycle ViewPager.

<?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=".MainActivity">

    <com.gigamole.infinitecycleviewpager.HorizontalInfiniteCycleViewPager
        android:id="@+id/horizontalcardviewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        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"
        app:icvp_min_page_scale="0.5"
        app:icvp_min_page_scale_offset="5dp"
        app:icvp_scroll_duration="500">
    </com.gigamole.infinitecycleviewpager.HorizontalInfiniteCycleViewPager>

</RelativeLayout>

Then, Create a new Layout xml file under Layout directory.

Right Click on Layout directory > New > Layout Resource File

I have name new layout xml file as card_item.xml

In card_item.xml file we will define the UI design.

Card_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:id="@+id/fragment"
        android:layout_height="match_parent">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/imageview"/>

       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:textColor="#F1EDED"
           android:id="@+id/textview1"
           android:text="HELLO WORLD"
           android:textSize="30sp"
           android:layout_margin="20dp"
           android:layout_gravity="bottom"
           />
    </FrameLayout>
</LinearLayout>

In the above lines of code i have 2 views that is  ImageView and a TextView which is inside FrameLayout

I have wrapped it into FrameLayout so that i can display a textview top of ImageView.

MyAdopter.java

package protocoderspoint.com.devlightinfinitecardviewpager;

import android.content.Context;
import android.provider.ContactsContract;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.Toast;

import androidx.annotation.NonNull;
import androidx.viewpager.widget.PagerAdapter;

import java.util.List;

public class MyAdopter extends PagerAdapter {

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


    public MyAdopter(List<Integer> 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.card_item,container,false);
        ImageView imageView =(ImageView)view.findViewById(R.id.imageview);
        imageView.setImageResource(images.get(position));
        container.addView(view);

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

    }
}

Create a new Java class and name it as MyAdopter.java and copy paste the below adopter code in that class.

MainActivty.java

package protocoderspoint.com.devlightinfinitecardviewpager;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.HorizontalScrollView;

import com.gigamole.infinitecycleviewpager.HorizontalInfiniteCycleViewPager;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    List<Integer> images= new ArrayList<>();

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


        initData();

        HorizontalInfiniteCycleViewPager horizontalInfiniteCycleViewPager =(HorizontalInfiniteCycleViewPager)findViewById(R.id.horizontalcardviewpager);
        MyAdopter myAdopter = new MyAdopter(images,getBaseContext());
        horizontalInfiniteCycleViewPager.setAdapter(myAdopter);
       

    }

    private void initData() {
        images.add(R.drawable.card1a);
        images.add(R.drawable.card2a);
        images.add(R.drawable.card3a);
        images.add(R.drawable.card4a);
    }
}

MainActivity.java is a main launcher page that will load as soon as the app start.

List that holds arrayList of images from drawable directory.

images.add(R.drawable.card1a) is used to add images into arraylist.

Just Copy paste above code in Main_Activity.java

and all set the Infinite Cycle View Pager android project is ready to run.

How to Implement Webview in flutter? – Load website in flutter webview plugin

1
Flutter WebView
Flutter WebView

Hi Guys Welcome to Proto Coders Point, This project is a Beginner starting point for a Flutter application, Here we will see how can we implement webview in flutter web app development using webview plugin.

Demo on Flutter Webview

"<yoastmark

Video Tutorial – Convert Website to app

Introduction on Flutter WebView 

Presenting a web view is pretty common in mobile apps. In Flutter, this is done by using the webview_flutter package.

Use this package Webview_Flutter as a library

If you want to use flutter webview widget you need to add some dependencies

Add this to your package’s pubspec.yaml file:

dependencies:
  webview_flutter: ^0.3.15+1

Then make sure with this indentation, sight empty space in pubspec.yaml file might give you error.

Import flutter webview widget package

Now in your Dart code (main.dart), you need to import  widget packages, so that you can use flutter webview in you class file.

import 'package:webview_flutter/webview_flutter.dart';

Let’s start implementing webview in your flutter application.

Create a new Flutter project  in android studio.

creating-new-flutter-project-in-android-studio
creating-new-flutter-project-in-android-studio

Give a name to your flutter application. in my case i have name it as flutter_webview. you can name it anything it left to you.

So our flutter project is build and ready to implement our flutter code.

But then are flutter default code added into our flutter dart code. you can delete all the code from main.dart class and copy paste the code i provide you below.

Add below code in your project

Webview widget snippet

WebView(
          key: Key("webview"),
          initialUrl: flutterUrl,
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController)
          {
            _controller = webViewController;
          },

First, the key parameter allows the Flutter widget tree to refer to this widget easily using a unique key created via Flutter’s UniqueKey() method you’ll soon see in the full example below.

javascriptMode simply allows us to control what kind of Javascript can be run in our web view.

Finally, initialUrl is the URL we want to display.

The important gotcha here is that we’ll need to use a StatefulWidget because it appears that if we use a StatelessWidget, the WebView will not load properly.

We pass in a url parameter to this widget, which is used in the state of our StatefulWidget.

Full flutter webview source Code

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var title = 'Webview Demo';
    return new MaterialApp(
      title: title,
      home: new MyAppHomePage(),
    );
  }
}

class MyAppHomePage extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

const String flutterUrl = "https://flutter.dev/";
const String wikiUrl = "https://es.wikipedia.org";

class _MyAppState extends State<MyAppHomePage> {
  WebViewController _controller;

  _back() async {
    if (await _controller.canGoBack()) {
      await _controller.goBack();
    }
  }

  _forward() async {
    if (await _controller.canGoForward()) {
      await _controller.goForward();
    }
  }

  _loadPage() async {
    var url = await _controller.currentUrl();
    _controller.loadUrl(
      url == "https://flutter.dev/"
          ? 'https://es.wikipedia.org'
          : "https://flutter.dev/",
    );

    print(url);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView'),
        actions: <Widget>[
          IconButton(
            onPressed: _back,
            icon: Icon(Icons.arrow_back_ios),
          ),
          IconButton(
            onPressed: _forward,
            icon: Icon(Icons.arrow_forward_ios),
          ),
          SizedBox(width: 10),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _loadPage,
        child: Icon(Icons.refresh),
      ),
      body: SafeArea(
        child: WebView(
          key: Key("webview"),
          initialUrl: flutterUrl,
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _controller = webViewController;
          },
        ),
      ),
    );
  }
}

In the app bar I have used 2 icons that will function as a back and forword button when we navigate to some other url in out webview onWebView controller will take care of this process.

Here there is also a reload button i.e floatingActionButton that will reload the initial url of the application.

Hope this article was useful for you project.

keep visiting proto coders point

Recommended Post

check out how to add bottomNavigationbar

profile page UI Design 

Android – How to Convert Website into Android App ?

Instagram Dark Mode android and Ios

0
instagram dark mode android and IOS
instagram dark mode android and IOS

 

Check Out Here’s How To Get Instagram Dark Mode Android Which makes Easier for Eye At Night

Facebook has followed the latest trend which is to introduce the Dark mode theme on Instagram too. Users with iOS and Android devices who are been using Instagram so far with normal instagram theme will now be able to experience the Dark mode of instagram. But as an update in official instagram, The feature may not be available to all users right away since it is being rolled out in phases.

Instagram automatically syncs your device and change it to the dark mode. The dark mode on Instagram will work only on iOS 13 and Android 10 devices. So before you go for it make sure that you have downloaded the latest version of Instagram.

How to put instagram dark mode android on Android phones

This is not a complicated process, but it may be a while until your Android phone has this feature. Why? Well, you need to have Android 10, the latest Android OS, to access Dark Mode on your phone.

  1. Check if you already have Android 10 or if you can upgrade to it. To see if there is an upgrade available, go to Settings > System > System Update.
  2. Once you’ve updated to Android 10, turn on your Dark Mode by going to Settings > Display > Dark Theme.
  3. You can also turn on Dark Mode via Battery Saving Mode by going to Settings > Battery > Battery Saver. The two are connected now, as Dark Mode saves battery life, so if you switch on Battery Saver, you’ll automatically go to Dark Mode.
  4. Open the Instagram app.
  5. Dark Mode will be active in your Instagram app when you have it turned on in your phone settings, and you’ll be able to scroll with it until you turn of Dark Mode on your phone.


How to Get instagram dark mode on IOS Devices

Instagram automatically syncs your device and change it to the dark mode. The dark mode on Instagram will work only on iOS 13 and Android 10 devices. So before you go for it make sure that you have downloaded the latest version of Instagram.

iPhone iOS 13

  1. Make Sure you iphone device is Updated the latest version of iOS 13.
  2. Open the setting app on your device. Settings 
  3. Scroll down to the display and brightness option. Display & Brightness
  4. There you will see the option of light mode and dark mode
  5. Click on the dark mode option
  6. Your iPhone will turn into the dark mode.
  7. You can also click on the automatic option. The automatic option will automatically change the mode during daytime and night time.

Now you can enjoy the darkness!

Steps to change Iphone Instagram theme to dark mode.

Step 1 : Open Settings.

ios 13 dark mode setting
ios 13 setting screenshot

Step 2 : Go to Display & brightness 

IOS dark mode theme
IOS dark mode theme Display and brightness

Step 3 : change as you need light mode or dark mode and per your requirement.

ios display brightness setting page
ios display brightness setting page

Flutter ListView Long List Memory Efficient Dynamic | Flutter Dart Tutorial

1
Flutter ListView Long List Memory Efficient Dynamically
Flutter ListView Long List Memory Efficient Dynamically

This Flutter Dart tutorial, Learn How to build an application with memory efficient Listview in dart by using ListView.Builder constructor. And dynamically inflate ListTile as the List element.

basic of flutter listview 

Steps to implement Flutter listview long list with memory efficient

1. Prepare a data source.

You need to prepare a data source which you want to inflate in each of the list item within your listview.

2. Convert data source into Widgets.

Then you need to convert the data source you have created or fetched from some out source into Widget because in the end, the flutter listview expects the array of widgets.

3. Use widgets as a children of a listview.

Finally you have to use all the widget as a children of the listview.

So let us follow the above steps & implement flutter listview dynamically.

1. Preparing a data source for flutter listview

Snippet code 

List<String> getListElements() {
  var items = List<String>.generate(1000, (counter) => "Item $counter"); // generate iten from 0 to 999
  return items;
}

The above snippet code will simple generate list of items, which will be 1000 in number

Eg: item 0, item item 1 ,item 2,…………..item 999.

2. Converting data source into widget

Once your data source is ready you need to wrap it into your widget, so that i will define a method that will return the list view.

Where  will genetare a listview, here is am using a constructor callede listview.builder,here one of the parameter of this builder constructor is a itemBuilder. Which helps us in creating items in our listview,here we have 2 parameter(context,index).

Right now i want all of the item to be inListTile,

There we are customizing title we are fetching from data source we have created above in steps 1.

Widget getListView() {
  var listItems = getListElements();

  var listview = ListView.builder(itemBuilder: (context, index) {
    return ListTile(
      title: Text(listItems[index]),
    );
  });
  return listview;
}

 

3.Use widgets as a children of a listview.

Finally return a listview. and the use getListView() function in main Scaffold() in body tag. like body: getListView();

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter ListView Long Dynamic"),
        ),
        body: getListView(),
      ),
    ),
  );
}

Our Application has lots of Items to be displayed on the device screen but still out app is memory efficient just because Listview.builder function simply calls onlt for those elements that can be visible on the screen Therefore element which  are hiding behind the screen are not been loaded into the memory thus it is memory efficient.

if you need to add further customize your listitems by using lending attribute like Icons,it is totally up to your wish what extra customization you want to make to your Flutter ListView application.

return ListTile(
      title: Text(listItems[index]),
      leading: Icon(Icons.games),
      trailing: Icon(Icons.wb_sunny),
      subtitle: Text("Visit : ProtoCoderspoint to learn more"),
    );

Full Source Code on Flutter ListView Long List Memory Efficient Dynamic 

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter ListView Long Dynamic"),
        ),
        body: getListView(),
      ),
    ),
  );
}

List<String> getListElements() {
  var items = List<String>.generate(1000, (counter) => "Item $counter");
  return items;
}

Widget getListView() {
  var listItems = getListElements();

  var listview = ListView.builder(itemBuilder: (context, index) {
    return ListTile(
      title: Text(listItems[index]),
    );
  });
  return listview;
}

This solution to remove some of the major drawback of basic flutter listview.

Long List ListView

  • For Huge number of list Items.
  • Loads only few item that can be visible on the screen remaining will be hidden in background.
  • Do use it for large number of items since it ismemory efficient.
  • Wrap ListView as home of Scaffold widget as it is scrollable and might overflow beyond the screen.

How to create ListView in Flutter ? Flutter ListView tutorial using Dart

7
How to create ListView in Flutter
How to create ListView in Flutter

In this flutter tutorial we will implement flutter listview widget that simply displays list of items in a form of listview.

Also we will explore basic feature of flutter list view like onTap anonymous Event handler, add some of basic properties like leading icon, title to listview, subtitle.

Here is demo of how final listview will look

Flutter ListView Tutorial

Application final UI Demo

flutter listview UI Design
flutter listview UI Design

How to Create a Flutter listview?

Dart is the programming language used to code Flutter apps. Dart is another product by Google. So

main class function

snippet code

void main() {
  runApp(MaterialApp(
    home: Scaffold( 
      appBar: AppBar(
        title: Text("Flutter List View Tutorial"), // title of appbar
      ),
      body: getListView(), //list widget function is been called
    ),
  ));
}

Here we have used scaffold widget because all the content should be visible inside the device screen size i.e if we don’t use Scaffold you may get error  “ListTile widget require a Material widget ancestor” some think like below screenshot

ListTile widget require a Material widget ancestor
Error: ListTile widget require a Material widget ancestor

Inside Scaffold we have AppBar widget that show a app bar at the top of device screen with some Title to it.

and a body of Application which calls a function getListView(); that display listview in the body tag.

Widget Function

ListTile class leading trailing widget
ListTile class leading trailing widget

snippet code

Widget getListView() {
  var listview = ListView(
    children: <Widget>[
      ListTile(
        leading: Icon(Icons.landscape),
        title: Text("LandScape"),
        subtitle: Text("Beautiful View..!"),
        trailing: Icon(Icons.wb_sunny),
      ),
      ListTile(
        leading: Icon(Icons.access_alarm),
        title: Text("Alarm"),
        subtitle: Text("Good morning.!"),
        trailing: Icon(Icons.cloud_circle),
      ),
      ListTile(
        leading: Icon(Icons.beach_access),
        title: Text("Beach"),
        subtitle: Text("Beach View..!"),
        trailing: Icon(Icons.beach_access),
      ),
      ListTile(
        leading: Icon(Icons.satellite),
        title: Text("Satellite"),
        subtitle: Text("Satellite Signal..!"),
        trailing: Icon(Icons.scatter_plot),
      ),
      ListTile(
        leading: Icon(Icons.save),
        title: Text("Save Data"),
        subtitle: Text("Save File..!"),
        trailing: Icon(Icons.gps_fixed),
      ),
      ListTile(
        leading: Icon(Icons.phone),
        title: Text("Call"),
        subtitle: Text("856848***11..!"),
        trailing: Icon(Icons.cached),
      ),
      ListTile(
        leading: Icon(Icons.print),
        title: Text("Printer"),
        subtitle: Text("Print Page..!"),
        trailing: Icon(Icons.pages),
      ),
      ListTile(
        leading: Icon(Icons.gamepad),
        title: Text("Game Pad"),
        subtitle: Text("Game Lover..!"),
        trailing: Icon(Icons.games),
      )
    ],
  );
  return listview;
}

A scrollable list of widgets arranged linearly.

ListView is the most commonly used scrolling widget. It displays its children one after another in the scroll direction. In the cross axis, the children are required to fill the ListView.

ListTile contains one to three lines of widget, such as checked box, leading icons and trailing icons, Title with is main text of listviews, subtitle which is basically a meta derscription of title.

Full Source Code of Flutter listview UI Design

main.dart

Final Full Source : Copy paste this code into main.dart file of your flutter project, and you are done the app will run successfully

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text("Flutter List View Tutorial"),
      ),
      body: getListView(),
    ),
  ));
}

Widget getListView() {
  var listview = ListView(
    children: <Widget>[
      ListTile(
        leading: Icon(Icons.landscape),
        title: Text("LandScape"),
        subtitle: Text("Beautiful View..!"),
        trailing: Icon(Icons.wb_sunny),
      ),
      ListTile(
        leading: Icon(Icons.access_alarm),
        title: Text("Alarm"),
        subtitle: Text("Good morning.!"),
        trailing: Icon(Icons.cloud_circle),
      ),
      ListTile(
        leading: Icon(Icons.beach_access),
        title: Text("Beach"),
        subtitle: Text("Beach View..!"),
        trailing: Icon(Icons.beach_access),
      ),
      ListTile(
        leading: Icon(Icons.satellite),
        title: Text("Satellite"),
        subtitle: Text("Satellite Signal..!"),
        trailing: Icon(Icons.scatter_plot),
      ),
      ListTile(
        leading: Icon(Icons.save),
        title: Text("Save Data"),
        subtitle: Text("Save File..!"),
        trailing: Icon(Icons.gps_fixed),
      ),
      ListTile(
        leading: Icon(Icons.phone),
        title: Text("Call"),
        subtitle: Text("856848***11..!"),
        trailing: Icon(Icons.cached),
      ),
      ListTile(
        leading: Icon(Icons.print),
        title: Text("Printer"),
        subtitle: Text("Print Page..!"),
        trailing: Icon(Icons.pages),
      ),
      ListTile(
        leading: Icon(Icons.gamepad),
        title: Text("Game Pad"),
        subtitle: Text("Game Lover..!"),
        trailing: Icon(Icons.games),
      )
    ],
  );
  return listview;
}

Summary of above tutorial 

-> Basic ListView

  • For small number of list Items.
  • Loads all item in memory when attached to screen.
  • Do not use it for large number of items since it is not memory efficient.
  • Wrap ListView as home of Scaffold widget as it is scrollable and might overflow beyond the screen.

Image Steps GitHub Library Android Studio

1
Image Steps GitHub Library Android Studio
Image Steps GitHub Library Android Studio

Introduction to Github image steps library

In this Tutorial we will implement a github library names as Image Steps github which is A simple library for using steps with images and animation.

Image Steps GitHub Library Android Application Demo

GIF Video Image

Image Steps GitHub Library Android Studio
Image Steps GitHub Library Android Studio

Now let’s start with implementing required dependencies for github image Steps  library.

How to Installation Image Steps gitHub Library.

Minimum SDK Version should be 17 or above

  • minSdkVersion – 17

Adding dependencies in to your Build.gradle(Module:app)

implementation 'com.github.denisviana:Image-Steps:1.0.5'

Add this maven library link into your Build.gradle ( Project:…..)

allprojects {
    repositories {
        google()
        jcenter()
        maven {
            url "https://jitpack.io"
        }
    }
}

maven url is mandatory, if you don’t add it android studio will show to some kind of error.

 Image Steps Adding Design in Xml file

<io.github.denisviana.imagestep.ImageSteps
        android:background="#913D88"
        android:id="@+id/imageSteps"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        app:default_color="#fff"/>

Adding Image Steps Resources Images ID in java or Kotlin file

Java Code to implement Image steps library

 ImageSteps imageSteps = (ImageSteps)findViewById(R.id.imageSteps);   // for identifing image steps ID

imageSteps.setScaleUp(4.0f); // setting size if active image steps 

imageSteps.setAnimationDuration(1000); // animitation Duration to show image steps images 

imageSteps.setSteps(R.drawable.image_one,R.drawable.image_two,R.drawable.image_three); // setting images from drawable

In this above lines of codes we are initialsing image steps by using FindViewById.

setScaleUp() is used to set the size of active image.

setAnimationDuration() is used just to show some animation effect for 1 sec, Here 1000 = 1 sec.

setSteps() is used to set a images for each steps of images, here the number of resources images you will add will be total numbers of steps been added.

OR

Kotlin Code to implement the same as above 

imageSteps.setSteps(R.drawable.ic_welcome,R.drawable.icon_users,R.drawable.ic_check)
imageSteps.scaleUp = 2.0f
imageSteps.animationDuration = 500


previous.setOnClickListener { imageSteps.previous() } // button click to  change next image steps. 
next.setOnClickListener { imageSteps.next() }  // button click to change image to previous one.

Full source code of this android library project

activity_main.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:text="Welcome to ProtoCodersPoint"
        android:layout_gravity="center"
        android:gravity="center"
        android:textColor="#1E18D8"
        android:layout_margin="10dp"
        />


    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="15sp"
        android:text="Image Steps GitHub library android"
        android:layout_gravity="center"
        android:textStyle="italic|bold"
        android:gravity="center"
        android:textColor="#FF00F6"
        android:layout_margin="10dp"
        />

    <io.github.denisviana.imagestep.ImageSteps
        android:background="#1E88E5"
        android:id="@+id/imageSteps"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:default_color="#fff"/>

    <Button
        android:id="@+id/next"
        android:layout_marginTop="10dp"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="next" />

    <Button
        android:id="@+id/previous"
        android:layout_marginTop="10dp"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="Previous" />
</LinearLayout>

Copy pase the above lines of xml layout design under main_activity.xml file

Main_Activity.java

package protocoderspoint.com.imagestepsgithub;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import io.github.denisviana.imagestep.ImageSteps;

public class MainActivity extends AppCompatActivity {

    ImageSteps imageSteps;
    Button next,previous;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageSteps = (ImageSteps)findViewById(R.id.imageSteps);

        next=(Button)findViewById(R.id.next);
        previous=(Button)findViewById(R.id.previous);
        imageSteps.setScaleUp(4.0f);
        imageSteps.setAnimationDuration(1000);
        imageSteps.setSteps(R.drawable.ic_child_care_black_24dp,
        R.drawable.ic_child_friendly_black_24dp,
        R.drawable.ic_hot_tub_black_24dp,
        R.drawable.ic_account_circle_black_24dp); //you need to add 4 images in drawable directory

       next.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               imageSteps.next();
           }
       });

       previous.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               imageSteps.previous();
           }
       });
    }
}

Paste the obove lines of code into Main_Actitity.java file.

Keep in mind you need to add 4 images or more into drawable directory ( as much as image steps you need to create ).

Done all this set now and ready to run this application.

Conclusion: 

In this Android Library, we have learn about how can we  implement an image step github library in android application.

check out this more android library