Skip to main content

Create a forum or wall for your social media app

 In this tutorial we will cover how to create a forum or wall for our social media app. This will be slightly more complex than what we have covered so far. This will be your main activity feed and thus it is important to think deeply about what you want your users to see or experience.

Building your layout

I have created the following layout for the forum. 

I started by dragging a linear H onto my layout
Inside the linear h, I placed the following:

Adding linear h



I.) Imageview- this will hold the profile picture of the user
II.) A linear V-  this will just be a place holder
III.) imageview- this will reveal the options to add a new post
IV.) Imageview- this will be our search button
V. Edittext- this is where the user will type a search query
VI. Imageview- this will clear and hide the search field



Forum layout


Adding a Customview

We will need to add a customview to determine how our wall posts will be displayed. 

I have created my customview and given it the name "custom". It looks as shown below:

social media forum customview


Now that my layouts have been created, the next step is to add my logic. I will start with the add button.

When 'Add new' button is clicked

When the add button is clicked it will reveal the new_post_linear. It will also set the background colour of the imageview to a specific colour.

To achieve this, I created a Boolean variable which I named "enabled".

I used an "IF-ELSE" block. So my logic will look as shown below.

To recreate this you will need to create a Boolean variable with the name "enabled" or anything of your choice.

Add new post

Attaching a file

You will need to allow the user to select and pick files. This can be achieved by creating a file picker component. I have named my file picker component "fp".
On file picked logic


onFilesPicked

I have used the following logic onFilesPicked




When edittext is changed

I will also need to format my edit text for sending messages by placing blocks to convert whatever the user types to a string variable.
So I navigate to my onTextChanged event and create a string variable with the name mytext.  

I then set this string to the character sequence as shown below.

On text changed

Uploading a post

When the user clicks the upload post button, the app first checks if the write_message edittext is empty or not. 

If its empty, we toast a message to tell the user that there is nothing to send.

Next we set number position to zero.  After that we check if the string "path" is NOT empty. If string is not empty we upload the file to firebase. If path IS empty, we then create a new map and send the data to firebase.

So the following logic is used onButtonClick

Upload post

FIREBASE STORAGE: onUploadProgress


When the file is being uploaded to firebase we make the progress bar visible and then we toast the progress value e.g. 10% complete.

FIREBASE STORAGE: onUploadSuccess


Once the file has been uploaded to firebase, we use the following logic. This clears path and leaves it empty. We then upload then create a map and upload it to firebase.

FIREBASE STORAGE: OnFailure

We use this logic to determine what happens if the file does not get uploaded on firebase.

FIREBASE onChildAdded


FIREBASE onChildChanged



onCreate


I hope you found this very helpful. 

Comments

Popular posts from this blog

Hip hop and RnB songs to apologize to your partner

Love is a beautiful thing, but it often goes wrong. This often leads to pain, suffering and sorrow.  Being imperfect beings, hearts tend to get broken all the time regardless how hard we may try to avoid it.  The heartbreak is often inadvertent but at times we find ourselves in the wrong. An oversight, a word unsaid or even a lapse in our judgement can cause our loved ones harm. This doesn't always have to be the end though. Oftentimes, relationships can be mended by simply uttering three simple words: "I AM SORRY". This article is a collection of some of my favourite 'I'm sorry' songs. I hope you'll enjoy these apology songs, but more importantly, I hope you will get a few quotables and some wisdom nuggets from them.  The best apology however, is to change behaviour (got that from a Jay Z interview) so as you apologize, please remember that it was your actions that hurt them. The best apology is one which involves you not repeating those same mistakes aga

How to easily create background notifications in Sketchware(original)

One of the keys to building a successful app is to find mechanisms that will keep your users engaged. You can do this by using background notifications. This tutorial will show you how to do that in Sketchware. We will cover: 1. How to create notifications in Sketchware 2. How to show these notifications even when the app is closed. We will start by creating a new project. If you do not know how to create a new project please check out this article here. Once we have created our project, let us create a more block to place our code. Navigate to the events menu and then to the moreblock section as shown in the image above. Create a moreBlock. I have created a moreblock with the name "BackgroundActivity" with a boolean variable named "run." See the image below for how to add the boolean variable. Place the following block in the moreBlock Background activity code: moveTaskToBack(_run); That will move our task to the background.  Please note, that at this point we have

Php date: How to get the first and last day of the week

In this tutorial, I'll show you how to get the first and last day of the week in php. By default, in PHP the week runs from Monday to Sunday. However we'll cover two methods to get the first and last day for both those who consider Sunday or Monday as their first day of the week. We will be using 2 functions to achieve this: date() strtotime() We will use a combination of these two functions and store the result in a variable.  How to get the first day of the week If you want to get Sunday, use this method: $firstday = date('l Y-m-d', strtotime("sunday -1 week")); echo $firstday; If you want to get the date for Monday, this current week, use this method: $monday = date('l Y-m-d', strtotime("monday -1 week ")); echo $monday; How to get the last day of the week The following code will give you Saturday as the last day of the current week. $lastday = date('l Y-m-d', strtotime("saturday 0 week")); echo $last