Abdul Mueez

Developing the Help Screen

Abdul Mueez's photo
Abdul Mueez
·

3 min read

Developing the Help Screen in a Smishing Detection App

I recently developed a Help screen for a Smishing Detection app, and I’d like to walk you through the process, sharing both the code and design decisions involved. Below is a screenshot of the final Help screen:

Project Overview

The Help screen is designed to assist users in navigating the Smishing Detection app by providing quick access to key functions such as contacting support, accessing FAQs, and providing feedback. The layout is clean and intuitive, making it easy for users to find the help they need.

XML Layout Breakdown

The layout of the Help screen is structured using a ConstraintLayout inside a ScrollView to ensure that the content is scrollable, accommodating devices with varying screen sizes. The main components are organized using RelativeLayout to group related elements.

Key Components:

  1. Back Button: Positioned at the top-left corner to allow users to return to the previous screen.

  2. Help Icon: A centrally-aligned logo representing the Help section.

  3. Contact Options: Four buttons offering options to call support, email support, view FAQs, and provide feedback.

Below is the XML code that defines the layout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".HelpActivity">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageButton
                android:id="@+id/report_back"
                android:layout_width="35dp"
                android:layout_height="35dp"
                android:layout_marginStart="16dp"
                android:layout_marginTop="16dp"
                android:background="@null"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/back_button" />

            <ImageView
                android:id="@+id/HardhatLogo"
                android:layout_width="112dp"
                android:layout_height="106dp"
                android:layout_marginTop="20dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.498"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/hardhat_logo" />

            <TextView
                android:id="@+id/ReportText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:text="@string/help_page"
                android:textColor="@color/navy_blue"
                android:textSize="32sp"
                android:textStyle="bold"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.496"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/HardhatLogo" />

            <!-- Contact Us Section -->
            <RelativeLayout
                android:id="@+id/rv_2"
                android:layout_width="0dp"
                android:layout_height="110dp"
                android:layout_marginStart="24dp"
                android:layout_marginTop="16dp"
                android:layout_marginEnd="24dp"
                android:background="@drawable/counter_buttons"
                app:layout_constraintEnd_toStartOf="@+id/guideline"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/ReportText">

                <ImageView
                    android:id="@+id/iv_phone"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_centerInParent="true"
                    android:background="@drawable/circle_background"
                    android:padding="10dp"
                    android:src="@drawable/phone_icon" />

                <TextView
                    android:id="@+id/new_detections"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/iv_phone"
                    android:layout_alignTop="@id/iv_phone"
                    android:layout_alignBottom="@id/rv_2"
                    android:layout_alignParentBottom="true"
                    android:layout_marginTop="30dp"
                    android:gravity="center"
                    android:padding="10dp"
                    android:text="Call Us"
                    android:textColor="@color/black"
                    android:textSize="16sp"
                    tools:ignore="NotSibling" />

            </RelativeLayout>

            <!-- Mail Us Section -->
            <RelativeLayout
                android:id="@+id/rv_1"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_marginStart="24dp"
                android:layout_marginEnd="24dp"
                android:background="@drawable/counter_buttons"
                app:layout_constraintBottom_toBottomOf="@+id/rv_2"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="@+id/guideline"
                app:layout_constraintTop_toTopOf="@+id/rv_2">

                <ImageView
                    android:id="@+id/iv_email"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_centerInParent="true"
                    android:background="@drawable/circle_background"
                    android:padding="10dp"
                    android:src="@drawable/email_icon" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/iv_email"
                    android:layout_alignTop="@id/iv_email"
                    android:layout_alignBottom="@id/rv_2"
                    android:layout_alignParentBottom="true"
                    android:layout_marginTop="30dp"
                    android:gravity="center"
                    android:padding="10dp"
                    android:text="Mail Us"
                    android:textColor="@color/black"
                    android:textSize="16sp"
                    tools:ignore="NotSibling" />

            </RelativeLayout>

            <!-- FAQ Section -->
            <RelativeLayout
                android:id="@+id/rv_3"
                android:layout_width="0dp"
                android:layout_height="110dp"
                android:layout_marginTop="24dp"
                android:background="@drawable/counter_buttons"
                app:layout_constraintEnd_toEndOf="@+id/rv_1"
                app:layout_constraintStart_toStartOf="@+id/rv_2"
                app:layout_constraintTop_toBottomOf="@+id/rv_2">

                <ImageView
                    android:id="@+id/iv_faq"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_centerInParent="true"
                    android:background="@drawable/circle_background"
                    android:padding="10dp"
                    android:src="@drawable/faq_icon" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/iv_faq"
                    android:layout_alignTop="@id/iv_faq"
                    android:layout_alignBottom="@id/rv_2"
                    android:layout_alignParentBottom="true"
                    android:layout_marginTop="30dp"
                    android:gravity="center"
                    android:padding="10dp"
                    android:text="FAQ"
                    android:textColor="@color/black"
                    android:textSize="16sp"
                    tools:ignore="NotSibling" />

            </RelativeLayout>

            <!-- Feedback Section -->
            <RelativeLayout
                android:id="@+id/rv_4"
                android:layout_width="0dp"
                android:layout_height="110dp"
                android:layout_marginTop="24dp"
                android:background="@drawable/counter_buttons"
                app:layout_constraintEnd_toEndOf="@+id/rv_3"
                app:layout_constraintStart_toStartOf="@+id/rv_3"
                app:layout_constraintTop_toBottomOf="@+id/rv_3">

                <ImageView
                    android:id="@+id/iv_feedback"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_centerInParent="true"
                    android:background="@drawable/circle_background"
                    android:padding="10dp"
                    android:src="@drawable/feedback_icon" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/iv_feedback"
                    android:layout_alignTop="@id/iv_feedback"
                    android:layout_alignBottom="@id/rv_2"
                    android:layout_alignParentBottom="true"
                    android:layout_marginTop="30dp"
                    android:gravity="center"
                    android:padding="10dp"
                    android:text="Feedback"
                    android:textColor="@color/black"
                    android:textSize="16sp"
                    tools:ignore="NotSibling" />

            </

RelativeLayout>

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/guideline"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_constraintGuide_percent="0.5" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </ScrollView>

</androidx.constraintlayout.widget.ConstraintLayout>

Notable Design Decisions:

  1. Guideline Usage: I utilized a guideline to evenly distribute the components, ensuring a balanced and responsive design.

  2. RelativeLayouts: By grouping related components into RelativeLayouts, I was able to maintain a consistent structure for each section (e.g., "Call Us," "Mail Us").

  3. Custom Backgrounds and Icons: Custom backgrounds and icons were applied to enhance visual appeal and improve the user experience.

  4. Constraint Layout: This layout ensures that elements adjust properly when the screen size changes, maintaining alignment and spacing across different devices.

Conclusion

The Help screen in this Smishing Detection app is a great example of a user-centric design. It’s both functional and visually appealing, making it easier for users to navigate and find the help they need. Through careful design and thoughtful layout structuring, I ensured that the Help screen would provide a seamless experience across a variety of devices.

Feel free to ask any questions or request further details!

help and support xmlandroid xmlxml