Viral Android – Tutorials, Examples, UX/UI Design

You can easily make a phone call in android. To make a phone call in android, you just need to write little bit code. In this tutorial, you will learn phone call by entering number in code.

Related:
Get Current Time in Android Programmatically
How to Increase and Decrease the Integer Value When the Button is Clicked

Android Example: How to Make a Phone Call in Android

Add Permission Code in your AndroidManifest.xml File

The phone call permission code will like this:

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

AndroidManifest.xml File

XML Layout File
Add a button in your xml layout file, your phone_call.xml file will like this.
res/layout/phone_call.xml

Java Activity File
Add the following code in your java activity file to make phone call.
src/MainActivity.java

Strings Resource File
res/values/strings.xml

Now, run your application and click the Call To button which will look like the output given below.

Output:

In this tutorial, you will learn to load image from internet (url) in android imageview. Image won’t load just by adding URL. To load image from internet, you have to know little bit java code. Here is the easiest way to load image in android ImageView from URL.

Related:
How to Rotate an Image in Android
How to Make a Phone Call in Android
Android Material Design with Design Support Library

Android Example: How to Load Image from Internet (URL) in Android

This is the step by step guide to load image in android ImageView from URL/Internet.

Create a new Android Project

Application Name: Load Image From Internet
Company Domain: viralandroid.com
Package Name: com.viralandroid.loadimagefrominternet
Minimum SDK: Android 2.2 (API 8 Froyo)

XML Layout File
res/layout/image_from_url.xml

Java Activity File
src/MainActivity.java

You can add any image URL instead of above.

Add Internet Permission in AndroidManifest.xml File

To load image from internet/url you have to add internet permission in your AndroidManifest.xml file.

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

AndroidManifest.xml File

Strings.xml File
Default content of strings.xml file.
res/values/strings.xml

Now, run your application, your application looks like this.

Image From URL

If you want use this library, you only have to download MaterialDesign project, import it into your workspace and add the project as a library in your android project settings. This is a library with components of Android L to you use in android 2.2

If you prefer it, you can use the gradle dependency, you have to add these lines in your build.gradle file:

Library Details:

Library Name: Material Design Android Library
Owner: Ivan Navas (navasmdc)
Source Code: https://github.com/navasmdc/MaterialDesignLibrary
Min SDK: 8 (Android 2.2–2.2.3 Froyo)

Related:
Android Material Design GridView
Android Material Design Sliding Tabs Example
Android Swipe Down to Refresh Layout Example

Gradle Dependency

repositories {
    jcenter()
}

dependencies {
    compile 'com.github.navasmdc:MaterialDesign:[email protected]'
}



Some components have custom attributes, if you want use them, you must add this line in your xml file in the first component:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:materialdesign="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
</RelativeLayout>

If you are going to use a ScrollView, it is recommended that you use the CustomScrollView provided in this library to avoid problems with the custom components. To use this component:

<com.gc.materialdesign.views.ScrollView
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:materialdesign="http://schemas.android.com/apk/res-auto"
   android:id="@+id/scroll"
   android:layout_width="match_parent"
   android:layout_height="match_parent">
</com.gc.materialdesign.views.ScrollView>

Library Components

Buttons

Flat Button

<com.gc.materialdesign.views.ButtonFlat
                android:id="@+id/buttonflat"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#1E88E5"
                android:text="Button" />

Rectangle Button


<com.gc.materialdesign.views.ButtonRectangle
                android:id="@+id/button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#1E88E5"
                android:text="Button" />

Float Button


