Home Blog Page 35

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 

Send SMS using text local an SMS GATEWAY – Android Studio Application

2
SMS GATEWAY Text local
Android Studio Application - Send SMS using text local an SMS GATEWAY

Hi, Guys Welcome to Proto Coders Point.

This Article will learn how to develop an android application that can send SMS or bulk SMS to mobiles number.

In this  Aritcle, we are going to make use  https://textlocal.in/ to send SMS from our android app.

What is Textlocal?

India’s No. 1 Bulk SMS Platform Increase sales and customer satisfaction with smarter SMS campaigns, instant OTPs, notifications, two-way interactions & other award-winning bulk SMS services. this SMS sender android application can we used to send promotional SMS, bill SMS, and much more SMS services in India.

What is SMS GATEWAY Services ?

An SMS Gateway enables a computer to send and receive SMS text messages to and from a SMS capable device over the global telecomunications network (normally to a mobile phone).

The SMS Gateway translates the message sent, and makes it compatible for delivery over the network to be able to reach the recipient.

Android App development to send SMS using text local an SMS GATEWAY || with source code

Android studio send sms to mobile number implementation video.

Developing an android application to send message to mobile number

So let’s begin implementation of android application development with TEXTLOCAL SMS GATEWAY SERVICES API.

Step by Step integration of android codes.

Textlocal Account 

  1. Creating a account in TextLocal.in
  2. Creating and getting a SMS API key in textlocal.

Android implementation Codes

  1. Creating a New Android Studio Project.
  2. Design a layout in main_activity.xml.
  3. writing java code in Main_Activity.java class.

Creating a account in TextLocal.in

To be able to send sms through textlocal.in SMS Gateway services you need to create an account under textlocal.in 

Creating an account in textlocal
Creating an account in textlocal
dashboard of textlocal sms gateway
dashboard of textlocal a sms gateway

Creating and getting a SMS API key in textlocal.

When you are in textlocal dashboard navigate Towards – > Settings -> API KEY.

Create a new SMS API key

creating a new SMS API KEY
creating a new SMS API KEY

You need to keep a note of the SMS API KEY you have generated just now, so that you can easily copy cost the sms api key in android studio project.

All set in textlocal website, we have now successfully created a account under textlocal and generated a API key.

Android Studio Implementation of SMS GATEWAY SERVICES

Complete project Source code is been listed down below, so that you can download the SMS sending project.

Now Let is  begin implementation the source code in android studio.

Creating a SMS sending project in android studio.

File -> New -> New Project ->select a empty activity

Design a layout in main_activity.xml.

Main_Activity.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="SEND SMS"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.042" />

    <Button
        android:id="@+id/submit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="44dp"
        android:layout_marginBottom="420dp"
        android:text="Submit"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editText2"
        app:layout_constraintVertical_bias="0.038" />

    <EditText
        android:id="@+id/number"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:hint="Number"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <EditText
        android:id="@+id/msg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="136dp"
        android:ems="10"
        android:gravity="start|top"
        android:hint="Message"
        android:inputType="textMultiLine"
        app:layout_constraintBottom_toTopOf="@+id/submit"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Above xml code has 2 EditText and a Button

EditText1 is with ID number and EditText2 is with ID msg, that holds respectively mobile number and sms message to be sent.

Button is with ID Submit that fetch text from editext and send data to SMS gateway through SMS API key,

Writing java code in Main_Activity.java class

Main_Activity.java

package protocoderspoint.com.smsapi;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.os.StrictMode;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;

public class MainActivity extends AppCompatActivity {

    Button submit;
    EditText number,msg;

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

        submit=(Button)findViewById(R.id.submit);
        number=(EditText)findViewById(R.id.number);
        msg=(EditText)findViewById(R.id.msg);


        submit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String phono = number.getText().toString();
                String msgtext = msg.getText().toString();

