Android ListView Tutorial — February 1, 2016

Android ListView Tutorial

Hey friends, in this post we will make an app using ListView .

When the app starts, a list displays the names of different animals. And whenever the name of the animal is clicked, its image is displayed in another activity.

1.Add Images in the res/drawable folder

You can download the images from google or by this link.

1

2. Create a Class  to store the names and images on Animals

We will add a new class named as Animals where all the information (names and image id of animals) would be stored.

This class is created to separate the information from the activities. Objects of this class would be used in the Activities. 

Let’s say the name of this class in Animals.java.

In this Activity, we will create two variable as Name and imageResourceId.

Make constructor of Animals class

Set getters

Remember to create the toString method as it will be used by the ArrayAdapter in the MainActivity to display the Name variable of the animal object.

The code of the Animals.java class is :-

package com.abhi.listview.listviewtutorial;

/**
 * Created by abhi on 2/1/2016.
 */
public class Animals {

    private String Name;
    private int imageResourceID;        //for image

    //constructor
    private Animals(String Name,int imageResourceID)
    {
        this.Name=Name;
        this.imageResourceID=imageResourceID;
    }

    //getters

    public String getName()
    {
        return Name;
    }

    public String toString()
    {
        return Name;
    }

    public int getImageResourceID()
    {
        return imageResourceID;
    }

    // creating objects of the class

    public static final Animals[] animals= {new Animals("Dog",R.drawable.dog),
                                             new Animals("Cat",R.drawable.cat),
                                            new Animals("Cow",R.drawable.cow)};




}

 

3. Create textView and ListView in the content_main.xml

The content_main.xml code would be as follows. Make sure to ID the ListView as it would be recalled in the MainActivity.java

<?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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.abhi.listview.listviewtutorial.MainActivity"
    tools:showIn="@layout/activity_main">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Animals"
        android:id="@+id/textView"
        android:textSize="@android:dimen/app_icon_size"
        android:textColor="@android:color/holo_blue_dark"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <ListView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/listView"
        android:layout_below="@+id/textView"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

</RelativeLayout>

 

4. Add the code in the MainActivity.java to display the listview

To display the Animal’s name in the listview, add the following code to the  Main Activity.java

ArrayAdapter is used here as it is used to bind the arrays to the views. It acts like a bridge between them. It can be used with any subclass of the AdapterView , can be ListView or Spinner.

Animals is the java class we created in the beginning and animals is its object.

Make sure to use setAdapter as it is used to attach the ArrayAdapter to the listView.

 

ListView lv= (ListView) findViewById(R.id.listView);

        ArrayAdapter<Animals> animalsArrayAdapter= new ArrayAdapter<Animals>(this, android.R.layout.simple_list_item_1,Animals.animals);
        lv.setAdapter(animalsArrayAdapter);

 

If you will Run you app now, you will see the name of the Animals displayed in a listview.

5. Adding Clicks in the App for the listview

To create any action on clicks for the listview, we need to use OnItemClickListener and its onItemClick method.

When the name of the animal i.e the item in the listview would be clicked, onItemClick would start an Intent for another activity. Let’s call that activity as SecondActivity.java .

Add the following code in the onCreate method in MainActivity.java to add clicks.

Here we are using putExtra method to send the value “id” which will tell us that which item was clicked. This value is being sent to the SecondActivity by the name “ImageID”

lv.setOnItemClickListener(new AdapterView.OnItemClickListener()
        {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Intent i= new Intent(MainActivity.this,SecondActivity.class);
                i.putExtra("ImageId",id);
                startActivity(i);
            }
        });

 

6. Create SecondActivity.java

Now if you will play the app, on clicking any animal name in the listview. you will be directed to an to SecondActivity which will show nothing at the moment.

screenshot_2016-02-02-00-14-20

Now to add the Image to the Second Activity’s layout. We need to have  an ImageView in the content_second.xml.

Here is the code of content_second.xml.

<?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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.abhi.listview.listviewtutorial.SecondActivity"
    tools:showIn="@layout/activity_second">


    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"

        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
</RelativeLayout>

 

Add this code to the SecondActivity.java in the onCreate Method

Intent i=getIntent();
        int imageID= (int) i.getLongExtra("ImageId", 0);
        Animals animals= Animals.animals[imageID];

        ImageView imageView= (ImageView) findViewById(R.id.imageView);
        imageView.setImageResource(animals.getImageResourceID());

Here the “ImageId” is recovered back and used to get the Animal object from the array.

and then Image is shown in the imageView using setImageResource method.

Now run the app and you will see the desired output.

 

 

 DOWNLOAD COMPLETE PROJECT

Hope you like this tutorial and get a good understanding about ListView.

 

Remove Floating Action Button from the Blank Activity — January 31, 2016

Remove Floating Action Button from the Blank Activity

From the beginning of its days, Android has been changing a lot in its concepts.

In the recent time, one of the changes brought by the Material Design is the Floating Action Button. These can only be used with API 21 and above. But the appcompat support library v7 makes most of the Material Design supportable with the APIs before API 21.

1

In the Android Studio, whenever I opt for a Blank Activity, this Floating Action Button also displays in the layout.

The Floating Action button can be removed from the app, if one does not want to use it. After all, this widget is also a part of Layout only.

To remove this widget, Remove the following code from the activity_main.xml file.

 <android.support.design.widget.FloatingActionButton  
 android:id="@+id/fab"  
 android:layout_width="wrap_content"  
 android:layout_height="wrap_content"  
 android:layout_gravity="bottom|end"  
 android:layout_margin="@dimen/fab_margin"  
 android:src="@android:drawable/ic_dialog_email" />  

 

Also delete the unnecessary code from the MainActivity.java

 FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);  
 fab.setOnClickListener(new View.OnClickListener() {  
   @Override  
   public void onClick(View view) {  
     Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)  
         .setAction("Action", null).show();  
   }  
 });  

 

Now you are good to go without the Floating Action Button. 🙂



 

What is API (Application Programming Interface) ? — March 27, 2015

What is API (Application Programming Interface) ?

Hello friends,if you are a developer you must have heard about API or you must have seen it in any post on the internet regarding web development or software development.

So today I will introduce you to API which stands for Application Programming Interface.

Suppose you are making any app,software or any website,and you want to integrate Facebook in it.Well,that’s where you need Facebook API.

API for an application is the set of programming interaction and standards to access that application.

A good API makes it easy for the developer to interact with the application.
 

WHY TO USE API?

An API resembles to Software as a Service(SaaS).Developers don’t need to build everything from the scratch.They can just use the API for their work.

Using the API makes it easy,efficient and time reducing for developers.

Popular APIs

1.Google Map API

2.Amazon Product Advertising API

3.YouTube API

4.Facebook API

Hope it helped you in getting introduced to APIs

Thank You. 🙂