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

new android studio project

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

new project android studio

  • 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

android app development tutorial

  • 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

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. 

  • 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

  • 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

  • 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

button android studio

  • 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.

  • 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

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

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

android app development tutorial

  • 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
    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 🙂

Next Post: Handling Button and Edit Text

Prev Post: Understanding The Basics