Made In Android

31 March 2015

Code for MediaController with VideoView in Android

What we will make ?
We will play a video with MediaController .

What we will need ?

VideoView in activity_main.xml

Adding Code with MediaController in MainActivity.java

Step 1 : Create a New Android Application . Go to File->New->Android Application Project.

Step 2 : Give a name to your App (MediaControllerDemo) and a package name (mia) as shown below. Click Next continuously then click Finish.

Step 3 : Make a new folder named raw in res. Right-click on res->New->Folder. Name it raw. Now copy the video file (video.mp4) you want to use for VideoView in raw folder.

Step 4 : Add VideoView in a LinearLayout in activty_main.xml.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/LinearLayout01"
android:layout_height="fill_parent"
android:paddingLeft="2dp"
android:paddingRight="2dp"
android:paddingTop="2dp"
android:paddingBottom="2dp"
android:layout_width="fill_parent"
android:orientation="vertical">
<VideoView
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:id="@+id/VideoView">
</VideoView>
</LinearLayout>

Step 5 : Open MainActivity.java from src->com.mia.mediacontrollerdemo in Project Explorer. Copy the code below in it.

MainActivity.java

package com.mia.mediacontrollerdemo;

import android.app.Activity;
import android.net.Uri;
import android.os.Bundle;
import android.widget.MediaController;
import android.widget.VideoView;

public class MainActivity extends Activity {

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

        VideoView videoView = (VideoView) findViewById(R.id.VideoView);
        MediaController mediaController = new MediaController(this);
        mediaController.setAnchorView(videoView);
        String uriPath = "android.resource://com.mia.mediacontrollerdemo/"+R.raw.video;
        Uri video = Uri.parse(uriPath);
        videoView.setMediaController(mediaController);
        videoView.setVideoURI(video);
        videoView.start();
    }
}

Step 6 : Run the Project.

Explanation Of the Code :

Explanation from activity_main.xml :

We add a VideoView with id VideoView in a LinearLayout.

<VideoView
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:id="@+id/VideoView">
</VideoView>

Explanation from MainActivity.java :

We make a variable videoView of type VideoView and connect it to VideoView element from layout activity_main.xml.

VideoView videoView = (VideoView) findViewById(R.id.VideoView);

We make a MediaController and connect it to our VideoView.

MediaController mediaController = new MediaController(this);
mediaController.setAnchorView(videoView);

Store path of video in String variable uriPath and convert it into Uri type using parse().

String uriPath = "android.resource://com.mia.mediacontrollerdemo/"+R.raw.video;
Uri video = Uri.parse(uriPath);

Set the MediaController for the video using setMediaController() and set the video path and then start it using start().

videoView.setMediaController(mediaController);
videoView.setVideoURI(video);
videoView.start();

ALSO

Stay Tuned with Made In Android

Published By:
Unknown
on 31.3.15

24 March 2015

Simple VideoView tutorial in Android

What we will do ?
-> We will make an app which has a VideoView and Buttons to play and stop the video.

What we will need ?

VideoView and Buttons in activity_main.xml

Code Additions in MainActivity.java

Step 1 : Create a New Application Project. Go to File->New->Android Application Project.

Step 2 : Give a name (VideoDemo) to your Application and a suitable package name (mia). Then click on Next continuously, then click Finish.

Step 3 : Make a new folder named raw in res. Right-click on res->New->Folder. Name it raw. Now copy the video file (video.mp4) you want to use for VideoView in raw folder.

Step 4 : Drag VideoView and 2 Buttons in activity_main.xml OR else copy the code below in it.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <VideoView
        android:id="@+id/videoview"
        android:layout_width="fill_parent"
        android:layout_height="318dp" />
    <LinearLayout
        android:layout_width="match_parent"
        android:gravity="center"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
        <Button
            android:id="@+id/playvideoplayer"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:text="PLAY" />
        <Button
            android:id="@+id/stopvideoplayer"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:text="STOP" />
    </LinearLayout>
</LinearLayout>

Step 5 : Open MainActivity.java from src->com.mia.videodemo. Copy the code in it.

MainActivity.java

package com.mia.videodemo;

import android.app.Activity;
import android.net.Uri;
import android.os.Bundle;
import android.view.View;
import android.widget.*;

public class MainActivity extends Activity{

    VideoView mVideoView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        Button buttonPlayVideo = (Button)findViewById(R.id.playvideoplayer);
        Button buttonStopVideo = (Button)findViewById(R.id.stopvideoplayer);
       mVideoView = (VideoView)findViewById(R.id.videoview);
               
        String uriPath = "android.resource://com.mia.videodemo/"+R.raw.video;
        Uri uri = Uri.parse(uriPath);
        mVideoView.setVideoURI(uri);
        mVideoView.requestFocus();

