vinay Maneti vinay Maneti - 2 months ago 84
Android Question

Create a Dynamic UI in Android from json Template

On the App start, I will download the data from the web-server and store it in shared-preference, now what I want is depending upon the json template dynamically create the UI form/Activity in android.Can any one suggest me how to implement this.

{
"templates":[
{
"name":"Default",
"default":true,
"fields":[
{
"type":"textbox",
"label":"Your e-mail",
"metadataIPTC":"234",
"required":true,
"regex":"\\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}\\b"
}
]
}
]
}

Answer

XML layouts are converted to Java objects at runtime, so you can simply write an XML which has a container Layout ( say Linear Layout ), inflate it at runtime, and add view programatically depending on the information received from server.

An example would be :
Creating a layout, and setting that as the Activity's content view.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/container"
   /> 

Then somewhere in code:
Let's say that after parsing the JSON you have a List<Field> fields;

  LinearLayout linearLayout = (LinearLayout) findViewById(R.id.container);
  for (Field f: fields) {
    if (f.getType().equals("textbox")) {
        TextView txtView = new TextView(this);
        txtView.setText("Your e-mail");
        txtView.setId(1);//need for better use
        linearLayout.addView(txtView);
    } else if (f.getType().equals("button")) {
        //create a button similarly as above,and add it to the layout
    }
  }