Android Beginner Lessons

JUDUL 1	JUDUL 2	JUDUL 3
...	...	...
...	...	...
...	...	...
...	...	...
...	...	...

class

<?xml version="1.0" encoding="utf-8"?>

Setelah memahami Recyclerview/Cardview dan Toolbar di posting kemarin, selanjutnya kita akan memasukan gambar ke Cardview.

Tutor ini lanjutan dari Cardview with Toolbar, jadi ikuti dulu tutorialnya dari awal di postingan sebelumnya.

Untuk memasukan gambar ke item cardview perlu menambah beberapa code ke xml dan adapter.
ok, langsung saja..

1. Download bahan untuk iconnya disini, extract, masukkan ke folder res/drawable-hdpi
2. Buka item_recycle.xml, perhatikan tambahan codenya atau ganti saja semua isinya dengan ini:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:id="@+id/cardlist_item"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="4dp"
    card_view:cardElevation="@dimen/cardview_default_elevation"
    android:foreground="?android:attr/selectableItemBackground"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginTop="5dp"
    android:layout_marginBottom="5dp">

    <RelativeLayout
        android:layout_height="wrap_content"
        android:layout_width="wrap_content">

        <ImageView
            android:id="@+id/icon_item"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:padding="4dp"
            android:scaleType="centerCrop"
            android:src="@mipmap/ic_launcher" />

        <LinearLayout
            android:layout_width="match_parent"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin"
            android:paddingTop="8dp"
            android:paddingBottom="8dp"
            android:gravity="center_vertical"
            android:layout_height="?attr/listPreferredItemHeight"
            android:orientation="vertical"
            android:layout_toEndOf="@id/icon_item">

            <TextView
                android:id="@+id/listitem_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Android version name"
                android:textColor="@color/primary_text_default_material_light"
                android:textSize="@dimen/abc_text_size_subhead_material" />

            <TextView
                android:id="@+id/listitem_subname"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Test"
                android:paddingTop="3dp"
                android:textColor="@color/secondary_text_default_material_light"
                android:textSize="@dimen/abc_text_size_caption_material" />
        </LinearLayout>

    </RelativeLayout>

</android.support.v7.widget.CardView>

3. Buka arrays.xml, tambahkan ini di bagian bawah sebelum code </resources> 

    <string-array name="list_icon">
        <item>a</item>
        <item>b</item>
        <item>c</item>
        <item>d</item>
        <item>e</item>
        <item>f</item>
        <item>g</item>
        <item>h</item>
        <item>i</item>
        <item>j</item>
        <item>k</item>
        <item>l</item>
        <item>m</item>
    </string-array>

4. Buka ItemController.java, perhatikan tambahan codenya :

import android.support.v7.widget.CardView;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

/**
 * Created by AbangAzmi on 11/14/2015.
 */
public class ItemController extends RecyclerView.ViewHolder implements View.OnClickListener {

    //Variable
    CardView cardItemLayout;
    ImageView icon; // Picture
    TextView title;
    TextView subTitle;

    public ItemController(View itemView) {
        super(itemView);

        //Set id
        cardItemLayout = (CardView) itemView.findViewById(R.id.cardlist_item);
        
        //Tambahan untuk id Picture
        icon = (ImageView)itemView.findViewById(R.id.icon_item);
        
        //id Text
        title = (TextView) itemView.findViewById(R.id.listitem_name);
        subTitle = (TextView) itemView.findViewById(R.id.listitem_subname);

        //onClick
        itemView.setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
        //tampilkan toas ketika click
        Toast.makeText(v.getContext(),
                String.format("Position %d", getAdapterPosition()),
                Toast.LENGTH_SHORT).show();
    }

}

5. Buka MyRecyclerAdapter.java, perhatikan juga tambahannya:

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by AbangAzmi on 11/14/2015.
 */
public class MyRecyclerAdapter extends RecyclerView.Adapter<ItemController> {

    Context context;
    List<String> versionModels;

    //Array tambahan untuk picture
    public static List<String> ic = new ArrayList<String>();

    //Text
    public static List<String> titleOs = new ArrayList<String>();
    public static List<String> osSubList = new ArrayList<String>();

    //Set List Items
    public void setCardList(Context context) {
        
        //Ambil nama picture dari array list_icon
        String[] icon = context.getResources().getStringArray(R.array.list_icon);
        
        //text
        String[] listArray = context.getResources().getStringArray(R.array.os_version);
        String[] subTitleArray = context.getResources().getStringArray(R.array.os_sub_version);
        for (int i = 0; i < listArray.length; ++i) {
            ic.add(icon[i]);
            titleOs.add(listArray[i]);
            osSubList.add(subTitleArray[i]);
        }
    }

