android - Create a staggered grid like the given image -


i trying achieve view:

enter image description here

this partial view , can have view vertically merged 2 cells or horizontally merged 2 cells or single small view.

this view can scroll vertically

please me this.

you can create layout using nested linearlayout attribute layout_weight , weightsum. make layout scrollable, use scrollview root layout.

here working example:

<?xml version="1.0" encoding="utf-8"?> <scrollview xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="match_parent">      <linearlayout         android:layout_width="match_parent"         android:layout_height="match_parent"         android:layout_margin="8dp"         android:orientation="vertical">          <!-- row1 -->         <linearlayout             android:layout_width="match_parent"             android:layout_height="100dp"             android:background="#ff0000">          </linearlayout>          <!-- row2 -->         <linearlayout             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:layout_margintop="8dp"             android:orientation="horizontal"             android:weightsum="2">              <!-- row2 col1-->             <linearlayout                 android:layout_width="match_parent"                 android:layout_height="200dp"                 android:layout_marginright="4dp"                 android:layout_weight="1"                 android:background="#00ff00">              </linearlayout>              <!-- row2 col2-->             <linearlayout                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:layout_marginleft="4dp"                 android:orientation="vertical"                 android:layout_weight="1"                 android:weightsum="2">                  <!-- row2 col2 child1-->                 <linearlayout                     android:layout_width="match_parent"                     android:layout_height="96dp"                     android:layout_marginbottom="4dp"                     android:layout_weight="1"                     android:background="#0000ff">                  </linearlayout>                  <!-- row2 col2 child2-->                 <linearlayout                     android:layout_width="match_parent"                     android:layout_height="96dp"                     android:layout_margintop="4dp"                     android:layout_weight="1"                     android:background="#0000ff">                  </linearlayout>             </linearlayout>         </linearlayout>          <!-- row3 -->         <linearlayout             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:layout_margintop="8dp"             android:orientation="horizontal"             android:weightsum="2">              <!-- row3 col1-->             <linearlayout                 android:layout_width="match_parent"                 android:layout_height="100dp"                 android:layout_marginright="4dp"                 android:layout_weight="1"                 android:background="#fff000">              </linearlayout>              <!-- row3 col2-->             <linearlayout                 android:layout_width="match_parent"                 android:layout_height="100dp"                 android:layout_marginleft="4dp"                 android:layout_weight="1"                 android:background="#fff000">              </linearlayout>         </linearlayout>          <!-- row4 -->         <linearlayout             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:layout_margintop="8dp"             android:orientation="horizontal"             android:weightsum="2">              <!-- row4 col1-->             <linearlayout                 android:layout_width="match_parent"                 android:layout_height="200dp"                 android:layout_marginright="4dp"                 android:layout_weight="1"                 android:background="#ff00ff">              </linearlayout>              <!-- row4 col2-->             <linearlayout                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:layout_marginleft="4dp"                 android:orientation="vertical"                 android:layout_weight="1"                 android:weightsum="2">                  <!-- row4 col2 child1-->                 <linearlayout                     android:layout_width="match_parent"                     android:layout_height="96dp"                     android:layout_marginbottom="4dp"                     android:layout_weight="1"                     android:background="#00ffff">                  </linearlayout>                  <!-- row4 col2 child2-->                 <linearlayout                     android:layout_width="match_parent"                     android:layout_height="96dp"                     android:layout_margintop="4dp"                     android:layout_weight="1"                     android:background="#00ffff">                  </linearlayout>             </linearlayout>         </linearlayout>      </linearlayout> </scrollview> 

output:

enter image description here

you can use gridlayout achieve view.

here tutorial gridlayout , stackoverflow answers.

hope help~


Comments

Popular posts from this blog

php - Permission denied. Laravel linux server -

google bigquery - Delta between query execution time and Java query call to finish -

python - Pandas two dataframes multiplication? -