Membuat Cardview Ala Google Play Musik

April 21, 2018 1 Comments

1.       langkah pertama siapkan kurang lebih sepuluh gambar untuk tampilan cardviewnya. gambarnya bebas bisa dicari di google

2.       selanjutnya tambahkan despendensi ini di build.gradle
compile 'com.android.support:design:25.2.0'
compile 'com.android.support:recyclerview-v7:25.2.0'
compile 'com.android.support:cardview-v7:25.2.0'
compile 'com.github.bumptech.glide:glide:3.7.0'

3.       kemudian sesuaikan style nya seperti dibawah, pada file styles.xml
<resources>



    <!-- Base application theme. -->

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

        <!-- Customize your theme here. -->

        <item name="colorPrimary">@color/colorPrimary</item>

        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>

        <item name="colorAccent">@color/colorAccent</item>

    </style>



    <style name="AppTheme.NoActionBar">

        <item name="windowActionBar">false</item>

        <item name="windowNoTitle">true</item>

    </style>



    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />



    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />



</resources>

4.       langkah selanjutnya buat layout di activity_main seperti dibawah:
<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:id="@+id/main_content"

    android:background="@android:color/white"

    android:fitsSystemWindows="true"

    tools:context="giviews.id.cardview.MainActivity">



    <android.support.design.widget.AppBarLayout

        android:id="@+id/appbar"

        android:layout_width="match_parent"

        android:layout_height="250dp"

        android:fitsSystemWindows="true"

        android:background="@color/colorAccent"

        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">



        <android.support.design.widget.CollapsingToolbarLayout

            android:id="@+id/collapsing_toolbar"

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:fitsSystemWindows="true"

            app:contentScrim="@color/colorAccent"

            app:expandedTitleMarginEnd="64dp"

            app:expandedTitleMarginStart="48dp"

            app:expandedTitleTextAppearance="@android:color/transparent"

            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <RelativeLayout

                android:layout_width="wrap_content"

                android:layout_height="wrap_content">



                <ImageView

                    android:id="@+id/backdrop"

                    android:layout_width="match_parent"

                    android:layout_height="match_parent"

                    android:fitsSystemWindows="true"

                    android:scaleType="centerCrop"

                    app:layout_collapseMode="parallax"

                    android:contentDescription="" />



                <LinearLayout

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:layout_centerInParent="true"

                    android:gravity="center_horizontal"

                    android:orientation="vertical">



                    <TextView

                        android:id="@+id/love_music"

                        android:layout_width="wrap_content"

                        android:layout_height="wrap_content"

                        android:text="@string/love_music"

                        android:textColor="@android:color/white"

                        android:textSize="30dp"/>



                    <TextView

                        android:layout_width="wrap_content"

                        android:layout_height="wrap_content"

                        android:text="@string/this_session_top_20_songs"

                        android:textColor="@android:color/white"

                        android:textSize="18dp"/>



                </LinearLayout>

            </RelativeLayout>



            <android.support.v7.widget.Toolbar

                android:id="@+id/toolbar"

                android:layout_width="match_parent"

                android:layout_height="?attr/actionBarSize"

                app:layout_collapseMode="pin"

                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />



        </android.support.design.widget.CollapsingToolbarLayout>



    </android.support.design.widget.AppBarLayout>



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

    

</android.support.design.widget.CoordinatorLayout>

5.       selanjutnya buat layout content_main.xml scriptnya seperti dibawah
<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="@android:color/white"

    app:layout_behavior="@string/appbar_scrolling_view_behavior"

    tools:showIn="@layout/activity_main"

    tools:context="giviews.id.cardview.MainActivity">



    <android.support.v7.widget.RecyclerView

        android:id="@+id/recycler_view"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:clipToPadding="false"

        android:scrollbars="vertical"/>



</RelativeLayout>

6.       langkah berikutnya buat layout album_card.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"

    xmlns:card_view="http://schemas.android.com/tools"

    android:orientation="vertical"

    android:layout_width="match_parent"

    android:layout_height="wrap_content">



    <android.support.v7.widget.CardView

        android:id="@+id/card_view"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_gravity="center"

        android:layout_margin="5dp"

        android:elevation="3dp"

        card_view:cardCornerRadius="0dp">



        <RelativeLayout

            android:layout_width="match_parent"

            android:layout_height="match_parent">



            <ImageView

                android:id="@+id/thumbnail"

                android:layout_width="match_parent"

                android:layout_height="160dp"

                android:background="?attr/selectableItemBackgroundBorderless"

                android:clickable="true"

                android:scaleType="fitXY"/>



            <TextView

                android:id="@+id/title"

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:layout_below="@+id/thumbnail"

                android:paddingTop="10dp"

                android:paddingLeft="10dp"

                android:paddingRight="10dp"

                android:textColor="@color/album_title"

                android:textSize="15dp" />



            <TextView

                android:id="@+id/count"

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:layout_below="@+id/title"

                android:paddingBottom="5dp"

                android:paddingLeft="10dp"

                android:paddingRight="10dp"

                android:textSize="12dp"/>



            <ImageView

                android:id="@+id/overflow"

                android:layout_width="20dp"

                android:layout_height="30dp"

                android:layout_alignParentRight="true"

                android:layout_below="@+id/thumbnail"

                android:layout_marginTop="10dp"

                android:scaleType="centerCrop"

                android:src="?android:attr/floatingToolbarOpenDrawable" />



        </RelativeLayout>



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



