Deciphering the Digital Frontier: A Developer's Guide to OCR Technology.

Optical Character Recognition (OCR) technology has come a long way since its inception. From being a niche tool for digitizing printed text, it has evolved into a powerful and versatile solution with applications spanning industries like healthcare, finance, education, and more. In this blog, we will explore OCR from a developer's perspective, delving into its significance, challenges, and the technologies that drive it.

Understanding OCR

OCR, in essence, is the process of converting scanned or photographed text into machine-readable text. This enables computers to interpret, search, and manipulate text just as humans do. Developers play a critical role in harnessing the capabilities of OCR to develop applications and solutions that automate data entry, improve accessibility, and enhance data analysis.

The Significance of OCR

Data Extraction: OCR is a game-changer for extracting information from paper documents, invoices, receipts, and forms. Developers can create applications that automate data entry, saving time and reducing errors.

Accessibility: OCR technology makes printed or handwritten text accessible to people with visual impairments. Developers can build applications that read aloud or convert text into Braille, enhancing accessibility.

Text Analytics: OCR enables developers to perform advanced text analytics, sentiment analysis, and data mining on large volumes of scanned documents. This is invaluable in industries like finance, legal, and healthcare.

Challenges Faced by Developers

Developing OCR solutions isn't without its challenges. Here are some of the key hurdles developers face:

• Quality of Source Material: The quality of the source material, such as the clarity of the text, lighting conditions, and document orientation, can significantly affect OCR accuracy.
• Handwriting Recognition: Recognizing handwritten text is considerably more challenging than printed text due to variations in handwriting styles.
• Multilingual Support: Developers often need to design OCR systems that can handle multiple languages and scripts, each with its unique challenges.
• Scalability: Building scalable OCR solutions that can process large volumes of documents efficiently requires careful planning and optimization.

Technologies Driving OCR

Machine Learning: Modern OCR systems heavily rely on machine learning algorithms, particularly deep learning models like Convolutional Neural Networks (CNNs) and Recurrent Neural Networks (RNNs). These models learn to recognize patterns in text and improve accuracy over time.

Preprocessing Techniques: Image preprocessing plays a crucial role in OCR. Techniques like image binarization, noise reduction, and text skew correction help improve OCR results.

Language Models: Language models like BERT and GPT have also found applications in OCR, particularly for contextual understanding and improving accuracy in complex documents.

Cloud Services: Many developers leverage cloud-based OCR services provided by companies like Google, Microsoft, and Amazon. These services offer scalable, highly accurate OCR capabilities without the need for extensive infrastructure.

Best Practices for OCR Development

To develop effective OCR solutions, developers should consider the following best practices:

• Quality Data: Train OCR models with high-quality, diverse datasets to improve accuracy.
• Continuous Learning: Implement mechanisms for model retraining and fine-tuning to adapt to changing data and improve performance over time.
• Scalability: Design OCR systems that can handle varying workloads and scale dynamically as needed.
• Error Handling: Develop robust error-handling mechanisms to deal with ambiguous or challenging text recognition scenarios.
• User Interface: Ensure that the OCR solution provides a user-friendly interface for easy integration into applications and workflows.

Conclusion

From automating data entry to enhancing accessibility and enabling advanced text analytics, OCR technology is a powerful tool in the hands of developers. By understanding the significance, challenges, and technologies that drive OCR, developers can create innovative solutions that transform text from pixels into valuable, actionable data. The future of OCR holds even more promise, with ongoing advancements in artificial intelligence and machine learning set to further improve accuracy and expand its range of applications. 

Certainly, for more details on Android OCR (Optical Character Recognition), you can refer to the following blog post:

Android OCR (Optical Character Recognition)

This blog post delves into the world of Android OCR (Optical Character Recognition), offering insights into how developers can implement OCR technology on Android devices. It likely discusses various OCR libraries, tools, and techniques suitable for Android app development, making it a valuable resource for those interested in integrating text recognition capabilities into their Android applications.

A Comprehensive React Native Tutorial: Building an App with User Database, Web API Integration, Charts, and Payment Integration.

React Native has emerged as a powerful framework for building cross-platform mobile applications using JavaScript and React. In this tutorial, we will explore how to create a feature-rich app using React Native that includes user database functionality, web API integration, charts for data visualization, and payment integration. By the end of this tutorial, you'll have a solid understanding of these key aspects and be equipped to develop your own robust mobile apps.

Prerequisites:

Before diving into this tutorial, you should have a basic understanding of JavaScript, React, and React Native. Additionally, familiarity with RESTful APIs and database concepts will be helpful.

Refer the below link for complete sample code:-

Download Sample Code

Let's get started with the step-by-step tutorial:

Step 1: Setting up the React Native Project

