Android App Development | Beginner Course | Lecture#14 | Hive Learners

3 comments

𝓖𝓻𝓮𝓮𝓽𝓲𝓷𝓰𝓼

Hello everyone, Welcome to our 14 lecture of the Android App Development series. These lectures are for beginners and we will slowly move to the next category. Today We will design a simple button layout and write the code for it. We use 0-9 number text buttons in our design with unique IDs. We will arrange them in the next lecture by learning a new way to align the, In today's lecture, we will write code for the buttons and textview.

GitHub Link

Use this GitHub project to clone into your directory. It will always get updated in the next lecture. So that you will never miss the latest code. Happy Coding!.

What Should I Learn

How to set text in TextView
Concat the number

Assignment

Design a layout of numbers and textview
Concat number in TextView on button click

Procedure

First, we need to add a TextView at the top of the layout and Button. Here is the code for it. activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/screen1_tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="24sp" />

    <Button
        android:id="@+id/num1_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1" />

    <Button
        android:id="@+id/num2_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2" />

    <Button
        android:id="@+id/num3_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3" />

    <Button
        android:id="@+id/num4_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="4" />

    <Button
        android:id="@+id/num5_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="5" />

    <Button
        android:id="@+id/num6_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="6" />

    <Button
        android:id="@+id/num7_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="7" />

    <Button
        android:id="@+id/num8_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="8" />

    <Button
        android:id="@+id/num9_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="9" />

    <Button
        android:id="@+id/num0_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="0" />


</LinearLayout>

Then we need to declare and initialize these items in the MainActivity.java file.

package com.example.hivelearners;

import androidx.appcompat.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 {

    TextView screen1_tv;
    Button num1_btn,num2_btn,num3_btn,num4_btn,num5_btn,num6_btn,num7_btn,num8_btn,num9_btn,num0_btn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        screen1_tv = findViewById(R.id.screen1_tv);

        num1_btn = findViewById(R.id.num1_btn);
        num2_btn = findViewById(R.id.num2_btn);
        num3_btn = findViewById(R.id.num3_btn);
        num4_btn = findViewById(R.id.num4_btn);
        num5_btn = findViewById(R.id.num5_btn);
        num6_btn = findViewById(R.id.num6_btn);
        num7_btn = findViewById(R.id.num7_btn);
        num8_btn = findViewById(R.id.num8_btn);
        num9_btn = findViewById(R.id.num9_btn);
        num0_btn = findViewById(R.id.num0_btn);


        num1_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {


            }
        });


    }
}

Now we need to set the text in the textview when a user clicks on the button. We will pick the text from the button and show it in screen1_tv. But here is one issue. When we click on any button it will replace the existing text in the screen1_tv. So we need to contact the text from the screen1_tv with the button text even if it is empty. Here is a simple way to do this. This time we will use the concat function to do this.

Now we copy-paste this listener for all the buttons and change the button IDs accordingly.


        num1_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                screen1_tv.setText(screen1_tv.getText().toString().concat(num1_btn.getText().toString()));

            }
        });

        num2_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                screen1_tv.setText(screen1_tv.getText().toString().concat(num2_btn.getText().toString()));

            }
        });

        num3_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                screen1_tv.setText(screen1_tv.getText().toString().concat(num3_btn.getText().toString()));

            }
        });

        num4_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                screen1_tv.setText(screen1_tv.getText().toString().concat(num4_btn.getText().toString()));

            }
        });
        num5_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                screen1_tv.setText(screen1_tv.getText().toString().concat(num5_btn.getText().toString()));

            }
        });
        num6_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                screen1_tv.setText(screen1_tv.getText().toString().concat(num6_btn.getText().toString()));

            }
        });
        num7_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                screen1_tv.setText(screen1_tv.getText().toString().concat(num7_btn.getText().toString()));

            }
        });

        num8_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                screen1_tv.setText(screen1_tv.getText().toString().concat(num8_btn.getText().toString()));

            }
        });
        num9_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                screen1_tv.setText(screen1_tv.getText().toString().concat(num9_btn.getText().toString()));

            }
        });
        num0_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                screen1_tv.setText(screen1_tv.getText().toString().concat(num0_btn.getText().toString()));

            }
        });