How to build a SnapChat clone on Android
![](https://miro.medium.com/v2/resize:fit:700/1*NgXy0KvG6PZvfEQG4uMbXw.png)
👻 Hello! Lets Build a Clone of SnapChat
In this tutorial, I will walk you through on how to build an app similar in design like SnapChat on Android.
This tutorial only highlights similar design pattern used in major destinations of SnapChat App.
Here are some screenshots from the final app:
![](https://miro.medium.com/v2/resize:fit:500/1*MKfL7pf4xGuJEj08_UBx5A.jpeg)
![](https://miro.medium.com/v2/resize:fit:500/1*5DinVZcfWh853jjN8E8-8g.jpeg)
![](https://miro.medium.com/v2/resize:fit:500/1*zgAhyTEXH4hsb0jcGxKEpw.jpeg)
Video:
![](https://miro.medium.com/v2/resize:fit:500/1*sSwHxEMTZXq51bKYqF_xMw.gif)
The development were in stages, I created different branches for each stage.
I made a twitter thread of stages as I was developing, you can check here
Full code on GitHub
Alright, let’s get started 👐 :
STEPS
- Set Up Android Studio
- Setup Dependencies and Assets
- Set up Splash Screen
- Setup Bottom Navigation
- Build Camera Screen
- Build Chat Screen
- Build Discover Screen
- Build Maps Screen
- Build Stories Screen
- Build View Stories Screen
SETUP ANDROID STUDIO
- Download Android Studio
Download Android Studio and SDK tools | Android Developers - Create a new android studio project
-File
—New
—New Project
—Empty Activity
— Input Project name —Finish
SETUP DEPENDENCIES AND ASSETS
Dependencies
- Open
build.gradle(app)
- Inside the
plugins
block, add these:
plugins {
id 'com.android.application'
id 'kotlin-android'
//add this line
id 'kotlin-android-extensions'
//and this line (safe args)
id 'androidx.navigation.safeargs.kotlin'
}
- In the
android
block { }, add these:
buildFeatures {
viewBinding true
}
- Add the following dependencies in the
dependencies
block:
- Open
build.gradle(project)
, add these inside thebuildscript
dependencies
block { }:
//Safe args navigation component
def nav_version = "2.3.4"
classpath "androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version"
- In
allprojects
block { }, add this:
maven { url “https://jitpack.io" }
Please check full code for all the dependencies:
full code
Assets
Check res/drawable
directory for all drawables used, most of them were made by me 💁. Please, they are very important if you want to achieve similar design pattern.
Also check the values
directory for colors
, strings
and themes
SETUP SPLASH SCREEN
- Add these to
themes.xml
(underres/values
directory)
<!-- Splash screen theme -->
<style name="splashScreenTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">@drawable/splash_screen</item>
</style>
- Open MainActivity in OnCreate method add this:
setTheme(R.style.Theme_SnapchatClone)
- Open
AndroidManifest.xml
add this inmainActivity
block:android:theme=”@style/splashScreenTheme”
Run the app, and your splash screen should show:
![](https://miro.medium.com/v2/resize:fit:500/1*jYVYvAc8Bv_xwVUqYQ0scA.jpeg)
SET UP BOTTOM NAVIGATION
- We will be making use of
navigation component
to set up our bottom navigation, so make sure the dependencies are added. - First create six new fragments — Name them:
CameraFragment, ChatFragment, DiscoverFragment, MapFragment StoriesFragment and ViewStoriesFragment (TheViewStoriesFragment
isn’t part of the bottom nav) - Right click
res
— SelectNew
,New Android Resource Directory
Directory name — menu
Resource type — menu - In the newly created
menu
directory, right click and selectNew
,New Menu resource file
, name the file bottom_navigation.xml - In bottom_navigation.xml, add these:
- Right click
res
— SelectNew
,New Android Resource Directory
Directory name — navigation
Resource type — navigation - In the newly created
navigation
directory, right click and selectNew
,New Navigation resource file
, name the file nav_graph.xml - Now open bottom_navigation.xml file you just created and add these:
Now Open MainActivity.kt
file, add a method for initialising and setting bottom navigation, your whole MainActivity.kt
file will look like this:
- With this, your bottom nav will be up and running, run the app and you would see it :
![](https://miro.medium.com/v2/resize:fit:500/1*VT5RkccNYewAvHWakCRy0A.jpeg)
BUILD CAMERA SCREEN
- For the main camera screen, we will be using Google’s android Camera X, so make sure the dependencies have been added
- Open
fragment_camera.xml
add the following code:
- Now open CameraFragment.kt, modify the code there, Comments are added to the code for clearer explanation.:
With that, you have successfully set up a basic camera system.
— You can take a photo through the front or back camera, which will be saved in your gallery.
— The crazy SnapChat filter system wasn't implemented (Hopefully, I hope I have more time to work on it 🤔 )
![](https://miro.medium.com/v2/resize:fit:500/1*MKfL7pf4xGuJEj08_UBx5A.jpeg)
BUILD CHAT SCREEN
- For
fragment_chat.xml
, I wont be pasting the code for this layout here (there are over 900 lines of codes written in that file) - On an ideal world, a single RecyclerView will be used or a model but I had to populate the data with custom views (Not the best practice, I know 💇)
- Here is the link to
activity_chat.xml
file:
Click here - No changes were made to
ChatFragment.kt
file - Once you’ve done that, you should end up with something like this:
![](https://miro.medium.com/v2/resize:fit:500/1*-fmKFimCadLCj5IYfhEpvQ.jpeg)
BUILD DISCOVER SCREEN
- For
fragment_discover.xml
Check here for full code - No changes were made to
DiscoverFragment
- You should have something like this:
![](https://miro.medium.com/v2/resize:fit:500/1*ZZvJF4JbVKYOMAd_pHGb-Q.jpeg)
BUILD MAPS SCREEN
- 🗺 SnapMap — Spoiler 👽 (I could not make a custom map view similar to SnapChat, I ended up using Google Maps)
- Watch this video on how to set up Google Maps
- Open
fragment_map.xml
- Open
MapFragment.kt
add the following code:
- With this, you should be able to get a map view — not so identical as the location map view shown on SnapChat 😒
![](https://miro.medium.com/v2/resize:fit:500/1*XMGT5VIkzaWzxOezZVIVFA.jpeg)
BUILD STORIES SCREEN
- Click this link for full
fragment_stories.xml
code - Open
FragmentStories.kt
file, we are going to be setting up click event on the stories view to ViewStoriesFragment - Full
FragmentStories.kt
code
![](https://miro.medium.com/v2/resize:fit:500/1*5DinVZcfWh853jjN8E8-8g.jpeg)
BUILD VIEW STORIES SCREEN
- To implement stories kind of design, I used a library: StoriesProgressView
- Open
fragment_view_stories.xml
use the following code for your layout:
- Open
ViewStoriesFragment.kt
and modify the code there, (The code is pretty much self explanatory)
You should end up with something like this:
![](https://miro.medium.com/v2/resize:fit:500/1*zgAhyTEXH4hsb0jcGxKEpw.jpeg)
With this, we have been able to clone major destinations found in SnapChat app.
I hope to improve on this when I have more time, but for now 👻
CONTACT ME
Thanks for reading 👌