    public MyRecyclerAdapter(Context context) {
        this.context = context;
        setCardList(context);
    }

    public MyRecyclerAdapter(List<String> versionModels) {
        this.versionModels = versionModels;

    }

    @Override
    public ItemController onCreateViewHolder(ViewGroup viewGroup, int i) {
        View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_recycle, viewGroup, false);
        ItemController viewHolder = new ItemController(view);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(ItemController versionViewHolder, int i) {
        
        //Cari Picture di drawable sesuai nama dari array
        //lalu menyusunnya sesuai urutan dari atas ke bawah
        int listIcon = context.getResources().getIdentifier(String.valueOf(ic.get(i)),
                "drawable", context.getPackageName());
        versionViewHolder.icon.setImageResource(listIcon);

        versionViewHolder.title.setText(titleOs.get(i));
        versionViewHolder.subTitle.setText(osSubList.get(i));
    }

    @Override
    public int getItemCount() {

        return titleOs == null ? 0 : titleOs.size();
    }
}

6. Hasilnya: 
   
7. Selesai.. 

Pada posting kali ini kita akan bahas tentang Cardview dan Toolbar

RecyclerView
RecyclerView hampir sama dengan Listview dalam hal penggunaan adapter tapi dengan tampilan yang lebih baru dan dukungan yang lebih luas.

Toolbar
Toolbar adalah pengembangan Actionbar, di api-level 21 kebawah jika ingin menggunakan Toolbar maka harus memakai library appcompat-v7, tapi untuk api-level 23 keatas maka Toolbar sudah tersedia di framework tanpa perlu menggunakan library appcompat-v7.

Untuk menggunakan Cardview dan Toolbar diperlukan:

• Android Studio atau Eclipse
• SDK terbaru

1. Buat project baru
2. Pilih"Blank Activity" di jendela pemilihan template

3. Setelah Android Studio menampilkan area kerja, buka file styles.xml di folder res/values, lalu ganti stylenya jadi NoActionBar, seperti ini :

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
        <!-- Customize your theme here. -->
    </style>

</resources>


Atau :

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
    </style>

</resources>

4. Bikin array string untuk membuat list. Caranya klik kanan di folder values pilih New >> Values resouce file, beri nama arrays
5. Isikan ini kedaam file arrays.xml yang baru saja dibuat :

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="os_version">
        <item>Alpha</item>
        <item>Beta</item>
        <item>Cupcake</item>
        <item>Donut</item>
        <item>Eclair</item>
        <item>Frozen yogurt</item>
        <item>Ginger Bread</item>
        <item>Honeycomb</item>
        <item>Ice Cream Sandwich</item>
        <item>Jelly Bean</item>
        <item>Kitkat</item>
        <item>Lollipop</item>
        <item>Marshmallow</item>
    </string-array>

    <string-array name="os_sub_version">
        <item>Api Level 1.0</item>
        <item>Api Level 1.3</item>
        <item>Api Level 1.5</item>
        <item>Api Level 1.6</item>
        <item>Api Level 2.0</item>
        <item>Api Level 2.2</item>
        <item>Api Level 3.0 - 3.3</item>
        <item>Api Level 3.4</item>
        <item>Api Level 4.0.x</item>
        <item>Api Level 4.1.x - 4.2.x</item>
        <item>Api Level 4.4.x</item>
        <item>Api Level 5.x</item>
        <item>Api Level 6.0</item>
    </string-array>

</resources>

6. Bikin colors.xml di folder values, caranya sama dengan bikin arrays.
7. Isikan ini :

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--Indigo 500-->
    <color name="primary_500">#3F51B5</color>
    <!--Indigo 700-->
    <color name="primary_700">#303F9F</color>
    <!--Pink 500-->
    <color name="accent_500">#E91E63</color>
    <!--Pink 700-->
    <color name="accent_700">#C2185B</color>
    <color name="black_trans80">#14000000</color>


    <color name="blue_grey">#455A64</color>
    <color name="red">#F44336</color>
    <color name="pink">#E91E63</color>
    <color name="purple">#9C27B0</color>
    <color name="deep_purple">#673AB7</color>
    <color name="indigo">#3F51B5</color>
    <color name="blue">#2196F3</color>
    <color name="light_blue">#03A9F4</color>
    <color name="cyan">#00BCD4</color>
    <color name="teal">#009688</color>
    <color name="green">#4CAF50</color>
    <color name="light_green">#8BC34A</color>
    <color name="lime">#CDDC39</color>
    <color name="yellow">#FFEB3B</color>
    <color name="amber">#FFC107</color>
    <color name="orange">#FF9800</color>
    <color name="deep_orange">#FF5722</color>
