Learning management systems UI with the XML layout.

LMS UI Glass Effect_ronnystudio_android xml layout
Saving your ample hours of designing and developing the Android UI is our goal, We now present to you LMS and learning management systems UI with the XML layout.

Saving your ample hours of designing and developing the Android UI is our goal, We now present to you LMS and learning management systems UI with the XML layout.

Before we start you can visit our previous post here

we started a new category which is freebies under this section you will get all the free source code UI kit. every week we select a design from various design platforms like uplabs, dribble, UI8, UImates we take this adobe XD or sketch design and develop in an android studio using constraint layout or LinearLayout. we also give credit to the designer who made and then start developing. here is the detail below.

Before we started check previous post here

I would like to mention the design Author who makes this design. I got this design from uimates.com. you can visit this post as well. The link is Here

Step 01 :

Create a new project in Android Studio from the File ⇒ New Project. As it prompts you to select the default activity, select Empty Activity and proceed.

Name your project as per your convenience and click finish.

Download this drwable.zip and add them to your project res folder. This file contains a few drawable images and font folder required for this app.

Step 02 :

Go to the build Gradle and do the needful changes as follows.

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
    implementation 'androidx.cardview:cardview:1.0.0'
    implementation 'com.github.jgabrielfreitas:BlurImageView:1.0.1'
}

Go to the build Gradle (Project Level ) and do the needful changes as follows.

