Tag Archives: #android UI Controls

TabWidget in Android UI Control

TabWidget is an Android Control which represents each page in the parents tab collection.

the container object for this widget is tab host, When the user selects a tab, this object sent a message to the parent container(tab host), to tell is to switch the displayed page. The container tab host is used to add labels, add call back handlers, and manage call backs.

Android tab host provides a nice way to present multiple things on a single screen, in order to use tabs we have to set two things to the tab:

1) Tab Indicator : text to show on tab, done by “setIndicator(“Tab Name”);”

2) Tab Content : This is used to set the activity that will be opened when the user selects/clicks a particular tab.

this is set by “setContent(“activity object”);”

TabWidget

Activity_Main.xml :

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

<TabHost xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:id=”@android:id/tabhost”>

<LinearLayout android:id=”@+id/LinearLayout01″
android:orientation=”vertical”
android:layout_height=”fill_parent”
android:layout_width=”fill_parent”>

<TabWidget android:id=”@android:id/tabs”
android:layout_height=”wrap_content”
android:layout_width=”fill_parent”>
</TabWidget>

<FrameLayout android:id=”@android:id/tabcontent”
android:layout_height=”fill_parent”
android:layout_width=”fill_parent”>
</FrameLayout>

</LinearLayout>

</TabHost>

Screen1.xml :

<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:id=”@+id/LinearLayout01″
android:background=”#FFFF0000″
android:layout_height=”fill_parent”
android:layout_width=”fill_parent”>

<Button android:id=”@+id/btnScreen1″
android:layout_width=”150dip”
android:layout_height=”40dip”
android:text=”First Screen” />

</RelativeLayout>

Screen2.xml :

<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:id=”@+id/LinearLayout02″
android:background=”#FF00FF00″
android:layout_height=”fill_parent”
android:layout_width=”fill_parent”>

<Button android:id=”@+id/btnScreen2″
android:layout_width=”150dip”
android:layout_height=”40dip”
android:text=”Second Screen” />

</RelativeLayout>

Screen3.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:id=”@+id/LinearLayout02″
android:background=”#FF0000FF”
android:layout_height=”fill_parent”
android:layout_width=”fill_parent”>

<Button android:id=”@+id/btnScreen3″
android:layout_width=”150dip”
android:layout_height=”40dip”
android:text=”Third Screen” />

</RelativeLayout>

Screen4.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:id=”@+id/LinearLayout02″
android:background=”#FFbbbbbb”
android:layout_height=”fill_parent”
android:layout_width=”fill_parent”>

<Button android:id=”@+id/btnScreen4″
android:layout_width=”150dip”
android:layout_height=”40dip”
android:text=”fourth Screen” />

</RelativeLayout>

Main_Actvity.java :


package com.example.tabwidget;
import android.app.Activity;
import android.app.TabActivity;
import android.content.Intent;
import android.graphics.Color;
import android.graphics.Typeface;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.Window;
import android.widget.LinearLayout;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
import android.widget.TextView;

public class MainActivity extends TabActivity
{
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);

// create the TabHost that will contain the Tabs
TabHost tabHost = (TabHost)findViewById(android.R.id.tabhost);

TabSpec tab1 = tabHost.newTabSpec(“First Tab”);
TabSpec tab2 = tabHost.newTabSpec(“Second Tab”);
TabSpec tab3 = tabHost.newTabSpec(“Third tab”);
TabSpec tab4 = tabHost.newTabSpec(“Fourth tab”);

// Set the Tab name and Activity
// that will be opened when particular Tab will be selected

tab1.setIndicator(“”, getResources().getDrawable(R.drawable.ic_launcher));
tab1.setContent(new Intent(this,Tab1Activity.class));

tab2.setIndicator(“”, getResources().getDrawable(R.drawable.ic_launcher));
tab2.setContent(new Intent(this,Tab2Activity.class));