To begin, ensure that you have Node.js and npm installed on your machine. Create a new React Native project using the following command:

npx react-native init MyApp

Step 2: User Database

Implementing a user database is essential for many applications. We'll use Firebase, a cloud-based platform, to store and manage user data. Sign up for a Firebase account and create a new project.

Configure Firebase in your React Native app by adding the necessary credentials.

Next, install the Firebase SDK by running the following command within your project directory:

npm install firebase

Step 3: Web API Integration

To interact with web APIs, we'll use the popular fetch function provided by React Native. Create a new file, api.js, and define functions to handle API requests. You can make use of fetch and other JavaScript techniques to fetch data, send POST requests, etc.

Step 4: Data Visualization with Charts

React Native offers several charting libraries, such as Victory Native and React Native Charts Wrapper, that can be used to create visually appealing charts. Install a charting library of your choice and explore its documentation to learn how to create different types of charts, such as line charts, bar charts, or pie charts. Use the fetched data from the API in Step 3 to populate the charts.

Step 5: Payment Integration

To enable payment functionality, we'll integrate a payment gateway into our app. Popular options include Stripe, PayPal, or Braintree. Select a payment gateway of your choice, create an account, and follow their documentation to set up payment integration within your React Native app. Implement features like accepting payments, handling callbacks, and updating user data accordingly.

Step 6: User Interface and Navigation

Design an intuitive and user-friendly interface for your app using React Native's built-in components or third-party libraries like React Navigation. Create navigation flows between screens and ensure seamless user experience.

Step 7: Testing and Deployment

Testing your app thoroughly is crucial before deploying it to production. Utilize testing frameworks like Jest and Enzyme to write unit tests for your components and integration tests for your API calls. Once you're satisfied with the app's functionality and stability, prepare it for deployment. For Android, generate a signed APK, and for iOS, create an archive and submit it to the App Store.

Conclusion:

Congratulations! You have successfully built a feature-rich React Native app with user database functionality, web API integration, charts for data visualization, and payment integration. This tutorial has provided a comprehensive overview of each aspect, empowering you to build powerful and versatile mobile applications. Keep exploring React Native's vast ecosystem to enhance your app further and leverage its full potential. Happy coding!

Dive into Firebase Tools: Empowering Technical Excellence in App Development.

In the realm of app development, Firebase has emerged as a go-to platform, providing a wide range of powerful tools that simplify the development process and enhance app functionality. In this blog post, we will take a technical deep dive into Firebase's tools and explore how they can be leveraged to build robust and efficient applications.

Refer the below link for complete sample code:-

Download Sample Code

Firebase Authentication:

Firebase Authentication allows developers to implement user authentication seamlessly. Under the hood, it handles the complexities of user management, password storage, and authentication flows. Developers can integrate Firebase Authentication into their apps using SDKs for various platforms, including Android, iOS, and the web. It supports email/password authentication, social authentication providers (such as Google, Facebook, and Twitter), phone number authentication, and custom authentication systems. Firebase Authentication also provides user identity and access management features, including user roles and permissions.

Firebase Realtime Database:

The Firebase Realtime Database is a NoSQL JSON database that enables real-time synchronization of data across connected clients. It offers offline capabilities, allowing users to access and modify data even when the device is offline. The Realtime Database employs a reactive programming model, triggering events whenever data changes. Developers can listen for these events and update the user interface accordingly. The database supports automatic data synchronization and conflict resolution, making it ideal for collaborative applications that require real-time updates, such as chat apps, collaborative editors, and live dashboards.

Cloud Firestore:

Cloud Firestore is a flexible, scalable, and highly available NoSQL document database. It provides seamless data synchronization, offline support, and powerful querying capabilities. Firestore organizes data in collections and documents, allowing developers to build hierarchical data structures. It supports atomic operations, enabling batch writes and complex transactions. Firestore offers robust security rules, allowing developers to define fine-grained access control. With Firestore's scalability and real-time capabilities, it is suitable for applications that require complex data querying, real-time collaboration, and offline data access.

Firebase Cloud Messaging:

Firebase Cloud Messaging (FCM) is a cross-platform messaging solution that enables developers to send notifications and messages to devices. FCM supports various message types, including notification messages and data messages. Notification messages display a notification on the device's system tray, while data messages allow developers to handle the message payload themselves. FCM provides high delivery rates, scalable message targeting, and support for topics and device groups. It also offers device registration and token management for efficient message routing.

Firebase Hosting:

Firebase Hosting is a fully-managed hosting service that provides developers with a secure and scalable platform for deploying web applications and static content. It integrates seamlessly with other Firebase services, allowing easy setup and configuration. Firebase Hosting leverages a global CDN to deliver content quickly to users worldwide. It supports custom domains, SSL/TLS encryption, and automatic HTTP/2 push. With Firebase Hosting, developers can easily deploy and update their web applications without worrying about infrastructure management.

