{"id":1437,"date":"2016-02-10T10:05:54","date_gmt":"2016-02-10T10:05:54","guid":{"rendered":"http:\/\/www.mplx.de\/Fremdgesteuert\/?p=1437"},"modified":"2019-09-04T04:43:26","modified_gmt":"2019-09-04T04:43:26","slug":"mobile-forms-android-apps","status":"publish","type":"post","link":"http:\/\/www.mplx.de\/Fremdgesteuert\/2016\/02\/10\/mobile-forms-android-apps\/","title":{"rendered":"Mobile forms for Android Apps"},"content":{"rendered":"<div id=\"attachment_1445\" style=\"width: 179px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.mplx.de\/Fremdgesteuert\/2016\/02\/10\/mobile-forms-android-apps\/mobile-form-for-android-device\/\" rel=\"attachment wp-att-1445\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1445\" class=\"wp-image-1445 size-medium\" src=\"http:\/\/www.mplx.de\/Fremdgesteuert\/wp-content\/uploads\/2016\/02\/Mobile-form-for-Android-device-169x300.png\" alt=\"Mobile form for Android device\" width=\"169\" height=\"300\" srcset=\"http:\/\/www.mplx.de\/Fremdgesteuert\/wp-content\/uploads\/2016\/02\/Mobile-form-for-Android-device-169x300.png 169w, http:\/\/www.mplx.de\/Fremdgesteuert\/wp-content\/uploads\/2016\/02\/Mobile-form-for-Android-device-338x600.png 338w, http:\/\/www.mplx.de\/Fremdgesteuert\/wp-content\/uploads\/2016\/02\/Mobile-form-for-Android-device.png 540w\" sizes=\"auto, (max-width: 169px) 100vw, 169px\" \/><\/a><p id=\"caption-attachment-1445\" class=\"wp-caption-text\">Mobile form for Android device<\/p><\/div>\n<p align=\"JUSTIFY\">I think there might be better and easier ways to implement these kind of mobile forms for an Android App because mine seems to me relative complicated and error-prone. Despite I want to share with you my implementation experiences, maybe my readers can leave me better solutions in the comments section and I can grow and learn.<\/p>\n<p align=\"JUSTIFY\">First of all I start with the Layout implementation. LinearLayouts and GridLayouts I did already use for the <a href=\"http:\/\/www.mplx.de\/Fremdgesteuert\/2016\/02\/01\/layouts-for-android-apps\/\">Layout of the start screen in the Fitness Manager App<\/a>. The GridLayout contains the raw design definitions for the mobile form. The fine tuning of the design is handled again by LinearLayouts using the layout attributes <i>layout_sum<\/i> and <i>layout_weight<\/i>. Additionally to the XML Layout definition the items of the View must be adapted to the display size of the Android device programmatically in the activity. Similar to the implementation of the start screen I added runnables to the layout queue. In these runnables I could request the width and height of single view elements, the <i>DisplayMetrics<\/i> of the Android device and set the <i>LayoutParams<\/i> of every view element. In the code snippet below the underlying ScrollView is resized within the runnable. The displayed example for view adaption was also useful for layout adaptions within <i>onConfigurationChange<\/i> and <i>onResume.<\/i> Still I&#8217;m not sure if this is the best and correct way to adapt views and layouts to different Android devices.<\/p>\n<div id=\"attachment_1448\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.mplx.de\/Fremdgesteuert\/2016\/02\/10\/mobile-forms-android-apps\/scrollview-runnable-definition\/\" rel=\"attachment wp-att-1448\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1448\" class=\"wp-image-1448 size-medium\" src=\"http:\/\/www.mplx.de\/Fremdgesteuert\/wp-content\/uploads\/2016\/02\/ScrollView-Runnable-definition-300x119.png\" alt=\"ScrollView Runnable definition\" width=\"300\" height=\"119\" srcset=\"http:\/\/www.mplx.de\/Fremdgesteuert\/wp-content\/uploads\/2016\/02\/ScrollView-Runnable-definition-300x119.png 300w, http:\/\/www.mplx.de\/Fremdgesteuert\/wp-content\/uploads\/2016\/02\/ScrollView-Runnable-definition.png 573w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-1448\" class=\"wp-caption-text\">ScrollView Runnable definition<\/p><\/div>\n<p align=\"JUSTIFY\">Additionally to the layout requirements I had different requirements concerning the behaviour of the single view elements.<\/p>\n<ol>\n<li>\n<p align=\"JUSTIFY\">The inputTypes of the EditTexts must be set. This is handled in the XML layout definition of the view elements. There are several options for inputTypes like TextCapSentences, TextAutoCorrect, TextMultiLine or number. The inputType of the EditText does influence the input of the EditText as well as the behaviour and display of the virtual keyboard.<\/p>\n<p><div id=\"attachment_1447\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.mplx.de\/Fremdgesteuert\/2016\/02\/10\/mobile-forms-android-apps\/xml-layout-definition-for-edittext\/\" rel=\"attachment wp-att-1447\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1447\" class=\"wp-image-1447 size-medium\" src=\"http:\/\/www.mplx.de\/Fremdgesteuert\/wp-content\/uploads\/2016\/02\/XML-Layout-definition-for-EditText-300x133.png\" alt=\"XML Layout definition for EditText\" width=\"300\" height=\"133\" srcset=\"http:\/\/www.mplx.de\/Fremdgesteuert\/wp-content\/uploads\/2016\/02\/XML-Layout-definition-for-EditText-300x133.png 300w, http:\/\/www.mplx.de\/Fremdgesteuert\/wp-content\/uploads\/2016\/02\/XML-Layout-definition-for-EditText.png 342w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-1447\" class=\"wp-caption-text\">XML Layout definition for EditText<\/p><\/div><\/li>\n<li>\n<p align=\"JUSTIFY\">The Save-Button should be only enabled and clickable if the user entered a name in the corresponding EditText. Furthermore the design of the button should be different in this two states. In the XML Layout definition I did set the corresponding attribute of the ImageButton <i>android:clickable<\/i> to <i>false<\/i> but this was not sufficient.<\/p>\n<div id=\"attachment_1443\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.mplx.de\/Fremdgesteuert\/2016\/02\/10\/mobile-forms-android-apps\/imagebutton\/\" rel=\"attachment wp-att-1443\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1443\" class=\"wp-image-1443 size-medium\" src=\"http:\/\/www.mplx.de\/Fremdgesteuert\/wp-content\/uploads\/2016\/02\/ImageButton-300x108.png\" alt=\"ImageButton\" width=\"300\" height=\"108\" srcset=\"http:\/\/www.mplx.de\/Fremdgesteuert\/wp-content\/uploads\/2016\/02\/ImageButton-300x108.png 300w, http:\/\/www.mplx.de\/Fremdgesteuert\/wp-content\/uploads\/2016\/02\/ImageButton.png 436w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-1443\" class=\"wp-caption-text\">ImageButton<\/p><\/div>\n<p align=\"JUSTIFY\">I also had to disable the Save-Button programmatically in the <i>onCreate<\/i> function of the activity.<\/p>\n<div id=\"attachment_1444\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.mplx.de\/Fremdgesteuert\/2016\/02\/10\/mobile-forms-android-apps\/imagebutton-settings-oncreate-function\/\" rel=\"attachment wp-att-1444\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1444\" class=\"wp-image-1444 size-medium\" src=\"http:\/\/www.mplx.de\/Fremdgesteuert\/wp-content\/uploads\/2016\/02\/ImageButton-settings-onCreate-function-300x33.png\" alt=\"ImageButton settings in onCreate function\" width=\"300\" height=\"33\" srcset=\"http:\/\/www.mplx.de\/Fremdgesteuert\/wp-content\/uploads\/2016\/02\/ImageButton-settings-onCreate-function-300x33.png 300w, http:\/\/www.mplx.de\/Fremdgesteuert\/wp-content\/uploads\/2016\/02\/ImageButton-settings-onCreate-function.png 346w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-1444\" class=\"wp-caption-text\">ImageButton settings in onCreate function<\/p><\/div>\n<p align=\"JUSTIFY\">Furthermore I had to implement an <i>addTextChangedListener<\/i> that toggeled the ImageButton depending on the input of the EditText for the name. The implementation of the <i>addTextChangedListener<\/i> is not necessary but the other option is to check the value of the EditText in every ActionListener of every single view element in order to prevent the user to save an object with an empty name.<\/p>\n<p><div id=\"attachment_1441\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.mplx.de\/Fremdgesteuert\/2016\/02\/10\/mobile-forms-android-apps\/edittext-addtextchangelistenener\/\" rel=\"attachment wp-att-1441\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1441\" class=\"wp-image-1441 size-medium\" src=\"http:\/\/www.mplx.de\/Fremdgesteuert\/wp-content\/uploads\/2016\/02\/EditText-addTextChangeListenener-300x188.png\" alt=\"EditText addTextChangeListenener\" width=\"300\" height=\"188\" srcset=\"http:\/\/www.mplx.de\/Fremdgesteuert\/wp-content\/uploads\/2016\/02\/EditText-addTextChangeListenener-300x188.png 300w, http:\/\/www.mplx.de\/Fremdgesteuert\/wp-content\/uploads\/2016\/02\/EditText-addTextChangeListenener-588x368.png 588w, http:\/\/www.mplx.de\/Fremdgesteuert\/wp-content\/uploads\/2016\/02\/EditText-addTextChangeListenener.png 683w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-1441\" class=\"wp-caption-text\">EditText addTextChangeListenener<\/p><\/div><\/li>\n<\/ol>\n<ol start=\"3\">\n<li>\n<p align=\"JUSTIFY\">If EditTexts are used in a mobile form, it is often necessary to check the value of the EditText when the user finished the input. This is handled by implementing a <i>setOnEditorActionListener. <\/i>Therefore the XML Layout definition of the EditText must contain the attribute <i>android:ImeOptions<\/i> with it&#8217;s value set to <i>actionDone<\/i>. The important issue concerning ActionListeners for EditTexts is the handling of the virtual keyboard. The virtual keyboard must be closed programmatically within the ActionListeners. This is realized by using the <i>InputMethodManager<\/i>.<\/p>\n<p><div id=\"attachment_1442\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.mplx.de\/Fremdgesteuert\/2016\/02\/10\/mobile-forms-android-apps\/edittext-setoneditoractionlistener\/\" rel=\"attachment wp-att-1442\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1442\" class=\"wp-image-1442 size-medium\" src=\"http:\/\/www.mplx.de\/Fremdgesteuert\/wp-content\/uploads\/2016\/02\/EditText-setOnEditorActionListener-300x189.png\" alt=\"EditText setOnEditorActionListener\" width=\"300\" height=\"189\" srcset=\"http:\/\/www.mplx.de\/Fremdgesteuert\/wp-content\/uploads\/2016\/02\/EditText-setOnEditorActionListener-300x189.png 300w, http:\/\/www.mplx.de\/Fremdgesteuert\/wp-content\/uploads\/2016\/02\/EditText-setOnEditorActionListener-588x370.png 588w, http:\/\/www.mplx.de\/Fremdgesteuert\/wp-content\/uploads\/2016\/02\/EditText-setOnEditorActionListener.png 744w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-1442\" class=\"wp-caption-text\">EditText setOnEditorActionListener<\/p><\/div><\/li>\n<\/ol>\n<ol start=\"4\">\n<li>\n<p align=\"JUSTIFY\">Often the input of EditTexts is limited by constraints. In order to indicate the constraints of an EditText politely to the user, AlertDialogs can be used. AlertDialogs can contain one or more Buttons with different possible options for the behaviour of the activty.<\/p>\n<p><div id=\"attachment_1440\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.mplx.de\/Fremdgesteuert\/2016\/02\/10\/mobile-forms-android-apps\/alertdialog\/\" rel=\"attachment wp-att-1440\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1440\" class=\"wp-image-1440 size-medium\" src=\"http:\/\/www.mplx.de\/Fremdgesteuert\/wp-content\/uploads\/2016\/02\/AlertDialog-300x96.png\" alt=\"AlertDialog\" width=\"300\" height=\"96\" srcset=\"http:\/\/www.mplx.de\/Fremdgesteuert\/wp-content\/uploads\/2016\/02\/AlertDialog-300x96.png 300w, http:\/\/www.mplx.de\/Fremdgesteuert\/wp-content\/uploads\/2016\/02\/AlertDialog-588x189.png 588w, http:\/\/www.mplx.de\/Fremdgesteuert\/wp-content\/uploads\/2016\/02\/AlertDialog.png 625w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-1440\" class=\"wp-caption-text\">AlertDialog<\/p><\/div><\/li>\n<\/ol>\n<p align=\"JUSTIFY\">If you have any questions, any improvement suggestions for the implementation (I mentioned that this is my first Android App) or any improvement suggestions for my English, I really would appreciate if you can leave me a comment.<\/p>\n<p align=\"JUSTIFY\">And I would even more appreciate if you like to check out the <a href=\"https:\/\/play.google.com\/store\/apps\/details?id=de.mplx.fitnessmanager&amp;hl=de\">&#8216;Fitness Manager&#8217; App in the Google Play Store<\/a> or the <a href=\"https:\/\/itunes.apple.com\/us\/app\/fitness-manager\/id447600109?l=de&amp;ls=1&amp;mt=8\">&#8216;Fitness Manager&#8217; App in the iTunes Store<\/a>. See you.<\/p>\n<p align=\"JUSTIFY\">Follow us on<\/p>\n<p><a href=\"https:\/\/www.facebook.com\/Fitness-Manager-106773422758349\">Facebook<\/a><br \/>\n<a href=\"https:\/\/twitter.com\/FitnessManager_\">Twitter<\/a><br \/>\n<a href=\"https:\/\/plus.google.com\/100472904065361948117\">Google Plus<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I think there might be better and easier ways to implement these kind of mobile forms for an Android App because mine seems to me relative complicated and error-prone. Despite I want to share with you my implementation experiences, maybe my readers can leave me better solutions in the comments section and I can grow [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[392],"tags":[394,429,426,425,424,427,428,430,423,422,395,404,393,405],"class_list":["post-1437","post","type-post","status-publish","format-standard","hentry","category-android-app-development","tag-android","tag-android-alertdialog","tag-android-button-disable","tag-android-button-enable","tag-android-edittext","tag-android-edittext-addtextchangelistener","tag-android-edittext-setoneditoractionlistener","tag-android-messagebox","tag-android-mobile-form","tag-android-runnable-post","tag-android-studio","tag-app","tag-fitness-manager","tag-java"],"_links":{"self":[{"href":"http:\/\/www.mplx.de\/Fremdgesteuert\/wp-json\/wp\/v2\/posts\/1437","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.mplx.de\/Fremdgesteuert\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.mplx.de\/Fremdgesteuert\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.mplx.de\/Fremdgesteuert\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.mplx.de\/Fremdgesteuert\/wp-json\/wp\/v2\/comments?post=1437"}],"version-history":[{"count":7,"href":"http:\/\/www.mplx.de\/Fremdgesteuert\/wp-json\/wp\/v2\/posts\/1437\/revisions"}],"predecessor-version":[{"id":1509,"href":"http:\/\/www.mplx.de\/Fremdgesteuert\/wp-json\/wp\/v2\/posts\/1437\/revisions\/1509"}],"wp:attachment":[{"href":"http:\/\/www.mplx.de\/Fremdgesteuert\/wp-json\/wp\/v2\/media?parent=1437"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.mplx.de\/Fremdgesteuert\/wp-json\/wp\/v2\/categories?post=1437"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.mplx.de\/Fremdgesteuert\/wp-json\/wp\/v2\/tags?post=1437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}