Mobile Application Development-Designing User Interface With View

ChandrakantDivate1 196 views 47 slides May 09, 2024
Slide 1
Slide 1 of 47
Slide 1
1
Slide 2
2
Slide 3
3
Slide 4
4
Slide 5
5
Slide 6
6
Slide 7
7
Slide 8
8
Slide 9
9
Slide 10
10
Slide 11
11
Slide 12
12
Slide 13
13
Slide 14
14
Slide 15
15
Slide 16
16
Slide 17
17
Slide 18
18
Slide 19
19
Slide 20
20
Slide 21
21
Slide 22
22
Slide 23
23
Slide 24
24
Slide 25
25
Slide 26
26
Slide 27
27
Slide 28
28
Slide 29
29
Slide 30
30
Slide 31
31
Slide 32
32
Slide 33
33
Slide 34
34
Slide 35
35
Slide 36
36
Slide 37
37
Slide 38
38
Slide 39
39
Slide 40
40
Slide 41
41
Slide 42
42
Slide 43
43
Slide 44
44
Slide 45
45
Slide 46
46
Slide 47
47

About This Presentation

Mobile Application Development-Designing User Interface With View


Slide Content

Designing User Interface With View

TextView Basically in Android Studio the Android TextView ;  UI component  is used to display text to the user. TextView is optionally is editable. Attributes Descriptions android : id To identifies the control uniquely we use ID attribute. android : width To specify the size (width) of controls. Possible values are pt, px, dp etc.(i.e  10pt, 155px, 230dp etc). android : height To specify the size(width) of controls. Possible values are pt, px, dp etc.(i.e  10pt, 155px, 230dp etc). android : fontSize It is used to specify the text size. Possible values are pt, px, dp etc.(i.e  10pt, 155px, 230dp etc). android : gravity It is used for text alignment inside textView. Possible values are center, left, right, center_vertically, center_horizontally etc. android : layoutGravity It is used for textView layout alignment in parent layout. Possible values are center, left, right, center_vertically, center_horizontally etc. android : text Text to display on textView. android : textColor To specify the color of text in TextView. Possible values are HEX (#rrggbb) code. (i.e) #CECECE android : hint The text to display when TextView is empty. android : capitalize If set, specifies that this TextView has a textual input method and should automatically capitalize what the user types.  

TextView Attributes Descriptions android : cursorVisible To specify the visibility of cursor in TextView. Possbile values are Boolean “true” or “false”. android : fontFamily To specify the text (font family) in TextView. android : textAllCaps To capitalize all text of TextView. Possible values are Boolean “true” or “false”. android : textColorHighlight Color of the text selection highlight. android : textColorHint To specify the color of hint text. android : textIsSelectable Indicates that the content of a non-editable text can be selected. Possible value either “true” or “false”. android : textStyle To gives style to the text in TextView. Possible values are bold, normal, italic. android : inputType The type of data being placed in a text field. Phone, Date, Time, Number, Password etc   android : maxWidth Makes the TextView be at most this many pixels wide. android : maxHeight Makes the TextView be at most this many pixels tall. android : minWidth Makes the TextView be at least this many pixels wide. android : minHeight Makes the TextView be at least this many pixels tall. Assignment 7_1

EditText In Android,  EditText  is a standard entry widget in android apps. It is an overlay over  TextView  that configures itself to be editable.  EditText  is a subclass of  TextView  with text editing operations.  We often use EditText in our applications in order to provide an input or text field, especially in forms. Attribute Description android:id It is used to uniquely identify the control android:gravity It is used to specify how to align the text like left, right, center, top, etc. android:text It is used to set the text. android:hint It is used to display the hint text when text is empty android:textColor It is used to change the color of the text. android:textColorHint It is used to change the text color of hint text. android:textSize It is used to specify the size of the text. android:textStyle It is used to change the style (bold, italic, bolditalic) of text. android:background It is used to set the background color for edit text control android:width It makes the TextView be exactly this many pixels wide. android:height It makes the TextView be exactly this many pixels tall. android:maxWidth It is used to make the TextView be at most this many pixels wide. android:minWidth It is used to make the TextView be at least this many pixels wide. android:textAllCaps It is used to present the text in all CAPS android:inputType It is used to specify the type of text being placed in text fields. android:fontFamily It is used to specify the fontFamily for the text. android:editable If we set false, EditText won't allow us to enter or modify the text

Button In android,  Button  is a user interface control that is used to perform an action whenever the user clicks or tap on it. Generally, Buttons in android will contain a text or an icon or both and perform an action when the user touches it. Following is the pictorial representation of using  Buttons  in android applications. In android, we have a different type of buttons available to use based on our requirements, those are ImageButton , ToggleButton , RadioButton . In android, we can create a Button control in two ways either in the XML layout file or create it in the Activity file programmatically. Create Button in XML Layout File < LinearLayout   xmlns: android = "http://schemas.android.com/ apk /res/android"      android :orientation = "vertical"  android :layout_width = " match_parent "      android :layout_height = " match_parent " >     < Button          android :id = "@+id/ addBtn "          android :layout_width = " wrap_content "          android :layout_height = " wrap_content "          android :text = "Add"  /> </ LinearLayout >

Button Create Button Control in Activity File In android, we can create  Button  control programmatically in an  activity  file based on our requirements.    Following is the example of creating  Button  control dynamically in the activity file. LinearLayout layout = ( LinearLayout ) findViewById ( R.id. l_layout ); Button btn =  new  Button( this ); btn.setText ( "Test" ); layout.addView ( btn ); Define Button Click Event in XML Layout File We can define click event handler for button by adding  android:onClick  attribute to the  <Button>  element in our XML layout file.    The value of  android:onClick  attribute must be the name of the method which we need to call in response to a click event and the  Activity  file which hosting XML layout must implement the corresponding method.   Following is the example of defining a button click event using  android:onClick  attribute in an XML layout file.

Button <? xml version= "1.0"  encoding= "utf-8" ?> < LinearLayout  xmlns: android = "http://schemas.android.com/apk/res/android"      android :orientation= "vertical"  android :layout_width= "match_parent"      android :layout_height= "match_parent" >         < Button          android :id= "@+id/addBtn"          android :layout_width= "wrap_content"          android :layout_height= "wrap_content"          android :text= "Add"          android :onClick= "addOperation" /> </ LinearLayout > In Activity that hosts our XML layout file, we need to implement click event method like as shown below /** Called when the user touches the button */ public void  addOperation (View view) {      // Do something in response to the button click }

Button Define Button Click Event in Activity File In android, we can define the button click event programmatically in the  Activity  file rather than XML layout file. To define button click programmatically, create  View.OnClickListener  object and assign it to the button by calling  setOnClickListener ( View.OnClickListener )  like as shown below. Button btnAdd = (Button) findViewById ( R.id. addBtn ); btnAdd.setOnClickListener ( new  View.OnClickListener () { public void  onClick (View v) { // Do something in response to button click } }); }

Button Attribute Description android:id It is used to uniquely identify the control android:gravity It is used to specify how to align the text like left, right, center, top, etc. android:text It is used to set the text. android:textColor It is used to change the color of text. android:textSize It is used to specify the size of the text. android:textStyle It is used to change the style (bold, italic, bolditalic) of text. android:background It is used to set the background color for button control. android:padding It is used to set the padding from left, right, top and bottom. android:drawableBottom It’s drawable to be drawn to the below of text. android:drawableRight It’s drawable to be drawn to the right of text. android:drawableLeft It’s drawable to be drawn to the left of the text.

ImageButton In android, Image Button is a user interface control that is used to display a button with an image and to perform an action when a user clicks or taps on it. By default, the ImageButton looks same as normal button and it performs an action when a user clicks or touches it, but the only difference is we will add a custom image to the button instead of text. Following is the pictorial representation of using Image Buttons in android applications. In android, we can add an image to the button by using  < ImageButton >  attribute  android:src  in XML layout file or by using the  setImageResource ()  method.   In android, we can create ImageButton control in two ways either in the XML layout file or create it in the Activity file programmatically.

ImageButton Create ImageButton in XML Layout File <? xml version= "1.0"  encoding= "utf-8" ?> < LinearLayout  xmlns: android = "http://schemas.android.com/apk/res/android"      android :orientation= "vertical"  android :layout_width= "match_parent"      android :layout_height= "match_parent" >     < ImageButton          android :id= "@+id/addBtn"          android :layout_width= "wrap_content"          android :layout_height= "wrap_content"          android :src= "@drawable/add_icon"  /> </ LinearLayout > Create ImageButton Control in Activity File LinearLayout layout = ( LinearLayout ) findViewById ( R.id. l_layout ); ImageButton btn =  new  ImageButton ( this ); btn.setImageResource ( R.drawable. add_icon ); layout.addView ( btn );

ImageButton Anndroid Handle ImageButton Click Events Generally, whenever the user clicks on  ImageButton , the  ImageButton  object will receives an on-click event.   In android, we can define button click event in two ways either in XML layout file or create it in  Activity  file programmatically. i . Define ImageButton Click Event in XML Layout File We can define click event handler for button by adding  android:onClick  attribute to the  < ImageButton >  element in our XML layout file.   The value of  android:onClick  attribute must be the name of method which we need to call in response to a click event and the  Activity  file which hosting XML layout must implement the corresponding method. <? xml version= "1.0"  encoding= "utf-8" ?> < LinearLayout   xmlns: android = "http://schemas.android.com/ apk /res/android"      android :orientation = "vertical"  android :layout_width = " match_parent "      android :layout_height = " match_parent " >     < ImageButton      android :id = "@+id/ addBtn "      android :layout_width = " wrap_content "      android :layout_height = " wrap_content "      android :src = "@ drawable / add_icon "     android :onClick = " addOperation " /> </ LinearLayout >

ImageButton Anndroid Handle ImageButton Click Events Generally, whenever the user clicks on  ImageButton , the  ImageButton  object will receives an on-click event. In android, we can define button click event in two ways either in XML layout file or create it in  Activity  file programmatically. i . Define ImageButton Click Event in XML Layout File We can define click event handler for button by adding  android:onClick  attribute to the  < ImageButton >  element in our XML layout file. The value of  android:onClick  attribute must be the name of method which we need to call in response to a click event and the  Activity  file which hosting XML layout must implement the corresponding method. <? xml version= "1.0"  encoding= "utf-8" ?> < LinearLayout   xmlns: android = "http://schemas.android.com/ apk /res/android"      android :orientation = "vertical"  android :layout_width = " match_parent "      android :layout_height = " match_parent " >     < ImageButton      android :id = "@+id/ addBtn "      android :layout_width = " wrap_content "      android :layout_height = " wrap_content "      android :src = "@ drawable / add_icon "     android :onClick = " addOperation " /> </ LinearLayout > In  Activity  that hosts our XML layout file, we need to implement click event method like as shown below /** Called when the user touches the button */ public void  addOperation (View view) {      // Do something in response to button click }

ImageButton Anndroid Handle ImageButton Click Events ii. Define ImageButton Click Event in Activity File In android, we can define ImageButton click event programmatically in Activity file rather than XML layout file. To define button click programmatically, create View.OnClickListener object and assign it to the button by calling setOnClickListener ( View.OnClickListener ) like as shown below . ImageButton btnAdd = ( ImageButton ) findViewById ( R.id. addBtn ); btnAdd.setOnClickListener ( new  View.OnClickListener () { public void  onClick (View v) { // Do something in response to button click } }); }

Android ImageButton Control Attributes Attribute Description android:id It is used to uniquely identify the control android:src It is used to specify the source file of an image android:background It is used to set the background color for an image button control. android:padding It is used to set the padding from left, right, top and bottom of the image button. android:baseline It is used to set the offset of the baseline within the view.

ToggleButton In android, Toggle Button is a user interface control that is used to display ON (Checked) or OFF (Unchecked) states as a button with a light indicator. The ToggleButton is useful for the users to change the settings between two states either ON or OFF. We can add a ToggleButton to our application layout by using the ToggleButton object. Following is the pictorial representation of using ToggleButton in android applications. By default, the android ToggleButton will be in OFF (Unchecked) state. We can change the default state of ToggleButton by using android:checked attribute. In case, if we want to change the state of ToggleButton to ON (Checked), then we need to set android:checked = “true” in our XML layout file. In android, we can create ToggleButton control in two ways either in the XML layout file or create it in the Activity file programmatically.

ToggleButton Create ToggleButton in XML Layout File <? xml version= "1.0"  encoding= "utf-8" ?> < RelativeLayout  xmlns: android = "http://schemas.android.com/apk/res/android"      android :layout_width= "match_parent"  android :layout_height= "match_parent" >     < ToggleButton          android :id= "@+id/toggle1"          android :layout_width= "wrap_content"          android :layout_height= "wrap_content"          android :layout_marginLeft= "100dp"          android :layout_marginTop= "120dp"          android :checked= "true"          android :textOff= "OFF"          android :textOn= "ON" /> </ RelativeLayout > Create ToggleButton Control in Activity File RelativeLayout layout = ( RelativeLayout ) findViewById ( R.id. r_layout ); ToggleButton tb =  new  ToggleButton ( this ); tb.setTextOff ( "OFF" ); tb.setTextOn ( "ON" ); tb.setChecked ( true ); layout.addView ( tb );

ToggleButton Handle Android ToggleButton Click Events Generally, whenever the user clicks on ToggleButton , we can detect whether ToggleButton is in ON or OFF state and we can handle the ToggleButton click event in activity file using setOnCheckedChangeListener like as shown below. ToggleButton toggle = ( ToggleButton ) findViewById ( R.id.togglebutton ); toggle.setOnCheckedChangeListener ( new  CompoundButton.OnCheckedChangeListener () {      public void  onCheckedChanged ( CompoundButton buttonView ,  boolean   isChecked ) {          if  ( isChecked ) {              // The toggle is enabled          }  else  {              // The toggle is disabled          }     } });

ToggleButton Attribute Description android:id It is used to uniquely identify the control android:checked It is used to specify the current state of toggle button android:gravity It is used to specify how to align the text like left, right, center, top, etc. android:text It is used to set the text. android:textOn It is used to set the text when the toggle button is in the ON / Checked state. android:textOff It is used to set the text when the toggle button is in the OFF / Unchecked state. android:textColor It is used to change the color of text. android:textSize It is used to specify the size of text. android:textStyle It is used to change the style (bold, italic, bolditalic) of text. android:background It is used to set the background color for toggle button control. android:padding It is used to set the padding from left, right, top and bottom. android:drawableBottom It’s drawable to be drawn to the below text. android:drawableRight It’s drawable to be drawn to the right of the text. android:drawableLeft It’s drawable to be drawn to the left of text.

AutoCompleteTextView In android, AutoCompleteTextView is an editable text view which is used to show the list of suggestions based on the user typing text. The list of suggestions will be shown as a dropdown menu from which the user can choose an item to replace the content of the textbox. The AutoCompleteTextView is a subclass of EditText class so we can inherit all the properties of EditText in AutoCompleteTextView based on our requirements. Following is the pictorial representation of using AutoCompleteTextView in android applications .

AutoCompleteTextView In android, we can create an AutoCompleteTextView control in two ways either in the XML layout file or create it in the Activity file programmatically . Create AutoCompleteTextView Control in Activity File Create AutoCompleteTextView in Layout File <? xml version= "1.0"  encoding= "utf-8" ?> < LinearLayout  xmlns: android = "http://schemas.android.com/apk/res/android"      android :layout_width= "match_parent"      android :layout_height= "match_parent"      android :orientation= "vertical"  >     < AutoCompleteTextView          android :id= "@+id/autoComplete_Country"          android :layout_width= "fill_parent"          android :layout_height= "wrap_content"  /> </ LinearLayout > LinearLayout l_layout =  ( LinearLayout ) findViewById ( R.id. linear_Layout ); AutoCompleteTextView actv =  new  AutoCompleteTextView ( this ); l_layout.addView ( actv );

AutoCompleteTextView Set the Text of Android AutoCompleteTextView Create AutoCompleteTextView in Layout File String[] Countries = {  "India" ,  "USA" ,  "Australia" ,  "UK" ,  "Italy" ,  "Ireland" ,  "Africa"  }; ArrayAdapter <String> adapter =  new  ArrayAdapter <String>( this , android.R.layout. simple_dropdown_item_1line , Countries); AutoCompleteTextView actv = AutoCompleteTextView ) findViewById ( R.id. autoComplete_Country ); actv.setAdapter (adapter); In android, we can set the text of AutoCompleteTextView control by using setAdapter () method in Activity file. Following is example of binding data AutoCompleteTextView in activity file using setAdapter () method. Study the example for Experiment 8

AutoCompleteTextView Android AutoCompleteTextView Attributes Attribute Description android:id It is used to uniquely identify the control android:gravity It is used to specify how to align the text like left, right, center, top, etc. android:text It is used to set the text. android:hint It is used to display the hint text when text is empty android:textColor It is used to change the color of the text. android:textColorHint It is used to change the text color of hint text. android:textSize It is used to specify the size of text. android:textStyle It is used to change the style (bold, italic, bolditalic ) of text. android:background It is used to set the background color for autocomplete textview control android:ems It is used to make the textview be exactly this many ems wide. android:width It makes the TextView be exactly this many pixels wide. android:height It makes the TextView be exactly this many pixels tall. android:textColorHighlight It is used to change the color of the text selection highlight. android:fontFamily It is used to specify the fontFamily for the text.

CheckBox In android, CheckBox is a two-states button that can be either checked (ON) or unchecked (OFF) and it will allow users to toggle between the two states (ON / OFF) based on the requirements. Generally , we can use multiple CheckBox controls in android application to allow users to select one or more options from the set of values. Following is the pictorial representation of using CheckBox control in android applications. By default, the android ToggleButton will be in OFF (Unchecked) state. We can change the default state of ToggleButton by using android:checked attribute. In case, if we want to change the state of ToggleButton to ON (Checked), then we need to set android:checked = “true” in our XML layout file. In android, we can create ToggleButton control in two ways either in the XML layout file or create it in the Activity file programmatically.

CheckBox Create CheckBox in XML Layout File If you observe above code snippet, here we defined  CheckBox  control and setting CheckBox state  ON  using  android:checked  attribute in xml layout file. <? xml version= "1.0"  encoding= "utf-8" ?> < RelativeLayout  xmlns: android = "http://schemas.android.com/apk/res/android"      android :layout_width= "match_parent"  android :layout_height= "match_parent" > < CheckBox      android :id= "@+id/chk1"      android :layout_width= "wrap_content"      android :layout_height= "wrap_content"      android :checked= "true"      android :text= "Java"  /> </ RelativeLayout > Create CheckBox Control in Activity File Following is the example of creating a  CheckBox  control dynamically in an  activity  file. LinearLayout layout = ( LinearLayout ) findViewById ( R.id. l_layout ); CheckBox cb =  new  CheckBox ( this ); cb.setText ( " Tutlane " ); cb.setChecked ( true ); layout.addView ( cb );

CheckBox Handle Android CheckBox Click Events Generally, whenever the user clicks on  CheckBox  to Select or Deselect the  CheckBox  object will receive an  on-click  event.   In android, we can define the  CheckBox  click event in two ways either in the XML layout file or create it in the  Activity  file programmatically. Define CheckBox Click Event in XML Layout File <? xml version= "1.0"  encoding= "utf-8" ?> < LinearLayout   xmlns: android = "http://schemas.android.com/ apk /res/android"      android :orientation = "vertical"  android :layout_width = " match_parent "      android :layout_height = " match_parent " >     < CheckBox      android :id = "@+id/chk1"      android :layout_width = " wrap_content "      android :layout_height = " wrap_content "      android :checked = "true"      android :text = "Java"     android :onClick = " onCheckBoxClick " /> </ LinearLayout >

CheckBox Handle Android CheckBox Click Events public void  onCheckboxClicked (View view) {      // Is the view now checked?      boolean   checked = (( CheckBox ) view). isChecked ();      // Check which checkbox was clicked      switch ( view.getId ()) {          case  R.id.chk1:              if  (checked)              // Do your coding          else              // Do your coding              break ;          // Perform your logic      } }

CheckBox Handle Android CheckBox Click Events In android, we can define  CheckBox  click event programmatically in  Activity  file rather than XML layout file.   To define checkbox click event programmatically, create  View.OnClickListener  object and assign it to the button by calling  setOnClickListener(View.OnClickListener)  like as shown below. CheckBox chk = ( CheckBox ) findViewById (R.id. chk1 ); chk .setOnClickListener ( new  View.OnClickListener () {      @Override      public void  onClick (View v) {          boolean   checked = (( CheckBox ) v). isChecked ();          // Check which checkbox was clicked          if  (checked){              // Do your coding             }          else {              // Do your coding             }     } });

CheckBox Handle Android CheckBox Click Events In android, we can define  CheckBox  click event programmatically in  Activity  file rather than XML layout file.   To define checkbox click event programmatically, create  View.OnClickListener  object and assign it to the button by calling  setOnClickListener(View.OnClickListener)  like as shown below. CheckBox chk = ( CheckBox ) findViewById (R.id. chk1 ); chk .setOnClickListener ( new  View.OnClickListener () {      @Override      public void  onClick (View v) {          boolean   checked = (( CheckBox ) v). isChecked ();          // Check which checkbox was clicked          if  (checked){              // Do your coding             }          else {              // Do your coding             }     } });

CheckBox Android CheckBox Control Attributes Attribute Description android:id It is used to uniquely identify the control android:checked It is used to specify the current state of checkbox android:gravity It is used to specify how to align the text like left, right, center, top, etc. android:text It is used to set the text for a checkbox. android:textColor It is used to change the color of text. android:textSize It is used to specify the size of text. android:textStyle It is used to change the style (bold, italic, bolditalic) of text. android:background It is used to set the background color for checkbox control. android:padding It is used to set the padding from left, right, top and bottom. android:onClick It’s the name of the method to invoke when the checkbox clicked. android:visibility It is used to control the visibility of control.

RadioButton and RadioGroup In android,  Radio Button  is a two-states button that can be either checked or unchecked and it’s the same as  CheckBox  control, except that it will allow only one option to select from the group of options.   The user can press or click on the radio button to make it select. In android,  CheckBox  control allow users to change the state of control either Checked or Unchecked but the radio button cannot be unchecked once it is checked.   Generally, we can use  RadioButton  controls in an android application to allow users to select only one option from the set of values.   Following is the pictorial representation of using  RadioButton  control in android applications . .

RadioButton and RadioGroup In android, we use radio buttons with in a  RadioGroup  to combine multiple radio buttons into one group and it will make sure that users can select only one option from the group of multiple options.   By default, the android  RadioButton  will be in  OFF  ( Unchecked ) state. We can change the default state of  RadioButton  by using  android:checked  attribute.   In case, if we want to change the state of  RadioButton  to  ON  ( Checked ), then we need to set  android:checked = “true”  in our XML layout file.   In android, we can create  RadioButton  control in two ways either in the XML layout file or create it in the  Activity  file programmatically.

RadioButton and RadioGroup Create RadioButton in XML Layout File <? xml version= "1.0"  encoding= "utf-8" ?> < RelativeLayout   xmlns: android = "http://schemas.android.com/ apk /res/android"      android :layout_width = " match_parent "  android :layout_height = " match_parent " > < RadioGroup      android :layout_width = " match_parent "      android :layout_height = " wrap_content "      android :orientation = "vertical" >     < RadioButton          android :layout_width = " wrap_content "          android :layout_height = " wrap_content "          android :text = "Java"          android :checked = "true" /> </ RelativeLayout >

RadioButton and RadioGroup Create RadioButton Control in Activity File In android, we can create  RadioButton  control programmatically in  activity  file based on our requirements.    Following is the example of creating a  RadioButton  control dynamically in  activity  file. LinearLayout layout = ( LinearLayout ) findViewById ( R.id. l_layout ); RadioButton rd =  new  RadioButton ( this ); rd.setText ( " Tutlane " ); rd.setChecked ( true ); layout.addView ( rd ); Define RadioButton Click Event in XML Layout File We can define click event handler for button by adding the  android:onClick  attribute to the  < RadioButton >  element in our XML layout file.   The value of  android:onClick  attribute must be the name of the method which we need to call in response to a click event and the  Activity  file which hosting XML layout must implement the corresponding method.   Following is the example of defining a  RadioButton  click event using  android:onClick  attribute in XML layout file.

RadioButton and RadioGroup <? xml version= "1.0"  encoding= "utf-8" ?> < RelativeLayout   xmlns: android = "http://schemas.android.com/ apk /res/android"      android :layout_width = " match_parent "  android :layout_height = " match_parent " > < RadioGroup      android :layout_width = " match_parent "      android :layout_height = " wrap_content "      android :orientation = "vertical" >     < RadioButton          android :layout_width = " wrap_content "          android :layout_height = " wrap_content "          android :text = "Java"          android :onClick = " onRadioButtonClicked " />     </ RadioGroup > </ RelativeLayout >

RadioButton and RadioGroup In  Activity  that hosts our XML layout file, we need to implement click event method like as shown below. public void  onRadioButtonClicked (View view) {      // Is the view now checked?      boolean   checked = (( RadioButton ) view). isChecked ();      // Check which RadioButton was clicked      switch ( view.getId ()) {          case  R.id.chk1:              if  (checked)              // Do your coding          else              // Do your coding              break ;          // Perform your logic      } }

RadioButton and RadioGroup Define RadioButton Click Event in Activity File In android, we can define  RadioButton  click event programmatically in  Activity  file rather than XML layout file.   To define  RadioButton  click event programmatically, create  View.OnClickListener  object and assign it to the button by calling  setOnClickListener ( View.OnClickListener )  like as shown below. RadioButton rdb = ( RadioButton ) findViewById (R.id. radiobutton1 ); rdb .setOnClickListener ( new  View.OnClickListener () {      @Override      public void  onClick (View v) {          boolean   checked = (( RadioButton ) v). isChecked ();          // Check which radiobutton was pressed          if  (checked){              // Do your coding             }          else {              // Do your coding             }     } });

RadioButton and RadioGroup Android RadioButton Control Attributes Attribute Description android:id It is used to uniquely identify the control android:checked It is used to specify the current state of radio button android:gravity It is used to specify how to align the text like left, right, center, top, etc. android:text It is used to set the text for the radio button. android:textColor It is used to change the color of text. android:textSize It is used to specify the size of the text. android:textStyle It is used to change the style (bold, italic, bolditalic) of text. android:background It is used to set the background color for radio button control. android:padding It is used to set the padding from left, right, top and bottom. android:onClick It’s the name of the method to invoke when the radio button clicked. android:visibility It is used to control the visibility of control.

ProgressBar In android,  ProgressBar  is a user interface control that is used to indicate the progress of an operation. For example, downloading a file, uploading a file.   Following is the pictorial representation of using a different type of progress bars in android applications. By default the ProgressBar will be displayed as a spinning wheel, in case if we want to show it like a horizontal bar then we need to change the style property to horizontal like  style= "? android:attr / progressBarStyleHorizontal " .

ProgressBar Create Android ProgressBar in XML Layout File In android, we can create ProgressBar in XML layout file using < ProgressBar > element with different attributes like as shown below < ProgressBar      android :id = "@+id/pBar3"      style= "? android:attr / progressBarStyleHorizontal "      android :layout_width = " wrap_content "      android :layout_height = " wrap_content "      android :minHeight = "50dp"      android :minWidth = "250dp"      android :max = "100"      android :indeterminate = "true"      android :progress = "1"  /> attribute Description android:id It is used to uniquely identify the control android:minHeight It is used to set the height of the progress bar. android:minWidth It is used to set the width of the progress bar. android:max It is used to set the maximum value of the progress bar. android:progress It is used to set the default progress value between 0 and max. It must be an integer value.

ProgressBar Create Android ProgressBar in XML Layout File Android ProgressBar with Determinate Mode In android, the ProgressBar supports two types of modes to show the progress, those are   Determinate  and  Indeterminate . Generally, we use the  Determinate  progress mode in progress bar when we want to show the quantity of progress has occurred. For example, the percentage of file downloaded, number of records inserted into a database, etc.   To use Determinate progress, we need to set the style of the progress bar to  Widget_ProgressBar_Horizontal  or  progressBarStyleHorizontal  and set the amount of progress using  android:progress  attribute.   Following is the example which shows a  Determinate  progress bar that is  50%  complete. < ProgressBar      android :id = "@+id/ pBar "      style= "? android:attr / progressBarStyleHorizontal "      android :layout_width = " wrap_content "      android :layout_height = " wrap_content "      android :max = "100"      android :progress = "50"  /> By using setProgress ( int ) method, we can update the percentage of progress displayed in app or by calling incrementProgressBy ( int ) method, we can increase the value of current progress completed based on our requirements. Generally , when the progress value reaches 100 then the progress bar is full. By using android:max attribute we can adjust this default value.

ProgressBar Create Android ProgressBar in XML Layout File Android ProgressBar with Indeterminate Mode In android, the ProgressBar supports two types of modes to show the progress, those are   Determinate  and  Indeterminate . Generally, we use the Indeterminate progress mode in progress bar when we don’t know how long an operation will take or how much work has done. In indeterminate mode the actual progress will not be shown, only the cyclic animation will be shown to indicate that some progress is happing like as shown in the above progress bar loading images. By using progressBar.setIndeterminate (true) in activity file programmatically or using android:indeterminate = “true” attribute in XML layout file, we can enable Indeterminate progress mode. Following is the example to set Indeterminate progress mode in an XML layout file. < ProgressBar      android :id = "@+id/progressBar1"      style= "? android:attr / progressBarStyleHorizontal "      android :layout_width = " wrap_content "      android :layout_height = " wrap_content "      android :indeterminate = "true" />

ProgressBar Android ProgressBar Control Attributes Attribute Description android:id It is used to uniquely identify the control android:max It is used to specify the maximum value of the progress can take android:progress It is used to specify default progress value. android:background It is used to set the background color for a progress bar. android:indeterminate It is used to enable the indeterminate progress mode. android:padding It is used to set the padding for left, right, top or bottom of a progress bar.

Android DatePicker with Examples In android,  DatePicker  is a control that will allow users to select the date by a day, month and year in our application user interface.   If we use  DatePicker  in our application, it will ensure that the users will select a valid date.   Following is the pictorial representation of using a datepicker control in android applications.

Android DatePicker with Examples Generally, in android DatePicker available in two modes, one is to show the complete calendar and another one is to show the dates in spinner view. Create Android DatePicker in XML Layout File In android, we can create a DatePicker in XML layout file using < DatePicker > element with different attributes like as shown below < DatePicker   android :id = "@+id/datePicker1"      android :layout_width = " wrap_content "      android :layout_height = " wrap_content "  /> The above code snippet will return the DatePicker in android like as shown below

Android DatePicker with Examples Android DatePicker with Spinner Mode If we want to show the DatePicker in spinner format like showing day, month and year separately to select the date, then by using DatePicker android:datePickerMode attribute we can achieve this. Following is the example of showing the DatePicker in Spinner mode. < DatePicker      android :id = "@+id/datePicker1"      android :layout_width = " wrap_content "      android :layout_height = " wrap_content "      android :datePickerMode = "spinner"      android :calendarViewShown = "false" /> The above code will return the DatePicker like as shown below

Android DatePicker with Examples Android DatePicker Control Attributes Attribute Description android:id It is used to uniquely identify the control android:datePickerMode It is used to specify datepicker mode either spinner or calendar android:background It is used to set the background color for the date picker. android:padding It is used to set the padding for left, right, top or bottom of the date picker. Android DatePicker Example: https://www.tutlane.com/tutorial/android/android-datepicker-with-examples
Tags