DAY 2: Three Basic Views In Android & My First Lines Of Code




Even though I have been using Android for many years (and I know this OS inside out from the standpoint of a user), the terms I got familiar with on the first day of actual learning (DAY 1 was only preparing the ground and gathering resources for Android development) were totally new to me. Anyway, so far everything has been logical and crystal clear to me.  I have even created my first few lines of code which actually works.

My paper-back book still hasn’t arrived, so I started learning with course Android Development for Beginners. This is probably the place everyone should start. This course was built by Google so you can be sure it’s professional, fun and always up-to-date. My plan is to complete this course in not more than two weeks.

They only thing I want to ask you at this point is not to feel overwhelmed by the amount of additional reference materials available together with these courses (and generally the amount of information on the subject on the Internet). Just focus on mastering the basics and understanding the whole picture. We will get to MORE details in some time together.

What A View In Android Is

This is probably the most integral part of any Android app. Everyone who uses Android interacts with and sees Android Views all the time (without even realizing).

A View in Android is:

  • A rectangle presenting a piece of content on the screen (e.g. an image, text or button). Views together make up the layout of the screen (i.e. the arrangement and design of these individual pieces) and user interface (everything that you can interact with on the screen, i.e. areas called views) .
Views in Android

Just take a look at the screenshot below (an app from Google Play) and notice different rectangles (views) that make up the layout of the screen.

There are a lot of different types of views but so far I’ve got familiar with only the three basic ones:

  • TextView
  • ImageView
  • Button

Let’s use a different screenshot to present these three in practice.

Views in Android: ImageView, TextView and Button

As you can see it’s very easy to notice individual views of the screen once you have realized they exist and have their own names!

Camel Case

If you are a perceptive person, you have probably noticed how individual names of views are written, i.e. TextView or ImageView (there are no spaces in between the words). I personally didn’t know that this is a convention which has its own name, Camel Case, and isn’t used only in programming (you probably know iPod, iPhone or PowerPoint names too).

XML Syntax And My First Lines Of Code

Thanks to the knowledge I gained in the course I am now not only able to recognize these three views but I also know how to code two of them!

To code your first TextView or ImageView, you have to use XML (click to learn more) syntax. If you have some experience with HTML (even basic knowledge will do), it will be much easier for you to understand what’s happening here.

Android Visualizer

Since I am only starting out, I still haven’t installed the proper IDE (Android Studio) and I was only playing with the code using the Android Visualizer in the browser (click to see how it works).  I suggest you do the same to simply get the feel of how it works and how you can interact with the code you are creating.

My First TextView Element

Thanks to the knowledge I gained during the first lesson in this course I now know how to code the TextView element and customize it using attributes. Here is the code I have written.

<TextView
 android:text="I am a newbie Android developer! :) "
 android:background="#E91E63"
 android:textColor="#E3F2FD"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:textSize="75sp"/>

And the output of this code is something like this:

TextView in Android

Let’s now delve deeper into each line of code so that it makes as much sense to you as possible.

<TextView

This is how you begin the TextView XML element so that the device knows that what’s coming is text.  If you know HTML, you probably see some similarities and analogy.

What is coming in the next lines is the list of attributes for this element. In other words, this is a list of features which you can define to customize how your TextView element will look like.

android:text="I am a newbie Android developer! :) "

This is the attribute which lets you actually insert lines of text. Even though it’s not plain English, you can conclude based on the names of these attributes what they are going to define for you.

Everything that  you put in quotation marks (remember to always use them both at the beginning and end) is the value of the attribute. Depending on the type of attribute the value can take different forms (numbers, letters and so on).

android:background="#E91E63"

You guessed it. This attribute lets you set the background of your TextView. Here you can use any color you want from the supported color palatte (taken from Material Design). Each color has its corresponding number which you have to put in quotation marks.

android:textColor="#E3F2FD"

With this attribute, you can define the color of your text. I suggest you make use of the same color palette.

android:layout_width="wrap_content"

This attribute lets you set the width of this element. I set it to wrap around the text (so that the width will depend on the length of text and size of fonts). If you don’t want the width to wrap around the text, you can set it manually  using a unit of measure called “dp” (density-independent pixels).

android:layout_height="wrap_content"

This is analogical to the width except for that here you can manually set the height or leave it to wrap around the text just as I did.

android:textSize="75sp"

If you don’t use this attribute, the default size of the text on the screen will be way too small. The value you use to define this attribute is called “sp(scale independent pixels). What this unit of measure does is make the text in the app look consistent across different devices (as you know there are different screen sizes and resolutions).

/>

This is the last line of code but it’s certainly not the least. Without this line (which is a close tag), this code wouldn’t work. You put it at the end of the element.

Remember that there is no need for you to memorize all of these attributes. All you need is a global understanding of how they work and the ability to make use of reference materials for TextView.

My First ImageView Element

As you probably guessed by now, creating the ImageView element is quite similar and analogical. Here is my code for it.

<IageView
 android:src="@drawable/marshmallow"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" 
 android:scaleType="center"/>

And here is the output:

ImageView in Android

Just like with the TextView element, ImageView also has tons of different attributes (which have their own values) you can use to change the behavior and looks of the image.  In this example I used two new attributes.

android:src="@drawable/marshmallow"

This one is a bit similar to how you add images to websites using HTML. In both cases you have to define the source of the image (where the image file is located). For the needs of the Android Visualizer I am using, some images has already been uploaded so all I need to do is indicate their location. There is some difference in comparison to HTML. Here you don’t have to type the file extension, all you need to use is the file name (which is “marshmallow” in this case) and specify the folder.

android:scaleType="center"

This is yet another type of attribute. It simply tells the device how to scale up or scale down the image (which is usually of different dimensions that the screen). Here is image is simply centered.




Summary Of Day 2

Day 2 of my Android development journey has come to an end and I feel I learned a a lot and already gained some experience.

What I want to say: The journey of a thousand miles begins with a single step (I have just taken)
Level of motivation: Extremely high
Level of fatigue: Medium (I couldn’t fall asleep last night because I was thinking about my Android development project).
Level of experience: 0.0018%
What I have learned: I know what views in Android are, I can recognize TextView, ImageView and Button. I know what Camel Case is. I brushed up my knowledge of XML.

Share Your Thoughts

Are you an Android developer? Did you notice any errors in this post? Do you have any questions or comments?

I am only beginning my journey of becoming an Android developer and I would really like to hear from you (and learn form you). Feel free to either contact me directly or leave me your comments in the comment box below.

Add Comment