{"id":1386,"date":"2016-02-03T12:09:46","date_gmt":"2016-02-03T12:09:46","guid":{"rendered":"http:\/\/www.mplx.de\/Fremdgesteuert\/?p=1386"},"modified":"2019-09-04T04:43:41","modified_gmt":"2019-09-04T04:43:41","slug":"layouts-for-android-apps","status":"publish","type":"post","link":"http:\/\/www.mplx.de\/Fremdgesteuert\/2016\/02\/03\/layouts-for-android-apps\/","title":{"rendered":"Layouts for Android Apps"},"content":{"rendered":"
\"Fitness<\/a>

Fitness Manager start screen<\/p><\/div>\n

Unfortunately our awesome, great, incredible, wonderful and joyful travel year is over now. So we have to work and earn money to hopefully continue this experience soon. So I started to program and develop my first Android App. I want to write about the difficulties I ran into while developing my apps. Therefore I have to switch the language of my blog to English and the blog is obviously getting technical. I want to apologize for both. Ok, let’s start and have a look to Layouts for Android Apps.<\/p>\n

My first App is called ‘Fitness Manager’ and the app is available for all kind of Apple IOS Devices and for many many different Android Devices. The App provides the user with useful features and functions around planning workout sessions in the gym. The start screen of the app leads the user to different main functionalities like ‘Create a workout schedule’ or ‘View statistics’ and to further sub tasks like ‘Upload data to the cloud’. In order to get this looking good in my eyes on every device I had to take a lot of issues into account.<\/p>\n

You can embed LinearLayouts in GridLayouts or you can use TableLayouts surrounded by FrameLayouts. You have depending on the choosen layout several different layout options which you can set. The posibilities concerning the layouts are incredible. But you only have three possible values in the layout.xml to set the layout_width<\/em> and the layout_height<\/em> of every view item: match_parent<\/em>, wrap_content<\/em> or a fixed value. I wanted to insert a logo, an advertise view element, four big ImageButtons for the main functionalities and 4 small ImageButtons for the sub tasks into the start screen like displayed in the above image. And that’s how layout.xml for the start screen looks like:<\/p>\n

    \n
  1. \n

    All view elements are embedded in a GridLayout with only one column but 5 rows.<\/p>\n

    \"GridLayout<\/a>

    GridLayout of Fitness Manager start screen<\/p><\/div><\/li>\n<\/ol>\n

      \n
    1. \n

      The logo is inserted in the first row of the GridLayout and the advertise view (not displayed in the image above) in the second row. In order to center the logo and the advertise view in every device the layout_gravity<\/i> of every<\/u> view element has to be set to center<\/i>.<\/p>\n<\/li>\n<\/ol>\n

        \n
      1. \n
        \"Logo<\/a>

        Logo embedded in LinearLayout<\/p><\/div>\n

        In the next rows of the GridLayout I did insert the ImageButtons for the main functionalities and the sub tasks. For every row I added one LinearLayout which spreads over the complete width of the screen and then I inserted two to four LinearLayouts which contain the ImageButtons. In order to get the design flexible I did work with the settings layout_sum<\/i> and layout_weight.<\/i> The layout_sum<\/i> is set in the outer LinearLayout. The layout_weight<\/i> is defined in the inner LinearLayouts. The sum of the layout_weights<\/i> is defined in the layout_sum<\/i>. Again I had to center<\/i> every<\/u> view element. The orientation<\/i> of the outer LinearLayout is defined horizontal<\/i> whereas the orientation<\/i> of the inner LinearLayout is set to vertical<\/i>.<\/p>\n

        \"ImageButton<\/a>

        ImageButton embedded in LinearLayouts<\/p><\/div>\n

        I want to point out the meaning of the LinearLayout orientation here because in the beginning my design looked like displayed below also I had centered every single element. The failure was the orientation of the inner LinearLayouts which was defined horizontal. Maybe this implementation issue is obvious for many many other Android developers but I’m a blonde developer and so I write this for all the blond programmers out there. It almost drove me nuts and I couldn’t find a hint in the internet why my design looked so shitty until I had a close look to the orientation of the LinearLayouts.<\/p>\n

        \"Shitty<\/a>

        Shitty start screen of Fitness Mangager App displayed in Android Studio Tablet emulator<\/p><\/div><\/li>\n<\/ol>\n

          \n
        1. \n

          At least I had to adapt the layout progammatically in the corresponding Java File because in the designer of the Android Studio the view was displayed like shown below and moreover the sizes of the ImageButtons needed to be fitted to the different screen sizes of available Android devices:<\/p>\n

          \"Fitness<\/a>

          Fitness Manager start screen displayed in Android Studio Designer<\/p><\/div>\n

          If you want to change the sizes of different view elements dependent on the size of other view elements, you cannot implement the changes in the onCreate<\/em> or onResume<\/em> funtions of an activity. The drawing phase of the view, which provides the measurements of the single view elements is only finished at the end of onResume<\/em> function. Therefore I added runnables to the layout queue which will be invoked after the call of setContentView<\/em> when all view measurements are finished. In these runnables I could request the width and height of single view elements, the DisplayMetrics<\/em> of the Android device and set the LayoutParams<\/em> of the ImageButtons.<\/p>\n

          \"ImageButton<\/a>

          ImageButton Runnable<\/p><\/div><\/li>\n<\/ol>\n

          If you have any questions concerning my layout design and implementation, 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

          And I would even more appreciate if you like to check out the ‘Fitness Manager’ App in the Google Play Store<\/a> or the ‘Fitness Manager’ App in the iTunes Store<\/a>. See you.<\/p>\n

          Follow us on
          \n          Facebook<\/a>
          \n          Twitter<\/a>
          \n          Google Plus<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

          Unfortunately our awesome, great, incredible, wonderful and joyful travel year is over now. So we have to work and earn money to hopefully continue this experience soon. So I started to program and develop my first Android App. I want to write about the difficulties I ran into while developing my apps. Therefore I have […]<\/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,419,420,421,422,395,404,393,405,400,399,398],"class_list":["post-1386","post","type-post","status-publish","format-standard","hentry","category-android-app-development","tag-android","tag-android-gridlayout","tag-android-linearlayout","tag-android-linearlayout-orientation","tag-android-runnable-post","tag-android-studio","tag-app","tag-fitness-manager","tag-java","tag-layout_gravity","tag-layout_sum","tag-layout_weight"],"_links":{"self":[{"href":"http:\/\/www.mplx.de\/Fremdgesteuert\/wp-json\/wp\/v2\/posts\/1386","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=1386"}],"version-history":[{"count":21,"href":"http:\/\/www.mplx.de\/Fremdgesteuert\/wp-json\/wp\/v2\/posts\/1386\/revisions"}],"predecessor-version":[{"id":1477,"href":"http:\/\/www.mplx.de\/Fremdgesteuert\/wp-json\/wp\/v2\/posts\/1386\/revisions\/1477"}],"wp:attachment":[{"href":"http:\/\/www.mplx.de\/Fremdgesteuert\/wp-json\/wp\/v2\/media?parent=1386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.mplx.de\/Fremdgesteuert\/wp-json\/wp\/v2\/categories?post=1386"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.mplx.de\/Fremdgesteuert\/wp-json\/wp\/v2\/tags?post=1386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}