How to make card style menu in android

Question

I want to add card style in my app like this

i use in my app mysql database so i need to make like this cards and put my data from database in it now i use ListView with this code

public void listAllItme() {
    ListAdapter lA = new listAdapter(listitems);
    listView.setAdapter(lA);


    listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

                Intent open = new Intent(R_arabic.this, rewaya_show.class);
                open.putExtra("name", listitems.get(position).name);
                open.putExtra("url", listitems.get(position).url);
                open.putExtra("img", listitems.get(position).img);
                open.putExtra("num", listitems.get(position).num);

                startActivity(open);


            }
        }
    });

}



class listAdapter extends BaseAdapter {
    ArrayList<listitem_gib> lista = new ArrayList<listitem_gib>();

    public listAdapter(ArrayList<listitem_gib> lista) {
        this.lista = lista;
    }

    @Override
    public int getCount() {
        return lista.size();
    }

    @Override
    public Object getItem(int position) {
        return lista.get(position).name;
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        LayoutInflater layoutInflater = getLayoutInflater();
        View view = layoutInflater.inflate(R.layout.row_item_gib, null);

        TextView name = (TextView) view.findViewById(R.id.textView_gib);
        ImageView img = (ImageView) view.findViewById(R.id.imageView_gib);
        TextView num = (TextView) view.findViewById(R.id.textView_gib2);
        TextView size = (TextView) view.findViewById(R.id.textView_gib3);


        name.setText(lista.get(position).name);
        num.setText(lista.get(position).num);
        size.setText(lista.get(position).size);


        Picasso.with(R_arabic.this).load("http://grassyhat.com/android/image/" + lista.get(position).img).into(img);


        return view;
    }
}

first i want to know how i can make like this card style

second how i can use this code with card menu not listview

sorry im new in android and sorry for my bad english

Answer 1

It's pretty simple. You will have to use a RecyclerView with GridLayoutManager and add a cardView to it.

Then, use an Adapter and ViewHolder to feed the data.

I suggest you to check this out:
https://developer.android.com/training/material/lists-cards.html

Answer 2

What do you mean by card menu? because the example in the image is a recyclerview with a cardview item, you can achieve this by doing something like this

This will be your activity

public class MainActivity extends AppCompatActivity {

private RecyclerView recyclerView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    recyclerView = (RecyclerView)findViewById(R.id.recyclerView);

    //Just your list of objects, in your case the list that comes from the db
    List<Items> itemsList = new ArrayList<>();
    CardAdapter adapter = new CardAdapter(this, itemsList);

    //RecyclerView needs a layout manager in order to display data so here we create one
    StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL);

    //Here we set the layout manager and the adapter to the listview
    recyclerView.setLayoutManager(layoutManager);
    recyclerView.setAdapter(adapter);
}

Inside the layout file you just have to place the recyclerview like this

<RelativeLayout
android:id="@+id/activity_main"
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="jsondh.myapplication.MainActivity">

<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
</RelativeLayout>

Then your adapter will be something like this

public class CardAdapter extends RecyclerView.Adapter<CardAdapter.CardViewHolder> {

private List<Items> itemsList;
private Activity activity;

public CardAdapter(Activity activity, List<Items> items){
    this.activity = activity;
    this.itemsList = items;
}

@Override
public CardViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View itemView = activity.getLayoutInflater().inflate(R.layout.cardview_layout, parent, false);
    return new CardViewHolder(itemView);
}

@Override
public void onBindViewHolder(CardViewHolder holder, int position) {
    //Here you bind your views with the data from each object from the list
}

@Override
public int getItemCount() {
    return itemsList.size();
}

public class CardViewHolder extends RecyclerView.ViewHolder {

    public ImageView bookImage;
    public TextView bookLabel01, bookLabel02;

    public CardViewHolder(View itemView) {
        super(itemView);
        bookImage = (ImageView)itemView.findViewById(R.id.image);
        bookLabel01 = (TextView)itemView.findViewById(R.id.label01);
        bookLabel02 = (TextView)itemView.findViewById(R.id.label02);
    }
}

And the last one will be the layout from each item on the list, like this

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp">

<android.support.v7.widget.CardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:cardElevation="15dp"
    app:cardBackgroundColor="#3369Ed">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/image"
            android:layout_width="150dp"
            android:layout_height="130dp"/>

        <TextView
            android:id="@+id/label01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Label"
            android:layout_gravity="right"
            android:padding="5dp"
            android:textColor="#ffffff"/>

        <TextView
            android:id="@+id/label02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="LongerLabel"
            android:layout_gravity="right"
            android:padding="5dp"
            android:textColor="#ffffff"/>

    </LinearLayout>

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

You also have to add this to your gradle file:

compile 'com.android.support:recyclerview-v7:25.0.0'

compile 'com.android.support:cardview-v7:25.0.0'

Hope it helps!