Android - Tips'n Tricks - Creating components

Today I will show you how to create 3 Buttons with 3 different ways and how to display them on the layout.

It will be the Tuto 3 that can be found on the Android Market for free, of course.

First of all, let's explain what we will do.
We want to display 3 Buttons.
For this example, I will use BadprogTutorial instead of the complete one I used to create the application (Tuto_3_BadprogTutorialCreatingComponentsActivity).

1. The first Button

The first button, named button1 will be created in the main.xml file.
This is really a basic Button.
We just added an event listener on this button from the onCreate() method of the BadprogTutorial class.
When we click it, the text will change to display "Hello".

2. The second Button

The second button, named button2 will be created with the BadprogButton class and the main.xml file.
This is a first great technique that allows to create dynamically a component.

In the BadprogButton class, we create a custom new Button and we just ask to draw a new Button instead of the classic Android one.

Then in the main.xml file, we create a new <view /> node for our custom component and we add some parameters directly on it.
Other ones will be set in the onCreate() method, such as the event listener.
So when we will click this Button, the text will display "Welcome".

3. The third Button

The third button, named button3, will be integrally created dynamically and added on the layout from the onCreate() method of the BadprogTutorial class.
With the event listener, we will be able to display the text "On BadproG.com!".

4. The files

Let's start with the code of the main JAVA class of our project, BadprogTutorial that extends Activity:

// src/package/Tuto_3_BadprogTutorial

package com.badprog.android.tutorial.api.framework.creatingcomponents;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;

/**
 *
 * @author BadproG
 *
 */
public class Tuto_3_BadprogTutorialCreatingComponentsActivity
    extends Activity {
    
    private LinearLayout mainLayout;
    private Button button3;
    
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        // Talk with the relative_layout
        this.mainLayout = (LinearLayout) findViewById(R.id.main_layout);
       
        // Creating button3 on the layout
        this.button3 = new Button(this);
        this.mainLayout.addView(button3);
        this.button3.setText("Button 3");
        this.button3.setOnClickListener(new View.OnClickListener() {
           
            @Override
            public void onClick(View v) {
                final TextView textV = (TextView) findViewById(R.id.editText1);
                textV.setText("On BadproG.com!");
            }
        }); // End button3
       
        // Talk with the button1 from the main.xml
        final Button button = (Button) findViewById(R.id.button1);
        button.setOnClickListener(new View.OnClickListener() {
           
            @Override
            public void onClick(View v) {
                final TextView textV = (TextView) findViewById(R.id.editText1);
                textV.setText("Hello");
            }
        }); // End talk button1
    
        // Talk with the button2 from the main.xml
        final Button button2 = (Button) findViewById(R.id.button2);
        button2.setOnClickListener(new View.OnClickListener() {
           
            @Override
            public void onClick(View v) {
                final TextView textV = (TextView) findViewById(R.id.editText1);
                textV.setText("Welcome");
            }
        }); // End talk button2
    }
}

Then, the BadprogButton component that extends Button:

// src/package/BadprogButton

package com.badprog.android.tutorial.api.framework.creatingcomponents;

import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.widget.Button;

/**
 *
 * @author BadproG
 *
 */
public class BadprogButton extends Button {

    public BadprogButton(Context context) {
        super(context);
    }

    public BadprogButton(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public BadprogButton(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }
}

And the main.xml file from res/layout/main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/main_layout">
    
    <!-- Text displayed -->
    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/editText1"
        android:layout_below="@+id/button1"
        android:layout_margin="5dp"
        android:layout_alignParentLeft="true">
        <requestFocus></requestFocus>
    </EditText>
    
    <!-- Button 1 -->
    <Button
        android:text="Button 1"
        android:id="@+id/button1"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
       />
    
    <!-- Button 2 -->
    <view
        class="com.badprog.android.tutorial.api.framework.creatingcomponents.BadprogButton"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button 2"
        android:id="@+id/button2"
    />
       
</LinearLayout>

A great technique to create components and add them on the layout.