-->

Membuat Cardview Ala Google Play Musik

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.

0 Response to "Membuat Cardview Ala Google Play Musik"

Post a Comment

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel