September 20, 2016

Android Intent - The man in-between



What is an Intent you may ask.

According Android Developers, an intent is an abstract description of an operation to be performed. It can be used with startActivity to launch an Activity, broadcastIntent to send it to any interested BroadcastReceiver components,  and startService(Intent) or bindService(Intent, ServiceConnection, int) to communicate with a background service.

It could also be referred to as a messaging object you can use to request an action from another app component.

Basically there are two types of intent. Explicit intent and implicit intent. Whereas explicit intent specifies the component to start by name (the fully-qualified class name). You'll typically use an explicit intent to start a component in your own app, because you know the class name of the activity or service you want to start. For example, start a new activity in response to a user action or start a service to download a file in the background. Implicit intent on the other hand do not name a specific component, but instead declare a general action to perform, which allows a component from another app to handle it. For example, if you want to show the user a location on a map, you can use an implicit intent to request that another capable app show a specified location on a map.


With that said, lets see how we can use intent in an android application.

Go to File in your IDE, click and choose New to create new application. (I assume you know how to create a new application so I will not proceed further on that). Give your application a name of your choice. For the benefit of this tutorial, am naming my application as ExplicitIntent and the launcher activity as  ActivityA and click finish.

Without wasting time, lets create another activity. This time I give it the name ActivityB to distinguish it from the first. ActivityB therefore happens to be a sub-activity of ActivityA. See snapshot below

STEP 1

STEP 2
With these two activities in place, lets go ahead and code.

First of all, lets set the XML files in order. In your activity_a.xml or whatever name you'd used to represent the first activity, here is the XML style or components on the file.

Activity A XML file

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="technology.airwaves.com.explicitintent.ActivityA">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:id="@+id/textView1"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView1"
        android:text="Launch Activity B"
        android:onClick="startActivityB"
        android:id="@+id/btn1"/>
</RelativeLayout>

In XML file above, we're using xml's onclick event handler to call the method startActivityB when the button is pressed.

Activity B XML file

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="technology.airwaves.com.explicitintent.ActivityB">
    <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="center"
    android:id="@+id/imageView1"
    android:src="@drawable/coffee_cup"
    />
</RelativeLayout>



Here comes the code for the first activity (ActivityA).
package technology.airwaves.com.explicitintent;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class ActivityA extends AppCompatActivity {
Button btn;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_a);

        btn = (Button)findViewById(R.id.btn1);


    }

    public void startActivityB(View v){
        Intent intent = new Intent(this,ActivityB.class);
        startActivity(intent);
    }
}


And the second activity (ActivityB)
package technology.airwaves.com.explicitintent;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class ActivityB extends AppCompatActivity {

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

    }
}

As simple and straight forward as that. When the button is clicked in activity A, the method startActivityB() is called. Inside this method, we have defined it to start an explicit intent and call ActivityB who happens to be our target or interest. Intent takes two parameters, the application context and the name of the class to be called with the .class extension.

If you have any question or doubt, leave a comment below and I will be glad to answer you. If you like this, you can comment as well and recommend it to your friends. Thank you.







Rounded Layout Android Tutorial with images and Code



Graphical User Interface is what makes all the difference when it comes to Android app development or iOS. You may have a wonderful application but if the UI is poor, users may not find it interesting or kin to use it.

In this tutorial, I will be taking you through on how to create or make your own rounded effect on layout of any view (LinearLayout, RelativeLayout, ImageView, Button, etc) in Android.

We'll first create a rounded layout on all sides.
 STEPS


  1. Right click on your drawable folder and choose Drawable resource file
  2. Give it a name. For the sake of this tutorial. I will give it the name all_rounded_layout.xml

In your newly launched file, change the selector tag to shape

to



Then add the following CODE between 
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
and
</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="#8bb32e"></solid>
    <stroke android:width="1dp"
        android:color="#dddddd"></stroke>
    <padding android:bottom="5dp"
        android:top="5dp"
        android:left="5dp"
        android:right="5dp"></padding>
    <corners android:radius="10dp"></corners>