tab3.setIndicator(“”, getResources().getDrawable(R.drawable.ic_launcher));
tab3.setContent(new Intent(this,Tab3Activity.class));

tab4.setIndicator(“”, getResources().getDrawable(R.drawable.ic_launcher));
tab4.setContent(new Intent(this,Tab4Activity.class));

/** Add the tabs to the TabHost to display. */
tabHost.addTab(tab1);
tabHost.addTab(tab2);
tabHost.addTab(tab3);
tabHost.addTab(tab4);

}
}

 

Tab1_Activity.java :

package com.example.tabwidget;

import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.widget.TextView;

public class Tab1Activity extends Activity
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.screen1);
}
}

 

Tab2_Actvity.java :

package com.example.tabwidget;

import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.widget.TextView;

public class Tab2Activity extends Activity
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);

super.onCreate(savedInstanceState);
setContentView(R.layout.screen2);
}
}

 

Tab3Activity.java :

package com.example.tabwidget;

import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.widget.TextView;
public class Tab3Activity extends Activity
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);

super.onCreate(savedInstanceState);
setContentView(R.layout.screen3);
}
}

 

Tab4Actvity.java :

package com.example.tabwidget;

import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.widget.TextView;
public class Tab4Activity extends Activity
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);

super.onCreate(savedInstanceState);
setContentView(R.layout.screen4);
}
}

SlidingDrawer in Android UI Control

SlidingDrawer

SlidingDrawer is a control which hides content (controls and text level) out of the screen and allows the user to drag a handle to bring the content on the screen.

SlidingDrawer can be used vertically or horizontally. A special Widget composed of two children views:

1) the handle: this is used to be drag by the user and content attached to the handle.

2) the content:the content layout is attached to the handle and drag on to the screen when the user pulls the handle.

sliding drawer should be used as an overlay inside layouts, this means that sliding drawer should only be used inside of a frame layout or a relative layout. the size of the sliding drawer defines how much space the content will occupy one slide out.

inside a xml layout sliding drawer must define the ID of the handle and the content layout.

Attributes of sliding drawer:-

a) android:allowSingleTab : it is used to set weather the drawer can be open/close by a single tab on a handle.

b) android:animateOnClick : this attribute sets weather the drawer should be open/close with an animation effect when the     user click on the handle.

c) android:bottomOffset : this sets the extra off sets for the handle at the bottom of the SlidingDrawer.

d) android:content : this attribute act as an identifier for the child that represents the drawers content.

e) android:handle : this attribute act as an identifier for the child that represents the drawers handle.

f) android:orientation : this sets the orientation of the sliding drawer.

g) android:topOffset : this sets the extra off sets for the handle at the top of the SlidingDrawer.

 

.xml file: 

<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:id=”@+id/LinearLayout01″
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:background=”@drawable/androidpeople”>
<SlidingDrawer android:id=”@+id/SlidingDrawer”
android:layout_alignParentBottom=”true”
android:layout_width=”fill_parent”
android:layout_height=”250dip”
android:handle=”@+id/slideHandleButton”
android:content=”@+id/contentLayout”
android:padding=”10dip”
android:orientation=”vertical”>

<Button android:id=”@+id/slideHandleButton”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:background=”@drawable/closearrow” />

<LinearLayout android:id=”@+id/contentLayout”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:background=”#c1cdcd”
android:gravity=”center|top”
android:orientation=”vertical”
android:padding=”10dip” >

<Button android:id=”@+id/Button01″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:background=”@drawable/download” />

<Button android:id=”@+id/Button02″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:background=”@drawable/download1″
android:layout_marginTop=”15dp”/>

<Button android:id=”@+id/Button03″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:background=”@drawable/images”
android:layout_marginTop=”15dp”/>

</LinearLayout>

</SlidingDrawer>

</RelativeLayout>

 

Java file: 

package com.CoreProgrammers.drawer;

