Skip to main content

Posts

Showing posts with the label Design

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: 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

Building your user interface in Sketchware

The above image is the login page for my Sable App, which I created using Sketchware. In this tutorial I will take you through the basics of how to create a screen/user interface. The first step after planning your app is building the user interface. This is what your user will see, click and interact with. Today we will cover some tips on how to build a simple user interface on Sketchware. Start by creating a new project. If you're not sure how to create a new project then click here learn how to create a new Sketchware Project Positioning your items I'm sure by now you know that Sketchware uses a simple drag and drop method to position items on the main screen. You might however want to position your items in a specific way.  In the image above, A shows items placed inside a linear horizontal and B shows items placed inside a Linear vertical.  You can alsoposition *layouts* within *layouts*. For example if I want to create a screen with a heading and two buttons horizontally