Thursday, 2 February 2017

Membuat GridView Cover Album Di Android Studio.

Thursday, 2 February 2017
Membuat GridView Cover Album Di Android Studio.
Ehmm, hello guys pada kesempatan kali ini gue mau coba bikin Custom GridView macem cover album gitu :D, ya sebenernya iseng aja sih wkkw, sering banget lupa kodingan dan makanya gue jadi sering deh nulis di blog, tentang android. soalnya Android lagi hot banget nih di era ini. okeee yaww, lanjut ngebahas kodingan deh, biar hidup lo makin serius, ketimbang ketawa ketiwi gak jelas wkkwkw, sorry broh becanda wkkw !! please jangan tuntut gue ke polisi karena penistaan :v . makin gak jelas nih, arah tulisannya wkkwkw. oke mari gue luruskan kembali wkwkwk, lanjut deh ke pokok permasalahan.

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 ;)  

GITHUB !

No comments:

Post a Comment

Bye Webster | Kebanggaan dari keburukan diri sendiri adalah penyesalan yang belum saatnya ! © 2016