</resources> 

8. Tahap selanjutnya memasukkan library yang dibutuhkan yaitu:
   
   • appcompat-v7
   • cardview-v7
   • recyclerview-v7
   Caranya, klik kanan di folder project, pilih Open module settings, selanjutnya ikuti langkah di gambar berikut ini :
   
   
   
   
   
   
   
9. Lakukan langkah diatas untuk memasukkan semua library.
   Atau memasukkan library bisa juga dengan cara manual asal kita mengetahui versi SDK yang kita pakai, misal versi 23.1.0, maka caranya buka file build.gradle di folder app, dibagian dependencies isikan ini :

    compile fileTree(include: ['*.jar'], dir: 'libs')
    compile 'com.android.support:appcompat-v7:23.1.0'
    compile 'com.android.support:cardview-v7:23.1.0'
    compile 'com.android.support:recyclerview-v7:23.1.0'
 


Sehingga menjadi

apply plugin: 'com.android.application'

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.1"

    defaultConfig {
        applicationId "net.zam.samplecard"
        minSdkVersion 14
        targetSdkVersion 23
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    compile 'com.android.support:appcompat-v7:23.1.0'
    compile 'com.android.support:cardview-v7:23.1.0'
    compile 'com.android.support:recyclerview-v7:23.1.0'
} 



10. Setelah proses diatas, lakukan sinkronisasi gradle dengan mengklik ikon Sync Project with Gradle Files
    
11. Bikin file shadow.xml di folder res/drawable, ini untuk menambah efek bayangan toolbar

shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="90"
        android:endColor="#80000000"
        android:startColor="@android:color/transparent" />
</shape>



12. Tahap selanjutnya membuat Layout, ada tiga layout yang akan kita buat yaitu


• activity_main.xml
• item_recycle.xml
• toolbar.xml
jika sudah ada file activiy_main.xml ganti saja isinya.
 
 
activity_main.xml


<RelativeLayout 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:fitsSystemWindows="true"
    tools:context="net.zam.design.MainActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="?attr/actionBarSize">

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

    </FrameLayout>

    <include layout="@layout/toolbar" />

</RelativeLayout>


 
item_recycle.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:id="@+id/cardlist_item"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="4dp"
    card_view:cardElevation="@dimen/cardview_default_elevation"
    android:foreground="?android:attr/selectableItemBackground"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginTop="5dp"
    android:layout_marginBottom="5dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="8dp"
        android:paddingBottom="8dp"
        android:gravity="center_vertical"
        android:layout_height="?attr/listPreferredItemHeight"
        android:orientation="vertical">

        <TextView
            android:id="@+id/listitem_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Android version name"
            android:textColor="@color/primary_text_default_material_light"
            android:textSize="@dimen/abc_text_size_subhead_material" />

        <TextView
            android:id="@+id/listitem_subname"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Test"
            android:paddingTop="3dp"
            android:textColor="@color/secondary_text_default_material_light"
            android:textSize="@dimen/abc_text_size_caption_material" />
    </LinearLayout>

</android.support.v7.widget.CardView>


 
toolbar.xml

<?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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_elevated"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/red"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <!-- Menambah effect shadow di toolbar -->
    <View
        android:layout_width="match_parent"
        android:layout_height="4dp"
        android:background="@drawable/shadow" />


</LinearLayout>



13. Langkah selanjutnya membuat file java. Ada tiga yang akan kita buat :
• MainActivity.java 
• ItemController.java
• MyRecyclerAdapter.java 


MainActivity.java


import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.CardView;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;


public class MainActivity extends AppCompatActivity {

    //Variable
    Toolbar toolbar;
    RecyclerView rv;
    MyRecyclerAdapter adapter;
    CardView cv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        //Layout
        setContentView(R.layout.activity_main);

        //Toolbar
        toolbar = (Toolbar) findViewById(R.id.toolbar_elevated);
        if (toolbar != null) {
            setSupportActionBar(toolbar);
        }

        toolbar.setTitle("");

        //Cardview
        cv = (CardView) findViewById(R.id.cardlist_item);
        rv = (RecyclerView) findViewById(R.id.home_recyclerview);

        rv.setHasFixedSize(true);
        rv.setLayoutManager(new LinearLayoutManager(this));
        rv.setItemAnimator(new DefaultItemAnimator());