Firebase Cloud Functions:

Firebase Cloud Functions is a serverless compute platform that allows developers to write and deploy server-side code in response to events triggered by Firebase services or HTTP requests. Developers can write functions in JavaScript or TypeScript and deploy them using Firebase CLI or through continuous integration (CI) pipelines. Cloud Functions can be used for a wide range of tasks, such as processing data, sending notifications, integrating with third-party APIs, and performing background tasks. It offers autoscaling, pay-per-use pricing, and integrates seamlessly with other Firebase services.

Firebase Performance Monitoring:

Firebase Performance Monitoring helps developers gain insights into their app's performance by collecting data on various performance metrics. It provides detailed reports on app startup time, screen rendering, network requests, and custom traces. Performance Monitoring offers integration with popular mobile development frameworks, including Android, iOS, and React Native. Developers can use Performance Monitoring to identify performance bottlenecks, optimize app performance, and deliver a smooth user experience.

Firebase Test Lab:

Firebase Test Lab is a cloud-based app-testing infrastructure that allows developers to test their Android and iOS apps on a wide range of real devices hosted in Google data centers. It offers automated testing capabilities, including compatibility testing, security testing, and performance testing. Developers can run tests on different device configurations, operating system versions, and network conditions. Firebase Test Lab helps ensure app quality, identify compatibility issues, and optimize app performance across various devices.

Conclusion:

Firebase's comprehensive suite of tools empowers developers to build feature-rich, scalable, and high-performance applications. By leveraging Firebase Authentication, Realtime Database, Cloud Firestore, Cloud Messaging, Hosting, Cloud Functions, Performance Monitoring, and Test Lab, developers can streamline the development process, enhance app functionality, and deliver exceptional user experiences. Whether you are building a small mobile app or a complex web application, Firebase offers the tools you need to succeed. 

How to Integrate ChatGPT In Android With TTS (Text-To-Speech).

AI (Artificial Intelligence) Technology has been progressing towards futuristic ideas on daily basis. OpenAI coming up with their R&D as ChatGPT is prominent development in this field. ChatGPT (Generative Pre-trained Transformer) is a chatbot launched by OpenAI in November 2022. It is built on top of OpenAI's GPT-3 family of large language models, and is fine-tuned with both supervised and reinforcement learning techniques.

Methods-

ChatGPT trained this model using Reinforcement Learning from Human Feedback (RLHF), using the same methods as InstructGPT, but with slight differences in the data collection setup. They trained an initial model using supervised fine-tuning: human AI trainers provided conversations in which they played both sides—the user and an AI assistant. Then provide the trainers access to model-written suggestions to help them compose their responses. They mixed this new dialogue dataset with the InstructGPT dataset, which are transformed into a dialogue format.

ChatGPT is fine-tuned from a model in the GPT-3.5 series, which finished training in early 2022. You can learn more about the 3.5 series here. ChatGPT and GPT 3.5 were trained on an Azure AI supercomputing infrastructure.

We as technophiles strongly believe in ‘Sharing Is Caring’. We have create a sample demo where we will integrate ChatGPT in Android to demonstrate how it works with TTS (Text-To-Speech).

Here, we have asked for food recipe via ChatGPT bot which is read by TTS bot. We can also create a recipe from a list of ingredients. There are unlimited use-cases and ideas that are possible to explore and make life easy and technological advance.

Refer the below link for complete sample code:-

Download Sample Code

Have a look on few code snippets,

//MainActivity.java

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81

package com.elitetechnority.chatgptdemo; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.os.StrictMode; import android.speech.tts.TextToSpeech; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.TextView; import com.theokanning.openai.OpenAiService; import com.theokanning.openai.completion.CompletionRequest; import com.theokanning.openai.completion.CompletionResult; import java.util.Locale; public class MainActivity extends AppCompatActivity { private TextToSpeech textToSpeech; @Override protected void onCreate(Bundle savedInstanceState) { StrictMode.ThreadPolicy policy = new StrictMode.ThreadPolicy.Builder().permitAll().build(); StrictMode.setThreadPolicy(policy); super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); OpenAiService service = new OpenAiService("Your Token"); TextView tv_bot=(TextView)findViewById(R.id.tv_bot); EditText et_bot=(EditText)findViewById(R.id.et_bot); et_bot.setText("Tell about ChatGPT"); Button btn_bot=(Button)findViewById(R.id.btn_bot); btn_bot.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { CompletionRequest completionRequest = CompletionRequest.builder() .prompt(et_bot.getText().toString()) .model("text-davinci-003") .topP(1.0) .temperature(0.3) .maxTokens(150) .frequencyPenalty(0.0) .presencePenalty(0.0) .build(); CompletionResult completionResult=service.createCompletion(completionRequest); System.out.println(completionResult); tv_bot.setText(completionResult.getChoices().get(0).getText()); String toSpeak = tv_bot.getText().toString(); textToSpeech.speak(toSpeak, TextToSpeech.QUEUE_FLUSH, null); } }); textToSpeech=new TextToSpeech(getApplicationContext(), new TextToSpeech.OnInitListener() { @Override public void onInit(int status) { if(status != TextToSpeech.ERROR) { textToSpeech.setLanguage(Locale.UK); } } }); } @Override protected void onPause() { if(textToSpeech !=null){ textToSpeech.stop(); textToSpeech.shutdown(); } super.onPause(); } @Override protected void onDestroy() { if(textToSpeech !=null){ textToSpeech.stop(); textToSpeech.shutdown(); } super.onDestroy(); } }