        buttonPlayVideo.setOnClickListener(new Button.OnClickListener(){
            @Override
            public void onClick(View v) {
                    mVideoView.start();
            }});
        buttonStopVideo.setOnClickListener(new Button.OnClickListener(){
            @Override
            public void onClick(View v) {
                    mVideoView.stopPlayback();              
            }}); 
     }
}

Step 6 : Run the Project.

Explanation of the Code :

Explanation from activity_main.xml :

Explanation from MainActivity.java :

We connect the variables of Play Button (buttonPlayVideo), Stop Button (buttonStopVideo) and VideoView (mVideoView) with elements in layout.

Button buttonPlayVideo = (Button)findViewById(R.id.playvideoplayer);
Button buttonStopVideo = (Button)findViewById(R.id.stopvideoplayer);
mVideoView = (VideoView)findViewById(R.id.videoview);

Store the path of the video in uriPath variable. Convert it into Uri type (It is converted to url)

String uriPath = "android.resource://com.mia.videodemo/"+R.raw.video;
Uri uri = Uri.parse(uriPath);
mVideoView.setVideoURI(uri);
mVideoView.requestFocus();

buttonPlayVideo uses start() command for starting video on clicking the button in onClick().

buttonPlayVideo.setOnClickListener(new Button.OnClickListener(){
@Override
   public void onClick(View v) {
       mVideoView.start();
            }});

buttonStopVideo uses stopPlayback() command for stopping video on clicking the button in onClick().

buttonStopVideo.setOnClickListener(new Button.OnClickListener(){
     @Override
     public void onClick(View v) {
       mVideoView.stopPlayback();
          }});

Stay Tuned with Made In Android

Published By:
Unknown
on 24.3.15

23 March 2015

Star Rating in Android

What we will do ?
-> We will create an application with five stars. As we select stars we will get the numbers associated with it.

What we will need ?

LinearLayout and Rating Bar in activity_main.xml

Additions in MainActivity.java

Step 1 : Create a new Application. Go to File->New->Android Application Project.

Step 2 : Give a Name(RatingDemo) and a package name(mia) to your Application. Click Next continuously then click Finish.

Step 3 : Drag RatingBar and Button in activity_main.xml layout.Or else copy the below code in activity_main.xml.

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <RatingBar
        android:id="@+id/ratingBar1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:numStars="5" />
    <Button
        android:id="@+id/button1"
        android:layout_width="174dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:text="OK" />
</LinearLayout>

Step 4 : Open MainActivity.java from src->com.mia.ratingdemo. Copy the code below in it.

MainActivity.java

package com.mia.ratingdemo;

import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.widget.Button;
import android.widget.RatingBar;
import android.widget.RatingBar.OnRatingBarChangeListener;
import android.widget.Toast;

public class MainActivity extends Activity
{
        RatingBar ratingBar;
        Button btn;
    @Override
    public void onCreate(Bundle savedInstanceState) 
    {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
   
    ratingBar=(RatingBar)findViewById(R.id.ratingBar1);
    btn=(Button)findViewById(R.id.button1);
    
    ratingBar.setOnRatingBarChangeListener(new OnRatingBarChangeListener() {
        public void onRatingChanged(RatingBar ratingBar, float rating,
        boolean fromUser) {
        Toast.makeText(getApplicationContext(),"Your Selected Ratings  : " + String.valueOf(rating),Toast.LENGTH_LONG).show();
        }
        });


 btn.setOnClickListener(new View.OnClickListener() {         
        public void onClick(View arg0) {
        // TODO Auto-generated method stub
        float rating=ratingBar.getRating();
        Toast.makeText(getApplicationContext(),"Your Selected Ratings  : " + String.valueOf(rating),Toast.LENGTH_LONG).show();
        }
        });
    }

}

Step 5 : Run the Application.

Explanation of the code :

Explanation from activity_main.xml

We just add a RatingBar with a Button in a LinearLayout. numStars:5 is used to limit the rating to 5 .

<RatingBar
        android:id="@+id/ratingBar1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:numStars="5" />

Explanation from MainActivity.java

Create a variable of RatingBar as ratingBar and of Button type as btn;

RatingBar ratingBar;
Button btn;

We relate the rating bar and the button from the layout to the variables respectively using findViewById().

ratingBar=(RatingBar)findViewById(R.id.ratingBar1);
btn=(Button)findViewById(R.id.button1);

the onRatingBarChangeListener() method is used to perform action on clicking the RatingBar. Here we will display a Toast with the number of starts given by the user, when the action is performed.The float rating variable stores the rating value in float number.