import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.SlidingDrawer;
import android.widget.SlidingDrawer.OnDrawerCloseListener;
import android.widget.SlidingDrawer.OnDrawerOpenListener;
import android.widget.Toast;

public class slidingDrawerExample extends Activity
{

Button slideHandleButton;
SlidingDrawer slidingDrawer;
Button Button01;
Button Button02;
Button Button03;

public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);

setContentView(R.layout.main);

slideHandleButton = (Button) findViewById(R.id.slideHandleButton);
Button01= (Button) findViewById(R.id.Button01);
Button02= (Button) findViewById(R.id.Button02);
Button03= (Button) findViewById(R.id.Button03);

slidingDrawer = (SlidingDrawer) findViewById(R.id.SlidingDrawer);

slidingDrawer.setOnDrawerOpenListener(new OnDrawerOpenListener()
{
@Override
public void onDrawerOpened()
{
slideHandleButton.setBackgroundResource(R.drawable.openarrow);
}
});

slidingDrawer.setOnDrawerCloseListener(new OnDrawerCloseListener()
{

@Override
public void onDrawerClosed()
{
slideHandleButton.setBackgroundResource(R.drawable.closearrow);
}

});

Button01.setOnClickListener(new OnClickListener()
{

@Override
public void onClick(View v)
{

Toast toast = Toast.makeText(slidingDrawerExample.this, “Facebook!!”, Toast.LENGTH_SHORT);
toast.setGravity(Gravity.LEFT, 0 , 0);
toast.show();
}
});

Button02.setOnClickListener(new OnClickListener()
{

@Override
public void onClick(View v)
{
Toast toast = Toast.makeText(slidingDrawerExample.this, “Whatsapp!!”, Toast.LENGTH_SHORT);
toast.setGravity(Gravity.LEFT, 0 , 0);
toast.show();
}
});

Button03.setOnClickListener(new OnClickListener()
{

@Override
public void onClick(View v)
{
Toast toast = Toast.makeText(slidingDrawerExample.this, “linkedin!!”, Toast.LENGTH_SHORT);
toast.setGravity(Gravity.LEFT, 0 , 0);
toast.show();
}
});

}

}

SeekBar in Android UI controls

SeekBar is an Android UI Control which is an extension of ProgressBar Class with an addition of drag-able thumb, the user can touch the thumb and drag left or right to set the current Progress level.

seekbar

.xml file:

<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”
android:background=”#ff009924″
tools:context=”com.CoreProgrammers.android.seekbar.MainActivity” >

<SeekBar android:id=”@+id/seekBar1″
android:layout_width=”400dp”
android:layout_height=”wrap_content”
android:layout_alignParentLeft=”true”
android:layout_alignParentTop=”true”
android:layout_marginTop=”26dp”
android:background=”#ffff2244″
android:thumb=”@drawable/ic_launcher”
android:scrollbarStyle=”outsideInset”
android:max=”100″/>

<TextView android:id=”@+id/textView1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignParentLeft=”true”
android:layout_below=”@+id/seekBar1″
android:layout_marginLeft=”29dp”
android:layout_marginTop=”14dp” />

</RelativeLayout>

Java file:

 

package com.CoreProgrammers.android.seekbar;

import android.app.Activity;
import android.os.Bundle;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity{

private SeekBar seekBar;
private TextView textView;

@Override
protected void onCreate(Bundle savedInstanceState)
{

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initializeVariables();

textView.setText(“Covered: ” + seekBar.getProgress() + “/” + seekBar.getMax());

seekBar.setOnSeekBarChangeListener(new OnSeekBarChangeListener()
{
int progress = 0;

@Override
public void onProgressChanged(SeekBar seekBar, int progresValue, boolean fromUser)
{
progress = progresValue;
textView.setText(“Covered: ” + progress + “/” + seekBar.getMax());
}

@Override
public void onStartTrackingTouch(SeekBar seekBar)
{
Toast.makeText(getApplicationContext(), “Started tracking seekbar”, Toast.LENGTH_SHORT).show();
}

@Override
public void onStopTrackingTouch(SeekBar seekBar)
{
Toast.makeText(getApplicationContext(), “Stopped tracking seekbar”, Toast.LENGTH_SHORT).show();
}
});
}

private void initializeVariables()
{
seekBar = (SeekBar) findViewById(R.id.seekBar1);
textView = (TextView) findViewById(R.id.textView1);
}
}