How To Build Real Time Chat Interface Using Firebase In Android.

The Firebase Realtime Database is a cloud-hosted database. Data is stored as JSON and synchronized in realtime to every connected client. When you build cross-platform apps with our iOS, Android, and JavaScript SDKs, all of your clients share one Realtime Database instance and automatically receive updates with the newest data.

We will apply the same concept for real time chat. Firstly, we will build chat interface with login and registration and than setup Firebase Realtime Database for messaging.

Refer the below link for complete sample code:-

Download Sample Code

Have a look on few code snippets,

//activity_users.xml

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.androidchatapp.Users" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="No users found!" android:id="@+id/noUsersText" android:visibility="gone"/> <ListView android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/usersList"/> </LinearLayout>

//activity_chat.xml

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ffffff" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:orientation="vertical" tools:context="com.androidchatapp.Chat"> <ScrollView android:layout_width="match_parent" android:layout_weight="20" android:layout_height="wrap_content" android:id="@+id/scrollView"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:id="@+id/layout1"> </LinearLayout> </ScrollView> <include layout="@layout/message_area" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="bottom" android:layout_marginTop="5dp"/> </LinearLayout>

//message_area.xml

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/colorPrimaryDark" android:gravity="bottom" android:orientation="horizontal"> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:textColorHint="#CFD8DC" android:textColor="#CFD8DC" android:hint="Write a message..." android:id="@+id/messageArea" android:maxHeight="80dp" /> <ImageView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="4" android:padding="4dp" android:src="@android:drawable/ic_menu_send" android:id="@+id/sendButton"/> </LinearLayout>

//Users.java

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104

package com.elitetechnologies.realtimechat; import android.app.ProgressDialog; import android.content.Intent; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.AdapterView; import android.widget.ArrayAdapter; import android.widget.ListView; import android.widget.TextView; import com.android.volley.Request; import com.android.volley.RequestQueue; import com.android.volley.Response; import com.android.volley.VolleyError; import com.android.volley.toolbox.StringRequest; import com.android.volley.toolbox.Volley; import org.json.JSONException; import org.json.JSONObject; import java.util.ArrayList; import java.util.Iterator; public class Users extends AppCompatActivity { ListView usersList; TextView noUsersText; ArrayList<String> al = new ArrayList<>(); int totalUsers = 0; ProgressDialog pd; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_users); usersList = (ListView)findViewById(R.id.usersList); noUsersText = (TextView)findViewById(R.id.noUsersText); pd = new ProgressDialog(Users.this); pd.setMessage("Loading..."); pd.show(); String url = "https://real-time-chat-eb94c.firebaseio.com/users.json"; StringRequest request = new StringRequest(Request.Method.GET, url, new Response.Listener<String>(){ @Override public void onResponse(String s) { doOnSuccess(s); } },new Response.ErrorListener(){ @Override public void onErrorResponse(VolleyError volleyError) { System.out.println("" + volleyError); } }); RequestQueue rQueue = Volley.newRequestQueue(Users.this); rQueue.add(request); usersList.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { UserDetails.chatWith = al.get(position); startActivity(new Intent(Users.this, Chat.class)); } }); } public void doOnSuccess(String s){ try { JSONObject obj = new JSONObject(s); Iterator i = obj.keys(); String key = ""; while(i.hasNext()){ key = i.next().toString(); if(!key.equals(UserDetails.username)) { al.add(key); } totalUsers++; } } catch (JSONException e) { e.printStackTrace(); } if(totalUsers <=1){ noUsersText.setVisibility(View.VISIBLE); usersList.setVisibility(View.GONE); } else{ noUsersText.setVisibility(View.GONE); usersList.setVisibility(View.VISIBLE); usersList.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, al)); } pd.dismiss(); } }

//Chat.java

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111