ratingBar.setOnRatingBarChangeListener(new OnRatingBarChangeListener() {
        public void onRatingChanged(RatingBar ratingBar, float rating,
        boolean fromUser) {
        Toast.makeText(getApplicationContext(),"Your Selected Ratings  : " + String.valueOf(rating),Toast.LENGTH_LONG).show();

We will perform the same action when button is pressed using setOnClickListener() method.

ALSO

Stay Tuned with Made In Android

Published By:
Unknown
on 23.3.15

10 February 2015

Pinch Zoom tutorial in Android

What we will do?
-> We will make an app with an image which when pinched, gets zoomed.

What we will need?

Changes in activity_main.xml

An image (here we will use the default image in the project i.e. ic_launcher)

Adding code in MainActivity.java

Step 1 : Create a New Android Project by clicking on File->New->Android Application Project.

Step 2 : Give a name(PinchZoom) and package name(mia) to your application. Click Next...till Finish and Click Finish.

Step 3 : Drag an ImageView in layout of activity_main.xml from the Palette. Then choose the image as ic_launcher.png. If you like to use another image, copy the image in the res/drawable_hdpi folder.

OR copy the code below in activity_main.xml.

activity_main.xml

<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" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="matrix"
        android:src="@drawable/ic_launcher" />

</RelativeLayout>

Step 4 : Code for MainActivity.java in src->com.mia.pinchzoom is shown below.

MainActivity.java

package com.mia.pinchzoom;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.graphics.Matrix;
import android.graphics.PointF;
import android.os.Bundle;
import android.util.FloatMath;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends Activity {
 ImageView imageDetail;
 Matrix matrix = new Matrix();
 Matrix savedMatrix = new Matrix();
 PointF startPoint = new PointF();
 PointF midPoint = new PointF();
 float oldDist = 1f;
 static final int NONE = 0;
 static final int DRAG = 1;
 static final int ZOOM = 2;
 int mode = NONE;

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  imageDetail = (ImageView) findViewById(R.id.imageView1);
  imageDetail.setOnTouchListener(new View.OnTouchListener() {

   @Override
   public boolean onTouch(View v, MotionEvent event) {
    ImageView view = (ImageView) v;
    System.out.println("matrix=" + savedMatrix.toString());
    switch (event.getAction() & MotionEvent.ACTION_MASK) {
    case MotionEvent.ACTION_DOWN:

     savedMatrix.set(matrix);
     startPoint.set(event.getX(), event.getY());
     mode = DRAG;
     break;

    case MotionEvent.ACTION_POINTER_DOWN:
     oldDist = spacing(event);

     if (oldDist > 10f) {
      savedMatrix.set(matrix);
      midPoint(midPoint, event);
      mode = ZOOM;
     }
     break;

    case MotionEvent.ACTION_UP:

    case MotionEvent.ACTION_POINTER_UP:
     mode = NONE;
     break;

    case MotionEvent.ACTION_MOVE:
     if (mode == DRAG) {
      matrix.set(savedMatrix);
      matrix.postTranslate(event.getX() - startPoint.x,
        event.getY() - startPoint.y);
     } else if (mode == ZOOM) {
      float newDist = spacing(event);
      if (newDist > 10f) {
       matrix.set(savedMatrix);
       float scale = newDist / oldDist;
       matrix.postScale(scale, scale, midPoint.x, midPoint.y);
      }
     }
     break;
    }
    view.setImageMatrix(matrix);

    return true;
   }
   @SuppressLint("FloatMath")
   private float spacing(MotionEvent event) {
    float x = event.getX(0) - event.getX(1);
    float y = event.getY(0) - event.getY(1);
    return FloatMath.sqrt(x * x + y * y);
   }
   private void midPoint(PointF point, MotionEvent event) {
    float x = event.getX(0) + event.getX(1)
    float y = event.getY(0) + event.getY(1);
    point.set(x / 2, y / 2);
   }
  });
 }
}

Step 5 : Run the Project. Run it directly in your android phone ,since you can zoom with your hand only in your mobile phone.

Stay Tuned with Made In Android

Published By:
Yatin Kode
on 10.2.15

29 January 2015

Creating Phonegap Application

Let us start from the point we ended making our path variables.

We downloaded the phonegap 2.2.0 folder for the website.

Step 1 : Open the phonegap folder inside it go to lib->android->bin and copy the link.

Step 2 : Open Command prompt and go to the copied link by typing the command below . Since I have my phonegap folder on my Desktop my link would be.

cd C:\Users\Surendra\Desktop\phonegap-phonegap-8a3aa47\lib\android\bin

Then press Enter

Step 3 : Use create command to create the application. Since I have to create my application with name DemoPhoneGapApp on Desktop my create command will be