Как создать экран подключения на Android?

Сегодня мы узнаем, как мы можем добавить экран подключения к нашему приложению для Android в студии Android, чтобы обеспечить лучший пользовательский интерфейс для пользователя приложения.

Что такое экран подключения?

Экран подключения можно понимать как виртуальную распаковку приложения. Пользователи проходят через серию экранов, которые, наконец, направляют пользователей к интерфейсу приложения. Цели или задачи экрана адаптации:

• Приветствует пользователя и радует его предстоящим приложением.
• Расскажите об особенностях или функциях приложения.
• Разрешить пользователям регистрироваться или входить в систему.
• Соберите информацию об интересах пользователя (например, когда мы открываем приложение Spotify в первый раз, оно просит пользователя выбрать певцов, которые ему нравятся).

Что мы собираемся построить в этой статье?

Вот пример видео экрана адаптации, который мы собираемся создать в этой статье. Обратите внимание, что мы собираемся реализовать этот проект на языке Java.

Пошаговая реализация

Шаг 1. Создайте новый проект

• Откройте новый проект.
• Мы будем работать над Empty Activity с языком Java. Остальные параметры оставьте без изменений.
• Вы можете изменить название проекта по своему усмотрению.
• По умолчанию будет два файла с именами xml и MainActivity.java.

Шаг 2. Перейдите к файлу Build scripts -> build.gradle (модуль) и добавьте в него следующую зависимость.

реализация ’com.ramotion.paperonboarding: paper-onboarding: 1.1.3′

После добавления этой зависимости нажмите «Синхронизировать» сейчас, чтобы сохранить все изменения.

Шаг 3. Работа с файлом activity_main.xml

Перейдите к приложению> res> layout> activity_main.xml и добавьте в этот файл приведенный ниже код. Ниже приведен код файла activity_main.xml.

XML

<?xml version="1.0" encoding="utf-8"?>

<!-- Here frame layout is used so that different 

     fragments of our onboarding screen can be

     changed within the same layout-->

<FrameLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/frame_layout"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity">

</FrameLayout>

Шаг 4: Работа с файлом MainActivity.java

Перейдите в файл MainActivity.java и ознакомьтесь со следующим кодом. Ниже приведен код файла MainActivity.java. Комментарии добавляются внутри кода для более подробного понимания кода.

Java

import android.graphics.Color;

import android.os.Bundle;

 

import androidx.appcompat.app.AppCompatActivity;

import androidx.fragment.app.FragmentManager;

import androidx.fragment.app.FragmentTransaction;

 

import com.ramotion.paperonboarding.PaperOnboardingFragment;

import com.ramotion.paperonboarding.PaperOnboardingPage;

 

import java.util.ArrayList;

 

public class MainActivity extends AppCompatActivity {

    private FragmentManager fragmentManager;

 

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

 

        fragmentManager = getSupportFragmentManager();

 

        // new instance is created and data is took from an 

        // array list known as getDataonborading

        final PaperOnboardingFragment paperOnboardingFragment = PaperOnboardingFragment.newInstance(getDataforOnboarding());

        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

 

        // fragmentTransaction method is used

        // do all the transactions or changes

        // between different fragments

        fragmentTransaction.add(R.id.frame_layout, paperOnboardingFragment);

 

        // all the changes are committed

        fragmentTransaction.commit();

    }

 

    private ArrayList<PaperOnboardingPage> getDataforOnboarding() {

 

        // the first string is to show the main title ,

        // second is to show the message below the

        // title, then color of background is passed ,

        // then the image to show on the screen is passed

        // and at last icon to navigate from one screen to other

        PaperOnboardingPage source = new PaperOnboardingPage("Gfg", "Welcome to GeeksForGeeks", Color.parseColor("#ffb174"),R.drawable.gfgimg, R.drawable.search);

        PaperOnboardingPage source1 = new PaperOnboardingPage("Practice", "Practice questions from all topics", Color.parseColor("#22eaaa"),R.drawable.practice_gfg, R.drawable.training);

        PaperOnboardingPage source2 = new PaperOnboardingPage("", " ", Color.parseColor("#ee5a5a"),R.drawable.gfg_contribute, R.drawable.contribution);

 

        // array list is used to store

        // data of onbaording screen

        ArrayList<PaperOnboardingPage> elements = new ArrayList<>();

 

        // all the sources(data to show on screens)

        // are added to array list

        elements.add(source);

        elements.add(source1);

        elements.add(source2);

        return elements;

    }

}

Поздравляем, мы успешно создали экран адаптации для нашего приложения.