                try {
                    // Construct data
                    String apiKey = "apikey=" + "Replace with your API KEY";
                    String message = "&message=" + msgtext;
                    String sender = "&sender=" + "TXTLCL";
                    String numbers = "&numbers=" + phono;

                    // Send data
                    HttpURLConnection conn = (HttpURLConnection) new URL("https://api.textlocal.in/send/?").openConnection();
                    String data = apiKey + numbers + message + sender;
                    conn.setDoOutput(true);
                    conn.setRequestMethod("POST");
                    conn.setRequestProperty("Content-Length", Integer.toString(data.length()));
                    conn.getOutputStream().write(data.getBytes("UTF-8"));
                    final BufferedReader rd = new BufferedReader(new InputStreamReader(conn.getInputStream()));
                    final StringBuffer stringBuffer = new StringBuffer();
                    String line;
                    while ((line = rd.readLine()) != null) {
                        stringBuffer.append(line);

                        Toast.makeText(MainActivity.this,line,Toast.LENGTH_LONG).show();
                    }
                    rd.close();


                } catch (Exception e) {
                    System.out.println("Error SMS "+e);

                }
            }
        });

        StrictMode.ThreadPolicy st = new StrictMode.ThreadPolicy.Builder().permitAll().build();
        StrictMode.setThreadPolicy(st);
    }
}

In the above java class code we have four parameter that should be passed to textlocal gateway service.

  1. SMS API KEY.
  2. MESSAGE ( Fetched from EditText box ).
  3. SENDER ( It should be ‘TXTLCL’).
  4. Numbers ( Fetched from EditText box ).

Numbers can be seperated with commas (,) Eg: 875877XXX,548848xxx,66652xxx4454. So that we can send bulk sms at a time.

Conclusion :

In this Article, we have developled an android application that is capable to send bulk sms with some message like promotional sms, bill sms or any kind of message to your customer using SMS gateway service by Textlocal.

 

Firebase Cloud Messaging ( FCM ) to Send Push Notification Android 2021

2

Welcome to Proto Coders Point. This tutorial will we learn how to send firebase push notifications using Firebase Cloud Messaging free Service (FCM) the easiest way for android 2021.

Final FCM  push notification project demo

firebase push notification project demo done
firebase push notification project demo done

Sending Push Notifications to Android with Firebase

The 2016 Google I/O announced major improvements to their amazing product – Firebase – a cloud platform with a lot of amazing features for mobile app developers.

One of them is Firebase Cloud Messaging (FCM) — a cross-platform messaging solution that lets users reliably deliver messages at no cost.

Yes, FCM is a free service from Google.

Comparing to the earlier Google Cloud Messaging (GCM), FCM is much more developer-friendly because you don’t even need to see any of the server code involved.

This is a tutorial about sending push notifications to Android through Firebase, based on the new release of Firebase this year (2019).

This tutorial shows how to set up the skeleton for sending and receiving push notifications via FCM with instructions on the server code.

Video tutorial on the implementation of FCM push notification firebase

Watch this video

Step by Step implementation of firebase push notification in android studio

Let’s Begin implementation FCM firebase push notification in android studio.

Create a new android studio project and name it as FCM push notification 

Step 1 : 

File > New Project > Empty Activity > FCM Push notification (Give Application name)> Package name > Finish

 

Step 2 :

Tools > Firebase 
android studio firebase tool
android studio firebase tool

Your will get a firebase assistant on the right side of android studio window

Firebase Cloud Messaging (FCM) is a cross-platform messaging solution that lets you reliably deliver messages at no cost.

Under Cloud messaging you will see text called  Setup cloud messaging  click on it  you need see setup instruction given by Firebase android studio assistant.

setup firebase cloud messaging
Setup Firebase cloud messaging

FCM Connect app to firebase server

Click on Connect to Firebase Button you see under firebase assistant

connect to firebase
connect to firebase

After Your app is been Successfully connected to the firebase service you will see a connected text in green color, which means your android application is connected to the firebase server.

firebase connected successfully
firebase connected successfully

Now you need to add FCM dependencies into your project Gradle file ( app level )

Don’t worry all those work will be done for you by firebase assistant you just need to click on add FCM to your app. this will open a window, just click accept changes and all set leave it you firebase android assistant it will do the rest of your work.