</LinearLayout>

7.       kemudian buat menu dengan nama menu_album.xml
<?xml version="1.0" encoding="utf-8"?>

<menu xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"

    tools:context="giviews.id.cardview.MainActivity">

    <item

        android:id="@+id/action_add_favourite"

        android:actionViewClass="android.widget.SearchView"

        android:orderInCategory="102"

        android:title="Add to Favourite" />

    <item

        android:id="@+id/action_play_next"

        android:actionViewClass="android.widget.SearchView"

        android:orderInCategory="102"

        android:title="Play Next" />

</menu>

8.       Untuk MainActivity.java masukan script ini
package giviews.id.cardview;



import android.content.res.Resources;

import android.graphics.Rect;

import android.support.design.widget.AppBarLayout;

import android.support.design.widget.CollapsingToolbarLayout;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.support.v7.widget.DefaultItemAnimator;

import android.support.v7.widget.GridLayoutManager;

import android.support.v7.widget.RecyclerView;

import android.support.v7.widget.Toolbar;

import android.util.TypedValue;

import android.view.View;

import android.widget.ImageView;



import com.bumptech.glide.Glide;



import java.util.ArrayList;

import java.util.List;



public class MainActivity extends AppCompatActivity {



    private RecyclerView recyclerView;

    private AlbumAdapter adapter;

    private List<Album> albumList;



    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        //mengaktifkan toolbar

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

        setSupportActionBar(toolbar);



        initCollapsingToolbar();



        recyclerView = (RecyclerView) findViewById(R.id.recycler_view);



        albumList = new ArrayList<>();

        adapter = new AlbumAdapter(this, albumList);



        RecyclerView.LayoutManager layoutManager = new GridLayoutManager(this, 2);

        recyclerView.setLayoutManager(layoutManager);

        recyclerView.addItemDecoration(new GridSpacingItemDecoration(2, dpToPx(10), true));

        recyclerView.setItemAnimator(new DefaultItemAnimator());

        recyclerView.setAdapter(adapter);



        prepareAlbums();



        try {

            Glide.with(this).load(R.drawable.cover).into((ImageView) findViewById(R.id.backdrop));

        } catch (Exception e) {

            e.printStackTrace();

        }

    }



    private void initCollapsingToolbar() {

        final CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);

        collapsingToolbar.setTitle(" ");

        AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar);

        appBarLayout.setExpanded(true);



        // hiding $ showing the title when toolbar expanded & collapsed

        appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {

            boolean isShow = false;

            int scrollRange = -1;



            @Override

            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {

                if (scrollRange == -1) {

                    scrollRange = appBarLayout.getTotalScrollRange();

                }

                if (scrollRange + verticalOffset == 0) {

                    collapsingToolbar.setTitle("Card View");

                    isShow = true;

                } else if (isShow) {

                    collapsingToolbar.setTitle(" ");

                    isShow = false;

                }

            }

        });

    }



    private void prepareAlbums() {

        int[] covers = new int[]{

                R.drawable.album1,

                R.drawable.album2,

                R.drawable.album3,

                R.drawable.album4,

                R.drawable.album5,

                R.drawable.album6,

                R.drawable.album7,

                R.drawable.album8,

                R.drawable.album9};



        Album a = new Album("TARA", 13, covers[0]);

        albumList.add(a);



        a = new Album("Little Dragon", 8, covers[1]);

        albumList.add(a);



        a = new Album("The Titans", 11, covers[2]);

        albumList.add(a);



        a = new Album("Armada", 12, covers[3]);

        albumList.add(a);



        a = new Album("The Beatles", 20, covers[4]);

        albumList.add(a);



        a = new Album("Bellamy Brothers", 8, covers[5]);

        albumList.add(a);



        a = new Album("The Beatles", 10, covers[6]);

        albumList.add(a);



        a = new Album("Noah", 14, covers[7]);

        albumList.add(a);



        a = new Album("Geisha", 15, covers[8]);

        albumList.add(a);



        adapter.notifyDataSetChanged();

    }



    public class GridSpacingItemDecoration extends RecyclerView.ItemDecoration {



        private int spanCount;

        private int spacing;

        private boolean includeEdge;



        public GridSpacingItemDecoration(int i, Object dpToPx, boolean b) {

            this.spanCount = spanCount;

            this.spacing = spacing;

            this.includeEdge = includeEdge;

        }



        @Override

        public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {

            int position = parent.getChildAdapterPosition(view); // item position

            int column = position - spanCount; // item column

            //super.getItemOffsets(outRect, view, parent, state);



            if (includeEdge) {

                outRect.left = spacing - column * spacing / spanCount;

                outRect.right = (column + 1) * spacing / spanCount;

                if (position < spanCount) {

                    outRect.top = spacing;

                }

                outRect.bottom = spacing;

            } else {

                outRect.left = column * spacing - spanCount;

                outRect.right = spacing - (column + 1) * spacing - spanCount;

                if (position >= spanCount) {

                    outRect.top = spacing;

                }

            }

        }

    }



    // convert dp to px

    private Object dpToPx(int dp) {

        Resources r = getResources();

        return Math.round(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, r.getDisplayMetrics()));

    }

}