        //Adapter
        if (adapter == null) {
            adapter = new MyRecyclerAdapter(this);
            rv.setAdapter(adapter);
        }

        final Context context = this;
    }

    //Menu
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.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();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

}



ItemController.java


import android.support.v7.widget.CardView;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;

/**
 * Created by AbangAzmi on 11/14/2015.
 */
public class ItemController extends RecyclerView.ViewHolder implements View.OnClickListener {

    //Variable
    CardView cardItemLayout;
    TextView title;
    TextView subTitle;

    public ItemController(View itemView) {
        super(itemView);

        //set id
        cardItemLayout = (CardView) itemView.findViewById(R.id.cardlist_item);
        title = (TextView) itemView.findViewById(R.id.listitem_name);
        subTitle = (TextView) itemView.findViewById(R.id.listitem_subname);

        //onClick
        itemView.setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
        //tampilkan toas ketika click
        Toast.makeText(v.getContext(),
                String.format("Position %d", getAdapterPosition()),
                Toast.LENGTH_SHORT).show();
    }
}


MyRecyclerAdapter.java


import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by AbangAzmi on 11/14/2015.
 */
public class MyRecyclerAdapter extends RecyclerView.Adapter {

    Context context;
    List versionModels;

    public static List titleOs = new ArrayList();
    public static List osSubList = new ArrayList();

    //set item list
    public void setCardList(Context context) {
        String[] listArray = context.getResources().getStringArray(R.array.os_version);
        String[] subTitleArray = context.getResources().getStringArray(R.array.os_sub_version);
        for (int i = 0; i < listArray.length; ++i) {
            titleOs.add(listArray[i]);
            osSubList.add(subTitleArray[i]);
        }
    }

    public MyRecyclerAdapter(Context context) {
        this.context = context;
        setCardList(context);
    }


    public MyRecyclerAdapter(List versionModels) {
        this.versionModels = versionModels;

    }

    @Override
    public ItemController onCreateViewHolder(ViewGroup viewGroup, int i) {
        View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_recycle, viewGroup, false);
        ItemController viewHolder = new ItemController(view);
        return viewHolder;
    }


    @Override
    public void onBindViewHolder(ItemController versionViewHolder, int i) {
        versionViewHolder.title.setText(titleOs.get(i));
        versionViewHolder.subTitle.setText(osSubList.get(i));

    }

    @Override
    public int getItemCount() {
        return titleOs == null ? 0 : titleOs.size();
    }


}

14. Jika ada error pada code java atau xml coba lakukan Sync Gradle seperti langkah 10.
15. Run project
    
16. Selesai
    

ListActivity yaitu menyusun object secara vertikal tanpa menggunakan layout karena langsung diatur oleh activity, berbeda dengan ListView yang membutuhkan layout untuk menampilkan list.

ListActivity dan ListView berbeda dalam penulisan code java tapi sama dalam hal penggunaan adapter. Posting kali ini kita mulai dari ListActivity terlebih dahulu.

ListActivity dalam hal penggunaan adapter terbagi dua, yaitu

1.  Menggunakan adapter default Android
2.  Menggunakan custom adapter, ini supaya kita lebih leluasa mengatur susunan item per list.

OK.. cekidot

• Buat project baru, pilih Blank Activity pada pilihan template aplikasi
• Buat layout baru, beri nama item_basic.xml, copy ini :

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/text_basic"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:padding="20dp"
        android:text="Item Text"
        android:textAppearance="?android:attr/textAppearanceMedium" /> 

• Buka MainActivity.java, hapus semua kecuali package bla.bla.bla
  
• Ganti dengan ini :
  

import android.app.ListActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends ListActivity {

 //membuat variable list
 static final String[] ANDROID_LIST = new String[] {
  "Alpha",
  "Beta",
  "Cupcake",
  "Donut",
  "Eclair",
  "Frozen yogurt",
  "Ginger Bread",
  "Honeycomb",
  "Ice Cream Sandwich",
  "Jelly Bean",
  "Kitkat",
  "Lollipop",
  "Marshmallow"
  };
 
 //variable memanggil ArrayAdapter (default)
 private ArrayAdapter<String> adapter;

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  
  //memuat list melalui adapter
  adapter = new ArrayAdapter<String>(
    this,    //activity
    R.layout.item_basic, //layout berisi textview
    ANDROID_LIST  //memanggil list
    );

  //set adapter
  setListAdapter(adapter);
  
  //set onClick
  ListView listView = getListView();oject baru dengan Blang Activity
  listView.setOnItemClickListener(new OnItemClickListener() {
   public void onItemClick(AdapterView<?> parent, View view,
     int position, long id) {
    
       // ketika di klik muncul toast
       Toast.makeText(getApplicationContext(),((TextView) view).getText(), Toast.LENGTH_SHORT).show();
   }
  });

 }

}

