Codementor Events

Creating Dynamic Layouts in Android

Published Feb 25, 2020Last updated Aug 22, 2020

Generally, we develop the layout for an Android application by creating the XML file. These are called static layouts.
Static you ask? Yes, because you can not add/delete any View Type in XML on runtime.

Dynamic layouts are developed using Java and can be used to create layouts that you would normally create using an XML file.
Why do we need them?

Let’s say we are fetching some data from our server and we want to create n number of fields/buttons/options in our layout. How do we do that using the only XML? That’s right!
But we can use Java to replicate the exact layout that we would normally create using XML.

It can be used to create LinearLayout, ScrollView, etc.which can further add TextView, EditText, RadioButtons, Checkbox inside it.
Where do Dynamic Layouts excel?

Let’s say we want to show some items in our layout that were frequently bought together(all items are of the same View Type).

There are quite a few ways to show them in our layout:
1. Adding static views in our XML(if we know the exact amount of items).
2. Using Recycler View to inflate the items in our layout.
3. Creating Dynamic Views using Java.

What if we do not know the exact number of items to be displayed and our
layout require different View Types(like 3 TextViews, 2 CheckBoxes, etc.)?

Possible solutions to tackle this problem:
1. Adding static views in our XML won’t work this time because we do not . know the exact number of views we need.
2. Using Recycler View could work but the same View Types should be grouped together in a list. There is not much flexibility in this case.
3. However, this is where Dynamic Layouts take the lead! They are flexible and can add multiple View Types to our layout in any order.

Dynamic Layout containing TextViews, CheckBoxes, RadioButtons, EditTexts.
1*fd6l3MvoU0aisR-StCTBCg.png

How to create Dynamic Layouts

A simple layout in XML containing only TextViews

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="TextView 1"
        android:textSize="30dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="TextView 2"
        android:textSize="30dp"/>

</LinearLayout>

Same Dynamic Layout created in Java

public class MainActivity extends AppCompatActivity {

    LinearLayout linearLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        linearLayout = findViewById(R.id.linear_layout);        //Adding 2 TextViews
        for (int i = 1; i <= 2; i++) {
            TextView textView = new TextView(this);
            textView.setText("TextView " + String.valueOf(i));
            linearLayout.addView(textView);
        } 

    }
}

Screenshot 2020-02-25 at 10.32.20 PM.png

Adding ViewType properties in Java

Android provides us with almost all the possible attributes that we use in our XML for our View Types.

Setting the height and width of our TextView

//height -> match_parent | width -> wrap_contentLinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,
        LinearLayout.LayoutParams.WRAP_CONTENT);//Setting the above params to our TextView
textView.setLayoutParams(params);

Adding margins to our TextView

(margins are always applied to the params and not to the view directly)
LayoutParams params = new LayoutParams(
        LayoutParams.WRAP_CONTENT,      
        LayoutParams.WRAP_CONTENT
);
params.setMargins(left, top, right, bottom);//Don't forget to set this param to your TextView
textView.setLayoutParams(params);

Adding padding to our TextViews

//Padding can be directly added to our views
textView.setPadding(left, top, right, bottom);

Full source code: https://github.com/uddish/DynamicLayouts

Discover and read more posts from Uddish Verma
get started
post comments2Replies
avensis david
5 years ago

very good article it’s really interesting, thank you

https://getappvalley.com/ https://tutuappx.com/ https://tweakbox.mobi/

İsmail KOYUNCU
5 years ago

Nice work and subject.Thanks for the information.