Create audio player app in 10 minutes

Create audio player app in 10 minutes

Welcome to hiewpoint, In this post you’ll learn how to use MediaPlayer Api to build a simple audio player app. By creating this app you’ll learn some basic concepts of MediaPlayer Api and AudioManager.
So what’s MediaPlayer and AudioManager? If we want our app to play video and sound then we need to use these two above mentioned.
MediaPlayer: This class is the primary API for playing sound and video.
AudioManager: This class manages audio sources and audio output on a device.Lets get started in building an app with Mediaplayer in android studio.


First setup the project with an empty activity and give it any preferred name.
In the activity_main.xml copy this below code.

Audio player app activity_main.xml

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:orientation="vertical"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_green_dark"
        android:onClick="playMe"
        android:text="@string/play"
        tools:text="@string/play" />

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_red_dark"
        android:onClick="pauseMe"
        android:text="@string/pause"
        tools:text="@string/pause" />

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_marginTop="24dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent">

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Volume" />

    <SeekBar
        android:id="@+id/timeline"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TimeLine" />
</LinearLayout>

We have a playMe button and PauseMe button. Ofcourse play and pause are essential in any audioplayer app, we also have two seek bar to control the volume and timeline of audio.
Now copy these below lines of code in MainActivity.java

Audio player app MainActivity.java

import android.content.Context;
import android.media.AudioManager;
import android.media.MediaPlayer;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.SeekBar;
import java.util.Timer;
import java.util.TimerTask;
MediaPlayer mediaPlayer;
AudioManager audioManager;

public class MainActivity extends AppCompatActivity {
public void playMe(View view){
    mediaPlayer.start();

}

public void pauseMe(View view){

    mediaPlayer.pause();
}



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

    mediaPlayer = MediaPlayer.create(this, R.raw.myaudio);

    //Getting context from Audio Service
    audioManager = (AudioManager)getSystemService(Context.AUDIO_SERVICE);
    int myMaxVolume = audioManager.getStreamMaxVolume(AudioManager.STREAM_MUSIC);
    int myCurrentVolume = audioManager.getStreamVolume(AudioManager.STREAM_MUSIC);

    //Setting context values to Seekbar
    SeekBar volumeRocker = (SeekBar) findViewById(R.id.seekBar);
    volumeRocker.setMax(myMaxVolume);
    volumeRocker.setProgress(myCurrentVolume);


    //Set on change listener

    volumeRocker.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
        @Override
        public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
            audioManager.setStreamVolume(AudioManager.STREAM_MUSIC, progress, 0);
        }

        @Override
        public void onStartTrackingTouch(SeekBar seekBar) {

        }

        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {

        }
    });


        //Setting a player timeline

    final SeekBar timeline = (SeekBar) findViewById(R.id.timeline);
    timeline.setMax(mediaPlayer.getDuration());

    new Timer().scheduleAtFixedRate(new TimerTask() {
        @Override
        public void run() {
            timeline.setProgress(mediaPlayer.getCurrentPosition());
        }
    }, 0, 1000);


    timeline.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
        @Override
        public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
            mediaPlayer.seekTo(progress);
        }

        @Override
        public void onStartTrackingTouch(SeekBar seekBar) {

        }

        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {

        }
    });

}

}

Conclusion

So basically we first create instance of MediaPlayer and AudioManager and instantiate them in oncreate() as mediaPlayer=MediaPlayer.create(this,R.raw.myAudio);
audioManager=(AudioManager)getSystemService(Context.AUDIO_SERVICE); here we get the audio service in order to play the audio.

Inside the onClick methods of both the button consists of mediaPlayer.start() to start the audio and mediaPlayer.pause() to pause the audio.

In order to control the volume rocker we need to set current stream and max stream and assigned to two different variables. These two variables are used in seekbar(volume rocker).

volumeRocker.setMax(myMaxVolume);
volumeRocker.setProgress(myCurrentVolume);

To control the volume seekbar ,a seekbarChangeListener is added which listens to the movement of seekbar(volume rocker), inside the onProgressChanged(….) we added this audioManager.setStreamVolume(AudioManager.STREAM_MUSIC, progress, 0);

So that when user slide the seekbar it sets that current value to it.Similar to this seekbar ,another seekbar is created which listens to the timeline of audio and it uses mediaPlayer.seekTo() method to seek the audio wherever user slides.