Hasilnya :


Custom Adapter disini sangat membebaskan kita untuk menaruh lebih dari satu item untuk setiap list, bahkan bisa menambahkan gambar.

• Buat project baru
• Buat layout baru, beri nama item_basic_with_image.xml
• Copy ini : 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="20dp"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/image_item"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:padding="4dp"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/text_item"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="12dp"
        android:layout_toRightOf="@id/image_item"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />

</RelativeLayout>

• Download dulu bahannya disini, extract, masukkan ke res/drawable-hdpi 
• Buat Class baru untuk adapternya, beri nama OsVersionAdapter.java, copy ini :

import android.app.Activity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class OsVersionAdapter extends ArrayAdapter<String> {
  
  private final Activity context;
  private final String[] osName;
  private final int[] img;
  
  public OsVersionAdapter(Activity context, String[] itemname, int[] img) {
   super(context, R.layout.item_basic_with_image, itemname);
   // TODO Auto-generated constructor stub
   
   this.context=context;
   this.osName=itemname;
   this.img=img;
  }
  
  public View getView(int position,View view,ViewGroup parent) {
   LayoutInflater inflater=context.getLayoutInflater();
   View rowView=inflater.inflate(R.layout.item_basic_with_image, null, true);
   
   ImageView iv = (ImageView) rowView.findViewById(R.id.image_item);
   TextView tv = (TextView) rowView.findViewById(R.id.text_item);
   
   iv.setImageResource(img[position]);
   tv.setText(osName[position]);
   return rowView;
   
  };

}

• Buka MainActivity.java, hapus semua code kecuali package bla.bla.bla

import android.app.ListActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;
import android.widget.Toast;

public class MainActivity extends ListActivity{
 
 String[] itemname = {
   "Alpha",
   "Beta",
   "Cupcake",
   "Donut",
   "Eclair",
   "Frozen yogurt",
   "Ginger Bread",
   "Honeycomb",
   "Ice Cream Sandwich",
   "Jelly Bean",
   "Kitkat",
   "Lollipop",
   "Marshmallow"
   };
 
 int[] imgid={
   R.drawable.a,
   R.drawable.b,
   R.drawable.c,
   R.drawable.d,
   R.drawable.e,
   R.drawable.f,
   R.drawable.g,
   R.drawable.h,
   R.drawable.i,
   R.drawable.j,
   R.drawable.k,
   R.drawable.l,
   R.drawable.m
   };
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  
  OsVersionAdapter adapter=new OsVersionAdapter(this, itemname, imgid);

  setListAdapter(adapter);

  ListView list = getListView();
  list.setOnItemClickListener(new OnItemClickListener() {
 
   @Override
   public void onItemClick(AdapterView<?> parent, View view,
     int position, long id) {
    String Slecteditem= itemname[+position];
    Toast.makeText(getApplicationContext(), Slecteditem, Toast.LENGTH_SHORT).show();
    
   }
  });
 }
}

Hasilnya :

LinearLayout termasuk kategori viewGroup yang didalamnya bisa memuat view atau layout lain.
LinearLayout mempunyai beberapa parameter dan properties untuk mengatur ukuran dan orientasi. Perhatikan tabel dibawah ini:

Parameter	Posisi	Deskripsi
Gravity	Child	Untuk mengatur posisi layout apakah sebelah kiri, kanan, atas atau lainnya di dalam layout parent.
Padding	Parent	Mengatur jarak setiap sisi child. Jarak dihitung dalam satuan px atau dip.
WeightSum	Parent	Membagi layout ke beberapa bagian secara merata antar child, misal WeightSum="4" dan didalamnya ada 4 child maka otomatis setiap child akan mengambil space sebesar 1 (25%).
Orientation	Parent	Mengatur orientasi, horisontal dan vertikal.
Margin	Child	Mengatur jarak jauh dari parent disetiap sisi. Jarak dihitung dalam satuan px atau dip.
Weight	Child	Mengatur pengambilan porsi space dari WeightSum. Misal, jika layout parent mempunyai WeightSum="3" dan ada dua child dengan rincian: child-1: layout_weight = "1", child-2: layout_weight = "2", maka : child1 akan mengambil space sebesar 1(30.3%) dan child2 mengambil space sebesar 2(66.6%).
Visibility	Parent / Child	Menentukan aktif atau tidaknya satu View atau layout ketika aplikasi dijalankan.
FitSystemWindows	Parent	Menempatkan parent layout dibawah Toolbar/Actionbar. Ini digunakan pada kasus jika keduanya bertumpuk.

