{"id":582,"date":"2016-01-15T07:24:03","date_gmt":"2016-01-15T07:24:03","guid":{"rendered":"http:\/\/abhiandroid.com\/ui\/?p=582"},"modified":"2018-06-05T08:05:53","modified_gmt":"2018-06-05T08:05:53","slug":"baseadapter-tutorial-example","status":"publish","type":"post","link":"https:\/\/abhiandroid.com\/ui\/baseadapter-tutorial-example.html","title":{"rendered":"BaseAdapter Tutorial With Example In Android Studio"},"content":{"rendered":"<p>Before we share BaseAdapter it is first important to revise Adapter. In android, an adapter is a bridge between UI component and data source that helps us to fill data in the UI component. It holds the data and send the data to adapter view then view can takes the data from the adapter view and shows the data on different views like as list view, grid view, spinner etc. For more customization of views we uses the base adapter. Now lets discuss BaseAdapter class.<\/p>\n<ul>\n<li>BaseAdapter is a common base class of a general implementation of an Adapter that can be used in ListView, GridView, Spinner etc.<\/li>\n<li>Whenever you need a customized list in a ListView or customized grids in a GridView you create your own adapter and extend base adapter in that.<\/li>\n<li>Base Adapter can be extended to create a custom Adapter for displaying a custom list item.<\/li>\n<\/ul>\n<p><span style=\"color: #ff0000;\"><strong>Important Note:<\/strong><\/span> ArrayAdapter is also an implementation of BaseAdapter.<\/p>\n<p><strong>Here is the code of Custom Adapter when we extends the BaseAdapter in that:<\/strong><\/p>\n<pre>public class CustomAdapter extends BaseAdapter {\r\n\r\n@Override\r\npublic int getCount() {\r\nreturn 0;\r\n}\r\n\r\n@Override\r\npublic Object getItem(int i) {\r\nreturn null;\r\n}\r\n\r\n@Override\r\npublic long getItemId(int i) {\r\nreturn 0;\r\n}\r\n\r\n@Override\r\npublic View getView(int i, View view, ViewGroup viewGroup) {\r\n\r\nreturn null;\r\n}\r\n<\/pre>\n<p>In the above code snippet we see the overrided methods of BaseAdapter which are used to set the data in a list, grid or a spinner. From there we mainly used two functions getCount() and getView().<\/p>\n<p><span style=\"text-decoration: underline;\"><span style=\"color: #008000;\"><strong>Let&#8217;s discuss all these functions in detail:<\/strong><\/span><\/span><\/p>\n<p><span style=\"color: #008000;\"><strong> 1. getCount():<\/strong><\/span><\/p>\n<p>The getCount() function returns the total number of items to be displayed in a list. It counts the value from array list size() method or an array\u2019s length. For example, if we have an list of elements in an arraylist and we have to display the items in a list view then we can count the total number of elements using the size function and then that integer value is returned by the function getCount() as shown below.<\/p>\n<pre>@Override\r\npublic int getCount() {\r\nint count=arrayList.size(); \/\/counts the total number of elements from the arrayList\r\nreturn count;\/\/returns the total count to adapter\r\n}<\/pre>\n<p><span style=\"color: #008000;\"><strong>2. getView(int i, View view, ViewGroup viewGroup):<\/strong><\/span><\/p>\n<p>This function is automatically called when the list item view is ready to be displayed or about to be displayed. In this function we set the layout for list items using LayoutInflater class and then add the data to the views like ImageView, TextView etc.<\/p>\n<p>Below is the getView function\u2019s example code with explanation included in which we set the layout using LayoutInflater and then get the view\u2019s id and implement them.<\/p>\n<pre>@Override\r\npublic View getView(int i, View view, ViewGroup viewGroup) {\r\nview = inflter.inflate(R.layout.activity_gridview, null);\/\/set layout for displaying items\r\nImageView icon = (ImageView) view.findViewById(R.id.icon);\/\/get id for image view\r\nicon.setImageResource(flags[i]);\/\/set image of the item\u2019s\r\nreturn view;\r\n}\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>3. getItem(int i):<\/strong><\/span><\/p>\n<p>This function is used to\u00a0Get the data item associated with the specified position in the data set to obtain the corresponding data of the specific location in <span id=\"IL_AD2\" class=\"IL_AD\">the collection<\/span> of data items.<\/p>\n<p>Below is the example code in which we returns the array list&#8217;s item according to position.<\/p>\n<pre>@Override\r\npublic Object getItem(int i) {\r\nreturn arrayList.get(i);\r\n}\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>4. getItemId(int i):<\/strong><\/span><\/p>\n<p>As for the getItemId (int position), it returns the corresponding to the position item ID. The function returns a long value of item position to the adapter.<\/p>\n<p>Below is the code in which we returns the position.<\/p>\n<pre>@Override\r\npublic long getItemId(int i) {\r\nreturn i;\r\n}<\/pre>\n<hr \/>\n<h4><strong>BaseAdapter Example In Android Studio:<\/strong><\/h4>\n<p><span style=\"color: #008000;\"><strong>Example 1:<\/strong><\/span> Example of BaseAdapter for displaying Animal images in grids using GridView.<\/p>\n<p>In the below example we display animals images in the form of grids using custom adapter to show the usage of BaseAdapter. Below is the final output and code with explanation:<\/p>\n<p>[cp_modal id=&#8221;cp_id_26b43&#8243;]<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2150\" src=\"\/ui\/wp-content\/uploads\/2016\/08\/Download-Code1.png\" alt=\"Download Code\" width=\"439\" height=\"65\" srcset=\"https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/08\/Download-Code1.png 439w, https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/08\/Download-Code1-300x44.png 300w\" sizes=\"auto, (max-width: 439px) 100vw, 439px\" \/>[\/cp_modal]<\/p>\n<p><center><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-588\" src=\"\/ui\/wp-content\/uploads\/2016\/01\/BaseAdapter-Example-Using-Gridview-167x300.jpg\" alt=\"BaseAdapter Example Using Gridview\" width=\"167\" height=\"300\" srcset=\"https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/01\/BaseAdapter-Example-Using-Gridview-167x300.jpg 167w, https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/01\/BaseAdapter-Example-Using-Gridview.jpg 375w\" sizes=\"auto, (max-width: 167px) 100vw, 167px\" \/><\/center><span style=\"color: #008000;\"><strong>Step 1:<\/strong><\/span> Create a new project and name it BaseAdapterExample.<\/p>\n<p><span style=\"color: #008000;\"><strong>Step 2: <\/strong><\/span>Now open res -&gt; layout -&gt; activity_main.xml (or) main.xml and add following code. Here we will create Gridview inside LinearLayout:<\/p>\n<pre>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"match_parent\"\r\nandroid:orientation=\"vertical\"&gt;\r\n\r\n&lt;GridView\r\nandroid:id=\"@+id\/simpleGridView\"\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:footerDividersEnabled=\"false\"\r\nandroid:numColumns=\"3\" \/&gt;\r\n&lt;\/LinearLayout&gt;<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 3:<\/strong><\/span> Create a new Activity activity_gridview.xml inside layout and add the below code:<\/p>\n<pre>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:orientation=\"vertical\"&gt;\r\n\r\n    &lt;ImageView\r\n        android:id=\"@+id\/icon\"\r\n        android:layout_width=\"100dp\"\r\n        android:layout_height=\"100dp\"\r\n        android:scaleType=\"fitXY\"\r\n        android:layout_margin=\"5dp\"\r\n        android:layout_gravity=\"center_horizontal\" \/&gt;\r\n&lt;\/LinearLayout&gt;<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 3:<\/strong><\/span> Now open app -&gt; java -&gt; package -&gt; MainActivity.java and add the below code. Make sure you have images saved in drawable folder with the names we have used or else change the name based on the images present in your drawable folder.<\/p>\n<pre>package example.abhiandriod.baseadapterexample;\r\n\r\nimport android.app.Activity;\r\nimport android.os.Bundle;\r\nimport android.widget.GridView;\r\n\r\npublic class MainActivity extends Activity {\r\n\r\nGridView simpleGrid;\r\nint animals[] = {R.drawable.animal13, R.drawable.animal14, R.drawable.animal15, R.drawable.animal16, R.drawable.animal17, R.drawable.animal18, R.drawable.animal15, R.drawable.animal16, R.drawable.animal17};\r\n\r\n@Override\r\nprotected void onCreate(Bundle savedInstanceState) {\r\nsuper.onCreate(savedInstanceState);\r\nsetContentView(R.layout.activity_main);\r\nsimpleGrid = (GridView) findViewById(R.id.simpleGridView);\r\nCustomAdapter customAdapter = new CustomAdapter(getApplicationContext(), animals);\r\nsimpleGrid.setAdapter(customAdapter);\r\n}\r\n}\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 4:<\/strong><\/span> Create a new class CustomAdapter.java inside package and add the following code<\/p>\n<pre>package example.abhiandriod.baseadapterexample; \/\/Use your package\r\n\r\nimport android.content.Context;\r\nimport android.view.LayoutInflater;\r\nimport android.view.View;\r\nimport android.view.ViewGroup;\r\nimport android.widget.BaseAdapter;\r\nimport android.widget.ImageView;\r\n\r\npublic class CustomAdapter extends BaseAdapter {\r\nContext context;\r\nint animals[];\r\nLayoutInflater inflter;\r\n\r\npublic CustomAdapter(Context applicationContext, int[] animals) {\r\nthis.context = applicationContext;\r\nthis.animals = animals;\r\ninflter = (LayoutInflater.from(applicationContext));\r\n}\r\n\r\n@Override\r\npublic int getCount() {\r\nreturn animals.length;\r\n}\r\n\r\n@Override\r\npublic Object getItem(int i) {\r\nreturn null;\r\n}\r\n\r\n@Override\r\npublic long getItemId(int i) {\r\nreturn 0;\r\n}\r\n\r\n@Override\r\npublic View getView(int i, View view, ViewGroup viewGroup) {\r\nview = inflter.inflate(R.layout.activity_gridview, null);\r\nImageView icon = (ImageView) view.findViewById(R.id.icon);\r\nicon.setImageResource(animals[i]);\r\nreturn view;\r\n}\r\n}\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>Output:<\/strong><\/span><\/p>\n<p>Now run the App in Emulator \/ AVD and you will see Animals listed in Grids. So this is one use of BaseAdapter in Gridview.<\/p>\n<p><center><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-588\" src=\"\/ui\/wp-content\/uploads\/2016\/01\/BaseAdapter-Example-Using-Gridview-167x300.jpg\" alt=\"BaseAdapter Example Using Gridview\" width=\"167\" height=\"300\" srcset=\"https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/01\/BaseAdapter-Example-Using-Gridview-167x300.jpg 167w, https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/01\/BaseAdapter-Example-Using-Gridview.jpg 375w\" sizes=\"auto, (max-width: 167px) 100vw, 167px\" \/><\/center><\/p>\n<hr \/>\n<p><span style=\"color: #008000;\"><strong>Example 2:<\/strong><\/span> Example of BaseAdapter to display list of countries in a ListView using Custom BaseAdapter<\/p>\n<p>In the below example we display list of countries with their flags using custom adapter to show the usage of BaseAdapter. Below is the final output and code with explanation step by step.<\/p>\n<p>[cp_modal id=&#8221;cp_id_0b715&#8243;]<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2150\" src=\"\/ui\/wp-content\/uploads\/2016\/08\/Download-Code1.png\" alt=\"Download Code\" width=\"439\" height=\"65\" srcset=\"https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/08\/Download-Code1.png 439w, https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/08\/Download-Code1-300x44.png 300w\" sizes=\"auto, (max-width: 439px) 100vw, 439px\" \/>[\/cp_modal]<\/p>\n<p><center><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-590\" src=\"\/ui\/wp-content\/uploads\/2016\/01\/BaseAdapter-Example-In-Listview.jpg\" alt=\"BaseAdapter Example In Listview\" width=\"354\" height=\"617\" srcset=\"https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/01\/BaseAdapter-Example-In-Listview.jpg 354w, https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/01\/BaseAdapter-Example-In-Listview-172x300.jpg 172w\" sizes=\"auto, (max-width: 354px) 100vw, 354px\" \/><\/center><span style=\"color: #008000;\"><strong>Step 1:<\/strong><\/span> Create a new project in Android Studio and name it BaseAdapterExample<\/p>\n<pre>Select File -&gt; New -&gt; New Project. Fill the forms and click \"Finish\" button.\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 2<\/strong><\/span>: Now Open app -&gt; res -&gt; layout -&gt; activity_main.xml (or) main.xml and add following code :<\/p>\n<pre>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:orientation=\"vertical\"&gt;\r\n\r\n    &lt;ListView\r\n        android:id=\"@+id\/simpleListView\"\r\n        android:layout_width=\"fill_parent\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:divider=\"@color\/material_blue_grey_800\"\r\n        android:dividerHeight=\"1dp\"\r\n        android:footerDividersEnabled=\"false\" \/&gt;\r\n&lt;\/LinearLayout&gt;\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 3:<\/strong><\/span> Now create another XML layout. In our case, we name it as activity_listview.xml. Add the below code in it. Also make sure you have iclauncher image saved in drawable folder or add it.<\/p>\n<pre>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:orientation=\"horizontal\"&gt;\r\n\r\n    &lt;ImageView\r\n        android:id=\"@+id\/icon\"\r\n        android:layout_width=\"50dp\"\r\n        android:layout_height=\"50dp\"\r\n        android:src=\"@drawable\/ic_launcher\" \/&gt;\r\n\r\n    &lt;TextView\r\n        android:id=\"@+id\/textView\"\r\n        android:layout_width=\"fill_parent\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_gravity=\"center\"\r\n        android:padding=\"@dimen\/activity_horizontal_margin\"\r\n        android:textColor=\"#000\" \/&gt;\r\n&lt;\/LinearLayout&gt;<\/pre>\n<p><strong>Step 4:<\/strong> Now open app -&gt; java-&gt; package -&gt; MainActivity.java and add the below code.<\/p>\n<pre>package example.abhiandriod.baseadapterexample;\r\n\r\nimport android.app.Activity;\r\nimport android.os.Bundle;\r\nimport android.widget.ListView;\r\n\r\npublic class MainActivity extends Activity {\r\n\r\n    ListView simpleList;\r\n    String countryList[] = {\"India\", \"China\", \"australia\", \"Portugle\", \"America\", \"NewZealand\"};\r\n    int flags[] = {R.drawable.india, R.drawable.china, R.drawable.australia, R.drawable.portugle, R.drawable.america, R.drawable.new_zealand};\r\n\r\n    @Override\r\n    protected void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n        setContentView(R.layout.activity_main);\r\n        simpleList = (ListView) findViewById(R.id.simpleListView);\r\n        CustomAdapter customAdapter = new CustomAdapter(getApplicationContext(), countryList, flags);\r\n        simpleList.setAdapter(customAdapter);\r\n    }\r\n}<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 4:<\/strong><\/span> Create new class CustomAdapter.java and add following code<\/p>\n<pre>package example.abhiandriod.baseadapterexample;\r\n\r\nimport android.content.Context;\r\nimport android.view.LayoutInflater;\r\nimport android.view.View;\r\nimport android.view.ViewGroup;\r\nimport android.widget.BaseAdapter;\r\nimport android.widget.ImageView;\r\nimport android.widget.TextView;\r\n\r\n\r\npublic class CustomAdapter extends BaseAdapter {\r\n    Context context;\r\n    String countryList[];\r\n    int flags[];\r\n    LayoutInflater inflter;\r\n\r\n    public CustomAdapter(Context applicationContext, String[] countryList, int[] flags) {\r\n        this.context = context;\r\n        this.countryList = countryList;\r\n        this.flags = flags;\r\n        inflter = (LayoutInflater.from(applicationContext));\r\n    }\r\n\r\n    @Override\r\n    public int getCount() {\r\n        return countryList.length;\r\n    }\r\n\r\n    @Override\r\n    public Object getItem(int i) {\r\n        return null;\r\n    }\r\n\r\n    @Override\r\n    public long getItemId(int i) {\r\n        return 0;\r\n    }\r\n\r\n    @Override\r\n    public View getView(int i, View view, ViewGroup viewGroup) {\r\n        view = inflter.inflate(R.layout.activity_listview, null);\r\n        TextView country = (TextView) view.findViewById(R.id.textView);\r\n        ImageView icon = (ImageView) view.findViewById(R.id.icon);\r\n        country.setText(countryList[i]);\r\n        icon.setImageResource(flags[i]);\r\n        return view;\r\n    }\r\n}<\/pre>\n<p><span style=\"color: #008000;\"><strong>Output:<\/strong><\/span><\/p>\n<p>Now run the App in Emulator \/ AVD and you will see item country names with flags listed in Listview.<\/p>\n<p><center><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-590\" src=\"\/ui\/wp-content\/uploads\/2016\/01\/BaseAdapter-Example-In-Listview-172x300.jpg\" alt=\"BaseAdapter Example In Listview\" width=\"172\" height=\"300\" srcset=\"https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/01\/BaseAdapter-Example-In-Listview-172x300.jpg 172w, https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/01\/BaseAdapter-Example-In-Listview.jpg 354w\" sizes=\"auto, (max-width: 172px) 100vw, 172px\" \/><\/center><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Before we share BaseAdapter it is first important to revise Adapter. In android, an adapter is a bridge between UI component and data source that helps us to fill data in the UI component. It holds the data and send the data to adapter view then view can takes the data from the adapter view &hellip; <a href=\"https:\/\/abhiandroid.com\/ui\/baseadapter-tutorial-example.html\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">BaseAdapter Tutorial With Example In Android Studio<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":588,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[62,1],"tags":[],"class_list":["post-582","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adapter","category-archieve"],"acf":[],"psp_head":"<title>BaseAdapter Tutorial With Example In Android Studio \u2013 Abhi Android<\/title>\r\n<meta name=\"description\" content=\"Tutorial on BaseAdapter class with example and explanation of override methods which gives more customization in listview, gridview and spinner.\" \/>\r\n<meta name=\"robots\" content=\"index,follow\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/abhiandroid.com\/ui\/baseadapter-tutorial-example.html\" \/>\r\n","_links":{"self":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/posts\/582","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/comments?post=582"}],"version-history":[{"count":1,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/posts\/582\/revisions"}],"predecessor-version":[{"id":2591,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/posts\/582\/revisions\/2591"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/media\/588"}],"wp:attachment":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/media?parent=582"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/categories?post=582"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/tags?post=582"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}