package com.elitetechnologies.realtimechat; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.view.ViewGroup; import android.widget.EditText; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.ScrollView; import android.widget.TextView; import com.firebase.client.ChildEventListener; import com.firebase.client.DataSnapshot; import com.firebase.client.Firebase; import com.firebase.client.FirebaseError; import java.util.HashMap; import java.util.Map; public class Chat extends AppCompatActivity { LinearLayout layout; ImageView sendButton; EditText messageArea; ScrollView scrollView; Firebase reference1, reference2; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_chat); layout = (LinearLayout)findViewById(R.id.layout1); sendButton = (ImageView)findViewById(R.id.sendButton); messageArea = (EditText)findViewById(R.id.messageArea); scrollView = (ScrollView)findViewById(R.id.scrollView); Firebase.setAndroidContext(this); reference1 = new Firebase("https://real-time-chat-eb94c.firebaseio.com/message/" + UserDetails.username + "_" + UserDetails.chatWith); reference2 = new Firebase("https://real-time-chat-eb94c.firebaseio.com/message/" + UserDetails.chatWith + "_" + UserDetails.username); sendButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { String messageText = messageArea.getText().toString(); if(!messageText.equals("")){ Map<String, String> map = new HashMap<String, String>(); map.put("message", messageText); map.put("user", UserDetails.username); reference1.push().setValue(map); reference2.push().setValue(map); } } }); reference1.addChildEventListener(new ChildEventListener() { @Override public void onChildAdded(DataSnapshot dataSnapshot, String s) { Map map = dataSnapshot.getValue(Map.class); String message = map.get("message").toString(); String userName = map.get("user").toString(); if(userName.equals(UserDetails.username)){ addMessageBox("You:-\n" + message, 1); } else{ addMessageBox(UserDetails.chatWith + ":-\n" + message, 2); } } @Override public void onChildChanged(DataSnapshot dataSnapshot, String s) { } @Override public void onChildRemoved(DataSnapshot dataSnapshot) { } @Override public void onChildMoved(DataSnapshot dataSnapshot, String s) { } @Override public void onCancelled(FirebaseError firebaseError) { } }); } public void addMessageBox(String message, int type){ TextView textView = new TextView(Chat.this); textView.setText(message); LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT); lp.setMargins(0, 0, 0, 10); textView.setLayoutParams(lp); if(type == 1) { textView.setBackgroundResource(R.drawable.rounded_corner1); } else{ textView.setBackgroundResource(R.drawable.rounded_corner2); } layout.addView(textView); scrollView.fullScroll(View.FOCUS_DOWN); } }

Display Status Using Timeline View For Android.

A timeline is a display of a list of events in chronological order. Timelines can use any suitable scale representing time, suiting the subject and data; many use a linear scale, in which a unit of distance is equal to a set amount of time.

In this tutorial, we will see how to implement timeline view in Android. Below is the mock-up how we are expected to build,

Refer the below link for complete sample code:-

Download Sample Code

Have a look on few code snippets,

//ctimeline_row.xml

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <RelativeLayout android:layout_width="72dp" android:layout_height="match_parent"> <View android:id="@+id/crowUpperLine" android:layout_width="25dp" android:layout_height="match_parent" android:layout_above="@+id/crowImg" android:layout_centerInParent="true" android:layout_centerVertical="true" android:background="@android:color/darker_gray" /> <View android:id="@+id/crowLowerLine" android:layout_width="25dp" android:layout_height="match_parent" android:layout_below="@+id/crowImg" android:layout_centerInParent="true" android:layout_centerVertical="true" android:background="@android:color/darker_gray" /> <View android:id="@+id/crowBackground" android:layout_width="25dp" android:layout_height="25dp" android:layout_centerInParent="true" android:layout_centerVertical="true" /> <ImageView android:id="@+id/crowImg" android:layout_width="25dp" android:layout_height="25dp" android:layout_centerInParent="true" android:layout_centerVertical="true" android:layout_marginTop="-12.5dp" android:layout_marginBottom="-12.5dp" /> </RelativeLayout> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingLeft="16dp" android:paddingBottom="10dp" android:paddingRight="16dp"> <TextView android:id="@+id/crowDate" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Date" android:paddingTop="10dp" android:textAppearance="?android:attr/textAppearanceSmall" /> <TextView android:id="@+id/crowTitle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/crowDate" android:layout_centerVertical="true" android:text="Title" android:textAppearance="?android:attr/textAppearanceListItem" android:textStyle="bold" /> <TextView android:id="@+id/crowDesc" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/crowTitle" android:layout_centerVertical="true" android:text="Description" android:textAppearance="?android:attr/textAppearanceSearchResultSubtitle" /> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="#d7f2eb" /> </RelativeLayout> </LinearLayout>