Output

After implementing the source code in-place and properly, Your app will appear similar to this ! however you can easily edit the background color and button color. For any doubt comment on our post or send us a message on social media to get cleared instantly. Try some more modifications in this audio player app and wait for our next article. Happy coding !

Create audio player app  in 10 minutes

Thank you for reading this post. Follow us on Instagram and Facebook.


To know more tips and tricks you can follow articles on this category :
https://blog.hiewpoint.com/off-topic/

To know about web development and WordPress follow
https://blog.hiewpoint.com/web/

To know about Android development and Android Studio follow
https://blog.hiewpoint.com/android/

Use API in android app in just 7 simple steps

Use API in android app in just 7 simple steps

In this post you will learn about API’s and how to fetch live data from the internet and provide data within your android app.

After following this post ,you would be able to implement any API within your app which would be useful for your large scale application. We will use openweathermap API in this tutorial. So let’s get started but wait do you know what is an API? If not then don’t worry I’ll explain you what is an API and I promise that you will not again search for what is an API?

What is an API

According to Wikipedia ,In computer programming, an application programming interface is a set of subroutine definitions, communication protocols, and tools for building software. In general terms, it is a set of clearly defined methods of communication among various components. A good API makes it easier to develop a computer program by providing all the building blocks, which are then put together by the programmer.

Not yet clear what is an API? We’ll break it down for you.

So basically it is an intermediary software that allows two applications to talk to each other. For example , You want to book your air ticket from indigo. Now you may go to the indigo website and book it. But how many of  us does that? Very rarely we do that. We use third party services like MMT ,Paytm etc.. So developers use this to get data from main server or for much more additional features.

Another example ,You login/signup to different websites that gives various options to you to sign up to their website. That may include Facebook ,google signup etc…

Get your API key

To start using application programming interface services of any organization ,we need to register and get the key from them. In this tutorial we’ll use openweathermap .

Get the API key by registering to openweathermap. The key is a unique identifier to the API provider. Follow the documentation there and get started.

You need to follow the guides properly as you need to understand what the provider provides ,So that you could use it in your application to display live data.

Let’s Code

Open Mainfest.xml and give it a permission to internet service as we are going to use internet service in app.

Copy the below code in activity_mamin.xmlm

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/winter"
    tools:context="com.example.studio.myweatherapp.MainActivity">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="24dp"
        android:fontFamily="cursive"
        android:text="Get Weather"
        android:textColor="@android:color/background_dark"
        android:textSize="50sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/getCity"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Paris"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="24dp"
        android:background="@color/colorAccent"
        android:paddingBottom="10dp"
        android:paddingLeft="30dp"
        android:paddingRight="30dp"
        android:paddingTop="10dp"
        android:text="Get that"
        android:textColor="@android:color/background_light"
        android:textSize="20sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/getCity" />

    <TextView
        android:id="@+id/result"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="24dp"
        android:text="TextView"
        android:textSize="20sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button"
        tools:layout_editor_absoluteY="234dp" />
</android.support.constraint.ConstraintLayout>

We are going to perform network request using volley library. Why volley? Because its simple and convenient unlike using asynctask request. Using volley we don’t need to worry about UI thread etc..

 In order to perform network request we need some boiler plate codes which performs the request. We need not worry about how that code works as it is a boiler plate code .It’s just needed in order to use volley. So copy these below lines of code in a class and named it as mySingelton.java .

If you are not familiar with volley then I would recommend to first learn about volley. We already have a post on volley ,So have a look on that.

package com.example.studio.myweatherapp;

import android.content.Context;

import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.toolbox.Volley;


public class MySingleton {

    private static MySingleton mInstance;
    private RequestQueue requestQueue;
    private static Context mCtx;

    private MySingleton(Context context){
        mCtx = context;
        requestQueue = getRequestQueue();
    }

    public RequestQueue getRequestQueue(){
        if(requestQueue==null){
            requestQueue = Volley.newRequestQueue(mCtx.getApplicationContext());
        }
        return requestQueue;
    }

    public static synchronized MySingleton getInstance(Context context){
        if(mInstance==null){
            mInstance = new MySingleton(context);
        }
        return mInstance;
    }