</shape>
Lets proceed to our View (LinearLayout,RelativeLayout,ImageView, etc). The view that you want it to have rounded effect. Now we'll use all_rounded_layout as background in our intended view.
<LinearLayout android:layout_width="20dp"
        android:layout_height="20dp"
        android:background="@drawable/all_rounded_layout"
        android:layout_centerInParent="true">
         
         <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/ImageView1"
            android:padding="5dp"
            android:background="@drawable/event"
            android:src="@drawable/ic_talktojoegee"
            android:elevation="4dp"/>
         
    </LinearLayout>


NOTE:

The LinearLayout where we've used our all_rounded_layout as backround has a HEIGHT of 20dp and WIDTH of 20dp. Therefore, our corners tag has a radius of 10dp so that we can get a perfect rounded circle.

If you would like to have rounded effect on maybe extreme right or left or bottomLeft or bottomRight, use any of the attributes below in the corners tag.
 <corners
        android:bottomRightRadius="10dp"
        android:topRightRadius="10dp"
        android:bottomLeftRadius="10dp"
        android:topLeftRadius="10dp"></corners>





If you have any question or not clear, let a comment below. Thank you



December 29, 2015

Simple Read more; Read less - Javascript


This tutorial is intended to be as short as possible since almost everything needed to get things done is clearly explained with the code.
The idea is to display certain amount of text extend of rendering the entire text on the webpage. Once the text exceed a certain limit, part of it with will be hidden with a link - Read more that will prompt your visitors to click to read more of the article. That's just it.
Source code:
Imagine your HTML looks like this;
18 When I say unto the wicked, Thou shalt surely die; and thou givest him 
<span id="restOfArticle" style="display:none">blah blahnot warning, nor 
speakest to warn the wicked from his wicked way, to save his life; the same 
wicked man shall die in his iniquity; but his blood will I require at thine hand. 
19 Yet if thou warn the wicked, and he turn not from his wickedness, nor 
from his wicked way, he shall die in his iniquity; but thou hast delivered thy soul. 
20 Again, When a righteous man doth turn from his righteousness, and commit 
iniquity, and I lay a stumblingblock before him, he shall die:because thou hast 
not given him warning, he shall die in his sin, and his righteousness which 
he hath done shall not be remembered; but his blood will I require at thine hand. 
21 Nevertheless if thou warn the righteous man, that the righteous sin not, 
and he doth not sin, he shall surely live, because he is warned; also thou 
hast delivered thy soul.
(Ezekiel 3:18-21)</span><a onclick="showMoreOrLess(this,'restOfArticle');">Read more</a>

and your Javascript file looks like this;
<script type="text/javascript">
function showMoreOrLess(thisObj,bonusContent){
    var caption = thisObj.innerHTML;
    //alert(caption);
    if ( caption == "Read more" ) {
        document.getElementById(bonusContent).style.display = "inline";
        thisObj.innerHTML = "Read less";
    } else {
        document.getElementById(bonusContent).style.display = "none";
        thisObj.innerHTML = "Read more";
    }
}
 </script>

With these two in place, you have your Read more; Read less in place. Examine the HTML section carefully. You will notice that it is divided into two parts. The part that first shows the text that you would want your page to display then the second part hides the text that prompt your visitor to click on Read more in order to access the second portion of the text.

jQuery Image Slider Part #2


In our previous tutorial on this series, we laid the foundation for this application. This will be an addition to what we did in the previous tutorial so if you haven't gone through it, endeavor to go through it and understand what we were trying to do before you join us on this. It's okay to go on for as long as you don't have any issues.
Source code:
<html>
<head>
<title>jquery image Slider</title>
<style>
 .slider{
  width:800px;
  height:350px;
  overflow:hidden;
  margin:30px auto;
  background-image:url(images/gears.gif);
  background-repeat:no-repeat;
  background-position:center;
 }
 .shadow{
  background-image:url(images/shadow.png);
  background-repeat:no-repeat;
  background-position:top;
  width:806px;
  height:70px;
  margin:5px auto;
 }
 .slider img{
  width:800px;
  height:350px;
  display:none;
 }
</style>
 <script src="jquery.js"></script>
 <script src="jqueryui.js"></script>
</head>
<script type="text/javascript">
 function Slider(){
  $(".slider #1").show("fade",500);
  $(".slider #1").hide("slide",{direction: "left"},500);
 var sc = $(".slider img").size(); //slider count
 var count = 2; //next image
 
 setInterval(function(){
  $(".slider #"+count).show("slide",{direction:"right"},500);
  $(".slider #"+count).delay(4500).hide("slide",{direction:"right"},500);
  if(count == sc){
  count = 1;
  }else{
  count +=1;
  }
 },5500);
 }