Buat satu layout di folder layout, beri nama apa saja, misal: test_linear.xml
copy code dibawah ini:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" 
    android:weightSum="4" > 
    <!-- android:orientation="vertical" : mengatur object child tersusun secara vertical -->
    <!-- android:weightSum="4" : membagi layout menjadi 4 bagian @25% -->
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="@string/hello_world" />
        <!-- android:layout_weight="1" : mengambil space sebesar 1 dari 4 (25%); -->

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="@string/hello_world" />
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="@string/hello_world" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="@string/hello_world" />

</LinearLayout>

Hasilnya :


Sekarang ganti orientasinya

android:orientation="vertical"

jadi

android:orientation="horizontal"

Hasilnya :

Contoh nested LinearLayout
Perhatikan code xml dibawah ini :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:weightSum="3" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:weightSum="4" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:background="#ffffff"
            android:gravity="center"
            android:text="hello" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#ffffff"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="hello" />        

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#ffffff"
              android:layout_gravity="center"
            android:gravity="center"
            android:text="hello" />
        
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#ffffff"
            android:layout_gravity="center"
            android:gravity="center"            
            android:text="hello" />        
    </LinearLayout>
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#ffffff"
        android:gravity="center"
        android:text="hello" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#ffffff"
        android:gravity="center"
        android:text="hello" />    

</LinearLayout>

Hasilnya :

Dalam membuat sebuah aplikasi diperlukan beberapa Layout untuk menampilkan antar muka (UI atau User Interface)aplikasi, ini sangat penting karena masih banyak orang yang menilai 'sesuatu' dari tampilan. :)

Ok, langsung saja...

Pada dasarnya layout terbagi menjadi dua kategori yaitu

1. ViewGroup yaitu layout yang bisa dijadikan parent atau induk yang didalamnya ada banyak view atau viewGrup lainnya.
2. View yaitu layout yang hanya bisa dijadikan child dan tidak bisa dijadikan parent/induk
   

1. ViewGroup
 Layout yang masuk dalam kategori ViewGroup diantaranya adalah:

•  GridLayout
•  LinearLayout (vertical dan horizontal)
•  RelativeLayout
•  FrameLayout 
•  TableLayout
  

2. View
View hanya bisa dijadikan child dari ViewGroup, yang termasuk view diantaranya:

•  FormWidget
•  TextFields
•  Composite 
•  ImageView
•  Dll 

Eclipse dan Android Studio berbeda di susunan struktur foldernya, kita mulai dari Eclipse terlebih dahulu

di project MyApk pada gambar atas mempunyai susunan project seperti ini:

• src/
• gen/
• Android 6.0/
• Android Private Libraries/
• Android Dependencies/
• assets/
• bin/
• libs/
• res/

---

Untuk membuat file java baru, klik kanan di package com.zam.myapk, pilih New >> Class >> lalu isi nama Classnya.

Untuk menambah package, klik kanan di folder src , lalu pilih New >> Package >> lalu isi nama package baru, misal com.zam.myapk.settings.

• gen/ 

folder gen terbentuk otomatis dan berisi informasi tentang semua source yang kita buat, misal tentang id dari string, drawable dll. 
File R.java akan terbentuk jika semua config sudah kita atur dengan benar, misal pengaturan di Manifest , Project Build, dll.

• Android 6.0/

Folder ini menunjukan SDK yang kita pakai untuk membuild aplikasi. menggunakan versi terbaru akan lebih baik karena akan lebih luas jangkauan dukungan untuk aolikasi kita.

• Android Private Libraries/ 

Dari nama foldernya bisa diketahui folder ni berisi libs private. Libs yang dimaksud adalah libs dari framework tambahan untuk memperluas dukungan aplikasi kita.
Folder ini otomatis terbentuk jika kita memasukan libs ke project kita.

• Android Dependencies/

folder ini sama seperti folder libs private hanya saja biasanya folder ini diisi oleh libs tambahan dari pihak ketiga. Folder ini juga terbentuk otomatis jika kita memasukan libs ke project.

• assets/

Folder ini berguna untuk menyimpan file tambahan yang diperlukan oleh aplikasi, misal buat menyimpan font, file html, dll.

• bin/

 Folder ini untuk menyimpan hasil build dar project kita yang disimpan dalam format .apk.

