Android Q: In-App Settings Panel

In this tutorial, we’ll be discussing how to show the Settings Panel in our android application. With the introduction of Android Q, it’s possible to show a Floating Settings Menu without switching to the Settings App.

Android Q Settings Panel

A Settings Panel is like a Bottom Sheet Floating Menu which allows us to view/edit the settings.

Currently, the Settings Panel can show three different types of Settings:

• Connectivity Settings – Mobile Data/Wifi Airplane Mode
• Volume Settings – Change the volumes of alarm, calls notification etc.
• NFC – Configure NFC connection settings

To invoke each such setting, we need to call Intents with the specific Action Strings Constants.

Following are the Action Strings for each Panel:

• ACTION_INTERNET_CONNECTIVITY
• ACTION_NFC
• ACTION_VOLUME

Using the above Settings Panel makes the UX much more smooth. Earlier to change settings from the current application, the user had to launch the Settings App using Intents.
Now, the transition is much more smooth.

Despite all the pros, there is one con in this new Settings Panel Design.

In the following section, we’ll be implementing each of these three Settings Panel in our Android Studio Project.

Android Q In-App Settings Panel Project Structure

Android Q Settings Panel Project Structure

Please make sure that you have updated your Android SDK and builds to the latest Android – Q.

Code

The code for the activity_main.xml layout is given below:

Copy
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:gravity="center"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btnInternet"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="INTERNET SETTINGS"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btnVolume"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="VOLUME SETTINGS"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btnNFC"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="NFC SETTINGS"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</LinearLayout>

The code for the MainActivity.java class is given below:

Copy
package com.journaldev.androidqsettingspanel;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.provider.Settings;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    Button btnInternet, btnVolume, btnNFC;

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

        btnInternet = findViewById(R.id.btnInternet);
        btnVolume = findViewById(R.id.btnVolume);
        btnNFC = findViewById(R.id.btnNFC);

        btnInternet.setOnClickListener(this);
        btnVolume.setOnClickListener(this);
        btnNFC.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {

        switch (view.getId()) {
            case R.id.btnInternet:
                showInternetSettings();
                break;
            case R.id.btnVolume:
                showVolumeSettings();
                break;
            case R.id.btnNFC:
                showNFCSettings();
                break;
        }
    }

    private void showInternetSettings() {
        startActivity(new Intent(Settings.Panel.ACTION_INTERNET_CONNECTIVITY));
    }

    private void showVolumeSettings() {
        startActivity(new Intent(Settings.Panel.ACTION_VOLUME));
    }

    private void showNFCSettings() {
        startActivity(new Intent(Settings.Panel.ACTION_NFC));
    }
}

The above code is self-explanatory.
We’ve simply launched each of the Settings Panel on different Button click Intents.

The output of the above application in action is given below:

Android Q Settings Panel Output

Ignore the lags and UI getting cut since it’s an issue with the Android Emulator.

That brings an end to this tutorial. You can download the project from the link below or view the full source code in our Github Repository.

About Anupam Chugh

He loves learning new stuff in Android and iOS. Shoot him queries.