Build a About Screen UI in Android Applications with Kotlin – Coding Shiksha

Build a About Screen UI in Android Applications with Kotlin – Coding Shiksha

Hello folks I am back with another blog post so in this blog post we will be talking about that how to build an about screen in an Android application so building design Android application in the Kotlin language so as you know that Google has recently released the Kotlin language as their default language for making android applications show the demo of this application is given below you can see the image and also the whole source code of this application is also embedded in this blog post so study the source code and also try to extend this application accordingly to your needs.

 

Demo

 

 

 

So as you can see in the figure all the social networks are available including Google YouTube Facebook Twitter etc so this is a very awesome library if you are building any sort of application you need to require an about screen where you can tell about yourself so this is a very handy library that you can use in your Android applications

READ  Kotlin PDF Viewer Library Example - Coding Shiksha

 

Include this Library

 

Add it in your root build.gradle at the end of repositories:

allprojects {
  repositories {
    maven { url 'https://jitpack.io' }
  }
}

 

Add the dependency

dependencies {
     implementation 'com.github.p32929:OfficeAbout:1.0.0.6'
}

 

 

After including the library in your gradle file now time comes in order to use this application so In this library there is a specific function available in this library which takes a argument and that argument is nothing but a JSON file and that JSON file will contain all the details of yourself such as the the social network URL show all the details that you want to show in your about screen page so just create a JSON file that is shown to you below and just replace your details such as Facebook profile YouTube URL etc so just copy paste the JSON code shown below

READ  Kotlin RecyclerView Animation Example - Coding Shiksha

 

{
    "officeLogoUrl": "https://user-images.githubusercontent.com/6418354/62771043-1af00180-babe-11e9-8830-7904a358ccc0.png",
    "googlePlayUrl": "https://play.google.com/store/apps/developer?id=Rich+IT",
    "facebookPageUrl": "https://www.facebook.com/rich.it.ctg",
    "facebookPageID": "104754327537968",
    "groupUrl": "https://www.facebook.com/groups/518485748694084/",
    "youtubeUrl": "https://www.youtube.com/user/marquesbrownlee",
    "githubUrl": "http://github.com/p32929",
    "webUrl": "https://p32929.github.io/Portfolio/",
    "members": [
        {
            "imageUrl": "https://avatars1.githubusercontent.com/u/6418354?s=460&v=4",
            "name": "Fayaz Bin Salam",
            "post": "Founder & CEO",
            "contactUrl": "https://www.facebook.com/p32929"
        },
        {
            "imageUrl": "https://user-images.githubusercontent.com/6418354/62595278-92c3fd80-b8ff-11e9-89b1-8a4b0d3fbae4.jpg",
            "name": "Arfatul Mowla Shuvo",
            "post": "Software Developer",
            "contactUrl": "https://www.facebook.com/mowla.shuvo"
        },
        {
            "imageUrl": "https://user-images.githubusercontent.com/6418354/62595308-b25b2600-b8ff-11e9-86e1-5d58cb1a6cac.JPG",
            "name": "Masrur Mehedi",
            "post": "Software Developer",
            "contactUrl": "https://www.facebook.com/masrorulhoque.mehedi.1"
        },
        {
            "imageUrl": "https://user-images.githubusercontent.com/6418354/62595290-a0798300-b8ff-11e9-9b78-ea9262f4bf94.JPG",
            "name": "Xenon",
            "post": "Software Developer",
            "contactUrl": "https://www.facebook.com/plabon.shuvo1"
        },
        {
            "imageUrl": "https://user-images.githubusercontent.com/6418354/62595321-bdae5180-b8ff-11e9-8b44-3378b8a88ce3.jpg",
            "name": "Misbah",
            "post": "Software Developer",
            "contactUrl": ""
        }
    ]
}

 

So now after Creating your JSON file you can pass the JSON file into the library and call a very simple function and pass this JSON file as an argument so what that library will do is that it will take the JSON file and it will be replacing all the contents that is written inside this JSON file such as the YouTube URL Facebook profile information and it will create a about screen page so all the source code that is external code in Kotlin part of a real world example is shown below suggest note down all the code and copy paste it in your Android studio and then you can achieve this result

READ  Kotlin Google Maps AutocompleteTextView Location Example - Coding Shiksha

 

Example Source Code

 

  1. Layout File

 

        activity_main.xml

 

 

<?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=".MainActivity">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:onClick="showAboutActivity"
        android:text="Show About Activity" />

</RelativeLayout>

 

2) Kotlin Code

 

package p32929.officeaboutapp;

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

import androidx.appcompat.app.AppCompatActivity;

import p32929.officeaboutlib.Others.OfficeAboutHelper;

public class MainActivity extends AppCompatActivity {

    OfficeAboutHelper officeAboutHelper;

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

        officeAboutHelper = new OfficeAboutHelper(this, "https://raw.githubusercontent.com/p32929/SomeHowTosAndTexts/master/Office/OfficeInfo.json");
        officeAboutHelper.showAboutActivity();
    }

    public void showAboutActivity(View view) {
        officeAboutHelper.showAboutActivity();
    }
}

 

Leave a Reply

Close Menu