</script>
<body onload="Slider();">
 <div class="slider">
  <img id="1" src="images/beach.jpg" border="0" alt="Slider 1">
  <img id="2" src="images/bus.jpg" border="0" alt="Slider 2">
  <img id="3" src="images/city.jpg" border="0" alt="Slider 3">
  <img id="4" src="images/groupPix.jpg" border="0" alt="Slider 4">
  <img id="5" src="images/pass.gif" border="0" alt="Slider 5">
 </div>
 <div class="shadow"></div>
 </body>
</html>

This part 2 focuses on the jQuery section that will get our project up and running. I advice you download the jQuery file and jQuery UI file to your PC as loading the external files online could cause a little problem if you have a slow connection.
In my case, I downloaded them to my PC. Both files reside in the same directory with my imageSlider_1.html file. There is no change to the CSS section. In the HTML section, the image src now holds the path to an existing image that can be loaded within the slider div. In addition to that, Javascript onload function is added in the HTML body tag. Permit me to run through the jQuery section.
<script type="text/javascript">
 function Slider(){
  $(".slider #1").show("fade",500);
  $(".slider #1").hide("slide",{direction: "left"},500);
 var sc = $(".slider img").size(); //slider count
 var count = 2; //next image
 
 setInterval(function(){
  $(".slider #"+count).show("slide",{direction:"right"},500);
  $(".slider #"+count).delay(4500).hide("slide",{direction:"right"},500);
  if(count == sc){
  count = 1; //go back and start from the beginning.
  }else{
  count +=1;  //load next image
  }
 },5500);
 }
</script>

We defined a function called Slider that is called in the HTML body tag when the page is loaded using the onload Javascript event handler. This function is defined to run through the entire page and pick on HTML element with a class name
slider and within that element, it has an id of 1. Period (.) denote class whereas (#) denote id. jQuery show function is used to load the image with a fade animation that stays for 500 milliseconds. Afterwards, that same image is permitted to slide left and be hidden for 500 milliseconds.
In order to get the total number of all the images within the slider DIV, we used jQuery size function to loop through the img elements and keep to record the sum in sc variable.
Since the first image was loaded, the next image should be loaded to avoid repetition. Count variable has been initialized with the value 2 pointing to the next image in the loop.
What we have done so far is to load the first image, hide it, get the sum of all the images in the slider class and initialize count. We need to do more than that. We have a total of five(5) images. We need to loop through them and display one at a time.
That's what the next line does. We call the setInterval function. It's an in-built function. This function takes two parameters. The first argument is an anonymous function. We then load the second image and display it within slider DIV using show function.This is done using slide animation loading from the right hand side with a delay of 500 milliseconds.
The image is then hidden from the eyes for 500 milliseconds. This process will go on and on. When the last image is loaded, we need to go back and load the first image to start from the beginning. That is achieved using the if-conditional statement. The last parameter for setInterval function the delay in milliseconds. Within the setInterval function, we have a total of 5500 milliseconds
delay. This is arrived at by adding 500 + 500 + 4500.
So far, when you hover over the image; probably you expect it to pause for a while. We'll look into that in the next tutorial.

December 26, 2015

jQuery Image Slider Part #1


The thought of developing your own image slider to meet up with your need may seem challenging and time consuming. I stumbled upon a tutorial conducted by HelpingDevelop that took the whole process from scratch to finish in simple and easy way that anybody can understand.
Sometimes the existing image slider out there may not meet up with your specifications as a web developer. The size may either be too large or too small, the layout design may not be what you want among others. In this step by step tutorial, you can actually follow along and come out with a fabulous image slider for yourself. This part #1 only covers the foundation that will be improved in subsequent series.
The entire code:
<html>
<head>
<title>jquery image Slider</title>
<style>
 .slider{
  width:800px;
  height:350px;
  overflow:hidden;
  margin:30px auto;
  background-image:url(img/loader.png);
  background-repeat:no-repeat;
  background-position:center;
 }
 .shadow{
  background-image:url(img/sliderbg.png);
  background-repeat:no-repeat;
  background-position:top;
  width:846px;
  height:133px;
  margin:-60px auto;
 }
 .slider img{
  width:800px;
  height:350px;
  display:none;
 }
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
</head>
<body>
 <div class="slider">
  <img src="images/slider1.png" border="0" alt="Slider 1">
  <img src="images/slider2.png" border="0" alt="Slider 2">
  <img src="images/slider3.png" border="0" alt="Slider 3">
  <img src="images/slider4.png" border="0" alt="Slider 4">
 </div>
 <div class="shadow"></div>
 </body>
</html>
Breaking it down...
.slider{
  width:800px;
  height:350px;
  overflow:hidden;
  margin:30px auto;
  background-image:url(img/loader.png);
  background-repeat:no-repeat;
  background-position:center;
 }
The CSS property above is assigned to the DIV with the slider class. This div is the frame that will hold the image slider. The width is set to 800px with height of 350px. The overflow property tells the browser to hide part of the image if it exceeds the width or the height. The margin is set 30px top and bottom whereas the left and right margin is set to auto. While we wait for the images to be loaded within that frame, an animated loader is used to inform the visitor images will be loaded pretty soon and will be positioned at the center. So all the images within the slider class will be loaded within this frame. That's all it is to this section. Up next...
.shadow{
  background-image:url(img/sliderbg.png);
  background-repeat:no-repeat;
  background-position:top;
  width:846px;
  height:133px;
  margin:-60px auto;
 }
This part could be optional if you so wish. It's the part beneath the slider. It is there to add more beauty to the design if you would asked me. And...
.slider img{
  width:800px;
  height:350px;
  display:none;
 }
This part enforces all the images to comply to width of 800px with a height of 350px. Display is set to none since we'll be using jQuery to load all the images. The HTML part of this is self-explanatory. Coming up next.... jQuery image slider part#2

Embed Javascript code in your PHP code


I can't tell where exactly you can apply this knowledge or what may call for it. Am compelled to write on this subject so here we are.
Javascript basically is executed by the client's (your visitor's) machine (i.e browser). PHP on the other hand is parsed by PHP server; then rendered onto the browser. With this basic introduction, I guess we are good to go.
The code snippet below shows a mathematical operation performed within the open and closing braces of our PHP tag.
<?php