9.       Kemudian buat Class baru dengan nama AlbumAdapter dan maukan script ini
package giviews.id.cardview;



import android.content.Context;

import android.support.v7.widget.PopupMenu;

import android.support.v7.widget.RecyclerView;

import android.view.LayoutInflater;

import android.view.MenuInflater;

import android.view.MenuItem;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageView;

import android.widget.TextView;

import android.widget.Toast;



import com.bumptech.glide.Glide;



import java.util.List;



/**

 * Created by asus on 02/07/2017.

 */



class AlbumAdapter extends RecyclerView.Adapter<AlbumAdapter.MyViewHolder> {

    private Context mContext;

    private List<Album> albumList;





    public  class MyViewHolder extends RecyclerView.ViewHolder {

        public TextView title, count;

        public ImageView thumbnail, overflow;



        public MyViewHolder(View view) {

            super(view);

            title = (TextView) view.findViewById(R.id.title);

            count = (TextView) view.findViewById(R.id.count);

            thumbnail = (ImageView) view.findViewById(R.id.thumbnail);

            overflow = (ImageView) view.findViewById(R.id.overflow);

        }

    }



    public AlbumAdapter(Context mContext, List<Album> albumList) {

        this.mContext = mContext;

        this.albumList = albumList;

    }



    @Override

    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

        View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.album_card, parent, false);

        return new MyViewHolder(itemView);

    }



    @Override

    public void onBindViewHolder(final MyViewHolder holder, int position) {

        Album album = albumList.get(position);

        holder.title.setText(album.getName());

        holder.count.setText(album.getNumOfSongs() + " songs");



        //loading album cover using Glide library

        Glide.with(mContext).load(album.getThumbnail()).into(holder.thumbnail);

        holder.overflow.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

                showPopupMenu(holder.overflow);

            }

        });

    }



    // showing popup menu when tapping 3 dots

    private void showPopupMenu(View view) {

        //inflate menu

        PopupMenu popup = new PopupMenu(mContext, view);

        MenuInflater inflater = popup.getMenuInflater();

        inflater.inflate(R.menu.menu_album, popup.getMenu());

        popup.setOnMenuItemClickListener(new MyMenuItemClickListener());

        popup.show();

    }



    //Click listener for popup menu item

    private class MyMenuItemClickListener implements PopupMenu.OnMenuItemClickListener {



        public MyMenuItemClickListener() {

        }



        @Override

        public boolean onMenuItemClick(MenuItem menuItem) {

           switch (menuItem.getItemId()) {

               case R.id.action_add_favourite:

                   Toast.makeText(mContext, "Add to favourite", Toast.LENGTH_SHORT).show();

                   return true;

               case R.id.action_play_next:

                   Toast.makeText(mContext, "Play next", Toast.LENGTH_SHORT).show();

                   return true;

               default:

           }

           return false;

        }

    }



    @Override

    public int getItemCount() {

        return albumList.size();

    }

}

10.   terakhir buat class Album dan masukan script ini :
package giviews.id.cardview;



/**

 * Created by asus on 02/07/2017.

 */



class Album {

    private String name;

    private int numOfSongs;

    private int thumbnail;



    public Album() {

    }



    public Album(String name, int numOfSongs, int thumbnail) {

        this.name = name;

        this.numOfSongs = numOfSongs;

        this.thumbnail = thumbnail;

    }



    public String getName() { return name; }



    public void setName(String name) {

        this.name = name;

    }



    public int getNumOfSongs() {

        return numOfSongs;

    }



    public void setNumOfSongs(int numOfSongs) {

        this.numOfSongs = numOfSongs;

    }



    public int getThumbnail() {

        return thumbnail;

    }



    public void setThumbnail(int thumbnail) {

        this.thumbnail = thumbnail;

    }

}

11.   Untuk String isikan kode berikut
<resources>

    <string name="app_name">Cardview</string>

    <string name="love_music">LOVE MUSIC</string>

    <string name="this_session_top_20_songs">This session top 20 songs</string>

</resources>




Selanjutnya silakan test aplikasi anda, jika cardviewnya muncul seperti gambar di atas Selamat anda telah berhasil. jika ada pertanyaan silakan kirimkan pada kolom komentar dibawah.

Juanas Smith Shared

Some say he’s half man half fish, others say he’s more of a seventy/thirty split. Either way he’s a fishy bastard.

1 komentar :

  1. sakinafabiani4 Maret 2022 pukul 06.24

    Casino de Ritm - JTG Hub
    Get up to 25 Free Spins at 거제 출장샵 Casino 여수 출장안마 de 청주 출장마사지 Ritm and play the slot machines with the best bonuses from the best 서울특별 출장안마 slots online. Free 파주 출장샵 spins, no deposit

    BalasHapus

Langganan: Posting Komentar ( Atom )