How I made A party invitation app

Introduction

Hello, there I am really excited today to write this blog.  Why ? well I have made my first Android app yesterday. I was learning on how to develop android apps for the past week and finally, I came up with a creative and simple app which I created just after taking the basics lesson on Android basics on user interfaces.  Basically, you need to learn about the different types of Layouts XML syntax and How different layouts work to figure out How to make a basic app. Oh and yeah why a party invitation app you might ask. well, Its almost new year and I was trying to figure out how to make a new year party invitation in a creative way hence an app.

So this is how it looks

 

pic credits :
https://unsplash.com/photos/Ef1H5YTTmZ8

Cool right? so let’s get started on making this 

Stuff you need

  • Android Studio
  • Android Emulator or Android Phone
  • A good background picture.Click here to find some awesome pictures.
  • Quotes to write in the invitation.  (optional in my case)

I hope you have downloaded and installed Android Studio on your computer. Instructions vary from depending on your OS.  Feel free to click here to go to Google’s guide on how to install android studio. Once that is done open android studio necessary updates shall pop up install it and click on new project. Specify your application name if you have a domain specify it or just write a unique name followed by example.com finally specify your project location.

It should look something like this

Click on Next once’s that’s done. Now that is done you have to specify you API for now just consider the version of the app that you’re phone/emulator is running on, I am using an emulator with Android 9.0 ie.. API 28 so I am just gona select that. Click on next once you are done with that.

Now click on Empty Activity.

Leave the next screen to default and click on finish.

When that is done android studio should pop up and you should see something like this.

This is the normal empty layout with a hello world TextView in the middle that is what we are gonna work on click on the text bar near the design tab. Whola this is our workspace for today.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivit">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Lets summaries this and make it understandable. So on first glance, we see many texts enclosed in angle brackets.

< />

This is the basic syntax of xml.

Basically every android app has two key components A layout and a View’s.

Views

There are two views that we are going to be using in building on this app. Image view and Text view.

Image View

And Image view as the name suggest is used to show an Image on the screen.  I’ll describe this with the example the code I have used in my app.

<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="backgroundimage"
android:src="@drawable/index"
android:scaleType="centerCrop"

/>

Image view is starts with this.

<ImageView

This is basically a syntax for the computer to understand that what we are specifying is an image.

Ok then we have something like this

android:id="@+id/imageView"

What this does is give a tag for our ImageView block this is usefull when we use Relative Layouts ( We will come to that later).

So the syntax is fairly simple Note that you can give any name you want after this @+id/  

android:layout_width="match_parent"
android:layout_height="match_parent"

These are two very Important codes what this does is as the name suggests give the image view a width and height meaning it will determine where our view is going to be.

If you look care fully I have used something called “match_parent” .

This code is to specify that I want the width and height of the view to be the same as that of its parent, Which in our case is the device’s screen itself. It means that we want the picture to be the background of our app.

I could have also given “wrap_content” or a specific dp value instead of this but this might vary from device to device and we don’t want our app to look weird.

android:contentDescription="backgroundimage"

This is pretty simple as the name suggest it describes what your image does and you can specify anything you like. Here I have given “backgroundimage” as the image is the background image of my app.

android:src="@drawable/index"

This is a very important step this specifies the source of our image. It means we have to specify where our image is If you look towards the top-left of android studio you can see that the folders are listed up there click on drawable folder this is where we are going to put our image in. Rightclick and select Show in Files .

Now go ahead and paste the image you want to put as your background here and rename it to want you desire in my case I have given index.jpeg as my file is a jpeg file.

Coming back to android studio now you have to specify the source of your image. My image is in drawable folder hence @drawable and the file name is index.jpeg so index . Note that you don’t have to give your image extension when you are typing your image name.

At this point you Image should look something like this.

This is not exactly what we are going for so. But we have a trick up our sleeve and that is
scaleType.

android:scaleType="centerCrop"

We have used the centerCrop scaling type to get the style we are going for.

Wholaa we have added our Image now we can move on to adding our TextView’s.