    public void addToRequestQue(Request request){
        requestQueue.add(request);
    }
}

NOTE: The url which will be requested using mySingleton is JsonObjectRequest  and jsonobjectrequest must have a url with api So the url must be something like this baseUrl+city+API key.

Copy these in MainActivity.java

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

import com.android.volley.Request;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.JsonObjectRequest;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

public class MainActivity extends AppCompatActivity {

    Button button;
    EditText city;
    TextView result;

    //http://api.openweathermap.org/data/2.5/weather?q=Paris&appid=5f56d525d1619d0a2cd2eac4ce55588e

    String baseURL = "http://api.openweathermap.org/data/2.5/weather?q=";
    String API = "&appid=5f56d525d1619d0a2cd2eac4ce55588e";

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

        button = (Button) findViewById(R.id.button);
        city = (EditText) findViewById(R.id.getCity);
        result = (TextView) findViewById(R.id.result);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String myURL = baseURL + city.getText().toString() + API;
                //Log.i("URL", "URL: " + myURL);

                JsonObjectRequest jsonObjectRequest = new JsonObjectRequest(Request.Method.GET, myURL, null,
                        new Response.Listener<JSONObject>() {
                            @Override
                            public void onResponse(JSONObject jsonObject) {
                                Log.i("JSON", "JSON: " + jsonObject);

                                try {
                                    String info = jsonObject.getString("weather");
                                    Log.i("INFO", "INFO: "+ info);

                                    JSONArray ar = new JSONArray(info);

                                    for (int i = 0; i < ar.length(); i++){
                                        JSONObject parObj = ar.getJSONObject(i);

                                        String myWeather = parObj.getString("main");
                                        result.setText(myWeather);
                                        Log.i("ID", "ID: " + parObj.getString("id"));
                                        Log.i("MAIN", "MAIN: " + parObj.getString("main"));
                                    }


                                } catch (JSONException e) {
                                    e.printStackTrace();
                                }




                            }
                        },

                        new Response.ErrorListener() {
                            @Override
                            public void onErrorResponse(VolleyError volleyError) {
                                Log.i("Error", "Something went wrong" + volleyError);

                            }
                        }


                );
                MySingleton.getInstance(MainActivity.this).addToRequestQue(jsonObjectRequest);

            }
        });
    }
}

Lets see what is exactly happening in the MainActivity.java

  • First we set the base url from where we want to fetch the data and API key of your registered one.
  • Then when a user enters a city name ,an url is set up as to request (GET) and get the JSON data from the url by using JsonObjectRequest ,this returns the data inn JSON Onject format something just like this,

JSON: {“coord”:{“lon”:2.35,”lat”:48.86},”weather”:[{“id”:801,”main”:”Clouds”,”description”:”few clouds”,”icon”:”02d”}],”base”:”stations”,”main”:{“temp”:283.58,”pressure”:1034,”humidity”:77,”temp_min”:282.15,”temp_max”:285.93},”visibility”:10000,”wind”:{“speed”:2.6},”clouds”:{“all”:20},”dt”:1553599943,”sys”:{“type”:1,”id”:6540,”message”:0.0052,”country”:”FR”,”sunrise”:1553578899,”sunset”:1553623857},”id”:2988507,”name”:”Paris”,”cod”:200}

  • We take the necessary data which we want and leave other. In this e xample app we take only the main inside of weather Array of objects.
  • Finally we request the volley to get the data from the server. This is achieved by using,
MySingleton.getInstance(MainActivity.this).addToRequestQue(jsonObjectRequest);

The app would have an output like this,

Thank you for reading this post. Follow us on Instagram and Facebook.


To know more tips and tricks you can follow articles on this category :
https://blog.hiewpoint.com/off-topic/

To know about web development and WordPress follow
https://blog.hiewpoint.com/web/

To know about Android development and Android Studio follow
https://blog.hiewpoint.com/android/

images

How To Fetch A Webpage Using Volley

In this post you’ll be learning about volley ,an android library and how to use it to fetch data from internet. It’s a library used for networking. Click this https://developer.android.com/training/volley to see what official android developers website tells about volley.  This is only a basic example of volley.

