Juanas Smith Shared

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.

Selamat siang, kali ini admin masih membahas tentang animasi. pada kesempatan kali ini kita akan membuat animasi glowing dots dengan HTML dan CSS.

Langkah pertama buat dulu struktur HTML nya seperti dibawah :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Glowing Dots</title>
<link rel="stylesheet" href="css/glowing.css">
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>

Selanjutnya masukan kode CSS berikut

body {
        margin: 0;        padding: 0;        background: #262626;        }
        ul {
        position: absolute;        top: 50%;        left: 50%;        transform: translate(-50%, -50%);        margin: 0;        padding: 0;        display: flex;        }
        ul li {
        list-style: none;        width: 40px;        height: 40px;        background: #fff;        border-radius: 50%;        animation: animate 1.6s ease-in-out infinite;        }
@keyframes animate {
        0%, 40%, 100% {
        transform: scale(0.2);        }
        20% {
        transform: scale(1);        }
        }
        ul li:nth-child(1)
        {
        animation-delay: -1.4s;        background: #ffff00;        box-shadow: 0 0 50px #ffff00;        }
        ul li:nth-child(2)
        {
        animation-delay: -1.2s;        background: #76ff03;        box-shadow: 0 0 50px #76ff03;        }
        ul li:nth-child(3)
        {
        animation-delay: -1s;        background: #f06292;        box-shadow: 0 0 50px #f06292;        }
        ul li:nth-child(4)
        {
        animation-delay: -0.8s;        background: #4fc3f7;        box-shadow: 0 0 50px #4fc3f7;        }
        ul li:nth-child(5)
        {
        animation-delay: -0.6s;        background: #ba68c8;        box-shadow: 0 0 50px #ba68c8;        }
        ul li:nth-child(6)
        {
        animation-delay: -0.4s;        background: #f57c00;        box-shadow: 0 0 50px #f57c00;        }
        ul li:nth-child(7)
        {
        animation-delay: -0.2s;        background: #673ab7;        box-shadow: 0 0 50px #673ab7;        }

Sekarang lihat hasilnya di browser jika tampilanya seperti di atas berarti animasi glowing dots anda sudah jadi, selamat mencoba. jika artikel ini bermanfaat silakan share ke teman anda

Lihat Demo

Selamat Siang kali ini kita akan membuat Div bubble dengan menggabungkan bentuk persegi panjang dan segitiga kemudian pinggiranya diberi border dan hasilnya seolah-olah hanya satu bentuk. div buble ini bisa digunakan untuk menampilkan komentar, untuk chat bubble dll.

langsung saja, ini scriptnya:

<!DOCTYPE html>
<html>
<head>
                <title>Div Bubble Box</title>
                <style type="text/css">
                                body {
                                                background-color: #de302f;
                                                font-family: sans-serif;
                                                font-size: 14px;
                                                line-height: 1.4;
                                                color: #fff;
                                                font-weight: 100;
                                }
                                .container {
                                                position: relative;
                                                margin: 50px auto;
                                                max-width: 600px;
                                                height: auto;
                                                border: 2px solid #fff;
                                                padding: 30px;
                                                box-sizing: border-box;
                                }
                                .container:after {
                                                position: absolute;
                                                width: 50px; height: 50px;
                                                content: '';
                                                transform: rotate(45deg);
                                                margin-top: -25px;
                                                background-color: #de302f;
                                }
                                .satu:after {
                                                border-top: 0px solid #fff;
                                                border-bottom: 2px solid #fff;
                                                border-right: 2px solid #fff;
                                                border-left: 0px solid #fff;
                                                top: 100%;
                                                left: 50%;
                                                margin-left: -25px;
                                }
                                .dua:after {
                                                border-top: 0px solid #fff;
                                                border-bottom: 2px solid #fff;
                                                border-right: 0px solid #fff;
                                                border-left: 2px solid #fff;
                                                top: 50%;
                                                left: 0%;
                                                margin-left: -27px;
                                                content: '';
                                }
                                .tiga:after {
                                                border-top: 2px solid #fff;
                                                border-bottom: 0px solid #fff;
                                                border-right: 2px solid #fff;
                                                border-left: 0px solid #fff;
                                                top: 50%;
                                                right: 0%;
                                                margin-right: -27px;
                                                content: '';
                                }
                                .empat:after {
                                                border-top: 2px solid #fff;
                                                border-bottom: 0px solid #fff;
                                                border-right: 0px solid #fff;
                                                border-left: 2px solid #fff;
                                                top: -2%;
                                                left: 50%;
                                                margin-left: -25px;
                                }
                </style>
</head>
<body>
                <div class="container satu">lorem ipsum dolor sit amet adipiscing elit consectutor amet sil elit aliam amos tutor sit balagna elias elim sut adipiscing elit consectutor eliam bainem consectutor adipiscing lorema dolore lorem ipsum dolor dolore eliam adipiscing elit</div>
                <div class="container dua">lorem ipsum dolor sit amet adipiscing elit consectutor amet sil elit aliam amos tutor      sit balagna elias elim sut adipiscing elit consectutor eliam bainem consectutor adipiscing lorema dolore lorem ipsum dolor dolore eliam adipiscing elit</div>
                <div class="container tiga">lorem ipsum dolor sit amet adipiscing elit consectutor amet sil elit aliam amos tutor sit balagna elias elim sut adipiscing elit consectutor eliam bainem consectutor adipiscing lorema dolore lorem ipsum dolor dolore eliam adipiscing elit</div>
                <div class="container empat">lorem ipsum dolor sit amet adipiscing elit consectutor amet sil elit aliam amos tutor sit balagna elias elim sut adipiscing elit consectutor eliam bainem consectutor adipiscing lorema dolore lorem ipsum dolor dolore eliam adipiscing elit</div>
</body>
</html>

Sekianlah tutorial kali, selamat mencoba, semoga bermanfaat. jika ada yang kurang jelas silakan ditanyakan pada komentar dibawah.

Langganan: Postingan ( Atom )

Membuat Cardview Ala Google Play Musik

Membuat Animasi Glowing Dots dengan CSS dan HTML

Menggabungkan bentuk Segitiga dan Persegi panjang menjadi Bubble Chat dengan CSS

SUBSCRIBE

Total Tayangan Halaman

Popular Posts

Facebook

Label

Blog Archive

Pages

Membuat Cardview Ala Google Play Musik

Share story

Membuat Animasi Glowing Dots dengan CSS dan HTML

Share story

Menggabungkan bentuk Segitiga dan Persegi panjang menjadi Bubble Chat dengan CSS

Share story

SUBSCRIBE

Total Tayangan Halaman

Popular Posts

Facebook

Label

Blog Archive