If you are intrested in exploring more on Image views I recommend clicking here.

Text Views

In our app, I am using two text views one for the welcome on the top left corner and one for Venue on the bottom right corner so let’s review the code for the two.

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="welcome"
android:textSize="32sp"
android:textColor="#ffffff"


/>
<TextView
android:id="@+id/venue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:textSize="32sp"
android:text="venue_city_hall"
/>

Similar to Image views I have used android:id, android:layout_width & android:layout_height  but I have used “wrap_content” instead of “matchparent” this is because I want the text to be instead a specific place ( top left corner and bottom right corner ) instead of occupying the whole screen.

android:text="welcome"
android:text="venue_city_hall"

Just taking a glance at these lines of code we can understand that the text inside the semi-colon is to display the text we need to see on the screen. Here I have given “welcome” and “venue_city_hall” to display it. 

android:textSize="32sp"

Here we can choose how big we want our text to be. Simple.

Now we need a color for our text for this you can either use this.

android:textColor="#ffffff"

I hope you have noticed this value “#ffffff” for those of you who aren’t familiar with it. Its called a hex-color value. Different hexa values represent different colors. If you want to know which colors to select for you app and what hexa value it represents you can refer google material design by clicking here. 

Lets see how our app looks.

Oh! no our text is overlapping. It’s okay that is because we have not used to the concept of layouts yet.  So let’s jump into that So the two basic layouts are Relative layout and Linear layout. By default, android studio has loaded up something called constrained layout. that’s why you see this ( Bold text).

<android.support.constraint.ConstraintLayout  xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivit">
<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="backgroundimage"
android:src="@drawable/index"
android:scaleType="centerCrop"

/>
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="welcome"
android:textSize="32sp"
android:textColor="#ffffff"


/>
<TextView
android:id="@+id/venue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:textSize="32sp"
android:text="venue_city_hall"
/>
</android.support.constraint.ConstraintLayout>

We are not gona use that, Lets change it and use Something called RelativeLayout.

So basically a layout is used to arrange different views inside our device screen. here we have one image view and two text views and we have to arrange it.

We could use a linear layout also but it is used to arrange views horizontally or vertically but that not our goal here. We need one image view and two text views inside our image view. Hence we are using RelativeLayouts. Let’s change the Constrained to RelativeLayout.

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivit">
<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="backgroundimage"
android:src="@drawable/index"
android:scaleType="centerCrop"

/>
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="welcome"
android:textSize="32sp"
android:textColor="#ffffff"


/>
<TextView
android:id="@+id/venue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:textSize="32sp"
android:text="venue_city_hall"
/>
</RelativeLayout>

Note that the order of writing the Views are very important because views are displayed accordingly for example here the image view is in the background and the text views are then displayed on top of that. Now let’s arrange the views to the required position

1st I have to align the text view that shows welcome to the top left corner.

<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="backgroundimage"
android:src="@drawable/index"
android:scaleType="centerCrop"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
/>

Here we are aligning the texts relative to the positions of the parent and hence we use.

android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"

These two commands align the text to top left corner of the layout.

Now we want our “venue city hall” text to be on the bottom right corner so lets go and change that.

<TextView
android:id="@+id/venue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:textSize="32sp"
android:text="venue city hall"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
/>

Lets see how our app looks now.

Finally almost done Lets do some minor changes. Lets go ahead and change the font style and position it a bit away from the center.

I want the welcome text to be Bold and the venue city hall text to be italic

android:textStyle="bold"
android:textStyle="italic"

Code this in the appropriate text views and lets see how it goes

Hmm, I don’t like the positions of those text lets change that I am gona add a margin of 10dp to both these texts.

The code for that is

android:layout_margin="10dp"

Lets see how that look.

Awesome we are done. you could also add padding instead of margins but I prefer Margin in this use case You can refer this document and this document for more on Relative Layouts.

The code to this app is available here.

Once we are done click on the run button on top of android studio and click on “run app” now click on create new virtual device and run the app this should automatically create an emulated android phone in your desktop and also build and run the app for you.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s