Creating UI Of An Application Via Code
×
Home Courses Community Support
Gray Matter

First Step Towards Android: Introduction »

Understanding Activities and Intents »

Hands On With UI Designing In Android (Controls-Views,Widgets and Layouts) »

Updating... »

Creating UI Of An Application Via Code

Can we design our UI via code?

So far, all the UIs you have seen so far are created using XML. As mentioned earlier, besides using XML you can also create the UI using code. This approach is useful if your UI needs to be dynamically generated during run time. For example, suppose you are building a cinema ticket reservation system and your application will display the seats of each cinema using buttons. In this case, you would need to dynamically generate the UI based on the cinema selected by the user.To understand it in a better manner let's take an example.

To design the UI via code follow these steps :-

step1: Create a new Android project and name it UICode.

step2: Now we will modify MainActivity.java file. So add the following code into MainActivity.java file-

package com.example.uicode;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.ViewGroup.LayoutParams;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
      //---param for views---
        LayoutParams params =
        		new LinearLayout.LayoutParams(
        				LayoutParams.FILL_PARENT,
        				LayoutParams.WRAP_CONTENT);
        				//---create a layout---
        				LinearLayout layout = new LinearLayout(this);
        				layout.setOrientation(LinearLayout.VERTICAL);
        				//---create a textview---
        				TextView tv = new TextView(this);
        				tv.setText("This is a TextView");
        				tv.setLayoutParams(params);
        				//---create a button---
        				Button btn = new Button(this);
        				btn.setText("This is a Button");
        				btn.setLayoutParams(params);
        				//---adds the textview---
        				layout.addView(tv);
        				//---adds the button---
        				layout.addView(btn);
        				//---create a layout param for the layout---
        				LinearLayout.LayoutParams layoutParam =
        				new LinearLayout.LayoutParams(
        				LayoutParams.FILL_PARENT,
        				LayoutParams.WRAP_CONTENT );
        				this.addContentView(layout, layoutParam);
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
    
}

step3: Now Press F11 key to debug the application on the Android Emulator or on the device. Let's see the output window now

enlightenedNote: In this example, you first commented out the setContentView() statement so that it does not load the UI from the main.xml file.

← Preview

Adapting To Display Orientation

Next →

UI Notification Listeners

NOTES

Our mission is to provide highly effective and quality education via innovative solutions. Geeksdemy look forward to bridge the gap between in-demand technology and academics in order to deliver innovative, easy, interesting and affordable learning across the Globe.

Courses

  • Python
  • Game Development with Unity 3D
  • Arduino
  • PCB & Circuit Designing
  • Robotics and Embedded C
  • 8051/8052 Embedded Systems
  • QuadCopter & UAV
  • MATLAB with Robotics
  • Raspberry Pi
Learn On the Go!
Get the Android App
Get the iOS App