//activity_main.xml

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<?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"> <ListView android:id="@+id/timeline_listView" android:layout_width="match_parent" android:layout_height="match_parent" android:divider="@null" android:dividerHeight="0dp" /> </LinearLayout>

//TimelineRow.java

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186

package com.elitetechnologies.timelineview.TimelineView; import android.graphics.Bitmap; import java.util.Date; public class TimelineRow { private int id; private Date date = null; private String title = null; private String description = null; private Bitmap image = null; private int bellowLineColor = 0; private int bellowLineSize = 6; private int imageSize = 50; private int backgroundColor = 0; private int backgroundSize = 50; private int dateColor = 0; private int titleColor = 0; private int descriptionColor = 0; public TimelineRow(int id) { this.id = id; } public TimelineRow(int id, Date date) { this.id = id; this.date = date; } public TimelineRow(int id, Date date, String title, String description) { this.id = id; this.date = date; this.title = title; this.description = description; } public TimelineRow(int id, Date date, String title, String description, Bitmap image, int bellowLineColor, int bellowLineSize, int imageSize) { this.id = id; this.date = date; this.title = title; this.description = description; this.image = image; this.bellowLineColor = bellowLineColor; this.bellowLineSize = bellowLineSize; this.imageSize = imageSize; } public TimelineRow(int id, Date date, String title, String description, Bitmap image, int bellowLineColor, int bellowLineSize, int imageSize, int backgroundColor, int backgroundSize) { this.id = id; this.date = date; this.title = title; this.description = description; this.image = image; this.bellowLineColor = bellowLineColor; this.bellowLineSize = bellowLineSize; this.imageSize = imageSize; this.backgroundColor = backgroundColor; this.backgroundSize = backgroundSize; } public TimelineRow(int id, Date date, String title, String description, Bitmap image, int bellowLineColor, int bellowLineSize, int imageSize, int backgroundColor, int backgroundSize, int dateColor, int titleColor, int descriptionColor) { this.id = id; this.date = date; this.title = title; this.description = description; this.image = image; this.bellowLineColor = bellowLineColor; this.bellowLineSize = bellowLineSize; this.imageSize = imageSize; this.backgroundColor = backgroundColor; this.backgroundSize = backgroundSize; this.dateColor = dateColor; this.titleColor = titleColor; this.descriptionColor = descriptionColor; } public int getBackgroundSize() { return backgroundSize; } public void setBackgroundSize(int backgroundSize) { this.backgroundSize = backgroundSize; } public int getBackgroundColor() { return backgroundColor; } public void setBackgroundColor(int backgroundColor) { this.backgroundColor = backgroundColor; } public String getDescription() { return description; } public void setDescription(String description) { this.description = description; } public int getImageSize() { return imageSize; } public void setImageSize(int imageSize) { this.imageSize = imageSize; } public int getBellowLineSize() { return bellowLineSize; } public int getId() { return id; } public void setId(int id) { this.id = id; } public void setBellowLineSize(int bellowLineSize) { this.bellowLineSize = bellowLineSize; } public int getBellowLineColor() { return bellowLineColor; } public void setBellowLineColor(int bellowLineColor) { this.bellowLineColor = bellowLineColor; } public Bitmap getImage() { return image; } public void setImage(Bitmap image) { this.image = image; } public Date getDate() { return date; } public void setDate(Date date) { this.date = date; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public int getDateColor() { return dateColor; } public void setDateColor(int dateColor) { this.dateColor = dateColor; } public int getTitleColor() { return titleColor; } public void setTitleColor(int titleColor) { this.titleColor = titleColor; } public int getDescriptionColor() { return descriptionColor; } public void setDescriptionColor(int descriptionColor) { this.descriptionColor = descriptionColor; } }

//TimelineViewAdapter.java

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220

package com.elitetechnologies.timelineview.TimelineView; import android.app.Activity; import android.content.Context; import android.content.res.Resources; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.PorterDuff; import android.graphics.PorterDuffColorFilter; import android.graphics.drawable.GradientDrawable; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ArrayAdapter; import android.widget.ImageView; import android.widget.TextView; import com.elitetechnologies.timelineview.R; import java.util.ArrayList; import java.util.Collections; import java.util.Date; import java.util.List; public class TimelineViewAdapter extends ArrayAdapter<TimelineRow> { private Context context; private Resources res; private List<TimelineRow> RowDataList; private String AND; public TimelineViewAdapter(Context context, int resource, ArrayList<TimelineRow> objects, boolean orderTheList) { super(context, resource, objects); this.context = context; res = context.getResources(); AND ="and"; if (orderTheList) this.RowDataList = rearrangeByDate(objects); else this.RowDataList = objects; } @Override public View getView(int position, View convertView, ViewGroup parent) { TimelineRow row = RowDataList.get(position); LayoutInflater inflater = (LayoutInflater) context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE); View view = inflater.inflate(R.layout.ctimeline_row, null); TextView rowDate = (TextView) view.findViewById(R.id.crowDate); TextView rowTitle = (TextView) view.findViewById(R.id.crowTitle); TextView rowDescription = (TextView) view.findViewById(R.id.crowDesc); ImageView rowImage = (ImageView) view.findViewById(R.id.crowImg); View rowUpperLine = (View) view.findViewById(R.id.crowUpperLine); View rowLowerLine = (View) view.findViewById(R.id.crowLowerLine); final float scale = getContext().getResources().getDisplayMetrics().density; if (position == 0 && position == RowDataList.size() - 1) { rowUpperLine.setVisibility(View.INVISIBLE); rowLowerLine.setVisibility(View.INVISIBLE); } else if (position == 0) { int pixels = (int) (row.getBellowLineSize() * scale + 0.5f); rowUpperLine.setVisibility(View.INVISIBLE); rowLowerLine.setBackgroundColor(row.getBellowLineColor()); rowLowerLine.getLayoutParams().width = pixels; } else if (position == RowDataList.size() - 1) { int pixels = (int) (RowDataList.get(position - 1).getBellowLineSize() * scale + 0.5f); rowLowerLine.setVisibility(View.INVISIBLE); rowUpperLine.setBackgroundColor(RowDataList.get(position - 1).getBellowLineColor()); rowUpperLine.getLayoutParams().width = pixels; } else { int pixels = (int) (row.getBellowLineSize() * scale + 0.5f); int pixels2 = (int) (RowDataList.get(position - 1).getBellowLineSize() * scale + 0.5f); rowLowerLine.setBackgroundColor(row.getBellowLineColor()); rowUpperLine.setBackgroundColor(RowDataList.get(position - 1).getBellowLineColor()); rowLowerLine.getLayoutParams().width = pixels; rowUpperLine.getLayoutParams().width = pixels2; } if (position == 0 || position == RowDataList.size() - 1) { Bitmap tintBitmap = tintImage(BitmapFactory.decodeResource(context.getResources(), R.drawable.ic_srcdstpoint), Color.parseColor("#c44227")); row.setImage(tintBitmap); }else{ Bitmap tintBitmap = tintImage(BitmapFactory.decodeResource(context.getResources(), R.drawable.ic_nodes), Color.parseColor("#f29d9d")); row.setImage(tintBitmap); } if(position<=2) { row.setBellowLineSize(12); row.setBellowLineColor(Color.parseColor("#9df2b1")); } rowDate.setText(getPastTime(row.getDate())); if (row.getDateColor() != 0) rowDate.setTextColor(row.getDateColor()); if (row.getTitle() == null) rowTitle.setVisibility(View.GONE); else { rowTitle.setText(row.getTitle()); if (row.getTitleColor() != 0) rowTitle.setTextColor(row.getTitleColor()); } if (row.getDescription() == null) rowDescription.setVisibility(View.GONE); else { rowDescription.setText(row.getDescription()); if (row.getDescriptionColor() != 0) rowDescription.setTextColor(row.getDescriptionColor()); } if (row.getImage() != null) { rowImage.setImageBitmap(row.getImage()); } int pixels = (int) (row.getImageSize() * scale + 0.5f); rowImage.getLayoutParams().width = pixels; rowImage.getLayoutParams().height = pixels; View backgroundView = view.findViewById(R.id.crowBackground); if (row.getBackgroundColor() == 0) backgroundView.setBackground(null); else { if (row.getBackgroundSize() == -1) { backgroundView.getLayoutParams().width = pixels; backgroundView.getLayoutParams().height = pixels; } else { int BackgroundPixels = (int) (row.getBackgroundSize() * scale + 0.5f); backgroundView.getLayoutParams().width = BackgroundPixels; backgroundView.getLayoutParams().height = BackgroundPixels; } GradientDrawable background = (GradientDrawable) backgroundView.getBackground(); if (background != null) { background.setColor(row.getBackgroundColor()); } } ViewGroup.MarginLayoutParams marginParams = (ViewGroup.MarginLayoutParams) rowImage.getLayoutParams(); marginParams.setMargins(0, (int) (pixels / 2) * -1, 0, (pixels / 2) * -1); return view; } private String getPastTime(Date date) { if (date == null) return ""; StringBuilder dateText = new StringBuilder(); Date today = new Date(); long diff = (today.getTime() - date.getTime()) / 1000; long years = diff / (60 * 60 * 24 * 30 * 12); long months = (diff / (60 * 60 * 24 * 30)) % 12; long days = (diff / (60 * 60 * 24)) % 30; long hours = (diff / (60 * 60)) % 24; long minutes = (diff / 60) % 60; long seconds = diff % 60; if (years > 0) { appendPastTime(dateText, years, R.plurals.years, months, R.plurals.months); } else if (months > 0) { appendPastTime(dateText, months, R.plurals.months, days, R.plurals.days); } else if (days > 0) { appendPastTime(dateText, days, R.plurals.days, hours, R.plurals.hours); } else if (hours > 0) { appendPastTime(dateText, hours, R.plurals.hours, minutes, R.plurals.minutes); } else if (minutes > 0) { appendPastTime(dateText, minutes, R.plurals.minutes, seconds, R.plurals.seconds); } else if (seconds >= 0) { dateText.append(res.getQuantityString(R.plurals.seconds, (int) seconds, (int) seconds)); } return dateText.toString(); } private void appendPastTime(StringBuilder s, long timespan, int nameId, long timespanNext, int nameNextId) { s.append(res.getQuantityString(nameId, (int) timespan, timespan)); if (timespanNext > 0) { s.append(' ').append(AND).append(' '); s.append(res.getQuantityString(nameNextId, (int) timespanNext, timespanNext)); } } private ArrayList<TimelineRow> rearrangeByDate(ArrayList<TimelineRow> objects) { if (objects.get(0) == null) return objects; int size = objects.size(); for (int i = 0; i < size - 1; i++) { for (int j = i + 1; j < size; j++) { if(objects.get(i).getDate()!= null && objects.get(j).getDate() != null) if (objects.get(i).getDate().compareTo(objects.get(j).getDate()) <= 0) Collections.swap(objects, i, j); } } return objects; } private static Bitmap tintImage(Bitmap bitmap, int color) { Paint paint = new Paint(); paint.setColorFilter(new PorterDuffColorFilter(color, PorterDuff.Mode.SRC_IN)); Bitmap bitmapResult = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(bitmapResult); canvas.drawBitmap(bitmap, 0, 0, paint); return bitmapResult; } }