echo "<script>
var num1,num2,ans;
num1 = 3;
num2 = 4;
ans = num1 + num2;
alert(ans);
</script>";

?>
This may not mean much to you right now but when you think about what you can do with it, you will know its worth. Take note of the double quotation mark immediately after the echo statement. The closing quotation mark for that comes after the greater than sign (>)in the closing tag for script. Whatsoever is between the open script and the closing script is what will be executed by the client's machine as our Javascript. In our case, an alert box will pop-up with the value 7.

December 23, 2015

Disable your visitor's keyboard using Javascript



Have you thought about the subject of this post? Am here to let you know that you can actually do that using Javascript just with a few lines of code. This thought came to me when I was working on an online payment project. The call for this came in when I considered providing just a few characters to the user; therefore, disabling other characters that could be used for malicious purpose. For me, I had to develop an on-web keyboard that provided the characters I would want him/her to enter.
Here is the code that can manifest that thought of yours.

<script>
(document.onkeydown = function (e) {
  e.preventDefault();  
}
</script>


The code above disables the entire keyboard. Your visitor will not be able to use it at all. Document refers to the webpage that this script is used on. It calls the Javascript event handler "onkeydown". We then use the object of that event handler to call the default behavior. The one below disables all the keys except the ENTER or CARRIAGE RETURN button.

<script>
document.onkeydown = function (e) {
  var key = e.charCode || e.keyCode;
  if (key == 13) { 
    // enter key do nothing
  } else {
    e.preventDefault();
  }      
}
</script>


We used the charCode or keyCode to permit the ENTER key on the webpage. The ASCII code for ENTER button is 13. So therefore, it is used in the if conditional statement to allow the key to be used. To help us exclude more keys instead of going through the stress of developing your own on-web keyboard, the image below contains all the ASCII code associated with each keyboard key. Find the code corresponding to the key you want to enable on the keyboard and use it in the if conditional statement like the one above. You can create an array that could hold all the keyCode or charCode and loop through them to get things done. This will save you multiple lines of code. Happy coding!