Onboarding Single Screen with Android Source code

roonystudio-on-boarding-screen-walkthrough- android app
Android source code for the On-boarding Single Screen app. tired spending 1000+ hours on building XML layout for your project? , well now, you can relax as you can use our free android kit which is a click away.

Saving your ample hours of designing and developing the Android UI being our goal, We now present to you the Onboarding Single Screen with the detailed process.

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. Download this res.zip and add them to your project res folder. This file contains a few drawable images required for this app.

Now that we are done with the images, moving on to changing the text font. For this, we would need to add a custom font in our directory and asset folder as well. find custom fonts folder and asset folder and paste it under the java. Here is a reference image for custom fonts folder

For custom fonts folder

For asset folder

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.0.2'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:runner:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.1'
    implementation 'me.relex:circleindicator:1.2.1@aar'
}

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

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
</resources>

Open styles.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="android:windowFullscreen">true</item>
        <item name="windowNoTitle">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. output of this XML is:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/backgroundmainbg"
    tools:context=".MainActivity">


    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="44dp"
        android:layout_marginLeft="44dp"
        android:layout_marginTop="72.5dp"
        android:layout_marginEnd="43dp"
        android:layout_marginRight="43dp"
        android:src="@drawable/picshow" />


    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="62.5dp"
        android:layout_marginEnd="38dp"
        android:visibility="gone"
        android:layout_gravity="end"
        android:layout_marginRight="38dp"
        android:src="@drawable/shapeone" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="296.4dp"
        android:layout_gravity="bottom"
        android:background="@drawable/backgroundwhite"
        android:orientation="vertical">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="2dp"
            android:layout_marginLeft="2dp"
            android:layout_marginTop="12dp"
            android:src="@drawable/shapetwo" />

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

            <customfonts.MyTextView_LatoBold
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center_horizontal"
                android:lineSpacingExtra="5sp"
                android:text="Welcome"
                android:textColor="#131314"
                android:textSize="23sp" />

            <customfonts.MyTextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginLeft="27.4dp"
                android:layout_marginTop="20dp"
                android:layout_marginRight="27.4dp"
                android:gravity="center_horizontal"
                android:lineSpacingExtra="2.6sp"
                android:textColor="#131314"
                android:textSize="15.4sp"
                android:text="10 Popular Categories, Free Google fonts - Lato &amp; Lora, Well Organized Files" />




        </LinearLayout>



        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="23dp"
            android:layout_marginLeft="8dp"
            android:orientation="horizontal"
            android:layout_marginStart="8dp">


            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
              android:layout_marginLeft="18dp"
                android:layout_marginTop="5dp"
                android:tint="#663af1"
                android:src="@drawable/ic_arrow_back_black_24dp"
                android:layout_marginStart="18dp" />

            <ImageView
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_gravity="center"
                android:layout_marginTop="5dp"
                android:tint="#663af1"
               android:src="@drawable/ppagination"
                android:layout_marginStart="5dp" />
            <customfonts.MyTextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="16.3sp"
            android:layout_marginRight="18dp"
                android:layout_marginTop="5dp"
                android:textColor="#612bfe"
                android:text="Skip"
                android:layout_marginEnd="18dp" />


        </LinearLayout>


    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="24dp"
        android:background="#33000000" />


</FrameLayout>

Woah, it’s awesome your single screen is ready with UI you can use with your next project. 

Happy coding

Facebook
Twitter
LinkedIn
Reddit
StumbleUpon
Pinterest
WhatsApp

Leave a comment

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

Related Posts