Android app user interface

This free video presentation is created using RenderForest. Paid service includes watermark removal and high-res quality.

Android layout & Views

Android layout refers to arrangement of elements on a page such as images, texts, and styles. All elements in layout are built using Views and ViewGroups. Layouts also have widgets like buttons, labels, textboxes, etc.

View is an user interface that occupies area on the screen and is responsible for drawing and event handling. View is also a superclass of all graphical user interface components.

Further reading

Layout files (xml) in android studio

Main Layout – activity_main.xml

This is the app UI when it is run on a mobile device. I’ll describe 2 main layouts files since the other layout files are less complex .

activity_main.xml
activity_gamelist.xml

activity_main.xml will determine how the global UI of the Activity should be. It is the “outer” part of the activity layout (toolbar, action button, etc.). The layout is separated into several segments in xml.

supportActionBar: Dedicated space for the app
IITopBar: Countdown timer & call-to-action banner linking to credit card payment
rvBoard: Recyclerview displays the card matching game. 
linearLayoutMain: Buttons for levels & timer adjustment
adView: Admob advertisement

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout

    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/clRoot"
    android:background="@color/white"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"> 

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_anchorGravity="center">

        <LinearLayout
            android:id="@+id/llTopBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <androidx.cardview.widget.CardView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:layout_weight="0.1"
                app:cardBackgroundColor="@android:color/transparent"
                app:cardElevation="0dp">

                <TextView
                    android:id="@+id/tvTimer"
                    android:layout_width="80dp"
                    android:layout_height="wrap_content"
                    android:background="@color/white"
                    android:gravity="center"
                    android:padding="2dp"
                    android:text="00:00"
                    android:textAppearance="@style/TextAppearance.AppCompat.Medium"
                    android:textColor="@color/colorPrimaryDark"
                    android:textStyle="bold"
                    tools:ignore="HardcodedText" />
            </androidx.cardview.widget.CardView>

            <androidx.cardview.widget.CardView
                android:id="@+id/cvLogoAbout"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="2"
                app:cardBackgroundColor="@android:color/holo_green_light"
                app:cardCornerRadius="15dp">

                <TextView
                    android:id="@+id/tvSponsor_Message"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center"
                    android:layout_margin="4dp"
                    android:text="@string/sponsor_bannerMsg_default"
                    android:textAlignment="center"
                    android:textAppearance="@style/TextAppearance.AppCompat.Small"
                    android:textColor="@color/black"
                    android:textColorLink="@color/black"
                    android:textStyle="bold|italic" />
            </androidx.cardview.widget.CardView>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/linearLayoutMain"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="60dp"
            android:background="?attr/colorSecondaryVariant"
            android:orientation="horizontal"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent">

            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="10dp"
                android:layout_weight="1"
                app:cardCornerRadius="8dp">

                <TextView
                    android:id="@+id/tvNumMoves"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@color/color_green_darkest"
                    android:gravity="center"
                    android:padding="8dp"
                    android:text="@string/tvMoves"
                    android:textAppearance="@style/TextAppearance.AppCompat.Medium"
                    android:textColor="@color/white"
                    tools:ignore="HardcodedText" />
            </androidx.cardview.widget.CardView>

            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="10dp"
                android:layout_weight="1"
                app:cardCornerRadius="8dp">

                <TextView
                    android:id="@+id/tvNumPairs"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@color/color_green_darkest"
                    android:gravity="center"
                    android:padding="8dp"
                    android:text="@string/btn_setting"
                    android:textAppearance="@style/TextAppearance.AppCompat.Medium"
                    android:textColor="@color/white"
                    app:drawableLeftCompat="@drawable/ic_timer"
                    tools:ignore="HardcodedText" />
            </androidx.cardview.widget.CardView>
        </LinearLayout>

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rvBoard"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="8dp"
            android:layoutAnimation="@anim/layout_animation"
            android:overScrollMode="never"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            app:layout_constraintBottom_toTopOf="@+id/linearLayoutMain"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/llTopBar"
            app:layout_constraintVertical_bias="0.0" />

        <com.google.android.gms.ads.AdView
            android:id="@+id/adView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            app:adSize="BANNER"
            app:adUnitId="ca-app-pub-3940256099942544/6300978111"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/linearLayoutMain"></com.google.android.gms.ads.AdView>

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Read more

Game listing layout – activity_gamelist.xml

The layout displays all the card games. These card games are created by users, store in Firebase Realtime Database and populate the display in recyclerview using the FirebaseUI. FirebaseUI is an open-source library for Android that provides to quickly connect common UI elements to Firebase APIs.

All Firebase Realtime Database data is stored as JSON objects. Unlike a SQL database, there are no tables or records. When you add data to the JSON tree, it becomes a node in the existing JSON structure with an associated key. Firebase is very much not like a relational database. You can compare it to a hierarchical database.

Layout – activity_gamelist.xml

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".GamelistActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rvUsers"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <LinearLayout
        android:id="@+id/llProfile"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/black"
        android:orientation="horizontal"
        app:layout_constraintTop_toBottomOf="@+id/rv"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        tools:ignore="UnknownId">
        <androidx.cardview.widget.CardView
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:layout_margin="10dp"
            android:layout_weight="1"
            android:background="@color/black"
            app:cardBackgroundColor="#000000">
            <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/ivProfile"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_marginEnd="40dp"
                android:background="@color/black"
                android:foregroundGravity="center"
                app:layout_constraintEnd_toEndOf="parent"
                tools:layout_editor_absoluteY="0dp"
                tools:srcCompat="@tools:sample/avatars" />
        </androidx.cardview.widget.CardView>
        <androidx.cardview.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="10dp"
            android:layout_weight="1"
            app:cardBackgroundColor="@android:color/transparent">
            <Button
                android:id="@+id/btnSignOut"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/btn_gamelist_signout" />
        </androidx.cardview.widget.CardView>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Read more