It is recommended to put this component in the right-bottom of the screen. To use this component write this code in your xml file. If you don`t want to start this component with animation set the animate attribute to false. Put your icon in the icon attribute to set the drawable icon for this component.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:materialdesign="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <!-- ... XML CODE -->
    <com.gc.materialdesign.views.ButtonFloat
                android:id="@+id/buttonFloat"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_alignParentBottom="true"
                android:layout_marginRight="24dp"
                android:background="#1E88E5"
                materialdesign:animate="true"
                materialdesign:iconDrawable="@drawable/ic_action_new" />
</RelativeLayout>


Float small button


<com.gc.materialdesign.views.ButtonFloatSmall
                android:id="@+id/buttonFloatSmall"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#1E88E5"
                materialdesign:iconDrawable="@drawable/ic_action_new" />

Switches

CheckBox

<com.gc.materialdesign.views.CheckBox
                android:id="@+id/checkBox"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#1E88E5"
                materialdesign:check="true" />

Switch

<com.gc.materialdesign.views.Switch
                android:id="@+id/switchView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#1E88E5"
                materialdesign:check="true" />

Progress Indicators

Progress bar circular indeterminate


<com.gc.materialdesign.views.ProgressBarCircularIndeterminate
                android:id="@+id/progressBarCircularIndeterminate"
                android:layout_width="32dp"
                android:layout_height="32dp"
                android:background="#1E88E5" />

Progress bar indeterminate


<com.gc.materialdesign.views.ProgressBarIndeterminate
                android:id="@+id/progressBarIndeterminate"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="#1E88E5" />

Progress bar indeterminate determinate


<com.gc.materialdesign.views.ProgressBarIndeterminateDeterminate
                android:id="@+id/progressBarIndeterminateDeterminate"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="#1E88E5" />

If you begin progrees, you only have to set progress it

progressBarIndeterminateDeterminate.setProgress(progress);

Progress bar determinate

<com.gc.materialdesign.views.ProgressBarDeterminate
                android:id="@+id/progressDeterminate"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="#1E88E5" />

You can custom max and min progress values with materialdesign:max="50" and materialdesign:min="25" attributes.

Slider

Slider

<com.gc.materialdesign.views.Slider
                android:id="@+id/slider"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="#1E88E5"
                materialdesign:max="50"
                materialdesign:min="0"
                 />

Slider with number indicator

<com.gc.materialdesign.views.Slider
                android:id="@+id/slider"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="#1E88E5"
                materialdesign:max="50"
                materialdesign:min="0"
                materialdesign:showNumberIndicator="true"/>

Widgets

SnackBar

SnackBar snackbar = new SnackBar(Activity activity, String text, String buttonText, View.OnClickListener onClickListener);
snackbar.show();

If you don't want to show the button, put null in buttonText attribute

Dialog

Dialog

Dialog dialog = new Dialog(Context context,String title, String message);
dialog.show();

You can set the accept and cancel button on the event listener or change it's text

// Set accept click listenner
dialog.setOnAcceptButtonClickListener(View.OnClickListener onAcceptButtonClickListener);

// Set cancel click listenner
dialog.setOnCancelButtonClickListener(View.OnClickListener onCancelButtonClickListener);

// Acces to accept button
ButtonFlat acceptButton = dialog.getButtonAccept();

// Acces to cancel button
ButtonFlat cancelButton = dialog.getButtonCancel();

Color selector

ColorSelector colorSelector = new ColorSelector(Context context,int intialColor, OnColorSelectedListener onColorSelectedListener);
colorSelector.show();

The android hardware and system information is different from device to device. You can find your android device info manually in About device section of settings. In this tutorial, you will learn to get android device system and hardware information programmatically. We will focus on some of the properties like serial number, model no, id, android SDK, brand, manufacture, version code, etc.

There are many other info you can get from a android device but here we will focus on some of the android properties. To get system info, we are going to add a button and a textview to display information of android device when button is clicked.

Related:
Embed and Play MP3 Songs/Music in Android Application Using WebView
Android Custom Horizontal Icons Menu
Material Ripple Effect/Animation in Android

There are different methods to retrieve the platform related information of the device programmatically. To obtain the hardware and software related information of an android device that runs your application, follow the following steps. Here we will only display information in TextView but you can also track to your server. You can get info like;

• CPU Manufacturer
• Model and serial number
• SD Card Manufacturer
• Camera Manufacturer and other related specs
• Bluetooth related information
• WiFi related information
• Display vendor and model

Android Example: Getting Android Hardware and System Information Programmatically

Create a new android project with project name AndroidSystemInfo packagecom.viralandroid.androidsysteminfo.

XML Layout File

Open your activity_main.xml file and add a Button and TextView with different id. TextView is used to display device info when we click the button. Following is the complete code XML layout file.

res/layout/activity_main.xml


Java Activity File

Open your MainActivity.java activity file and define button and textview that we have created above in xml layout file. To get and display system info, see the following code.

src/MainActivity.java


And colors.xml, styles.xml file will look like below;

res/values/colors.xml


res/values/styles.xml


You have done all things. Now, run your application by clicking run button and click Get Android System Info button; you will see all information below the button like the screenshot presented above.

JSON stand for JavaScript Object Notation. It is a minimal, readable, format for structuring data. JSON is an independent data transmit between a server and application and is the best alternative for XML. It represents data in a text format so that can be easily parsed. In this android JSON data parsing tutorial you will learn to parse the response in order to get the required information in android app.

Android provide different classes to manipulate JSON data, they are JSONArray, JSONStringer, JSONObject and JSONTokenizer. An JSON file have many components like Array([), Objects({), Key and Value.

Related:
Android Push Notification Tutorial Using Firebase
YouTube Android API Integration: Getting Started with YouTube Android API
Turn ON and OFF WiFi Connection Programmatically in Android

JSON Parsing Android Tutorial with Example

Let’s create new android project called Android JSON Data Parsing Example to parse JSON data from web server to android app.


Following is the simple JSON data that we parse in android app. This JSON gives list of contact information.


This JSON data can be found at: https://api.myjson.com/bins/31b8v

Adding Internet Permission

We are getting JSON data from server, so we need to add internet permission in our project AndroidManifest.xml file. Just open AndroidManifest.xml file and add android.permission.INTERNET permission. AndroidManifest.xml file will looks like below.

AndroidManifest.xml

XML Layout File

Open your activity_main.xml file and add ListView with an id to display JSON data in list view. Following is the content of activity_main.xml file.
res/activity_main.xml


Again create a new XML layout file list_item.xml and add three TextView vertically with id, textColor, textStyle, textSize, etc. Following is the complete content of list_item.xml file.
res/list_item.xml

Http Handler Class

Create a new java class HttpHandler.java and add the following java code.
src/HttpHandler.java

Modify MainActivity.java File

Open your MainActivity.java file and replace it with following code.
src/MainActivity.java


Now run your application, which looks like above screenshot. After running your app, you will see name, email address, and phone number in ListView. You can change these information according to your requirement. Remember to turn on the Internet connection on your device either WiFi or mobile data, because we have loading JSON data from internet.

ListView is one of the important and widely used android UI component/widget. To display multiple similar data on android we use listview. Linear ListView is also similar concept to listview. It is used instead of listview. You can customize linear listview according to your needs. Using linear listview you can also make horizontal and vertical list item by setting attributes in XML layout file.

In this tutorial, you will learn to implement linear listview in your android application and to set onClick listener. If you have already used list view in any android app/game, it is easy for you working with linear listview layout. Linear listview allows you to bind a linear layout with a ListAdapter.

Related:
Floating Action Button (FAB) with Android ListView
Android ListView with Image and Text
Simple Android ListView Example

Android Example: How to Add/Implement Linear ListView in Android

Let’s start to implement linear listview in android app by adding compile 'com.github.frankiesardo:linearlistview:[email protected]' dependencies in build.gradle file. Build.gradle file will look like below.

build.gradle

Open your app XML layout file and add com.linearlistview.LinearListView widget in your layout file inside scrollview. Following is the complete content of XML layout file.

res/layout/android_linear_listview_layout.xml

Again create a new XML layout file for list item and add text view with an id, which will look like below.

res/layout/linear_layout_list_item.xml

Now we are working with java code, here we will control on list item click and list adapter. Open java activity file and add following code.

src/AndroidLinearListViewExample.java


That’s all. Run your Android Linear ListView Example application which will look like above screenshot.