//MainActivity.java

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93

package com.elitetechnologies.timelineview; import android.annotation.SuppressLint; import android.graphics.BitmapFactory; import android.graphics.Color; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.AbsListView; import android.widget.AdapterView; import android.widget.ArrayAdapter; import android.widget.LinearLayout; import android.widget.ListView; import android.widget.Toast; import com.elitetechnologies.timelineview.TimelineView.TimelineRow; import com.elitetechnologies.timelineview.TimelineView.TimelineViewAdapter; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Date; import java.util.Random; import java.util.concurrent.ThreadLocalRandom; public class MainActivity extends AppCompatActivity { //Create Timeline Rows List private ArrayList<TimelineRow> timelineRowsList = new ArrayList<>(); ArrayAdapter<TimelineRow> myAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main);// Create Timeline rows List // Add Random Rows to the List for (int i = 0; i < 15; i++) { //add the new row to the list timelineRowsList.add(createRandomTimelineRow(i)); } //Create the Timeline Adapter myAdapter = new TimelineViewAdapter(this, 0, timelineRowsList, //if true, list will be sorted by date true); //Get the ListView and Bind it with the Timeline Adapter ListView timeline_listView = (ListView) findViewById(R.id.timeline_listView); timeline_listView.setAdapter(myAdapter); myAdapter.notifyDataSetChanged(); //if you wish to handle the clicks on the rows AdapterView.OnItemClickListener adapterListener = new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { TimelineRow row = timelineRowsList.get(position); Toast.makeText(MainActivity.this, row.getTitle()+"at position"+position, Toast.LENGTH_SHORT).show(); } }; timeline_listView.setOnItemClickListener(adapterListener); } //Method to create new Timeline Row private TimelineRow createRandomTimelineRow(int id) { // Create new timeline row (pass your Id) TimelineRow myRow = new TimelineRow(id); //to set the row Date (optional) myRow.setDate(getRandomDate()); //to set the row Title (optional) myRow.setTitle("Title " + id); myRow.setTitleColor(Color.parseColor("#3295a8")); //to set the row Description (optional) myRow.setDescription("Lorem ipsum dolor sit amet, consectetur adipiscing elit."); myRow.setDescriptionColor(Color.parseColor("#32a8a4")); //to set row Below Line Color (optional) myRow.setBellowLineColor(Color.LTGRAY); return myRow; } @SuppressLint("NewApi") public Date getRandomDate() { SimpleDateFormat sdf = new SimpleDateFormat("dd/MM/yyyy"); Date startDate = null; Date endDate = new Date(); try { startDate = sdf.parse("14/02/2020"); long random = ThreadLocalRandom.current().nextLong(startDate.getTime(), endDate.getTime()); endDate = new Date(random); } catch (ParseException e) { e.printStackTrace(); } return endDate; } }