firebase FCM Dependencies
firebase FCM Dependencies

 

Firebase have added a messaging dependencies in you gradle file
Firebase have added a messaging dependencies in you gradle file

After Adding the FCM dependencies library the third step is to create a java class that handles Firebase messaging services.

If you wish to do any message handling beyond receiving notifications on apps in the background, create a new Service ( File > New > Service > Service ) that extends FirebaseMessagingService. This service is necessary to receive notifications in foregrounded apps, to receive data payload, to send upstream messages, and so on.

Create a new android services

File > New > service > service ( name it as " Push_Notification_Android"

and now add the following source code to it

Push_Notification_Android.java (service)

package protocoderspoint.com.fcmpushnotification;

import android.app.Service;
import android.content.Intent;
import android.os.IBinder;
import android.util.Log;

import com.google.firebase.messaging.FirebaseMessagingService;
import com.google.firebase.messaging.RemoteMessage;

import static android.content.ContentValues.TAG;

public class Push_Notification_Android extends FirebaseMessagingService {
    public Push_Notification_Android() {
    }

    @Override
    public void onMessageReceived(RemoteMessage remoteMessage) {
        super.onMessageReceived(remoteMessage);

        Log.d(TAG, "From: " + remoteMessage.getFrom());

        Log.d(TAG, "Message data payload: " + remoteMessage.getData());

    }

    @Override
    public void onNewToken(String s) {
        super.onNewToken(s);
    }
}

The most important concept here is that onMessageReceive is ONLY called when the app is in the foreground, if the app if is background, Google Services will take care of displaying the message

And Finally to get a firebase push notification you need to add INTERNET permission in your AndroidManifest.xml file

<uses-permission android:name="android.permission.INTERNET"/>

AndroidManifest.xml file 

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="protocoderspoint.com.fcmpushnotification">

    <uses-permission android:name="android.permission.INTERNET"/>



    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <service
            android:name=".Push_Notification_Android"
            android:enabled="true"
            android:exported="true"></service>

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <action android:name="android.intent.action.VIEW"/>
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

 

There you go, android application ready to get a Push notification from firebase server sent by you manually.

( Bonus )

How to add Default Notification icon with color for firebase push notification? 

Add the following lines of meta data taga,  inside AndroidManifest.xml in between <application> here </application>

<meta-data
    android:name="com.google.firebase.messaging.default_notification_icon"
    android:resource="@drawable/ic_launcher" />
      
<meta-data 
    android:name="com.google.firebase.messaging.default_notification_color"
    android:resource="@color/google_blue" />

How to send firebase push notifications to the android app using FCM?

Open Firebase console, Link.

firebase console project
firebase console project

Select your firebase project and open it, In my case, my firebase project name is “FCM push notification” as you can see in the above Image screenshot.

Now the Left side of the firebase console project you will see many services provided by Google Firebase Console.

Then go into Grow option drop-down list you will see Cloud messaging. open it you may see a window something like the below image.

firebase console project firebase push notification
firebase console project

Click on send your first message

Now firebase push notification is ready to be sent

  • Enter Notification Title
  • Enter Notification Text
  • Select target package name
  • Review and send
firebase push notification
send firebase push notification

Notification will be displayed on your Android Phone, and if you tap on that notification it will open the app

Related articles

flutter firebase integration – connect flutter app to firebase console

flutter push notification

send push notification to android using php firebase

flutter getx authentication – firebase auth

Basic Programs / Algorithm Every Programmer Should Remember

0
Basic Programs logic Every Programmer Should Remember-min
Basic Programs logic Every Programmer Should Remember-min

Introduction 

Basic Programs Generally speaking, in order to call your software developer or software engineer, you need to start learning what the basic software development needs and what the coding is.

Which means you need to start programming for sure first!

You can now go and learn about data structures and algorithms after you are able to understand and solve basic programming problems such as addition, subraction etc. using computer programming.

Many Fresher Programmer usually ask me : – 

Should I need to learn Basic Program/ Algorithms for Programming?

Let’s get some things straight. ‘Yes’  you should need to learn Basic Algorithms, Programming is all about applying logic and reason to solving programming problems.

An algorithm represents your solution to a programming problem or Application Development.

Basic Program/Algorithms Every Programmer Must Should Know to improve programming logics.

basic programs every programmer show know
basic programs every programmer show know

The algorithm is not the code of the computer. Algorithm is just the instructions that give you a clear idea to write computer code.

Examples Of An Basic Program / Algorithms In  C Programming.

  1. Program to add two numbers.
  2. A Program to find largest of three number.
  3. Program Logic to find all roots of a quadratic equation
  4. A program to find factorial of a number
  5. Program for Fibonacci numbers.

1. Program to add two numbers

Write a Algorithm to add 2 numbers entered by the Users.

Basic Algorithm to add 2 given number 

Step 1: Start
Step 2: Declare variables num1, num2 and sum. 
Step 3: Read values num1 and num2. 
Step 4: Add num1 and num2 and assign the result to sum.
        sum←num1+num2 
Step 5: Display sum 
Step 6: Stop

c Basic Program to add 2 numbers

#include<stdio.h>
 
int main()
{
   int a, b, c;
   
   printf("Enter two numbers to add\n");
   scanf("%d%d", &a, &b);
   
   c = a + b;
   
   printf("Sum of the numbers = %d\n", c);
   
   return 0;
}

Output

Enter two numbers to add

4

5

Sum of the numbers = 9

 

2. Program to find largest of three number.

Algorithm to find largest of three number

Step 1: Start
Step 2: Declare variables a,b and c.
Step 3: Read variables a,b and c.
Step 4: If a>b
           If a>c
              Display a is the largest number.
           Else
              Display c is the largest number.
        Else
           If b>c
              Display b is the largest number.
           Else
              Display c is the greatest number.  
Step 5: Stop
Program Explanation

1. Read  3 numbers and store it in the variables a, b and c respectively.
2. Check out step 4 We check if the a is greater than b.
3. If it is greater, then check a if it is greater than c.
4. If it is, then print the output as “a is the greatest among three”.
5. Otherwise print the ouput as “c is the greatest among three”.
6. If the a is not greater than b, then check if b is greater than c.
7. If it is, then print the output as “b is the greatest among three”.
8. Otherwise print the output as “c is the greatest among three”.

C program to find the biggest of three numbers

/*
 * C program to find the biggest of three numbers
 */
#include <stdio.h>
 
void main()
{
    int a, b, c;
 
    printf("Enter the values of a, b and c\n");
    scanf("%d %d %d", &a, &b, &c);
  
    if (a > b)
    {
        if (a > c)
        {
            printf(" a is the greatest among three \n");
        }
        else
        {
            printf("c is the greatest among three \n");
        }
    }
    else if (b > c)
        printf("b is the greatest among three \n");
    else
        printf("c is the greatest among three \n");
}

Output

Output:1
Enter the values of a, b and c
6 8 10
c is the greatest among three
 
Output:2
Enter the values of a, b and c
10 100 99
b is the greatest among three

 

3. Program Logic to find all roots of a quadratic equation

Write a C program to find all roots of a quadratic equation using if else. How to find all roots of a quadratic equation using if else in C programming. Logic to find roots of quadratic equation in C programming.

Algorithm to find root of quadratic equation

Step 1: Start
Step 2: Declare variables a, b, c, D, x1, x2, rp and ip;
Step 3: Calculate discriminant
         D←b2-4ac
Step 4: If D≥0
              r1←(-b+√D)/2a
              r2←(-b-√D)/2a 
              Display r1 and r2 as roots.
        Else     
              Calculate real part and imaginary part
              rp←b/2a
              ip←√(-D)/2a
              Display rp+j(ip) and rp-j(ip) as roots
Step 5: Stop

 

C Program to find root of quadratic equation.

/**
 * C program to find all roots of a quadratic equation
 */

#include <stdio.h>
#include <math.h> /* Used for sqrt() */

int main()
{
    float a, b, c;
    float root1, root2, imaginary;
    float discriminant;
    
    printf("Enter values of a, b, c of quadratic equation (aX^2 + bX + c): ");
    scanf("%f%f%f", &a, &b, &c);
    
    /* Find discriminant of the equation */
    discriminant = (b * b) - (4 * a * c);
    
   
    /* Find the nature of discriminant */
    if(discriminant > 0)
    {
        root1 = (-b + sqrt(discriminant)) / (2*a);
        root2 = (-b - sqrt(discriminant)) / (2*a);

        printf("Two distinct and real roots exists: %.2f and %.2f", root1, root2);
    }
    else if(discriminant == 0)
    {
        root1 = root2 = -b / (2 * a);

        printf("Two equal and real roots exists: %.2f and %.2f", root1, root2);
    }
    else if(discriminant < 0)
    {
        root1 = root2 = -b / (2 * a);
        imaginary = sqrt(-discriminant) / (2 * a);

        printf("Two distinct complex roots exists: %.2f + i%.2f and %.2f - i%.2f", 
                root1, imaginary, root2, imaginary);
    }

    return 0;
}

output

Enter values of a, b, c of quadratic equation (aX^2 + bX + c):
 8 -4 -2

Two distinct and real roots exists:

 0.81 and -0.31

4. Program to find factorial of a number

Factorial program in C programming language:  Factorial is represented using ‘!’, so five factorial will be written as (5!), n factorial as (n!). Also,

n! = n*(n-1)*(n-2)*(n-3)…3.2.1

i.e 5*4*3*2*1

zero factorial is defined as one i.e., 0! = 1.

Algorithm to solve factotial of a given number

Step 1: Start
Step 2: Declare variables n,factorial and i.
Step 3: Initialize variables
          factorial←1
          i←1
Step 4: Read value of n
Step 5: Repeat the steps until i=n
     5.1: factorial←factorial*i
     5.2: i←i+1
Step 6: Display factorial
Step 7: Stop

Program to solve factotial of a given number

#include <stdio.h>
 
int main()
{
  int i, n, fact = 1;
 
  printf("Enter a number to calculate its factorial\n");
  scanf("%d", &n);
 
  for (i = 1; i <= n; i++)
  {
    fact = fact * i;
  }
 
  printf("Factorial of %d = %d\n", n, fact);
 
  return 0;
}

Output

Enter a number to calculate its factorial
6
Factorial of 6 = 720

5 . Program for Fibonacci Series in C

In case of fibonacci series, For example 0, 1, 1, 2, 3, 5, 8, 13, 21 etc.

The first two numbers of fibonacci series are 0 and 1

next number is the sum of previous two numbers.

.Here 0+1 = 1 which is the third number, as we continue 1+1 = 2 which is forth number, and 1+2=3 and so on

Algorithm to display fibonacci series

Step 1: Start
Step 2: Declare variables n1,n2,n3,number and i.
Step 3: Initialize variables
         n1=0
         n2=1
          i←1
Step 4: Read value of number
Step 5: Repeat the steps until i<number
        5.1: n3=n1+n2
        5.2: Disply n3
        5.3: n1=n2
        5.4: n2=n3
Step 6: Stop

Basic C  Program  to display fibonacci series

#include<stdio.h>    
int main()    
{    
 int n1=0,n2=1,n3,i,number;    
 printf("Enter the number of elements:");    
 scanf("%d",&number);    
 printf("\n%d %d",n1,n2);//printing 0 and 1    
 for(i=2;i<number;++i)//loop starts from 2 because 0 and 1 are already printed    
 {    
  n3=n1+n2;    
  printf(" %d",n3);    
  n1=n2;    
  n2=n3;    
 }  
  return 0;  
 }

Output

Enter the number of elements:15
0 1 1 2 3 5 8 13 21 34 55 89 144 233 377

 

Referals website

https://www.javatpoint.com/c-programming-language-tutorial

https://www.programiz.com/article/algorithm-programming

https://www.programmingsimplified.com/c-program-find-factorial