First Attempt at Android Programming

[Psycho_Coder]

So I gave Android a try. I took a course on Udacity, Android Basics: User Interface (Katherine is sooo Kawaiii  <3)

At the end, there was a simple project. I needed to make a single screen app, just layout the components with Relative or Linear Layout and use Images and text views to design the elements. We have to create a sort of Business/Organization Info View.

Full Description: https://classroom.udacity.com/courses/ud...124e52a2d#

I made the following (Not the worst looking screen I suppose):

It has a little bloated look I suppose.

XML Code:

Code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/activity_main"
   android:orientation="vertical"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context="org.malc0de.food4all.MainActivity">

   <LinearLayout
       android:background="#7d97ad"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:gravity="center">

       <ImageView
           android:id="@+id/logoicon"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:src="@drawable/logoicon" />

       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="@string/app_name"
           android:textSize="24sp"
           android:textColor="#ffffff"
           android:fontFamily="sans-serif-condensed" />

   </LinearLayout>

   <ImageView
       android:id="@+id/banner_image"
       android:src="@drawable/pov2"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:adjustViewBounds="true"
       android:scaleType="centerCrop"
       android:contentDescription="Banner Image" />

   <TextView
       android:id="@+id/contacts"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/contact_det"
       android:textSize="24sp"
       android:textStyle="bold"
       android:layout_marginTop="10dp"
       android:layout_marginLeft="40dp"
       android:fontFamily="casual" />

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="horizontal">

       <ImageView
           android:src="@drawable/phone"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginLeft="40dp"
           android:layout_marginStart="40dp"
           android:contentDescription="Phone Icon" />

       <TextView
           android:layout_width="wrap_content"
           android:layout_height="match_parent"
           android:text="@string/phone_no"
           android:textSize="24sp"
           android:paddingLeft="16dp"
           android:textStyle="bold"
           android:gravity="center_vertical" />
   </LinearLayout>

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="horizontal"
       android:paddingTop="4dp">

       <ImageView
           android:src="@drawable/location"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginLeft="40dp"
           android:layout_marginStart="40dp"
           android:contentDescription="Location Icon" />

       <TextView
           android:layout_width="wrap_content"
           android:layout_height="match_parent"
           android:text="@string/location"
           android:textSize="24sp"
           android:paddingLeft="16dp"
           android:textStyle="bold"
           android:gravity="center_vertical"
           android:id="@+id/textView" />
   </LinearLayout>

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/desc_det"
       android:textSize="24sp"
       android:textStyle="bold"
       android:layout_marginTop="10dp"
       android:layout_marginLeft="40dp"
       android:fontFamily="casual" />

   <TextView
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_marginLeft="40dp"
       android:layout_marginRight="10dp"
       android:text="@string/desc"
       android:textSize="20sp" />

</LinearLayout>

Let me know if you can improve the design a little. Suggestions are very much welcome.

[NO-OP]

I'm no designer but I've spent a lot of time working with it, so for starter's the font choice is very off. Contact details and Description do not need an underline, all underlines do is break up bad designs. A good design should be simple and expressive with as little information as possible, less is more(If done right). For example "Contact Details" could either be "Contact" or have no title at all, people understand the map icon and phone, otherwise there would be no use for the icon.

Next we have the description, if the app user can only land on this page by clicking a label called "For4all Foundation" then your current title set up is fine (Assuming Food4all is the app name not the individual company's page in this app). But if that is true then on this details screen there is no need for the word description. Too distracting and now you have more room above the fold for content, or a call to action like a "Donate now" or whatever feature your app has.

Your job in UI is to take away, never to add. Good luck, this is a good start!


Here's a quick article on font pairings https://designschool.canva.com/blog/the-...t-pairing/ and here is a site dedicated to different font pairs http://fontpair.co/

Good luck!

[Psycho_Coder]

I'm no designer but I've spent a lot of time working with it, so for starter's the font choice is very off.  Contact details and Description do not need an underline, all underlines do is break up bad designs.  A good design should be simple and expressive with as little information as possible, less is more(If done right).  For example "Contact Details" could either be "Contact" or have no title at all,  people understand the map icon and phone, otherwise there would be no use for the icon.

Next we have the description, if the app user can only land on this page by clicking a label called "For4all Foundation" then your current title set up is fine (Assuming Food4all is the app name not the individual company's page in this app).  But if that is true then on this details screen there is no need for the word description.  Too distracting and now you have more room above the fold for content, or a call to action like a "Donate now" or whatever feature your app has.

Your job in UI is to take away, never to add.  Good luck, this is a good start!


Here's a quick article on font pairings https://designschool.canva.com/blog/the-...t-pairing/ and here is a site dedicated to different font pairs http://fontpair.co/

Good luck!

Thanks for the critical comments, I appreciate it. Yeah, I myself think that it looks a little cluttery. But According to Udacity specifications, I had to write include these in the single screen. Food4All is just a made up name for this app. 

I wanted to add a button with a donation link and shorten the current data a little. But for project requirements it is not mentioned hence I skipped it. Maybe, in the futher lesson it will be given.

I will try to workaround a little on this and post a new screenshot.

[NO-OP]

I'm no designer but I've spent a lot of time working with it, so for starter's the font choice is very off.  Contact details and Description do not need an underline, all underlines do is break up bad designs.  A good design should be simple and expressive with as little information as possible, less is more(If done right).  For example "Contact Details" could either be "Contact" or have no title at all,  people understand the map icon and phone, otherwise there would be no use for the icon.

Next we have the description, if the app user can only land on this page by clicking a label called "For4all Foundation" then your current title set up is fine (Assuming Food4all is the app name not the individual company's page in this app).  But if that is true then on this details screen there is no need for the word description.  Too distracting and now you have more room above the fold for content, or a call to action like a "Donate now" or whatever feature your app has.

Your job in UI is to take away, never to add.  Good luck, this is a good start!


Here's a quick article on font pairings https://designschool.canva.com/blog/the-...t-pairing/ and here is a site dedicated to different font pairs http://fontpair.co/

Good luck!

Thanks for the critical comments, I appreciate it. Yeah, I myself think that it looks a little cluttery. But According to Udacity specifications, I had to write include these in the single screen. Food4All is just a made up name for this app. 

I wanted to add a button with a donation link and shorten the current data a little. But for project requirements it is not mentioned hence I skipped it. Maybe, in the futher lesson it will be given.

I will try to workaround a little on this and post a new screenshot.

No problem and yeah after I looked at the course and saw that the titles are part of the course, so I would conider removing the underline and changing the font to a better font pair in order to "keep in spec" for the series Good luck!

[Psycho_Coder]

@NO-OP Yeah I did that and it looks better now. I adjusted the font size a little to make it look more proportionate. Here's a snapshot: