Android Application Development Button and EditText View

Total Views : 177
Zoom In Zoom Out Read Later Print

Second part of basic android application tutorial series.

Hello everyone, welcome to our second part of Basic Android application tutorial. I guess you have already check part one of this tutorial if not you can check here.

In this post we will learn to get user input using EditText and showing output on Button click.

First of all you need to create android studio project. you can check previous blog for how you can create a new project. When you create a new project a default layout will be created elect by you. have a look at the default activity xml code.


RelativeLayout

<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

In above code you can see the XML code is started with a RelativeLayout tag. It is a type of layout, it can have another view inside it. There are many other layouts available in android. in RelativeLayout all the components are aligned with relation to other components or you can say view.

Make a little bit of Change

In this example we are going to use LinearLayout.

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>

What a LinearLayout does is it aligns all the elements linearly either horizontal or vertical in activity. Default orientation for LinearLayout is horizontal. we can change it to vertical using orientation property of LinearLayout.

  • xmlns:android="http://schemas.android.com/apk/res/android" : It is namespace for our XML Code.
  • android:layout_width="match_parent" : It is the width of the layout and it its value is match parent which will make view to cover full width of parent. you can use wrap_content property for make it only for view.
  • android:layout_height="match_parent"  : It defines the height of the layout, it works same as the width.

Creating Views

We can create many view in a layout. Views are components like Buttons, EditTexts, TextView etc. and other components which can be used for creating our layout.

Creating Button

You can use GUI for creating buttons or you can directly edit XML file. If we edit XML file then we need to use Button tag for this. when you typing this you can see dropdown hints and press enter on hint. you can use below code for creating a simple button.

Button

 <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 button it is used when we want to access it in java code. 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 of project. 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 need to create EditText for input. you can use following code for EditText.

EditText

<EditText
android:id="@+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

have a look at the final XML code of activity layout.

activity_main.xml

<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">

<EditText
android:id="@+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is a button"
android:layout_marginTop="20dp"/>

</LinearLayout>

Now if you will switch to the design view you will see something like shown in following image.

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.


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.

Previous Part: Basics of Android

Next Part: Handling Edit Text and Button


See More

Latest Photos