allprojects {
    repositories {
        google()
        jcenter()

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

After this click on sync now.

I would like to mention the name of this third party library owner that I used in this project

Open colors.xml located under res ⇒ values and add the below color values.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#6200EE</color>
    <color name="colorPrimaryDark">#3700B3</color>
    <color name="colorAccent">#03DAC5</color>
    <color name="btncolor">#465cff</color>
</resources>

Open style.xml located under res ⇒ values and add the below values.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowNoTitle">true</item>
        <item name="android:windowFullscreen">true</item>
    </style>

</resources>

Step 03 :

Now is the time for making the XML file. For this, Open activity_main.xml and paste the following code.

<?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:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

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

        <com.jgabrielfreitas.core.BlurImageView
            android:id="@+id/spacer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/splash_bg"
            app:radius="24" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="258dp"
                android:layout_gravity="center"
                android:layout_marginLeft="44dp"
                android:layout_marginRight="44dp"
                android:scaleType="centerCrop"
                android:src="@drawable/splashimg_one" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="46dp"
                android:fontFamily="@font/circular_std_bold"
                android:gravity="center_horizontal"
                android:letterSpacing="-0.03"
                android:lineSpacingExtra="11sp"
                android:text="We Are Creative\nTeammates"
                android:textColor="#3d3d3d"
                android:textSize="32sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="44dp"
                android:layout_marginTop="18dp"
                android:layout_marginRight="44dp"
                android:fontFamily="@font/circular_std_book"
                android:gravity="center_horizontal"
                android:letterSpacing="-0.03"
                android:lineSpacingExtra="9sp"
                android:text="We deal in all creative and digital services. Including Data Science and Data Management Services around the world. Get connect with us"
                android:textColor="#cc252525"
                android:textSize="13sp" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="60dp"
                android:background="@drawable/btn_rounded"
                android:fontFamily="@font/circular_std_bold"
                android:gravity="center_horizontal"
                android:letterSpacing="-0.03"
                android:lineSpacingExtra="5sp"
                android:paddingLeft="62.5dp"
                android:paddingTop="18dp"
                android:paddingRight="62.5dp"
                android:paddingBottom="18dp"
                android:text="Get Started Now"
                android:textColor="#ffffff"
                android:textSize="17sp" />

        </LinearLayout>

    </FrameLayout>


</LinearLayout>

Now Our first screen is done which is start screen.output of this screen :

Move onto next screen which is HomeScreen

Step 04:

Create a new activity and name is at HomeScreen and open activity_home_screen.xml and past the following code.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

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


        <com.jgabrielfreitas.core.BlurImageView
            android:id="@+id/spacer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/splash_bg"
            app:radius="24" />

        <androidx.core.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="25dp"
                android:layout_marginRight="25dp"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="end"
                    android:layout_marginTop="25dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/profile_img" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginTop="55dp"
                    android:orientation="horizontal">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:fontFamily="@font/circular_std_bold"
                        android:letterSpacing="-0.03"
                        android:lineSpacingExtra="13sp"
                        android:text="Choose\nCategories"
                        android:textColor="#3d3d3d"
                        android:textSize="39sp" />

                    <TextView
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1" />

                    <androidx.cardview.widget.CardView
                        android:layout_width="48dp"
                        android:layout_height="48dp"
                        android:layout_centerInParent="true"
                        android:layout_gravity="center"
                        android:layout_marginRight="16dp"
                        android:innerRadius="0dp"
                        android:shape="ring"
                        app:cardCornerRadius="75dp">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:background="@drawable/ic_baseline_arrow_back_24" />
                    </androidx.cardview.widget.CardView>

                    <androidx.cardview.widget.CardView
                        android:layout_width="48dp"
                        android:layout_height="48dp"
                        android:layout_centerInParent="true"
                        android:layout_gravity="center"
                        android:innerRadius="0dp"
                        android:shape="ring"
                        app:cardCornerRadius="75dp">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:background="@drawable/ic_baseline_arrow_forward_24" />
                    </androidx.cardview.widget.CardView>
                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="30dp"
                    android:orientation="horizontal">

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

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:background="@drawable/blue_rect_bg"
                            android:orientation="vertical">

                            <androidx.cardview.widget.CardView
                                android:layout_width="34dp"
                                android:layout_height="34dp"
                                android:layout_centerInParent="true"
                                android:layout_gravity="end"
                                android:layout_marginTop="9dp"
                                android:layout_marginRight="9dp"
                                android:innerRadius="0dp"
                                android:shape="ring"
                                app:cardCornerRadius="75dp">

                                <ImageView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_gravity="center"
                                    android:background="@drawable/ic_baseline_add_24" />
                            </androidx.cardview.widget.CardView>


                            <LinearLayout
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:gravity="center"
                                android:orientation="vertical"
                                android:paddingLeft="19dp"
                                android:paddingRight="19dp">


                                <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:fontFamily="@font/circular_std_bold"
                                    android:gravity="center_horizontal"
                                    android:letterSpacing="-0.03"
                                    android:lineSpacingExtra="5sp"
                                    android:text="Learning Management\nSystem"
                                    android:textColor="#ffffff"
                                    android:textSize="16sp" />

                                <ImageView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_marginTop="23dp"
                                    android:paddingBottom="10dp"
                                    android:src="@drawable/img_img" />
                            </LinearLayout>

                        </LinearLayout>

                    </androidx.cardview.widget.CardView>

                    <TextView
                        android:layout_width="13dp"
                        android:layout_height="match_parent" />

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

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:background="@drawable/pink_rect_bg"
                            android:orientation="vertical">

                            <androidx.cardview.widget.CardView
                                android:layout_width="34dp"
                                android:layout_height="34dp"
                                android:layout_centerInParent="true"
                                android:layout_gravity="end"
                                android:layout_marginTop="9dp"
                                android:layout_marginRight="9dp"
                                android:innerRadius="0dp"
                                android:shape="ring"
                                app:cardCornerRadius="75dp">

                                <ImageView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_gravity="center"
                                    android:background="@drawable/ic_baseline_add_24" />
                            </androidx.cardview.widget.CardView>


                            <LinearLayout
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:gravity="center"
                                android:orientation="vertical"
                                android:paddingLeft="19dp"
                                android:paddingRight="19dp">


                                <TextView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:fontFamily="@font/circular_std_bold"
                                    android:gravity="center_horizontal"
                                    android:letterSpacing="-0.03"
                                    android:lineSpacingExtra="5sp"
                                    android:text="Cloud\nComputing\n"
                                    android:textColor="#d9000000"
                                    android:textSize="16sp" />

                                <ImageView
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_marginTop="23dp"
                                    android:paddingBottom="10dp"
                                    android:src="@drawable/img_four" />
                            </LinearLayout>

                        </LinearLayout>

                    </androidx.cardview.widget.CardView>


                </LinearLayout>

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginTop="31dp"
                    android:src="@drawable/circle_ind" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="27dp"
                    android:fontFamily="@font/circular_std_bold"
                    android:letterSpacing="-0.03"
                    android:lineSpacingExtra="8sp"
                    android:text="Latest News"
                    android:textColor="#3d3d3d"
                    android:textSize="22sp" />

                <androidx.cardview.widget.CardView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="12dp"
                    android:layout_marginBottom="130dp"
                    app:cardCornerRadius="8dp"
                    app:cardElevation="8dp">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal"
                        android:paddingLeft="16dp"
                        android:paddingTop="31dp"
                        android:paddingRight="16dp"
                        android:paddingBottom="16dp">

                        <FrameLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content">

                            <ImageView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="bottom"
                                android:background="@drawable/img_pink_bg" />

                            <ImageView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_marginStart="8dp"
                                android:layout_marginBottom="8dp"
                                android:scaleType="centerCrop"
                                android:src="@drawable/img_six" />


                        </FrameLayout>


                        <LinearLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="bottom"
                            android:orientation="vertical"
                            android:paddingLeft="16dp">

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="bottom"
                                android:fontFamily="@font/circular_std_bold"
                                android:letterSpacing="-0.03"
                                android:lineSpacingExtra="5sp"
                                android:text="Managemement System Analysis"
                                android:textColor="#3d3d3d"
                                android:textSize="15sp" />

                            <Button
                                android:layout_width="120dp"
                                android:layout_height="wrap_content"
                                android:layout_gravity="bottom"
                                android:layout_marginTop="16dp"
                                android:background="@drawable/btn_rounded"
                                android:fontFamily="@font/circular_std_bold"
                                android:gravity="center"
                                android:letterSpacing="-0.03"
                                android:lineSpacingExtra="5sp"
                                android:paddingLeft="20dp"
                                android:paddingRight="20dp"
                                android:text="Learn More"
                                android:textAllCaps="false"
                                android:textColor="#ffffff"
                                android:textSize="12sp" />

                        </LinearLayout>

                    </LinearLayout>

                </androidx.cardview.widget.CardView>


            </LinearLayout>

        </androidx.core.widget.NestedScrollView>


    </FrameLayout>


    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:layout_alignParentBottom="true"
        android:layout_marginLeft="19dp"
        android:layout_marginRight="19dp"
        android:layout_marginBottom="26dp"
        app:cardBackgroundColor="@android:color/white"
        app:cardCornerRadius="8dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="27dp"
                android:layout_height="27dp"
                android:layout_weight="1"
                android:src="@drawable/ic_baseline_format_list_bulleted_24"
                app:tint="#338a959e" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:src="@drawable/home_icon" />

            <ImageView
                android:layout_width="27dp"
                android:layout_height="27dp"
                android:layout_weight="1"
                android:src="@drawable/maintenance"
                app:tint="#338a959e" />

            <ImageView
                android:layout_width="27dp"
                android:layout_height="27dp"
                android:layout_weight="1"
                android:src="@drawable/ic_baseline_account_circle_24"
                app:tint="#338a959e" />

        </LinearLayout>

    </androidx.cardview.widget.CardView>

</RelativeLayout>

Screen Output :

Now run the app and see the output, you will see the awesome LMS and learning management systems UI with the XML layout.

So that’s all for this LMS and learning management systems UI with the XML layout. Tutorial. If you are having any confusion or queries please do comment. Thank You.

Facebook
Twitter
LinkedIn
Reddit
StumbleUpon
Pinterest
WhatsApp

Join the Conversation

2 Comments

  1. Pingback: Profile screen CollapsingToolbarLayout and view pager. - RonnyStudio
  2. Pingback: Fason E-commerce UI Kit-part 1 - RonnyStudio
Leave a comment

Your email address will not be published. Required fields are marked *