Android First App

Installing Android Studio & Setup

To crate our first app, need to install the android studio IDE.

Android Studio is an IDE that makes it easy for us to write and build android applications very conveniently we can create emulators (virtual android phones), see previews and build UI layouts using drop features.

You can go to https://develper. Android.com/studio to download android studio.

XML & Java code

Here mainly two languages will be used: XML and Java/Kotlin. XML is for designing and Java/Kotlin is for the logic and hence is the brain of the app.

An XML file is used to build layouts in Android. Layouts are static pages(screens) that can be manipulated using java code (programmatically) Declaring Vis in XML enables us to better separate the presentation of our application from the code that controls its behavior.

Important Note:

1. Android studio is a resource hangry program. You need to have patience while using it.
2. Sometimes Android studio might download files from the internet, so keep your wifi Hotspot ready.
3. In very rare cases, your firewall might block android studio.
4. If your computer is slow, use USB debugging to use your phone as an AVD replacement.
5. If you are using an old PC, make sure that the virtualization is turned on.

Inside java folder of your project there will be mainly two files: “activity_main.xml” and “MainActivity.java”. Basically activity_main.xml file is about the structure of our application and MainActivity.java is the soul of our application.

App Structure

1. The layout defines the appearance of the app.
2. The string resources required by the layout are listed in the strings.xml file.
3. The activity determines how the app interacts with the user.
4. The Custom Java class defines the application logic.

Open the activity_main.xml, it has two modes, design mode and text mode. Its up to you whether you want to write the XML code (Text mode) or just drag the drop the components of your choice (Design mode).

A view group is a view that can contain other child views. The nested view’s structure will be similar to a tree where view will be the leaf node (it cannot have child views).

We can fix an image on our app by applying an image view by dragging: Widgets >ImageView to our app’s design mode view.

You can constraint the widget you use to determine the position.You can create the constraints manually by just pulling it from all sides and joining (imagine it as if you are pulling a spring) it to the corners of the screen.

 To name the resources (buttons, textbox etc) we can either click on that resource and go to its properties and name it or as a best practice we can name.

these resources in the. Open string.xml file by navigating to: Project: app/res/values/strings.xml file and click on open editor, there you can add the key (id) and default value(string). This makes it easier for us to reuse long strings and maintaining a record of the used strings in our app.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="8dp"
        android:text="Send Now"
        android:onClick="sendNow"
        app:layout_constraintBaseline_toBaselineOf="@+id/button2"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="107dp"
        android:text="Receive Now"
        android:onClick="receiveNow"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/button3"
        app:layout_constraintStart_toEndOf="@+id/button" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="25dp"
        android:text="Delete Now"
        android:onClick="deleteNow"
        app:layout_constraintBaseline_toBaselineOf="@+id/button2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button2" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="331dp"
        android:layout_height="297dp"
        android:layout_marginTop="144dp"
        app:layout_constraintBottom_toTopOf="@+id/button2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_launcher_foreground" />

</androidx.constraintlayout.widget.ConstraintLayout>

<androidx.constraintlayout.widget.ConstraintLayout>

This is a type of layout element that tells Android how the components can be displayed on the device’s screen.

To make button execute some java code when you click it, assign the name of the method (in which the code to perform that task is written) in the onClick property of the button.

Java

package rishiz.site.firstapp;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
    public void sendNow(View view){
        Toast.makeText(this, "Sending data from app...", Toast.LENGTH_SHORT).show();
    }

    public void receiveNow(View view){
        Toast.makeText(this, "Receiving data from app...", Toast.LENGTH_SHORT).show();
    }

    public void deleteNow(View view){
        Toast.makeText(this, "Deleting data from app...", Toast.LENGTH_SHORT).show();
    }
}

Kotlin

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
    fun sendNow(view: View?) {
        Toast.makeText(this, "Sending data from app...", Toast.LENGTH_SHORT).show()
    }

    fun receiveNow(view: View?) {
        Toast.makeText(this, "Receiving data from app...", Toast.LENGTH_SHORT).show()
    }

    fun deleteNow(view: View?) {
        Toast.makeText(this, "Deleting data from app...", Toast.LENGTH_SHORT).show()
    }

Toast

Toast is simply a pop up text that is visible when you click a button. To implement the toast text you just have to write a simple line of  code which is given as follows:-

Toast.makeText(this, "Text...", Toast.LENGTH_SHORT).show();

To build APK file of your application go to Build>Build bundle(s)>APK(s)>Build APK(s)

match_parent and wrap_content

match_parent and wrap_content is used to declare the height and width attributes of the Views.

Match parent means the view will expand to the size of the parent inside which it is being declared and wrap_content means the view will expand according to the size of the content it holds.

For example, TextView ‘s width if declared as wrap_content than it will depend on the size of the text which is written inside that TextView.

In the screenshot given below the width of the TextView is match_parent and hence the TextView is stretched to the sides of the screen.

Now when we changed the width from match constraint to wrap content it will align in the middle and its width will be according to the size of its text content.