Follow these steps to setup the app for volley

  • After creating a empty project in Android Studio,go to the gradle       dependencies and add the volley dependencies from this link https://developer.android.com/training/volley
  • We are going to fetch a webpage on button press, for this we would need internet permissions. So under manifests define internet permission.
<uses-permission android:name="android.permission.INTERNET" />

Now lets dive into the coding part

Copy this into your activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.studio.volleyone.MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

It would look something like this,

volley

Copy this into MainActivity.java

package com.example.studio.volleyone;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;

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;

public class MainActivity extends AppCompatActivity {

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

        final String myURL = "http://www.facebook.com";

        Button myButton = (Button) findViewById(R.id.button);

        myButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                RequestQueue requestQueue = Volley.newRequestQueue(MainActivity.this);

                StringRequest stringRequest = new StringRequest(Request.Method.POST, myURL,
                        new Response.Listener<String>() {
                            @Override
                            public void onResponse(String s) {
                            Log.i("PAGE", "WEB " + s);
                            }
                        },
                        new Response.ErrorListener() {
                            @Override
                            public void onErrorResponse(VolleyError volleyError) {
                                Log.i("ERROR", "ERROR is " + volleyError);
                            }
                        }
                );

                requestQueue.add(stringRequest);
            }
        });



    }
}

In MainActivity.java, we are assigning a click listener on button and on button pressed ,it requests the webpage. So let’s see how the request is done.

An HTTP has many methods such as GET, PUT , CONNECT ,POST… , In example app the method  to request data from server is POST.

RequestQueue requestQueue = Volley.newRequestQueue(MainActivity.this);

                StringRequest stringRequest = new StringRequest(Request.Method.POST, myURL,
                        new Response.Listener<String>() {
                            @Override
                            public void onResponse(String s) {
                            Log.i("PAGE", "WEB " + s);
                            }
                        },
                        new Response.ErrorListener() {
                            @Override
                            public void onErrorResponse(VolleyError volleyError) {
                                Log.i("ERROR", "ERROR is " + volleyError);
                            }
                        }
                );

                requestQueue.add(stringRequest);
            }
        });

The above piece of code is to request, when button is pressed. Volley.newRequestQueue is assigned to an instance of RequestQueue in which all the requests are held in a queue. Then a StringRequest requests the url with the POST method and if it is successful then onResponse() is executed else onErrorResponse  is executed.

Now after running your app , click on the button and go to logcat and from dropbox choose info and type PAGE .If the request was successful then the xml format of web page could be seen in logcat else an error occurred while fetching web page ,in that case cross check your url. It would look something like this,

volley

Thus fetching a web page using volley is done in this way. This was just a basic example of volley ,there’s more to learn about volley. Visit developers official site or just keep calm and stay tuned with us ,We will post more advanced example on volley.

Thank you for reading this post. Follow us on Instagram and Facebook.


To know more tips and tricks you can follow articles on this category :
https://blog.hiewpoint.com/off-topic/

To know about web development and WordPress follow
https://blog.hiewpoint.com/web/

To know about Android development and Android Studio follow
https://blog.hiewpoint.com/android/

film

How to build a video player android app in minutes.

In this post you’ll learn how to build a video player android app using VideoView .By creating this app you’ll learn some basic concepts of VideoView ,MediaController.

The MediaController consists of components such as play video , pause video , forward and rewind etc.

Lets get started in building an app with video player.

First setup the project with an empty activity and give it any preferred name.
Copy this lines of code in activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.studio.myvideoapp.MainActivity">

    <VideoView
        android:id="@+id/videoView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
  • This xml file basically consists of videoView which is used to stream the video.

Adding video path to resource file

Create a raw folder under resource file and insert the video file which you want to play video in app. If you don’t know how to create a raw folder in android studio then you could follow the steps to create raw in our other post and learn more in detail about raw in android studio.

Now copy these lines of code in MainActivity.java

package com.example.studio.myvideoapp;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.MediaController;
import android.widget.VideoView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //Basic of video
        //1. get video view
        VideoView videoView = (VideoView) findViewById(R.id.videoView);

        //2. point to video resource
        videoView.setVideoPath("android.resource://" + getPackageName() + "/" + R.raw.introvideo);

        //add media Control
        MediaController mediaController = new MediaController(this);

        mediaController.setAnchorView(videoView);

        videoView.setMediaController(mediaController);

        //run it
        videoView.start();

    }
}

