Controls - Some Basic Views (TextView, ImageView, Button etc.)
×
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... »

Controls - Some Basic Views (TextView, ImageView, ..

Controls

Input controls are the interactive components in your app's user interface. Android provides a wide variety of controls you can use in your UI, such as buttons, text fields, seek bars, check box, zoom buttons, toggle buttons, and many more.

You may have doubt in your mind whether the textview is a control or a view. So, to clear all the doubts lets see the hierarchy given below.

Controls

Views

  • Some basic views
    • TextView
    • EditText
    • AutocompleteTextView
    • Button
    • ImageButton
    • ImageView
    • CheckBox
    • ToggleButton
    • RadioButton
    • RadioGroup
  • Picker views
    • TimePicker
    • DatePicker
  • List views
    • ListView
    • SpinnerView


Now I believe all the doubts are clear... So let's discuss all the views in detail.
 

View

A View is an object that draws something on the screen that the user can interact with and a ViewGroup is an object that holds other View (and ViewGroup) objects in order to define the layout of the user interface.

  1. Some basic views

    Lets start exploring some of the basic views that you can use for the purpose of designing the UI of your Android applications. These basic views enable you to display text information, as well as perform some basic selection.
     

    TextView

    This control is used to display text to the user.The android.widget.Button is subclass of TextView class. This is the most basic view and one that you will frequently use when you develop Android applications.

    To create a UI Control/View/Widget you will have to define a view/widget in the layout file and assign it a unique ID as follows-

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/LinearLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context=".MainActivity" >
    
        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hi I am a TextView" />
    
    </LinearLayout>
    


    Then finally create an instance of the Control object and capture it from the layout, use the following −

    TextView myText = (TextView) findViewById(R.id.text_id);

    enlightenedIn some other platforms, the TextView is commonly known as the label view. Its sole purpose is to display text on the screen.


    EditText

    EditText is a predefined subclass of TextView that includes rich editing capabilities it means that it allows users to edit its text content.
     

    Autocomplete TextView

    The AutoCompleteTextView is a view that is similar to EditText, except that it shows a list of completion suggestions automatically while the user is typing.

    enlightenedTo get a code go to "Extra Shots: Happy to code module".


    Button

    The Button Represents a push-button widget that can be pressed, or clicked, by the user to perform an action.. A button consists of text or an icon (or both text and an icon) that communicates what action occurs when the user touches it.

    enlightened To get a code go to "Extra Shots: Happy to code module".


    ImageButton

    The ImageButton is Similar to the Button view, except that it also displays an image.
     

    ImageView

    The ImageView displays an arbitrary image, such as an icon. The ImageView class can load images from various sources (such as resources or content providers), takes care of computing its measurement from the image so that it can be used in any layout manager, and provides various display options such as scaling and tinting.
     

    CheckBox

    A special type of button that has two states: checked or unchecked. An on/off switch that can be toggled by the user. You should use check box when presenting users with a group of selectable options that are not mutually exclusive.

    enlightened To get a code go to "Extra Shots: Happy to code module".


    ToggleButton

    It has two states ON and OFF. It  is an on/off button with a light indicator. It displays checked/unchecked states using a light indicator.
     

    RadioButton

    The RadioButton has two states: either checked or unchecked. Once a RadioButton is checked, it cannot be unchecked.
     

    RadioGroup

    A RadioGroup is used to group together one or more RadioButton views, thereby allowing only one RadioButton to be checked within the RadioGroup.


    To understand all these basic views let's take an example. Follow these steps-

    Step1: Create a new Android project and name it BasicViews.

    Step2: Now we will modify activity_main.xml file. so add the following code into activity_main.xml file-

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/LinearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context=".MainActivity" >
    
        <Button
            android:id="@+id/btnSave"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Save" />
    
        <Button
            android:id="@+id/btnOpen"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Open" />
    
        <ImageButton
            android:id="@+id/btnimg1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />
    
        <EditText
            android:id="@+id/txtName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10" >
    
            <requestFocus />
        </EditText>
    
        <CheckBox
            android:id="@+id/chkAutosave"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Autosave" />
    
        <CheckBox
            android:id="@+id/star"
            style="?android:attr/starStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    
            <RadioGroup
                android:id="@+id/radioGroup1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >
    
                <RadioButton
                    android:id="@+id/radio0"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:checked="true"
                    android:text="Option1" />
    
                <RadioButton
                    android:id="@+id/radio1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Option2" />
            </RadioGroup>
    
            <ToggleButton
                android:id="@+id/toggleButton1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="ToggleButton" />
    
    </LinearLayout>


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


    Step4: Click on the various views and note how they vary in their look and feel. Below figure shows the following changes to the view:



    You will observe the following changes-
    There is some text written in the EditText.
    The first CheckBox view (Autosave) is checked.
    The second CheckBox View (star) is checked.
    The second RadioButton (Option 2) is selected.
    The ToggleButton is turned on.

    Handling View Events
    To handle these events lets modify our app created previously.

    Step5: We are going to modify our MainActivity.java file. So add the following code to the MainActivity.java file-
     

    package com.example.basicviews;
    
    import android.os.Bundle;
    import android.app.Activity;
    import android.view.Menu;
    import android.view.View;
    import android.widget.Button;
    import android.widget.CheckBox;
    import android.widget.RadioButton;
    import android.widget.RadioGroup;
    import android.widget.Toast;
    import android.widget.ToggleButton;
    import android.widget.RadioGroup.OnCheckedChangeListener;
    
    public class MainActivity extends Activity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            
          //---Button view---
            Button btnOpen = (Button) findViewById(R.id.btnOpen);
            btnOpen.setOnClickListener(new View.OnClickListener() {
    			
    			@Override
    			public void onClick(View v) {
    				// TODO Auto-generated method stub
    				DisplayToast("You have clicked the Open button");	
    			}
    		});
            
          //---Button view---
            Button btnSave = (Button) findViewById(R.id.btnSave);
            btnSave.setOnClickListener(new View.OnClickListener()
            {
            public void onClick(View v) {
            DisplayToast("You have clicked the Save button");
            }
            });
            
          //---CheckBox---
            CheckBox checkBox = (CheckBox) findViewById(R.id.chkAutosave);
            checkBox.setOnClickListener(new View.OnClickListener()
            {
            public void onClick(View v) {
            if (((CheckBox)v).isChecked())
            DisplayToast("CheckBox is checked");
            else
            	DisplayToast("CheckBox is unchecked");
            }
            });
            //---RadioButton---
            RadioGroup radioGroup = (RadioGroup) findViewById(R.id.radioGroup1);
            radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener()
            {
            public void onCheckedChanged(RadioGroup group, int checkedId) {
            RadioButton rb1 = (RadioButton) findViewById(R.id.radio0);
            if (rb1.isChecked()) {
            DisplayToast("Option 1 checked!");
            } else {
            DisplayToast("Option 2 checked!");
            }
            }
            });
            //---ToggleButton---
            ToggleButton toggleButton =
            (ToggleButton) findViewById(R.id.toggleButton1);
            toggleButton.setOnClickListener(new View.OnClickListener()
            {
            public void onClick(View v) {
            if (((ToggleButton)v).isChecked())
            DisplayToast("Toggle button is On");
            else
            DisplayToast("Toggle button is Off");
            }
            });
            }
            private void DisplayToast(String msg)
            {
            Toast.makeText(getBaseContext(), msg,
            Toast.LENGTH_SHORT).show();
            }
        
    
    
        @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;
        }
        
    }
    


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



    Step7: Click on the various views and observe the message displayed in the Toast window.



     

  2. Picker views
    Views that enable users to select from a list, such as the TimePicker and DatePicker views.
     
  3. List views
    Views that display a long list of items, such as the ListView and the SpinnerView views

 

enlightenedWe will discuss the Picker views and List views in the next sections...

 

 

← Preview

Displaying Notifications

Next →

Controls - Picker Views (Date and Time)

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