Saturday, February 20, 2016

Creating a Simple Example of using TextView, EditText and a Button

In this post, I'm going to start creating a small project by taking a TextView, EditText and a Button.
First up, you need to create the XML Layout for this three widgets to show in the app. Here is the XML code that you need to write in your activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="parthvora.com.myapplication.MainActivity">

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/editText"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me"
        android:id="@+id/button"
        android:layout_below="@id/editText"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="100dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView"
        android:layout_below="@id/button"
        android:layout_marginTop="20dp" />

</RelativeLayout>

This is the basic layout that will show two things EditText to enter the text and Button to click, if you run the application in the Emulator. For configuring the Emulator please visit AVD Setup. This was just the designing portion, for the click of the button to work, we need to jump to the src folder and go to MainActivity.java file and edit it with the following code to make it click and do something when the button gets clicked.

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    EditText name;
    TextView text;
    Button btn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        name = (EditText) findViewById(R.id.editText);
        text = (TextView) findViewById(R.id.textView);
        btn = (Button) findViewById(R.id.button);

        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                text.setText(name.getText());
            }
        });
    }
}

So, this is the code file where we have declared the EditText, TextView and Button. In onCreate method we have initialized them using findViewById method and we have added a setOnClickListener method on the Button that is used to get the click event when user wants to click on the button in your app. Now, on click of the button we want to set the text from EditText and set it in the TextView which will be seen below the button in our app when the user will click on the button. setText is the method using which we can set the text and getText method is used to get the text from the EditText which will be entered by the user.

0 Comments:

Post a Comment