Android Studio: Cara Membuat Android Apps 3

From OnnoWiki
Jump to navigation Jump to search

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



Referensi