RatingBar in Android UI Controls

ratingbarAndroid RatingBar is used to Accept and display the user rating. This Control shows the number of stars in which the user can touch/drag to set the value in Android, We can create the rating bar(rating stars) using the tag in xml UI Layout file.

eg:

<android:layout_width="wrap_content"
android:layout_height="30dip"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="22dp"
android:layout_marginTop="28dp" />
RatingBar

followings are the Properties of Android RatingBar control : a) android:isIndicator : this Attribute takes a boolean value either true or false, if this Property is set to true than the RatingBar will be non-changeable by the user, in other words the RatingBar will be Act like Indicator. b) android:numStars : this takes the integer value which indicates the number of stars to be displayed in the RatingBar control. c) android:raing : this takes a float value input which will be the default Rating, which is going to be the displayed in the rating bar control, when the RatingBar is loaded for first time. d) android:stepSize: this Attribute take a float value which is the step size of the rate(rating) increased or decried. for eg. if we set the step size to 1.0 than the rating value will be increased or decried by 1, and if have given step size of 0.5 than the rating size will be increased or decried by 0.5 .

xml file:-

<xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >

android:numStars="7"
android:stepSize="0.25"
android:layout_width="wrap_content"
android:layout_height="30dip"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="22dp"
android:layout_marginTop="28dp" />

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/ratingBar1"
android:layout_below="@+id/ratingBar1" />


Java file:-

package com.coreprogrammers.ratingbardemo;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.RatingBar;
import android.widget.RatingBar.OnRatingBarChangeListener;
import android.widget.TextView;

public class MainActivity extends Activity
{

        /**
        * Rating bar instance
        */
        RatingBar ratingBar;
        /**
        * Customized Rating text
        */
        TextView ratingText;
        
        /**
        * @see android.app.Activity#onCreate(android.os.Bundle)
        */
        @Override
        protected void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            
            ratingText = (TextView) findViewById(R.id.rating);
            
            ratingBar = (RatingBar) findViewById(R.id.ratingBar1);
        
            ratingBar.setOnRatingBarChangeListener(new OnRatingBarChangeListener()
            {
                    @Override
                    public void onRatingChanged(RatingBar ratingBar,floatrating, boolean fromUser)
                    {
                        final int numStars = ratingBar.getNumStars();
                        ratingText.setText(rating + "/" + numStars);
                    }
            });
        
        }

}
 

Java Code


        

ImageView in Android UI controls

ImageView is one of the UI Widgets that is used to display images in our Android Application. ImageView comes with different configuration options to support different scale types. Scale types options are used for scaling the bounds/boundary of an image to the bounds/boundary of current view.

below are the listed scale type configuration property of current view:

1) center
2) centerCrop
3) centerInside
4) fitCenter
5) fitEnd
6) fitStart
7) fitXY
8) matrix

imageview

.xml file:

java file:

package com.example.imageview;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends Activity
{
ImageView _objimageView;

@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

//setting image resource from drawable
_objimageView = (ImageView) findViewById(R.id.imageView2);

}

}

DatePicker in Android UI controls

DatePicker is an Android UI Control which allows the user to select the date consisting of day, month and year in any custom user interface, to achieve this functionality Android Provides DatePicker dialog components/class.

Important Methods of the DatePicker control:

1) getDayOfMonth() :- This method of DatePicker control returns the selected day of month.

2) getMonth() :- This method of DatePicker control returns the selected month.

3) getYear() :- This method of DatePicker control returns the selected year.