• libs/

 Folder ini untuk menempatkan libs yang sudah berbentuk file .jar, jika tidak ada folder libs di project kita, maka buat terlebih dahulu dengan cara klik kana di folder project >> New >> Folder, lalu beri nama libs, dan selanjutnya paste file lib .jar ke dalamnya.

•  res/
  

Folder ini tak kalah pentingnya dengan folder lainnya bahkan boleh dibilang sangat penting karena folder res/ berisi file yang berhubungan dengan antar muka aplikasi dari mulai teks, bahasa, gambar, ikon, tampilan, dll.

NOTE:  Catatan diatas diambil pengalaman membuat aplikasi dan boleh dibilang kebanyakan adalah persepsi penulis sendiri, jadi jika ada kekeliruan mohon koreksi dari teman-teman pembaca..


 

Jika kita membuka sebuah aplikasi di ponsel android maka akan muncul tampilan untuk melakukan interaksi dengan aplikasi tersebut, tampilan tersebut adalah Layout dan yang mengatur dan menanganinya adalah Activity.
Sebuah Activity mempunyai cara keja yang sistematis untuk mengatur bagaimana sebuah aplikasi ketika dijalankan, berhenti, pause dan resume.
Dari gambar diatas kita bisa menyimpulkan bahwa activity mengatur seluruh perputaran kerja sebuah aplikasi atau biasa disebut Lifecycle. 

Mari kita selidiki lebih jauh :)

• Buka Eclipse atau Android Studio
• Buat project baru, bisa dilihat disini  atau disini
• Pilih template aplikasi "Blank Activity"
• Setelah Eclipse menampilkan area kerja, buka MainActivity
  
• Hapus semua kode di MainActivity.java kecuali baris pertama yaitu baris package bla.bla
• Ganti jadi begini :

  import android.os.Bundle;
  import android.app.Activity;
  import android.util.Log;
  
  public class MainActivity extends Activity {
      String msg = "Activity : "; //tag untuk melihat logcat
     
      /** onCreate dijalankan ketika memulai aplikasi. */
      @Override
      public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_main);
        
          Log.d(msg, "The onCreate() event"); //tag logcat ketika onCreate
      }
  
      /** onStart dijalankan ketika aplikasi/activity menampilkan layout. */
      @Override
      protected void onStart() {
          super.onStart();
     
          //disini kita bisa menambahkan perintah apasaja yang
          //kita inginkan ketika aplikasi dimulai
     
          Log.d(msg, "The onStart() event"); //tag logcat ketika onStart, dst
      }
   
      /** onResume dijalankan ketika aplikasi/activity dijalankan kembali. */
      @Override
      protected void onResume() {
          super.onResume();
    
          //disini kita bisa menambahkan perintah apasaja yang
          //kita inginkan ketika activity dibuka kembali seperti
          //sehabis melakukan perubahan setting aplikasi 
    
      Log.d(msg, "The onResume() event");
      }
  
      /** onPause dijalankan ketika ada aplikasi lain yang berjalan di layar. */
      @Override
          protected void onPause() {
          super.onPause();
    
          Log.d(msg, "The onPause() event");
      }
  
      /** dijalankan ketika aplikasi/activity keluar. */
      @Override
      protected void onStop() {
          super.onStop();
    
          Log.d(msg, "The onStop() event");
      }
  
      /** dijalankan ketika activity diberhentikan. */
      @Override
      public void onDestroy() {
          super.onDestroy();
    
          Log.d(msg, "The onDestroy() event");
      }
  }

• Save, lalu Run 
• Tunggu sampai emulator melakukan booting
• Setelah emulator menampilkan aplikasi yang kita buat tadi, coba tutup aplikasi, buka lagi, lalu buka aplikasi lain, buka lg aplikasi kita dan tutup lagi
• Sekarang kita lihat logCat dari aplikasi kita 

dari catatan LogCat bisa diketahui urutan aktifitas sebuah activity


• Masih di LogCat,scrolll kebawah lagi
  
  disini kita bisa mengetahui bagaimana sebuah activity ketika berhenti dan dan dibuka kembali
 

 

 

Komponen aplikasi adalah bagian penting dari sebuah aplikasi Android. Komponen ini harus terhubung dengan AndroidManifest.xml file yang menggambarkan setiap komponen dari aplikasi dan bagaimana mereka berinteraksi.

Ada empat komponen utama yang dapat digunakan dalam aplikasi Android:

