CODEWITHSUNDEEP
androidxmlandroid-studioandroid-cardview
shashi kumar
shashi kumar

Reputation: 53

Using card view dynamically in android

I am creating a page in android studio where I need to use the concept of cards and, where the card contains a person's image and the person name below the image and the cards has to appear in a grid, for example android marshmallow's contact list where each contact appears as a tile in a grid-view.

I tried different possible ways but unable to rectify this please help me on this. This is the Image of how the final output should look like.

  <android.support.v7.widget.CardView
      android:layout_width="104dp"
      android:layout_height="wrap_content"
      android:id="@+id/cardview">

      <ImageView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:paddingLeft="25dp"
          android:src="@drawable/calendar_screen_launch_forcard"
          android:id="@+id/coach_img"
          android:paddingTop="5dp" />

      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_toRightOf="@+id/person_name"
          android:text="Mark Linonel Jr"
          android:textSize="10dp"
          android:singleLine="false"
          android:paddingTop="70dp"
          android:paddingLeft="20dp"
          android:background="#00000000" />
  </android.support.v7.widget.CardView>

This how I generated a card, but I need four more cards in a tiled shape that should be generated automatically based on number of people.

Thanks you.

Upvotes: 2

Views: 10373

Answers (2)

Tanim reja
Tanim reja

Reputation: 2188

You can easily done this by using GridView . You need a custom adapter class where you will populate your cardview .

This is sample code of adapter class 

public class CustomGrid extends BaseAdapter{
    private Context mContext;
    private final String[] web;
    private final int[] Imageid;

    public CustomGrid(Context c,String[] web,int[] Imageid ) {
        mContext = c;
        this.Imageid = Imageid;
        this.web = web;
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return web.length;
    }

    @Override
    public Object getItem(int position) {
        // TODO Auto-generated method stub
        return null;
    }

    @Override
    public long getItemId(int position) {
        // TODO Auto-generated method stub
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        View grid;
        LayoutInflater inflater = (LayoutInflater) mContext
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        if (convertView == null) {

            grid = new View(mContext);
            grid = inflater.inflate(R.layout.grid_single, null);
            TextView textView = (TextView) grid.findViewById(R.id.grid_text);
            ImageView imageView = (ImageView)grid.findViewById(R.id.grid_image);
            textView.setText(web[position]);
            imageView.setImageResource(Imageid[position]);
        } else {
            grid = (View) convertView;
        }

        return grid;
    }
}

call this adapter class from you activity like this

 

public class MainActivity extends Activity {
    GridView grid;
    String[] name = {
                "Google",
                "Github",
                "Instagram",
                "Facebook"
    };
    
    int[] imageId = {
            R.drawable.image1,
            R.drawable.image2,
            R.drawable.image3,
            R.drawable.image4           
 
    };
         
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        CustomGrid adapter = new CustomGrid(MainActivity.this, name, imageId);
        grid=(GridView)findViewById(R.id.grid);
                grid.setAdapter(adapter);
                grid.setOnItemClickListener(new AdapterView.OnItemClickListener() {
 
                    @Override
                    public void onItemClick(AdapterView<?> parent, View view,
                                            int position, long id) {
                        Toast.makeText(MainActivity.this, "You Clicked at " +name[+ position], Toast.LENGTH_SHORT).show();
 
                    }
                });
 
    }
 
}

follow this tutorial link 1 , link 2

Upvotes: 1

Jeffalee
Jeffalee

Reputation: 1085

Use a RecyclerView with a GridLayoutManager (Android RecyclerView) like this:

RecyclerView recyclerView = findViewById(R.id.my_recyclerview);
GridLayoutManager layoutManager = new GridLayoutManager(context, 2);
recyclerView.setLayoutManager(layoutManager);

Then make your own class MyAdapter which extends RecyclerView.Adapter and inflates your cardview.xml layout and set it to the RecyclerView:

MyAdapter adapter = new MyAdapter(dataset);
recyclerView.setAdapter(adapter);

For a nice guide with detailed explanation on how to do this, see this link

Upvotes: 3

Related Questions