In previous article we discuss about installation of json2view library and how to change properties of Android ui dynamically but today we discuss about how to change Android layout dynamically with help of json2view library.

You can check installation and implementation of json2view Android library.

Let come with example of json2view Android library and in this tutorial we studying how to dynamically change Android layout using json2view library.

Xml 2 JSON Examples

Using json2view to reorganize the layout of a screen

before

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="10dp"
        android:minWidth="250dp"
        android:text="menu 01" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="10dp"
        android:minWidth="250dp"
        android:text="menu 02" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="10dp"
        android:minWidth="250dp"
        android:text="menu 03" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="10dp"
        android:minWidth="250dp"
        android:text="menu 04" />

</LinearLayout>

{
  "views": [{
    "views": [],
    "properties": [{
      "value": "wrap_content",
      "type": "dimen",
      "name": "layout_width"
    },
    {
      "value": "wrap_content",
      "type": "dimen",
      "name": "layout_height"
    },
    {
      "value": "center",
      "type": "string",
      "name": "layout_gravity"
    },
    {
      "value": "10dp",
      "type": "dimen",
      "name": "layout_margin"
    },
    {
      "value": "250dp",
      "type": "dimen",
      "name": "minWidth"
    },
    {
      "value": "menu 01",
      "type": "string",
      "name": "text"
    }],
    "widget": "Button"
  },
  {
    "views": [],
    "properties": [{
      "value": "wrap_content",
      "type": "dimen",
      "name": "layout_width"
    },
    {
      "value": "wrap_content",
      "type": "dimen",
      "name": "layout_height"
    },
    {
      "value": "center",
      "type": "string",
      "name": "layout_gravity"
    },
    {
      "value": "10dp",
      "type": "dimen",
      "name": "layout_margin"
    },
    {
      "value": "250dp",
      "type": "dimen",
      "name": "minWidth"
    },
    {
      "value": "menu 02",
      "type": "string",
      "name": "text"
    }],
    "widget": "Button"
  },
  {
    "views": [],
    "properties": [{
      "value": "wrap_content",
      "type": "dimen",
      "name": "layout_width"
    },
    {
      "value": "wrap_content",
      "type": "dimen",
      "name": "layout_height"
    },
    {
      "value": "center",
      "type": "string",
      "name": "layout_gravity"
    },
    {
      "value": "10dp",
      "type": "dimen",
      "name": "layout_margin"
    },
    {
      "value": "250dp",
      "type": "dimen",
      "name": "minWidth"
    },
    {
      "value": "menu 03",
      "type": "string",
      "name": "text"
    }],
    "widget": "Button"
  },
  {
    "views": [],
    "properties": [{
      "value": "wrap_content",
      "type": "dimen",
      "name": "layout_width"
    },
    {
      "value": "wrap_content",
      "type": "dimen",
      "name": "layout_height"
    },
    {
      "value": "center",
      "type": "string",
      "name": "layout_gravity"
    },
    {
      "value": "10dp",
      "type": "dimen",
      "name": "layout_margin"
    },
    {
      "value": "250dp",
      "type": "dimen",
      "name": "minWidth"
    },
    {
      "value": "menu 04",
      "type": "string",
      "name": "text"
    }],
    "widget": "Button"
  }],
  "properties": [{
    "value": "match_parent",
    "type": "dimen",
    "name": "layout_width"
  },
  {
    "value": "match_parent",
    "type": "dimen",
    "name": "layout_height"
  },
  {
    "value": "vertical",
    "type": "string",
    "name": "orientation"
  }],
  "widget": "LinearLayout"
}

after

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

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

        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_margin="10dp"
            android:layout_weight="0.5"
            android:text="menu 01" />

        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_margin="10dp"
            android:layout_weight="0.5"
            android:text="menu 02" />

    </LinearLayout>

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

        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_margin="10dp"
            android:layout_weight="0.5"
            android:text="menu 03" />

        <Button
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_margin="10dp"
            android:layout_weight="0.5"
            android:text="menu 04" />
    </LinearLayout>

</LinearLayout>

{
  "views": [{
    "views": [{
      "views": [],
      "properties": [{
        "value": "0dp",
        "type": "dimen",
        "name": "layout_width"
      },
      {
        "value": "match_parent",
        "type": "dimen",
        "name": "layout_height"
      },
      {
        "value": "10dp",
        "type": "dimen",
        "name": "layout_margin"
      },
      {
        "value": "0.5",
        "type": "float",
        "name": "layout_weight"
      },
      {
        "value": "menu 01",
        "type": "string",
        "name": "text"
      }],
      "widget": "Button"
    },
    {
      "views": [],
      "properties": [{
        "value": "0dp",
        "type": "dimen",
        "name": "layout_width"
      },
      {
        "value": "match_parent",
        "type": "dimen",
        "name": "layout_height"
      },
      {
        "value": "10dp",
        "type": "dimen",
        "name": "layout_margin"
      },
      {
        "value": "0.5",
        "type": "float",
        "name": "layout_weight"
      },
      {
        "value": "menu 02",
        "type": "string",
        "name": "text"
      }],
      "widget": "Button"
    }],
    "properties": [{
      "value": "match_parent",
      "type": "dimen",
      "name": "layout_width"
    },
    {
      "value": "0dp",
      "type": "dimen",
      "name": "layout_height"
    },
    {
      "value": "0.5",
      "type": "float",
      "name": "layout_weight"
    },
    {
      "value": "horizontal",
      "type": "string",
      "name": "orientation"
    }],
    "widget": "LinearLayout"
  },
  {
    "views": [{
      "views": [],
      "properties": [{
        "value": "0dp",
        "type": "dimen",
        "name": "layout_width"
      },
      {
        "value": "match_parent",
        "type": "dimen",
        "name": "layout_height"
      },
      {
        "value": "10dp",
        "type": "dimen",
        "name": "layout_margin"
      },
      {
        "value": "0.5",
        "type": "float",
        "name": "layout_weight"
      },
      {
        "value": "menu 03",
        "type": "string",
        "name": "text"
      }],
      "widget": "Button"
    },
    {
      "views": [],
      "properties": [{
        "value": "0dp",
        "type": "dimen",
        "name": "layout_width"
      },
      {
        "value": "match_parent",
        "type": "dimen",
        "name": "layout_height"
      },
      {
        "value": "10dp",
        "type": "dimen",
        "name": "layout_margin"
      },
      {
        "value": "0.5",
        "type": "float",
        "name": "layout_weight"
      },
      {
        "value": "menu 04",
        "type": "string",
        "name": "text"
      }],
      "widget": "Button"
    }],
    "properties": [{
      "value": "match_parent",
      "type": "dimen",
      "name": "layout_width"
    },
    {
      "value": "0dp",
      "type": "dimen",
      "name": "layout_height"
    },
    {
      "value": "0.5",
      "type": "float",
      "name": "layout_weight"
    },
    {
      "value": "horizontal",
      "type": "string",
      "name": "orientation"
    }],
    "widget": "LinearLayout"
  }],
  "properties": [{
    "value": "match_parent",
    "type": "dimen",
    "name": "layout_width"
  },
  {
    "value": "match_parent",
    "type": "dimen",
    "name": "layout_height"
  },
  {
    "value": "vertical",
    "type": "string",
    "name": "orientation"
  }],
  "widget": "LinearLayout"
}

Next example :

json2view : Create dynamic Android layouts

Hope you like this tutorial and if you’ve any problem then comment box is for you.