Komponen	Deskripsi
Activity	Untuk menampilkan antarmuka aplikasi.
Service	Untuk menjalankan proses aplikasi di belakang layar.
Broadcast Receiver	Untuk komunikasi antar activity, aplikasi dan antar device.
Content Provider	Untuk manajemen data dan database.

Activity

Sebuah Activity akan menampilkan antarmuka aplikasi di layar, sebagai contoh ketika kita membuka sebuah aplikasi maka akan muncul tampilan dari aplikasi tersebut.
Activity diimplementasikan sebagai subclass dari class Activity sebagai contoh:

public class MainActivity extends Activity {
.....
}

Service

Service adalah komponen yang berjalan di latar belakang. Sebagai contoh, Service bisa memainkan musik di latar belakang saat pengguna berada dalam aplikasi yang berbeda, atau mungkin mengambil data melalui jaringan tanpa menghalangi interaksi pengguna dengan aktivitas.Service diimplementasikan sebagai subclass dari class Service sebagai contoh:

public class MyService extends Service {

}

Broadcast Receivers

Broadcast Receiver berfungsi menerima pesan intent dari aplikasi lain atau dari sistem. Sebagai contoh, suatu aplikasi mengirim pesan berisi perintah tertentu untuk aplikasi lain bahwa beberapa data telah diunduh ke perangkat dan tersedia bagi mereka untuk menggunakan apklikasi tersebut, jadi Broadcast Receiver inilah yang akan menangani komunikasi ini dan akan melakukan tindakan yang tepat.Sebuah Broadcast Receiver diimplementasikan sebagai subclass dari class BroadcastReceiver dan setiap pesan akan dikirim dan diterima sebagai objek Intent.

public class MyReceiver  extends  BroadcastReceiver {
   
   public void onReceive(context,intent){}

}

Content Providers

ContentProvider adalah penyedia konten dari satu aplikasi ke aplikasi lain atas perintah tertentu. Perintah tersebut ditangani oleh sebuah method dari class ContentResolver. Data dapat disimpan dalam sistem file, database atau di tempat lainnya.ContentProvider diimplementasikan sebagai subclass dari class ContentProvider dan harus menerapkan satu set standar API yang memungkinkan aplikasi lain untuk melakukan transaksi.

public class MyContentProvider extends  ContentProvider {
   
   public void onCreate(){}

}

Kita akan bahas lebih rinci lagi tentang semua komponen aplikasi android pada postingan mendatang... InsyaAllah...

Komponen Tambahan

Ada beberapa komponen tambahan yang digunakan dalam pembuatan aplikasi selain yang disebutkan di atas, diantaranya:

Komponen	Deskripsi
Fragment	Merupakan bagian dari antarmuka pengguna dalam Activity seperti tampilan tab atau pager
View	Tampilan UI yang dimuat di layar seperti tombol, list, gambar dan lain-lain.
Layout	Mengontrol sebuah View dengan melihatnya sebagai hirarki.
Intent	Mengirim atau menerima sebuah perintah dari aplikasi lain.
Resource	Element yang dibutuhkan secara visual seperti teks aplikasi (string), gambar, dan lain-lain.
Manifes	Konfigurasi dari sebuah aplikasi.

 Semoga bermanfaat...

1.  Jalankan Eclipse
2.  Klik menu File >> New >> Android Application Project



3.  Pada jendela dibawah ini isi properties aplikasi yang akan dibuat.
 
Keterangan gambar :
Nama aplikasi dan nama project diisi bebas.
Minimum SDK yaitu minimum device yang akan bisa menjalankan aplikasi.
Target SDK yaitu target prioritas device
Compile With : pilihan untuk membuild aplikasi


4. Dijendela dibawah ini biarkan secara default. Jika ingin menyimpan project di folder tertentu maka hilangkan tanda di "Create Project in Workspace" lalu klik tombol "Select.." untuk menentukan folder



5. Langkah berikutnya pilih salahsatu template yang tersedia, misal Navigation Drawer Activity



6. Pilih Finish di jendela berikutnya



7.  Eclipse akan memproses hasil configurasi yang sudah kita buat dan menampilkan area kerja untuk menulis program aplikasi.
8. Untuk mencoba hasil configurasi yang kita buat tadi, klik kanan di folder project, di contoh tadi adalah folder MyApk, pilih "Run As >> Android Application



9.  Jika sebelumnya kita sudah membuat emulator maka Eclipse akan otomatis memilih emulator yang ada sebagai device, tunggu emulator melakukan boot



10.  Emulator dengan posisi layar terkunci, drag menggunakan mouse dari bawah keatas untuk membuka kunci layar



11.  Emulator menjalankan aplikasi MyApk



12.  Selesai...