Android Studio: Cara Membuat Android Apps 3
In this part of the tutorial I’ll cover Android ListViews, ArrayAdapters, Custom Array Adapters, ListAdapter, LayoutInflator, ImageView, and a great deal about terminology that confuses people.
To learn how Android Studio works look here at my Android Studio tutorial. If you missed the first part of this tutorial it is here How to Make Android Apps. All of the code used follows the video below.
If you like videos like this, it helps me if you share it on Google Plus with a click here
Code From the Video
The first 2 files are for the first easy ListView example. The rest of the files are for the last 2 examples.
Main_Activity.java
package com.newthinktank.listviewexample.app;
import android.app.Activity; import android.os.Bundle; import android.support.v7.app.ActionBarActivity; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.AdapterView; import android.widget.ArrayAdapter; import android.widget.ListAdapter; import android.widget.ListView; import android.widget.Toast;
public class MainActivity extends ActionBarActivity {
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main);
// Simple array with a list of my favorite TV shows String[] favoriteTVShows = {"Pushing Daisies", "Better Off Ted", "Twin Peaks", "Freaks and Geeks", "Orphan Black", "Walking Dead", "Breaking Bad", "The 400", "Alphas", "Life on Mars"};
// The ListAdapter acts as a bridge between the data and each ListItem // You fill the ListView with a ListAdapter. You pass it a context represented by // this. A Context provides access to resources you need. // android.R.layout.simple_list_item_1 is one of the resources needed. // It is a predefined layout provided by Android that stands in as a default
ListAdapter theAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, favoriteTVShows);
// ListViews display data in a scrollable list ListView theListView = (ListView) findViewById(R.id.theListView);
// Tells the ListView what data to use theListView.setAdapter(theAdapter);
theListView.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
String tvShowPicked = "You selected " + String.valueOf(adapterView.getItemAtPosition(i));
Toast.makeText(MainActivity.this, tvShowPicked, Toast.LENGTH_SHORT).show();
} }); }
@Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; }
@Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); }
}
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" android:orientation="vertical" tools:context="com.newthinktank.listviewexample.app.MainActivity">
<ListView android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/theListView"></ListView>
</LinearLayout>
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" android:orientation="vertical" tools:context="com.newthinktank.listviewexample2.app.MainActivity">
<ListView android:id="@+id/listView1" android:layout_width="wrap_content" android:layout_height="wrap_content" />
</LinearLayout>
MainActivity.java
package com.newthinktank.listviewexample2.app;
import android.os.Bundle; import android.support.v7.app.ActionBarActivity; import android.view.Menu; import android.view.MenuItem; import android.widget.ArrayAdapter; import android.widget.ListAdapter; import android.widget.ListView;
public class MainActivity extends ActionBarActivity {
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main);
// Simple array with a list of my favorite TV shows String[] favoriteTVShows = {"Pushing Daisies", "Better Off Ted", "Twin Peaks", "Freaks and Geeks", "Orphan Black", "Walking Dead", "Breaking Bad", "The 400", "Alphas", "Life on Mars"};
// A View is the generic term and class for every widget you put on your screen. // Views occupy a rectangular area and are responsible for handling events // and drawing the widget.
// The ListAdapter acts as a bridge between the data and each ListItem // You fill the ListView with a ListAdapter. You pass it a context represented by // this.
// A Context provides access to resources you need. It provides the current Context, or // facts about the app and the events that have occurred with in it. // android.R.layout.simple_list_item_1 is one of the resources needed. // It is a predefined layout provided by Android that stands in as a default
ListAdapter theAdapter = new ArrayAdapter<String>(this, R.layout.row_layout, R.id.textView1, favoriteTVShows);
// We point the ListAdapter to our custom adapter // ListAdapter theAdapter = new MyAdapter(this, favoriteTVShows);
// Get the ListView so we can work with it ListView theListView = (ListView) findViewById(R.id.listView1);
// Connect the ListView with the Adapter that acts as a bridge between it and the array theListView.setAdapter(theAdapter); }
@Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; }
@Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); }
}
MyAdapter.java
package com.newthinktank.listviewexample2.app;
import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ArrayAdapter; import android.widget.ImageView; import android.widget.TextView;
// We can create custom adapters class MyAdapter extends ArrayAdapter<String> {
public MyAdapter(Context context, String[] values){
super(context, R.layout.row_layout_2, values);
}
// Override getView which is responsible for creating the rows for our list // position represents the index we are in for the array.
// convertView is a reference to the previous view that is available for reuse. As // the user scrolls the information is populated as needed to conserve memory.
// A ViewGroup are invisible containers that hold a bunch of views and // define their layout properties. @Override public View getView(int position, View convertView, ViewGroup parent) {
// The LayoutInflator puts a layout into the right View LayoutInflater theInflater = LayoutInflater.from(getContext());
// inflate takes the resource to load, the parent that the resource may be // loaded into and true or false if we are loading into a parent view. View theView = theInflater.inflate(R.layout.row_layout_2, parent, false);
// We retrieve the text from the array String tvShow = getItem(position);
// Get the TextView we want to edit TextView theTextView = (TextView) theView.findViewById(R.id.textView1);
// Put the next TV Show into the TextView theTextView.setText(tvShow);
// Get the ImageView in the layout ImageView theImageView = (ImageView) theView.findViewById(R.id.imageView1);
// We can set a ImageView like this theImageView.setImageResource(R.drawable.dot);
return theView;
}
}
row_layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">
<TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="30sp" android:textStyle="bold" android:padding="15dp" />
</LinearLayout>
row_layout_2.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal">
<ImageView android:id="@+id/imageView1" android:layout_width="25dp" android:layout_height="25dp" android:layout_marginLeft="10dp" android:layout_marginTop="25dp" android:src="@drawable/dot"/> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="30sp" android:textStyle="bold" android:padding="15dp" />
</LinearLayout>
Presentation Slides
Click the images below to view them full screen
Android ListView
Android ListView
Android ListView 3
Android ListView 4 - See more at: http://www.newthinktank.com/2014/06/make-android-apps-3/#sthash.e4sAoTo7.dpuf