How to design layout with multiple things and borders

Question

I am trying to design a sample layout that mimics the User page on Twitter app:

I am unsure where to begin. So far I have only designed list views or tab views. How can I design a layout with multiple blocks in it (like this sample has 4 blocks) and then further divide them into blocks as well.

If someone can give me hint on how to get started on the first block, I can take it from there.

Answer 1

First block looks pretty much like GridLayout to me.

Here is some brief explanation how to use it: link

The simplest way to tackle other groups ("direct messages", "drafts", etc) would be to treat each group as a vertical LinearLayout and have another vertical LinearLayout which hosts these groups with some margin between each group.

For the sake of simplicity I would do each group as a separate layout file and do <include/> within the top-level layout

Here is what I'm talking about:

<LinearLayout
  android:id="@+id/host"
  android:orientation="vertical"
  .....>

    <include layout="@layout/group1"/>   <-- GridLayout
    <include layout="@layout/group2"/>   <-- Simple text button
    <include layout="@layout/group3"/>   <-- Vertical LinearLayout of text buttons
    <include layout="@layout/group4"/>   <-- etc.
    ......

</LinearLayout>