Xml card layout

Question

i trying to get a layout just like the image below for a game in android studio

currently my xml is

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
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"
tools:context="com.dreacot.testmymemory.Game">

<ImageView
    android:id="@+id/imageView"
    android:layout_width="72dp"
    android:layout_height="115dp"
    app:srcCompat="@drawable/backside"
    tools:layout_editor_absoluteX="53dp"
    tools:layout_editor_absoluteY="136dp" />

<ImageView
    android:id="@+id/imageView4"
    android:layout_width="72dp"
    android:layout_height="115dp"
    app:srcCompat="@drawable/backside"
    tools:layout_editor_absoluteX="156dp"
    tools:layout_editor_absoluteY="136dp" />

<ImageView
    android:id="@+id/imageView3"
    android:layout_width="72dp"
    android:layout_height="115dp"
    app:srcCompat="@drawable/backside"
    tools:layout_editor_absoluteX="266dp"
    tools:layout_editor_absoluteY="136dp" />

<ImageView
    android:id="@+id/imageView6"
    android:layout_width="72dp"
    android:layout_height="115dp"
    app:srcCompat="@drawable/backside"
    tools:layout_editor_absoluteX="53dp"
    tools:layout_editor_absoluteY="285dp" />

<ImageView
    android:id="@+id/imageView5"
    android:layout_width="72dp"
    android:layout_height="115dp"
    app:srcCompat="@drawable/backside"
    tools:layout_editor_absoluteX="156dp"
    tools:layout_editor_absoluteY="285dp" />

<ImageView
    android:id="@+id/imageView2"
    android:layout_width="72dp"
    android:layout_height="115dp"
    app:srcCompat="@drawable/backside"
    tools:layout_editor_absoluteX="266dp"
    tools:layout_editor_absoluteY="285dp" />

i want more cards to be added on the next level eg lvl 2 do i need to make several layouts for each level?

also i want each card to show its face when it is clicked

and finally i feel i am not doing the right thing as i feel xml files cannot be called into the gameplay is there a better way to do this layout(maybe programmatically)?

could anyone help?

Ferdous Ahamed · Answer 1 · 2017-06-08T19:38:38.700

2

You have to do it programmatically.

1. Use RecyclerView with GridLayoutManager to show your card as grid style.

2. Create a layout with just a CardView with single ImageView for your single card item.

3. Create an custom RecyclerView.Adapter<> and use it with RecyclerView to populate your card data on CardView.

4. Add onItemClick listener to Adapter to flip to the specific Card item and do something as per your needs.

Here are some useful links about RecyclerView:

Here is a good library for CardView animation.

Hope this will help~

edited Jun 08 '17 at 19:38

answered Jun 08 '17 at 19:20

Ferdous Ahamed

21,438
5
52
61

when the card flips i want to show different items on each card, and if i populate i would populate about 32 cards, so how do i do this and display 32 different items on each card flip – Kennedy Jun 08 '17 at 19:27
You can do everything. You can set any image on card view. If you want to show different layout for other side then you have to design another layout. – Ferdous Ahamed Jun 08 '17 at 19:31
1

alright from your answer things have cleared up really well and i understand what to do know, but i see lots of issues as i go on because i dont think you really get the picture i am trying to paint, but you answer helps – Kennedy Jun 08 '17 at 19:33
You can use this library for card flip animation>> https://github.com/wasabeef/recyclerview-animators – Ferdous Ahamed Jun 08 '17 at 19:39
lets talk in chat http://chat.stackoverflow.com/rooms/146202/discussion-between-fat-and-kennedy – Kennedy Jun 08 '17 at 20:31
im stuck at number 3 – Kennedy Jun 09 '17 at 11:31
Follow this: https://stackoverflow.com/questions/40587168/simple-android-grid-example-using-recyclerview-with-gridlayoutmanager-like-the – Ferdous Ahamed Jun 09 '17 at 11:32
just did, but most of the tutorials out there deal with text like this one, how do i populate a single image – Kennedy Jun 09 '17 at 11:57
1. Add an imageview in your layout. 2. Inn your adapter viewholder add the imageview. 3. In onBindViewHolder change the image on imageview as per needs – Ferdous Ahamed Jun 10 '17 at 06:30
have you tried the tutorial that i mentioned in my answer? These tutorial contains about how to populate image on imageview. See again and read thoroughly. >>>> http://www.journaldev.com/13792/android-gridlayoutmanager-example >>>> https://inducesmile.com/android/android-gridlayoutmanager-with-recyclerview-in-material-design/ – Ferdous Ahamed Jun 10 '17 at 06:33

score 2 · Answer 2 · answered Jun 08 '17 at 19:37

The way you are doing it is not the proper way to do it, In this way maybe you can achieve this for 6 cards. What if you have let's say 100 cards or may be 1000, will you add 100 images in Layout and get reference of 100 images in Activity and set Click Listeners and animations to turn the side on 100 images?

Use "GridView" and Adapter for your views, it will do your work with ease.

Check this: https://developer.android.com/guide/topics/ui/layout/gridview.html

Thank You i certainly wouldn't want 100 onclick listeners – Kennedy Jun 08 '17 at 20:00 — Kennedy, Jun 08 '17 at 20:00

Xml card layout

2 Answers2