Home

What is a responsive app design?

Basically, a Responsive app design is changing of design layout of an application according to the user device or we can say creating multiple app design layout for multiple devices according to the different screen size, orientation and platforms.

Steps for to Make a Responsive App Design

Step-1 Resource Manager→ Layout→ open any layout which you want

Step-2 Tap on Orientation for preview→ Create other→ size icon→ Add it to the qualifiers

Step-3 Tap on the Expand bar which is below Screen Size→ Choose the layout size as for your needs→ Hit ok

Final Step– You are all done and you have successfully created a new Design layout for a different screen size and now you can edit that design layout individually as for your needs

Watch This Video for Tutorial

What is Minimum SDK Level?

The minimum version required by the android operating system to run an application is known as the Minimum SDK level for example when you try to download an application from the Google play store on your android device but the play store did not allow your device to download that particular app due to android version compatibility issue that is when the thought of minimum level SDK arises.

What is Target SDK Level?

Basically, The Target level is the SDK version or android version used while building that particular application for the android device for example if the latest android version is 12 then I will build my application on Android version 10 or 11 so that the application stays stable for almost all device and that particular version will be my target SDK version.

Different Ways To Change Minimum Level SDK

There are two ways for changing Minimum level SDK:-

1→ Using Modules which is in the Project Structure option

2→ Using build.grade(Module.app) in Gradle Scripts

Using Module to Change the Minimum SDK

To Change minimum SDK using module first tap on file →Project Structure →Modules →Default config then change Minimum SDK and Target SDK according to your needs

Using Gradle Scripts To Change Minimum SDK

To change Minimum SDK and Target SDK using Gradle Scripts first extend your project bar →Gradle Scripts →Build.Gradle(Module:Yourappname.app) →Default Config then change Minimum SDK and Target SDK according to your needs

Watch This video for Tutorial

What is Github?

Basically, Github is a tool that is used for code hosting that means you didn’t need to send the same code to each individual person in your team. Just by sharing code on your Github profile, you can easily share your code everywhere around the world and this is not it. It also came with some powerful tools which are used for code management.

What is Android Studio?

Android studio is the official Integrated Development Environment (IDE) for Android application which means it is a tool that is used to create an Android application (App) for android phones as well as for android watch and on top of that it came along with a ton of features that makes the building and testing of an application a lot easier for a software engineering.

Steps for importing Github project on Android Studio

Step-1 Copying source code link

To copy the link of the source code, open your GitHub repository and then select the project which you want to import → Code → Copy link to the clipboard

Step-2 Saving the source code to specific location

To Save your Project at your Specific Location first open Android Studio → File → New → Project from the version control → Directory → browse the location → URL → Paste the source code URL

Final Step–Opening your project

As soon as you will tap on the clone button Android Studio will ask you whether you want to open the project in the current window or in a new windows Tap on any of one option as per your likes and then Android Studio will take a couple of secs to build your project and then you are all done you have successfully imported your project from Github

Watch This video for Tutorial

What is Bottom Navigation Bar?

Basically bottom navigation bar is used to let the user navigate easily through different Fragments or Activities. Some of the popular apps like Instagram, Zomato, uses Bottom Navigation Bar.

Why Bottom Navigation Bar?

• It lets’s the user to navigate easily through different Activities/Fragements.
• Let’s the user know about the main Activies available in the App.
• It provides nice aesthetics to the app.

Steps for creating Bottom Navigation Bar

Step 1: Create a new Android Studio Project

To create a new Android Studio Project, open Android Studio -> Click on File -> New -> New Project. Select an Empty activity -> Click Next -> Enter the name of the Application -> Select Java Language -> Click Finish.

Step 2: Add the following dependencies to build.gradle file

dependencies {
    implementation 'com.google.android.material:material:1.2.1'
}

Step 3: Add Vector assets to the project

So for the bottom navigation bar, we will need some icons. To add these icons follow the below-mentioned steps:

Click on the app -> res -> drawable(right-click) -> New -> Vector Asset

Click on Clip Art -> search for favorite -> Select the filled heart icon and rename it to “icon_1“. We have to add 3 more icons repeat the above step to search for “music note”, “places” and “Person” and name them as “icon_2”, icon_3″, and “icon_4” respectively.

Step 4: Add Menu resource file

Now we need to add menu resource file

Right Click on the res -> New -> Android Resource File

Select “Menu” as Resource type and “bottom_nav_bar” as File name

Step 5: Add Following code to bottom_nav_bar

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/page1"
        android:enabled="true"
        android:icon="@drawable/icon_1"
        android:title="Favorites"/>

    <item
        android:id="@+id/page2"
        android:enabled="true"
        android:icon="@drawable/icon_2"
        android:title="Music"/>

    <item
        android:id="@+id/page3"
        android:enabled="true"
        android:icon="@drawable/icon_3"
        android:title="Place"/>

    <item
        android:id="@+id/page4"
        android:enabled="true"
        android:icon="@drawable/icon_4"
        android:title="Profile"/>

</menu>

Step 6: Add Following code to where you want to implement Bottom Navigation Bar

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".bottomnav">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/black"
        android:text="Bottom Navigation Bar"
        android:textSize="30sp"
        android:layout_centerInParent="true"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="8dp"
        app:backgroundTint="@color/white"
        android:layout_alignParentBottom="true"
        app:menu="@menu/bottom_nav_bar"/>

</RelativeLayout>

Step 7: Add the Following code to MainActivity.java file

package com.example.helloworld;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MenuItem;
import android.widget.Toast;

importcom.google.android.material.bottomnavigation.BottomNavigationView;

public class bottomnav extends AppCompatActivity {

    BottomNavigationView bottomNavigationView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bottomnav);
        bottomNavigationView = findViewById(R.id.bottom_navigation);
                       bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {

                if (item.getItemId() == R.id.page1){

                    Toast.makeText(bottomnav.this,"Favorites is clicked",Toast.LENGTH_LONG).show();
                }else if (item.getItemId() == R.id.page2){

                    Toast.makeText(bottomnav.this,"Music is clicked",Toast.LENGTH_LONG).show();
                }else if (item.getItemId() == R.id.page3){

                    Toast.makeText(bottomnav.this,"Places is clicked",Toast.LENGTH_LONG).show();
                }else if (item.getItemId() == R.id.page4){

                    Toast.makeText(bottomnav.this,"Profile is clicked",Toast.LENGTH_LONG).show();
                }

                return true;
            }
        });

    }
}

Output : Run and Test your app!

Watch this tutorial on youtube