Android activity contains various user interface components e.g Button, Radio button, List, Text field etc. The user interface component can be arranged/attached with the activity in two different ways.
- Declaring UI element in layoutfile
Basically, Layout file is xml formatted file present in res/layout. In this file, tags are used to define any UI component and properties are used to configure the components. It is similar to HTML tags. This style is preferred because UI related codes and business logic codes are separated. It is comparatively easier to manage. - Creating view element at runtime
UI Companent can be created programmatically. UI component class setter methods help to configure the component. This style is not recommended unless it’s really required. In this style, business logic gets mixed with the component UI code. It doesn’t look neat and sometimes it’s hard to manage.
In this tutorial, we will create two different Activity classes with the same UI components but with different techniques.
Create an Android project(as shown in this tutorial) and name the Activity as XMLLayoutActivity and layout file as activity_xmllayout.xml. We will define some string constants to be used in layout file and Activity. Open the file string.xml present in res/values and put the following contents:
AndroidLayout
Settings
XMLLayoutActivity
Code4Reference.com
Other Activity
Dynamic Layout Activity
Now, we will write very simple layout file which contains Textview, EditText and Button UI components as shown below.
Let’s define the first activity class called XMLLayoutActivity. This Activity uses the layout file defined above.
package com.code4reference.androidlayout;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
public class XMLLayoutActivity extends Activity {
Button btOtherActivity;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Attaching the layout file with the current Activity.
setContentView(R.layout.activity_xmllayout);
// Associate the Button object with the Button defined in the layout
// file. Notice that R.id.btOtherActivity is associated with the
//button in activity_xmllayout.xml layoutfile.
btOtherActivity = (Button) findViewById(R.id.btOtherActivity);
//Attaching the OnclickListener with the button.
btOtherActivity.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
//Creating an Intent which will invoke
//the other Activity (DynamicLayoutActivity).
Intent intent = new Intent(getApplicationContext(),
DynamicLayoutActivity.class);
//This method will start the other activity.
startActivity(intent);
}
});
}
}
Now, add another DynamicLayoutActivity class to the same package which extends Activity class.This activity class will dynamically add the UI component to Activity. Put the following content in the class definition. The embedded comments will help to understand the code.
package com.code4reference.androidlayout;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.TextView;
import android.widget.Toast;
public class DynamicLayoutActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// This will create the LinearLayout
LinearLayout ll = new LinearLayout(this);
ll.setOrientation(LinearLayout.VERTICAL);
// Configuring the width and height of the linear layout.
LayoutParams llLP = new LayoutParams(
//android:layout_width="match_parent" an in xml
LinearLayout.LayoutParams.MATCH_PARENT,
//android:layout_height="wrap_content"
LinearLayout.LayoutParams.MATCH_PARENT);
ll.setLayoutParams(llLP);
TextView tv = new TextView(this);
LayoutParams lp = new LayoutParams(
LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
tv.setLayoutParams(lp);
//android:text="@string/c4r"
tv.setText(R.string.c4r);
//android:padding="@dimen/padding_medium"
tv.setPadding(8, 8, 8, 8);
ll.addView(tv);
EditText et = new EditText(this);
et.setLayoutParams(lp);
et.setHint(R.string.c4r);
et.setPadding(8, 8, 8, 8);
ll.addView(et);
Button bt = new Button(this);
bt.setText(R.string.OtherActivity);
bt.setPadding(8, 8, 8, 8);
ll.addView(bt);
//Now finally attach the Linear layout to the current Activity.
setContentView(ll);
//Attach OnClickListener to the button.
bt.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(getApplicationContext(),
"This is dynamic activity", Toast.LENGTH_LONG).show();
}
});
}
}
As you can see, the code doesn’t look that neat compared to the former one. In OnClickListener, Toast class has been used to prompt the message. Now, we need to modify the AndroidManifest file because another activity class has been added.
Once the coding is done, execute the application and you will notice the following Activity on screen.
If you click the button, the next activity will appear having almost similar layout but with different title. If you click the button on the another activity, it will show you a toast message. You can get the source code from github/Code4Reference. You can read more about the android layout here.
Please feel free to comment on the post or website.