Как создать полупрозрачный серый накладной учебник в Android?

Вы знаете, когда вы впервые запускаете устройство Android (что-то, что вы видите много, если используете эмулятор), где есть полезный небольшой учебник о том, как использовать пусковую установку и добавлять виджеты и т.д. Я пытаюсь найти пример этого в Google, но я не могу. Я надеюсь, вы знаете, что я имею в виду. Это один с синими кнопками "okay" на каждом шагу.

В любом случае, я хочу создать его для своего приложения, но я не уверен, что это лучший способ сделать это.

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

Я делаю полупрозрачный .png для каждого раздела учебника и накладываю его поверх обычной активности запуска при первом запуске?

Если я сделаю последнее, как я могу настроить все размеры экрана? Я мог бы просто визуализировать изображение в Photoshop в разных измерениях, но это не будет охватывать все из них. Если я иду по фрагментному маршруту, я могу просто сказать "match_parent" и не беспокоиться об этом. Но потом я должен выяснить, как работают Фрагменты, и они путают меня от меня.

Ответы

Ответ 1

Я думаю, что эта библиотека с открытым исходным кодом именно то, что вы ищете:

Просмотр витрины

enter image description here

Вы можете получить исходный код и инструкции по настройке из GitHub.

Ответ 2

Используйте шестнадцатеричный код цвета, который состоит из двух цифр для альфа и шести для самого цвета, например:

android:background="#22FFFFFF"

Это сделает его полупрозрачным.

android:background="#c0000000" for more darkness

Edited

В целом структура цветового кода гексадецимака похожа на '#FFFF'

Для достижения прозрачности добавьте две цифры после "#" в любой цветовой код.

Например: #110000, #220000, #330000.

Чем больше эти две цифры, тем меньше прозрачность.

Ответ 3

Вам не нужно использовать Photoshop. Вы можете использовать, например, LinearLayout с android:background="#50134BE8". Это сделает его прозрачным синим. Вы можете разместить макет поверх всего и скрыть его, когда пользователь будет выполнен. Вы можете использовать любой цвет фона, но чтобы сделать его прозрачным, поместите число от 01 до FE, после символа "#", чтобы изменить его прозрачность. Установите ширину и высоту на fill_parent, чтобы занять всю область. Поместите этот вид прямо в основной макет. Надеюсь, это поможет.

Ответ 4

Вы можете попробовать что-то вроде этого

<LinearLayout ... >
<!-- your Normal layout goes here -->
<RelativeLayout android:id="@+id/tutorialView" android:background="#D0000000"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

        <ImageView android:src="@drawable/hint_menu" android:layout_alignParentLeft="true"
                   android:layout_centerVertical="true" android:layout_width="wrap_content"
                   android:layout_height="wrap_content"/>

    </RelativeLayout>
</LinearLayout>

И в вашем методе onCreate

View tutorialView = findViewById(R.id.tutorialView);
        boolean tutorialShown = PreferenceManager.getDefaultSharedPreferences(MainActivity.this).getBoolean(Constants.PREF_KEY_TUT_MAIN, false);
        if (!tutorialShown) {
            tutorialView.setVisibility(View.VISIBLE);
        } else {
            tutorialView.setVisibility(View.GONE);
        }

        tutorialView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                v.setVisibility(View.GONE);
                PreferenceManager.getDefaultSharedPreferences(MainActivity.this).edit().putBoolean(Constants.PREF_KEY_TUT_MAIN, true).commit();
            }
        });

Ответ 5

Для этого называется "FancyShowcaseView":

https://github.com/faruktoptas/FancyShowCaseView

Пример FancyShowcaseView

Добавьте в свой проект:

На уровне верхнего уровня build.gradle (не):

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

На уровне модуля (приложение) build.gradle

dependencies {
    compile 'com.github.faruktoptas:FancyShowCaseView:1.0.0'
}

Затем вы можете позвонить:

new FancyShowCaseView.Builder(this)
        .focusOn(view)
        .title("Focus on View")
        .build()
        .show();