Lets see what exactly happens in the MainActivity.java

First we get the videoView by findViewById() method.
Then we point that videoView to a videoPath bu=y using setVideoPath() method . We get the path from our raw folder.
Then we add a MediaController by instantiating the MediaController and set the AnchorView and lastly setMediaController on videoView.


Now we could start playing the video by videoView.Start() method.
NOTE: Now this video will play as soon as the app opens. That’s because we used start () method in onCreate().
The app would look something like this,

BeFunky-photo

List Using Recycler View

Hello bloggers to this session of android development tutorial, In this session we are going to learn about how to implement the Recycler view in a list.

Recycler view is a widget which is more advanced and flexible version of list view. It gives user more memory to the device. Assume when there are unknown numbers of items in a scrollable list. It contains more space to free up the space recycler view is used it frees up the space by deleting the information which is out of layout(data above or below the screen of your phone) hence freeing up space user can get the data back when he scrolls back up the data is recreated.

Step 1: open android studio->create a new empty project.

Step 2: after the project has synced go to gradle scripts->build.gradle (module: app).

Step 3: copy the dependencies from this website to dependencies, after copying it sync the project. Dependencies may change so check in website before adding it in your code.

Step 4: now go to main activity.xml copy the following code in it.

·        <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/recycler_list"
        />

</RelativeLayout>

Step 5: right click on layout file ->select new -> new resource layout file and give it a name such as “list_item_text” and make sure to keep the root element as “LinearLayout” and give it an id. Then copy the following code in it. if an error occurs at tools:text click alt+enter.

·        <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:orientation="vertical"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     >
 
     <TextView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:textSize="26dp"
         android:id="@+id/Text_List"
         tools:text="list"/>
  </LinearLayout>
 

Step 6: in main activity.java file we create a RecyclerView and tag it with id recycler_list and set LayoutManager in LinearLayoutManager. Then we create a list of array elements called stringList and fill the list. Make sure elements in the list is large enough to be scrollable or you can assign string list in another array list called list and by using .addAll method we create multiple values of same type . you can create  copy the following code into main_activity.java.

·        package com.example.recyclerlist;
 
 import android.support.v7.app.AppCompatActivity;
 import android.os.Bundle;
 import android.support.v7.widget.LinearLayoutManager;
 import android.support.v7.widget.RecyclerView;
 
 import java.util.ArrayList;
 import java.util.List;
 
 public class MainActivity extends AppCompatActivity {
 
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
 
 
         RecyclerView recyclerView=(RecyclerView)findViewById(R.id.recycler_list);
         recyclerView.setLayoutManager(new LinearLayoutManager(this));
         ListAdapter listAdapter =new ListAdapter();
         recyclerView.setAdapter(listAdapter);
 
 
         List<String> stringList = new ArrayList<>();
         stringList.add("yahs");
         stringList.add("yats");
         stringList.add("yags");
         stringList.add("majs");
         stringList.add("prat");
         stringList.add("mayu");
         stringList.add("lodi");
         stringList.add("pakodi");
         stringList.add("bodi");
         stringList.add("gteri");
         stringList.add("hmaa");
         stringList.add("jki");
         stringList.add("glodi");
 
         List<String> list = new ArrayList<>();
         list.addAll(stringList);
         list.addAll(stringList);
         list.addAll(stringList);
         list.addAll(stringList);
 
 
         listAdapter.setItems(list);
     }
 }

Step 7: create a new class called ListAdapter. In ListAdapter.java, class List adapter extends to recyclerview.adapter “public class ListAdapter extends RecyclerView.Adapter  ” If the line shows error click alt+enter ->click implement methods->click ok, we create a method called getItemViewType which will be responsible for type of the item at that position. We create a static type class called Textviewholder and extend it to recyclerview.viewholder and create a constructor for it. RecyclerView will call onBindViewholder method whenever a view comes on screen so we create a method called bind so that we can use it to display text view. In recycler list it has only one text view, so we create mTextview which will hold the number of text in text view.

Array list of elements called list holds m Items. Then copy the following code.

