Android square tiled list

Question

I'm currently writing an app and it's been suggested I try a square list with tiles instead of a standard list. I've included an example mock up underneath of what it could look like. I'm relatively new to android and can't quite get my head around how I could do it.

Any help is much appreciated. Thanks!

Answer 1

You would have to use a 2 column GridView.

Assuming you have some model for an Alarm.

public class Alarm {
    private String title;
    private String time;
    private int color;

    public Alarm(String title, String time, int color) {
        this.title = title;
        this.time = time;
        this.color = color;
    }
}

You will have to create a custom layout to be used in the GridView

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="22sp"
    android:id="@+id/title"
    android:textColor="#FFFFFF"
    android:text="title"
    android:layout_centerHorizontal="true"
    android:layout_margin="20dp"
    />

<TextView android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:textSize="18sp"
    android:id="@+id/time"
    android:layout_below="@id/title"
    android:text="time"
    android:layout_centerHorizontal="true"
    android:layout_margin="20dp"
    android:textColor="#FFFFFF"/>

<ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/time"
    android:layout_centerHorizontal="true"
    android:src="@android:drawable/ic_media_play"/>

</RelativeLayout>

And create an adapter, just like you would when using a listview

public class AlarmGridAdapter extends BaseAdapter {

private Context context;
private List<Alarm> alarms;

public AlarmGridAdapter(Context context, List<Alarm> alarms) {
    this.context = context;
    this.alarms = alarms;
}

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

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

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

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View root = layoutInflater.inflate(R.layout.grid_item, parent, false);

    Alarm alarm = alarms.get(position);

    TextView titleText = (TextView) root.findViewById(R.id.title);
    TextView timeText = (TextView) root.findViewById(R.id.time);

    root.setBackgroundColor(alarm.getColor());
    titleText.setText(alarm.getTitle());
    timeText.setText(alarm.getTime());

    return root;
}
}

The activity simply contains a grid view, with the number of columns 2 and vertical/horizontal spacing 0

<RelativeLayout 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" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

<GridView
    android:id="@+id/grid"
    android:layout_width="match_parent"
    android:numColumns="2"
    android:horizontalSpacing="0dp"
    android:verticalSpacing="0sp"
    android:layout_height="match_parent" />

</RelativeLayout>

And finally, in the activity(or fragment):

private GridView gridView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    gridView = (GridView) findViewById(R.id.grid);

    Alarm alarm1 = new Alarm("Alarm 1", "10:04:16", Color.parseColor("#39C6F4"));
    Alarm alarm2 = new Alarm("Alarm 2", "10:04:16", Color.parseColor("#A33293"));
    Alarm alarm3 = new Alarm("Alarm 3", "10:04:16", Color.parseColor("#F79922"));
    Alarm alarm4 = new Alarm("Alarm 4", "10:04:16", Color.parseColor("#84C542"));

    AlarmGridAdapter adapter = new AlarmGridAdapter(this, Arrays.asList(alarm1, alarm2, alarm3, alarm4));
    gridView.setAdapter(adapter);
}

Result: