How to create layout for world map in android

Question

.I have fix on click listener for each continent.Each region is separated by line between them.I don't know which layout to use.I need to design a layout compatible for all type of screens.The Image position is fixed .Since the second row must fill the top most space.I am feeling hard to design the layout.Please give your suggestion on which type of layout is best to design this screen.

Answer 1

You can use this Xml file...

<LinearLayout 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:background="#efefef"
  android:orientation="vertical"
  tools:context=".ComposeActivity" >

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="3"
            android:orientation="vertical" >
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="7"
            android:orientation="horizontal" >
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="2"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="7"
            android:orientation="horizontal" >
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="3"
            android:orientation="horizontal" >
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="5"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight=".33"
            android:orientation="vertical" >
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight=".33"
            android:orientation="horizontal" >
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight=".33"
            android:orientation="horizontal" >
        </LinearLayout>
    </LinearLayout>
  </LinearLayout>

</LinearLayout>

Answer 2

Some useful libraries for implementing Pinterest-like grid view:

https://github.com/maurycyw/StaggeredGridViewDemo

https://github.com/jacobmoncur/QuiltViewLibrary

https://github.com/huewu/PinterestLikeAdapterView

https://github.com/vladexologija/PinterestListView

https://github.com/expilu/AntipodalWall

Answer 3

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentLeft="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:layout_marginTop="15dp" 
            android:weightSum="3"
            android:layout_marginBottom="15dp">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/imageView1"
                    android:layout_width="fill_parent"
                    android:layout_weight="1"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_launcher" />

                <LinearLayout
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:layout_weight="1" >

                    <ImageView
                        android:id="@+id/imageView2"
                        android:layout_width="fill_parent"
                        android:layout_weight="1"
                        android:layout_height="fill_parent"
                        android:src="@drawable/ic_launcher" />

                    <ImageView
                        android:id="@+id/imageView3"
                        android:layout_weight="1"
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:src="@drawable/ic_launcher" />

                </LinearLayout>

            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/imageView4"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:layout_weight="1"
                    android:src="@drawable/ic_launcher" />

                <ImageView
                    android:id="@+id/imageView5"
                   android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:layout_weight="1"
                    android:src="@drawable/ic_launcher" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/imageView6"
                     android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:layout_weight="1"
                    android:src="@drawable/ic_launcher" />

                <ImageView
                    android:id="@+id/imageView7"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:layout_weight="1"
                    android:src="@drawable/ic_launcher" />

                <ImageView
                    android:id="@+id/imageView8"
                     android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:layout_weight="1"
                    android:src="@drawable/ic_launcher" />

            </LinearLayout>

        </LinearLayout>

    </RelativeLayout>


just change your image into this