·        package com.example.recyclerlist;
 
 import android.support.annotation.NonNull;
 import android.support.v7.widget.RecyclerView;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.TextView;
 
 import java.util.ArrayList;
 import java.util.List;
 
 public class ListAdapter extends RecyclerView.Adapter {
 
 
 
     private List<String> mItems =new ArrayList<>();
 
     public void setItems(List<String>items){
         mItems=items;
         notifyDataSetChanged();
 
     }
     @NonNull
     @Override
     public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
 
 
         if (viewType==0)
 
             return TextViewHolder.inflate(parent);
         else
             return null;
     }
 
     @Override
     public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
         if (holder instanceof TextViewHolder){
             ((TextViewHolder) holder).bind(mItems.get(position));
         }
 
     }
 
     @Override
     public int getItemCount() {
         return mItems.size();
     }
 
     @Override
     public int getItemViewType(int position) {
         return 0;
     }
 
     static class TextViewHolder extends RecyclerView.ViewHolder{
 
         private TextView mTextView;
 
         public static TextViewHolder inflate(ViewGroup parent){
            View view =LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item_text,parent,false);
 
            return new TextViewHolder(view);
 
         }
 
 
         public TextViewHolder(@NonNull View itemView) {
             super(itemView);
 
             mTextView=itemView.findViewById(R.id.Text_list);
         }
 
         public void bind(String text){
 
             mTextView.setText(text);
         }
     }

Step 8: After you are done your app should look like this.

Conclusion

Congratulations, today you have learned how to create a list using recycler view. Using recycler view more complicated lists can be prepared (for e.g: playstore apps) recycler view manages the space allotment it can also be shown in grid layout by changing a single line of code but if you are going to keep detailed information then linear layout is best choice. You can use Recycler view and implement it in your code.

getting started with android studio

LISTVIEW IN ANDROID

Hello, welcome to bunkerspoint ,this topic is based on list view in android with example. So what’s list view in android? In android developers official website it says,“A list view is an adapter view  that does not know the details, such as type and contents, of the views it contains. Instead list view requests views on demand from a ListAdapter  as needed, such as to display new views as the user scrolls up or down”.

In simple, a list view is a view that contains list items and display them in vertical scrollable, which allows user to scroll the list items up and down vertically. ListView uses adapter to bind data from it to display in ListView. Think of an adapter as a middleman between Adapter view and any other view such as ListView , GridView etc.

USING ADAPTER IN LISTVIEW

ListView is a subclass of AdadpterView and they can be populated by binding to an Adapter. An Adapter retrieves data and represents those data. There are some common adapters which are frequently used such as ArrayAdapter, BaseAdapter, CursorAdapter etc..


In this tutorial, we are going to make use of ArrayAdapter. We are going to see how to implement listView in android studio using ArrayAdapter.
After following this tutorial, you would have the following output.

Lets begin with creating activity_main.xml

Create a lisView inside the activity_main.xml and give it a id of listView.

<?xml version="1.0" encoding="utf-8"?>
<!-- Layout for the main screen -->
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/listview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="16dp"
    android:paddingLeft="16dp”
    android:paddingRight="16dp"
    android:paddingTop="16dp" />

Create a new layout resource file and name it as list_items

<!--  Single List Item Design -->
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/textview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="10dp"
    android:textSize="16dp"
    android:textStyle="bold" >
</TextView>

In mainActivity.java add this code snippet.

package com.bunkerspoint.android.listView;

import android.os.Bundle;
 import android.support.v7.app.AppCompatActivity;
 import android.widget.ArrayAdapter;
 import android.widget.ListView;
 import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
    ArrayList<String> arrayList = new ArrayList<>();
    arrayList.add("Manuj");
    arrayList.add("Pratik");
    arrayList.add("Yash");
    arrayList.add("Yatendra");
    arrayList.add("Yagnesh");
    arrayList.add("Mayur");
    arrayList.add("Manuj");
    arrayList.add("Raju");
    arrayList.add("Yadav");
    arrayList.add("Dhoni");


    ArrayAdapter<String>arrayAdapter = new      ArrayAdapter<String>(this,android.R.layout.simple_expandable_list_item_1,arrayList);
    // Get a reference to the ListView, and attach the adapter to the listView.
    ListView listView = (ListView) findViewById(R.id.listview_flavor);
    listView.setAdapter(arrayAdapter);
 }
}

The above code snippet creates a listView with list items as shown below.

