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:
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
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:
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.
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".
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.
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
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.
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.
Comments