json2view : How to change Android layout dynamically

Advertisement

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

output

Using json2view to reorganize the layout of a screen

before

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://ift.tt/nIICcg"
    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://ift.tt/nIICcg"
    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"
}

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

The post json2view : How to change Android layout dynamically appeared first on Tell Me How - A Place for Technology Geekier.

Embed this post on your website Embed