HANDLE CLICK LISTENERS IN LISTVIEW

The above code snippet only shows the list item but listview are useless when we are not able to click those list items. So below code snippet will let you handle click events in listView so that you could be able to use it in your projects.

listView.setOnItemClickListener(new AdapterView.OnItemClickListener()
{
    @Override
    public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {

        String selectedItem=arrayList.get(position);
        Toast.makeText(getApplicationContext(), "Person Selected : "+selectedItem,   Toast.LENGTH_LONG).show();
    }
});

Place this code snippet in MainActivity.java inside the onCreate()methd.

Let me explain whats happening in the MainActivity.java.
So, we instantiated ArrayList of type String and named it as arrayList and then added the items in it.

Then we created a ListView and ArrayAdapter which taken in as String and named it as arrayAdapter and we set the adapter to listView by listView.setAdapter()method.

To handle click events in our listView, we used the onItemClickListener and said it what we want to do when a user clicks on any item. In this case we toast the items upon click.


In this post, you learnt about how to create a listView and use it to populate list items in it by using ArrayAdapters. The ArrayAdapter in this tutorial uses a string type and not custom implementation and also the ArrayAdapter uses Android Studio’s default (provided layout of simple_list_item_1) adapter. So if you want to learn more about how to implement a CustomAdapter then check it out at our website
https://blog.hiewpoint.com/category/android/

WhatsApp Image 2019-04-02 at 6.38.13 PM (1)

Create A Basic Hello World App Using Button

In this tutorial we will see how to make a Hello world app with android studio. Its a very simple project then what special in it ? Well, we are going to create it using a button. In today’s tutorial we’ll teach you how to use button, explain you how a button works and how can you implement it in your app.

Step 1: open your android studio app.

Step 2: click on a new project -> give any name as you like.

Step 3: choose an empty activity, and then click next.

Step 4: don’t change any other settings such as save location, package name or api level.

Step 5: let the project load the modules and sync itself.

Step 6: copy the following code in main_activity.java file.

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     tools:context=".MainActivity"
     android:orientation="vertical"
     android:layout_margin="12dp">
 
 
 
     <TextView
         android:id="@+id/button_click"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="click below"
         android:paddingLeft="12dp"
         android:paddingBottom="12dp"
         android:textAlignment="center"
         />
 
     <Button
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:onClick="active_click"
         android:text="click here" />
 
 
 </LinearLayout>

In the above written code, what I have done is changed the default “android.support.constraint.ConstraintLayout” to LinearLayout for no special reason but because I prefer it to keep things in straight order. I have kept orientation in vertical order .it will help our views and text in linear order or it may appear in horizontal order.

  Then we removed all the text inside the Text view and set the layout_width and height to match parent and added the text “click below”. And we have kept the layout in such a way that they don’t get cramped.

Now here come the important part, we have created an id for text view because when the button will be clicked the it shouldknow where operation should take place so we need to assign an id to it. Then  we create a button view with text  “click here” and give it action to perform called ”active_Part” by calling onclick method.

Step 7: copy the following code in main_activity.java file.

package com.example.bunkers_demo;
 
 import android.support.v7.app.AppCompatActivity;
 import android.os.Bundle;
 import android.view.View;
 import android.widget.TextView;
 
 public class MainActivity extends AppCompatActivity {
     String click="Hello world";
 
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
 
     }
 
 
     public void active_click(View view){
 
         display(click);
     }
     public void display(String view) {
         TextView displayThis = (TextView) findViewById(R.id.button_click);
         displayThis.setText(String.valueOf(view));
     }
 
 }

When the button is clicked it calls active_click method and it displays the value of variable present inside “click”. But you need to create a variable of String type of any name (I have kept mine as “click”) and set the value as ” Hello world” but how does it know where to display for that you will create a function called “display” of String type view. It uses the value stored in variable”click”and display the in id button_click using find view by id method in it. It displays the text view value id then we use setText method so that the updated value of string type updates the text in text view outside the app.

Step 8: after following the steps above you app will look like this.

 

So with this we have learn’t what a button is, how it works and how can it be implemented in your app, you can go to android studio and make changes to see how it works and understand better. We have kept it simple so that it can only display a word but we can design it to perform arithmetic calculations. But that’s for different lesson stay tuned and visit our website for more solutions.