fekra fekra - 1 month ago 14
Android Question

How to make card style menu in android

I want to add card style in my app like this

enter image description here

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

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

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!