Android App Development Tutorial - Button and EditText

Hello friends, welcome to our Android App Development Tutorial from Scratch. This is the third post in our Android App Development Tutorial from Scratch Series. So I guess you have already gone through the previous posts. Today we will learn to take user input using EditText and giving output on Button press. So lets begin.

Creating a New Android Studio Project

Open Android Studio and create a new project

Now put the put the application details (I have given the name HandlingButton) and click next

Now keep clicking next (don’t change any settings, you do not need to change anything now) and at last you will see finish
Finally click finish and you will see the following screen

Now you are seeing your app’s screen. A default Hello World is appearing. The layout is coded in XML. You can switch to the code view from the button below. Click on Text to switch to the code view.
You will see the following code

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"

android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

<TextView android:text="@string/hello_world" android:layout_width="wrap_content"

android:layout_height="wrap_content" />

</RelativeLayout>

Understanding the Layout

As you can see in the above code the xml tag is started with <RelativeLayout… It is a type of layout. We are many other layouts available. So what happens in RelativeLayout is all the components are aligned with relation to other components. We will understand RelativeLayout later on just for simplicity I am changing the Tag RelativeLayout with LinearLayout. So in your code change RelativeLayout to LinearLayout.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"

android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

<TextView android:text="@string/hello_world" android:layout_width="wrap_content"

android:layout_height="wrap_content" />

</LinearLayout>

Now what a LinearLayout does is it aligns all the elements linearly either horizontal or vertical. In the above code we haven’t defined the orientation yet. So by default it will behave as horizontal LinearLayout. Now lets understand the other properties.
LinearLayout is the main tag

<LinearLayout

</LinearLayout>

xmlns:android=”http://schemas.android.com/apk/res/android” -> It is the namespace for our xml.
android:layout_width=”match_parent” -> It is the width of the layout and the value is match_parent. match_parent means the width of the layout will match to the width of the parent layout. So in this case it will be the full width available.
android:layout_height=”match_parent” -> It defines the height of the layout.
The other things are padding defined. So we can have paddings at all the sides of the layout

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

android:paddingBottom="@dimen/activity_vertical_margin"

The value can be defined with dp (deci integrated pixels) e.g. 16dp, 18dp, 25dp etc. In the above code you are seeing the values are not defined in dps. It is actually dp but the value is defined inside another xml file called dimens.xml. I have already told you about dimesn.xml in the last tutorial understanding the basics of android app development.

Creating Views Inside Layout

Inside the layout we can create the views for our application. Views are the widgets and components like Buttons, EditTexts (Text Fields) and many other components which will be used for creating our application.
In this post we will be learning how to create a Button and an EditText. We now what is a Button and an EditText. We can use EditText to take input from user and Button to perform some action on tap.

Creating a Button

For creating a button we can use Button tag
Just go inside the layout and type <Button

You will get a dropdown now press enter. Now you can set the width and height for you button. You see the xml code for a button below.

<Button

android:id="@+id/button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="This is a button" />

android:id=”@+id/button”: This is the id for your button after @+id/ i.e. here the id for your button is “button” (without quotes). This id will be used to handle the button in java coding. Whenever we put @+id in android:id tag of any view a respective hex value is stored in a variable named with the id you have given here in R.java file. Now these things are done automatically so you do not need to bother much about this. Basically what you need to know is this is the id that will be used for handling this button.
Now we will create an Edit Text. For creating Edit Text we have the tag <EditText

<EditText

android:id="@+id/editText"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

So the code for the final layout that we have created yet is.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"

android:orientation="vertical"

android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

<Button

android:id="@+id/button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="This is a button" />

<EditText

android:id="@+id/editText"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

</LinearLayout>

Now if you will switch to the design view you will see something like this

So as you can see we have our Button and EditText.
We could have done the same thing by simple drag and drop using the palette
Android App Development Tutorial
As you can see there are various predefined Views are available. We can also create our own Views. We will see about these things in further tutorials. So I am wrapping up this tutorial here. In the next Android App Development Tutorial we will see how to handle the Views i.e. Button and EditText and We will add some functionality on it. Meanwhile you can check the official android developer guide. Thank You 🙂