4) setMaxDate(long maxDate) :- This method of DatePicker control, sets the maximum date supported by the DatePicker control in milliseconds started from January 1, 1997 00:00:00 .

5) setMinDate(long minDate) :- This method of DatePicker control, sets the minimum date supported by the DatePicker control in milliseconds started from january 1 , 1997 00:00:00 .

6) setSpinnerShown(boolean shown) :- This method of DatePicker control, sets the spinner of the DatePicker controlto true or false.

7) updateDate(int year, int month, int dayOfMonth) :- This method of DatePicker class is a very Important method which sets the date in the DatePicker control provided by the user or the developer.

DatePicker

.xml file:


java file:

package com.example.androiddatepicker;

import java.util.Calendar;

import android.app.Activity;
import android.app.DatePickerDialog;
import android.app.Dialog;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.DatePicker;
import android.widget.EditText;
import android.widget.ImageButton;

public class MainActivity extends Activity
{
private ImageButton imageButton;
private Calendar cal;
private int day;
private int month;
private int year;
private EditText editText;

private DatePickerDialog.OnDateSetListener datePickerListener;

@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

imageButton = (ImageButton) findViewById(R.id.imageButton);

cal = Calendar.getInstance();
day = cal.get(Calendar.DAY_OF_MONTH);
month = cal.get(Calendar.MONTH);
year = cal.get(Calendar.YEAR);

editText = (EditText) findViewById(R.id.editText);

imageButton.setOnClickListener(new OnClickListener()
{
@SuppressWarnings(“deprecation”)
@Override

public void onClick(View v)
{
showDialog(0);
}
});

datePickerListener = new DatePickerDialog.OnDateSetListener()
{
public void onDateSet(DatePicker view, int selectedYear, int selectedMonth, int selectedDay)
{
editText.setText(selectedDay + “-” + (selectedMonth + 1) + “-” + selectedYear);
}
};

}

@Override
@Deprecated
protected Dialog onCreateDialog(int i)
{
DatePickerDialog _objDatePickerDialog;

_objDatePickerDialog=new DatePickerDialog(MainActivity.this, datePickerListener, year, month, day);

return _objDatePickerDialog;
}

}

Spinner in Android UI Control

Spinner Provide a quick way to select a one value from a set.

In a default state a spinner shows its currently selected value when the user touches the spinner, a drop-down menu get displayed in a list form, from which the user can select a new option from the set.

device-2015-01-06-214252

.xml file:

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:orientation=”vertical” >

<Spinner android:id=”@+id/spinner1″
android:layout_width=”200dip”
android:layout_height=”wrap_content”
android:prompt=”@string/spinner_prompt” />

<Button android:id=”@+id/btnSubmit”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Click here”
android:paddingTop=”20px” />

</LinearLayout>

 

.java file:

package com.coreprogrammers.androidspinnerdemo;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.Spinner;
import android.widget.Toast;
public class MainActivity extends Activity
{

private Spinner spinner1;
private Button btnSubmit;

@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

spinner1 = (Spinner) findViewById(R.id.spinner1);

List<String> list = new ArrayList<String>();

list.add(“Android”);
list.add(“Java”);
list.add(“MatLab”);
list.add(“C Language”);
list.add(“PHP”);

ArrayAdapter<String> dataAdapter = new ArrayAdapter<String>(MainActivity.this,android.R.layout.simple_spinner_dropdown_item,list);

spinner1.setAdapter(dataAdapter);

// Button click Listener
addListenerOnButton();

}

public void addListenerOnButton()
{

btnSubmit = (Button) findViewById(R.id.btnSubmit);

btnSubmit.setOnClickListener(new OnClickListener()
{

@Override
public void onClick(View v)
{

Toast.makeText(MainActivity.this, “On Button Click : ” + “\n” + String.valueOf(spinner1.getSelectedItem()) , Toast.LENGTH_LONG).show();
}

});

}

}

Skip to toolbar