 |
| Membuat GridView Cover Album Di Android Studio. |
Oke sebelomnya, siapin project kosong aja di android studio, File > New > New Project trus di sesuaikan deh nama packages dan pilih template Blank Activity kalo dikasih pilihan, dan klik finish. tunggu beberapa saat.
Okehh klo udah kelar langsung aja bikin file ImageGridModel.java, ini contoh bagus buat bikin
Setter & Getter, nah setter & getter ini adalah proses encapsulation data, jadi kita bisa setData berdasarkan nama data yang udah di declare sebelumnya contoh : private String name; dan getter ini adalah proses buat mendapatkan kembali data yang barusan di set. nahh hahaha bingung gak ?? ya penjelasan gue emang gak jelas tapi setidaknya gue mau berbagi wkkw.
Yepp langsung copy paste kode dibawah ini dengan cepat dan jangan lupa beri nama yang tadi gue sebutin :
package com.bye.project;
import android.graphics.drawable.Drawable;
/**
* Created by webster on 9/7/16.
*/
public class ImageGridModel {
private Drawable image;
private String caption;
public ImageGridModel(Drawable xImage, String xCaption) {
this.image = xImage;
this.caption = xCaption;
}
public Drawable getImage() {
return image;
}
public void setImage(Drawable image) {
this.image = image;
}
public String getCaption() {
return caption;
}
public void setCaption(String caption) {
this.caption = caption;
}
}
Nah udah di copy paste kan? kita masuk ke selanjutnya yaitu MainActivity.java, dan langsung juga aja copy paste kode dibawah biar cepet jadinya :v wkwkw.
package com.bye.project;
/**
* Created by webster on 9/7/16.
*/
import android.os.Bundle;
import android.app.Activity;
import android.support.v4.content.ContextCompat;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.Toast;
import com.bye.project.R;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends Activity {
GridView grid;
List data_cover = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
data_cover.add(new ImageGridModel(ContextCompat.getDrawable(getBaseContext().getApplicationContext(),R.drawable.blink), "Blink 182"));
data_cover.add(new ImageGridModel(ContextCompat.getDrawable(getBaseContext().getApplicationContext(),R.drawable.green_day), "Green Day"));
data_cover.add(new ImageGridModel(ContextCompat.getDrawable(getBaseContext().getApplicationContext(),R.drawable.grace_jones), "Grace Jones"));
data_cover.add(new ImageGridModel(ContextCompat.getDrawable(getBaseContext().getApplicationContext(),R.drawable.kiss), "Kiss"));
data_cover.add(new ImageGridModel(ContextCompat.getDrawable(getBaseContext().getApplicationContext(),R.drawable.motley_crue), "Motley Crue"));
data_cover.add(new ImageGridModel(ContextCompat.getDrawable(getBaseContext().getApplicationContext(),R.drawable.the_sounds), "The Sounds"));
data_cover.add(new ImageGridModel(ContextCompat.getDrawable(getBaseContext().getApplicationContext(),R.drawable.ramones), "Ramones"));
data_cover.add(new ImageGridModel(ContextCompat.getDrawable(getBaseContext().getApplicationContext(),R.drawable.david_bowie), "David Bowie"));
CustomGrid adapter = new CustomGrid(MainActivity.this, data_cover);
grid=(GridView)findViewById(R.id.grid);
grid.setAdapter(adapter);
grid.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView parent, View view, int position, long id) {
Toast.makeText(MainActivity.this, "You Clicked at Cover : " +data_cover.get(position).getCaption(), Toast.LENGTH_SHORT).show();
}
});
}
}
Okee, sedikit lagi kita mencapai finishnya, Btw ini yang pentingnya', Akhirya kita membuat adapter yang bernama CustomGrid.java, ini proses buat inflating view ! copy paste aja deh..
package com.bye.project;
/**
* Created by webster on 9/7/16.
*/
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import com.bye.project.R;
import java.util.List;
public class CustomGrid extends BaseAdapter{
private Context mContext;
private List object;
public CustomGrid(Context c, List data_cover ) {
mContext = c;
object = data_cover;
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return object.size();
}
@Override
public Object getItem(int position) {
// TODO Auto-generated method stub
return null;
}
@Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return 0;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
View grid;
LayoutInflater inflater = (LayoutInflater) mContext
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
if (convertView == null) {
grid = new View(mContext);
grid = inflater.inflate(R.layout.grid_view, null);
TextView textView = (TextView) grid.findViewById(R.id.grid_text);
ImageView imageView = (ImageView)grid.findViewById(R.id.grid_image);
textView.setText(object.get(position).getCaption());
imageView.setImageDrawable(object.get(position).getImage());
} else {
grid = (View) convertView;
}
return grid;
}
}
Nahh jadi kan..?? oiyaa Astagfirullah, gua lupa bikin xml buat MainActivity.java sama CustomGrid.java, okee Copy paste aja deh langsung, mikirnya entar, yang penting jadi ;)
Yang ini file'nya bernama 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"
tools:context=".MainActivity" >
<GridView
android:numColumns="2"
android:gravity="center"
android:columnWidth="100dp"
android:stretchMode="columnWidth"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/grid"
/>
</LinearLayout>
Kalo yang ini namanya grid_view.xml :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="5dp">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="@+id/grid_image"
android:layout_width="200dp"
android:layout_height="200dp">
</ImageView>
<TextView
android:id="@+id/grid_text"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:textSize="16dp"
android:gravity="center"
android:layout_alignBottom="@+id/grid_image"
android:layout_alignParentStart="true"
android:layout_marginBottom="17dp">
</TextView>
</RelativeLayout>
</LinearLayout>
Dan satu lagi file yang tertinggal, dan sebenernya gak terlalu krusial, soalnya udah pasti sama pas pembuatan project baru di android, filenya bernama AndroidManifest.xml, copast aja langsung GPL :
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.bye.project">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
Dan ini hasil dari semua yang sudah kita perbuat :D |
| Example Project Cover With GridView ! |
Okeh perjumpaan kita kali ini sangat istimewahh & kita sudahi saja yaa sharing kali ini, semoga mudah dipahami dan dimengerti, dan jangan lupa kabarin kalo jalan :D . Klo ada yang kurang jelas bisa ditanyakan di komentar yang ada dibawah, sampai ketemu lagi dalem episode selanjutnya, dan assalamualaikum sodarah.
Link buat download sample project Android-CustomGridView ;)
No comments:
Post a Comment