Android User Interface Controls(UI) With Example

Definition

Input Controls defines View components in the user interface that the user can interact with. You can add as many as you want in your application, by declaring the appropriate XML elements in a XML layout file, which is placed in the res/layout directory of your project.

android-user-interface-controls-min

I have set the scope of this article to cover the  common UI controls as follows:

UI Controls

  • Toast
  • EditText
  • Progress Bar

Toast

Toast as a means to display a message to the user. A Toast refers view that contains a message and appears briefly on the screen. A toast never receives focus and is typically used to notify user using a view that shows up briefly and then disappears.

Toast is typically shown by calling the makeText() method.

Toast.makeText(this, “You clicked the button ” + getResources().getString(R.string.first) + ” menu option”, Toast.LENGTH_SHORT).show();

First argument refers to Context object and typically contains a reference to the activity.

The second argument denotes the message which appears on screen and

The last argument is the duration for which the toast message is visible on the screen.

Webp.net-compress-image (1)

EditText

EditText is a predefined subclass of TextView that includes rich editing capabilities. The data type of EditText can be controlled using the inputType tag

EditText field as shown below.

<?xml version=”1.0″ encoding=”utf-8″?>

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”

android:layout_width=”fill_parent”

android:layout_height=”fill_parent”

android:orientation=”vertical” >

<EditText

android:id=”@+id/hello”

android:inputType=”phone”

android:layout_height=”wrap_content”

android:layout_width=”match_parent”>

</EditText>

</LinearLayout>

The value of an EditText field can be retrieved programmatically using the findViewById() method as shown below.

final EditText simpleEditText = (EditText) findViewById(R.id.hello);

ui2-min

 

ProgressBar

The ProgressBar view provides visual feedback about some ongoing tasks, such as when you are performing a task in the background.

The ProgressDialog class provides methods to work on progress bar like setProgress(), setMessage(),setMax(), show(),setProgressStyle(),  etc.

Let’s see a example to display progress bar in android.

activity_main.xml

<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”

xmlns:tools=”http://schemas.android.com/tools”

android:layout_width=”match_parent”

android:layout_height=”match_parent”

tools:context=”.MainActivity” >

<ProgressBar

android:id=”@+id/progressBar1″

style=”?android:attr/progressBarStyleHorizontal”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:layout_alignParentLeft=”true”

android:layout_alignParentTop=”true”

android:layout_marginLeft=”23dp”

android:layout_marginTop=”20dp”

android:indeterminate=”false”

android:max=”100″

android:minHeight=”50dp”

android:minWidth=”200dp”

android:progress=”1″ />

<TextView

android:id=”@+id/textView1″

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:layout_alignLeft=”@+id/progressBar1″

android:layout_below=”@+id/progressBar1″/>

</RelativeLayout>

Trending Topics : Android O – Cool and New Features in the latest Google’s Update

MainActivity.java

package com.example.progressbar;

import android.app.Activity;

import android.os.Bundle;

import android.os.Handler;

import android.view.Menu;

import android.widget.ProgressBar;

import android.widget.TextView;

public class MainActivity extends Activity {

private ProgressBar progressBar;

private int progressStatus = 0;

private TextView textView;

private Handler handler = new Handler();

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

progressBar = (ProgressBar) findViewById(R.id.progressBar1);

textView = (TextView) findViewById(R.id.textView1);

// Start long running operation in a background thread

new Thread(new Runnable() {

public void run() {

while (progressStatus < 100) {

progressStatus += 1;

// Update the progress bar and display the

//current value in the text view

handler.post(new Runnable() {

public void run() {

progressBar.setProgress(progressStatus);

textView.setText(progressStatus+”/”+progressBar.getMax());

}

});

try {

// Sleep for 200 milliseconds.

//Just to display the progress slowly

Thread.sleep(200);

} catch (InterruptedException e) {

e.printStackTrace();

}

}

}

}).start();

}

@Override

public boolean onCreateOptionsMenu(Menu menu)

//to the action bar if it is present.

getMenuInflater().inflate(R.menu.activity_main, menu);

return true;

}

}

Webp.net-compress-image