Posted in Android Studio, Mobile Applications

How to build any application in five quick steps

Below is a brief overview for those that are getting into application development for fun as hobby.

How do you even get started in the first place? Well first you have to show an interest in what you want to make. Then you can start building it in five quick steps

Below are the five quick steps

Step 1:

  • Define what your application is suppose to do
  • Why are you building this? What will the application do? How will it help other people solve their problems?


Step 2:

  • Draw/Visualize and figure out what controls you need to add for your application
  • Controls include, buttons, textboxes, pictures etc.


Step 3:

  • Create a FlowChart and Pseudocode
  • Then check to see if there are any errors

Step 4:

  • Start building your application from scratch using your outline made from step  1-3


Step 5:

  • Run your application, see if everything works like you want it do work
  • Fix all errors and re run the application.
  • Add final polishing to make your UI look good and outstanding
  • Repeat steps 1-5 as neccessary to improve your application.

That is all I have for you. Good luck out there and I hope you can create the best application to solve the world’s problems like ending world hunger and saving people from unemployment, crimes and student loans!


Follow, Share, Comment and let me know if you want me to write more application related articles :).


Posted in Android Studio, java, Mobile Applications

Java learning recap: Classes and objects

This is a quick summary of classes and objects in Java

What are classes?

  • A class contains local variables
  • Instance variables
  • and class variables

Examples of Classes:

public class Dog {
   String breed;
   int age;
   String color;

   void barking() {

   void hungry() {

   void sleeping() {


What are objects?

  • Cars, dogs, houses.
  • I don’t know yet, I will explain next time when I find out more information


I spent 2 hours learning this but still have no clue what objects and classes are. More updates coming soon!



For more information on Classes and objects be sure to read more at:

  1. Tutorialspoint
  2. geeksforgeeks
Posted in Android Studio, Mobile Applications, Uncategorized

Android studio Java Trivial : Difference between implicit and explicit intents

In android studio you will often create codes that opens up other applications such as as a web browser, media player, downloader or camera. But the phone contains many different web browsers and media player. Thus the implicit and explicit intent comes in.

Implicit intent:

The implicit intent:

The implicit intent pulls up the new application without being specified which one to pull up.

intent intent = new Intent();


Explicit intent:

The explicit intent will pull up a specific application. One that you set yourself when you are writing the code.

Sometimes the person’s device will not have the application that is specified and thus an error occurs.

example android

Additional information about implicit vs explicit intent can be found at:

  1. Android developer site
  2. Stackoverflow




Posted in Android Studio, Mobile Applications, Uncategorized

Android Studio and Java Practice Recap : Login Screen

I learned how to create a login screen and how to log the data using android studio.

I took a screenshot to share what I’ve done so I won’t forget it 50 years from now. It’s quote amazing what technology can do!

Who knew it was possible to create your own mobile login screen!

But I’ve only cracked down 1% of learning how to create apps, so there is still a lot left to learn!

How can you make your own login screen?

A quick summary

  • Creating the 2 textview box for username and password on the xml or design page
  • Also create a button
  • Give your buttons and textview different names to declare for further Java usage
  • On your java file use the names that you declared and create an onclick function with the two EditText objects
  • Then create a log to see if the buttons are working properly on your demo app.


Login screen 01

Posted in Android Studio

Android Studio : Constraint Layout Guides

See more at :

Build a Responsive UI with ConstraintLayout


ConstraintLayout allows you to create large and complex layouts with a flat view hierarchy (no nested view groups). It’s similar to RelativeLayout in that all views are laid out according to relationships between sibling views and the parent layout, but it’s more flexible than RelativeLayout and easier to use with Android Studio’s Layout Editor.

All the power of ConstraintLayout is available directly from the Layout Editor’s visual tools, because the layout API and the Layout Editor were specially built for each other. So you can build your layout with ConstraintLayout entirely by drag-and-dropping instead of editing the XML.

ConstraintLayout is available in an API library that’s compatible with Android 2.3 (API level 9) and higher. This page provides a guide to building a layout with ConstraintLayout in Android Studio 3.0 or higher. If you’d like more information about the Layout Editor itself, see the Android Studio guide to Build a UI with Layout Editor.

To see a variety of layouts you can create with ConstraintLayout, check out the Constraint Layout Examples project on GitHub.

Constraints overview

To define a view’s position in ConstraintLayout, you must add at least one horizontal and one vertical constraint for the view. Each constraint represents a connection or alignment to another view, the parent layout, or an invisible guideline. Each constraint defines the view’s position along either the vertical or horizontal axis; so each view must have a minimum of one constraint for each axis, but often more are necessary.

When you drop a view into the Layout Editor, it stays where you leave it even if it has no constraints. However, this is only to make editing easier; if a view has no constraints when you run your layout on a device, it is drawn at position [0,0] (the top-left corner).

In figure 1, the layout looks good in the editor, but there’s no vertical constraint on view C. When this layout draws on a device, view C horizontally aligns with the left and right edges of view A, but appears at the top of the screen because it has no vertical constraint.

Figure 1. The editor shows view C below A, but it has no vertical constraint

Figure 2. View C is now vertically constrained below view A

Although a missing constraint won’t cause a compilation error, the Layout Editor indicates missing constraints as an error in the toolbar. To view the errors and other warnings, click Show Warnings and Errors . To help you avoid missing constraints, the Layout Editor can automatically add constraints for you with the Autoconnect and infer constraints features.

Add ConstraintLayout to your project

To use ConstraintLayout in your project, proceed as follows:

  1. Ensure you have the repository declared in your module-level build.gradle file:
    repositories {
        maven {
            url ''
  2. Add the library as a dependency in the same build.gradle file:
    dependencies {
        compile ''
  3. In the toolbar or sync notification, click Sync Project with Gradle Files.

Now you’re ready to build your layout with ConstraintLayout.

Convert a layout

Figure 3. The menu to convert a layout to ConstraintLayout

To convert an existing layout to a constraint layout, follow these steps:

  1. Open your layout in Android Studio and click the Design tab at the bottom of the editor window.
  2. In the Component Tree window, right-click the layout and click Convert layoutto ConstraintLayout.

Create a new layout

To start a new constraint layout file, follow these steps:

  1. In the Project window, click the module folder and then select File > New > XML > Layout XML.
  2. Enter a name for the layout file and enter “” for the Root Tag.
  3. Click Finish.

Add a constraint

Start by dragging a view from the Palette window into the editor. When you add a view in a ConstraintLayout, it displays a bounding box with square resizing handles on each corner and circular constraint handles on each side.

Video 1. The left side of a view is constrained to the left side of the parent

Click the view to select it. Then click-and-hold one of the constraint handles and drag the line to an available anchor point (the edge of another view, the edge of the layout, or a guideline). When you release, the constraint is made, with a default margin separating the two views.

When creating constraints, remember the following rules:

  • Every view must have at least two constraints: one horizontal and one vertical.
  • You can create constraints only between a constraint handle and an anchor point that share the same plane. So a vertical plane (the left and right sides) of a view can be constrained only to another vertical plane; and baselines can constrain only to other baselines.
  • Each constraint handle can be used for just one constraint, but you can create multiple constraints (from different views) to the same anchor point.

Video 2. Adding a constraint that opposes an existing one

To remove a constraint, select the view and then click the constraint handle. Or remove all the constraints by selecting the view and then clicking Delete Constraints .

If you add opposing constraints on a view, the constraint lines become squiggly like a spring to indicate the opposing forces, as shown in video 2. The effect is most visible when the view size is set to “fixed” or “wrap content,” in which case the view is centered between the constraints. If you instead want the view to stretch its size to meet the constraints, switch the size to “match constraints”; or if you want to keep the current size but move the view so that it is not centered, adjust the constraint bias.

You can use constraints to achieve different types of layout behavior, as described in the following sections.

Parent position

Constrain the side of a view to the corresponding edge of the layout.

In figure 4, the left side of the view is connected to the left edge of the parent layout. You can define the distance from the edge with margin.

Figure 4. A horizontal constraint to the parent

Order position

Define the order of appearance for two views, either vertically or horizontally.

In figure 5, B is constrained to always be to the right of A, and C is constrained below A. However, these constraints do not imply alignment, so B can still move up and down.

Figure 5. A horizontal and vertical constraint


Align the edge of a view to the same edge of another view.

In figure 6, the left side of B is aligned to the left side of A. If you want to align the view centers, create a constraint on both sides.

You can offset the alignment by dragging the view inward from the constraint. For example, figure 7 shows B with a 24dp offset alignment. The offset is defined by the constrained view’s margin.

You can also select all the views you want to align, and then click Align in the toolbar to select the alignment type.

Figure 6. A horizontal alignment constraint

Figure 7. An offset horizontal alignment constraint

Baseline alignment

Align the text baseline of a view to the text baseline of another view.

In figure 8, the first line of B is aligned with the text in A.

To create a baseline constraint, select the text view you want to constrain and then click Edit Baseline , which appears below the view. Then click the text baseline and drag the line to another baseline.

Figure 8. A baseline alignment constraint

Constrain to a guideline

You can add a vertical or horizontal guideline to which you can constrain views, and the guideline will be invisible to app users. You can position the guideline within the layout based on either dp units or percent, relative to the layout’s edge.

To create a guideline, click Guidelines  in the toolbar, and then click either Add Vertical Guideline or Add Horizontal Guideline.

Drag the dotted line to reposition it and click the circle at the edge of the guideline to toggle the measurement mode.

Figure 9. A view constrained to a guideline

Constrain to a barrier

Similar to a guideline, a barrier is an invisible line that you can constrain views to. Except a barrier does not define its own position; instead, the barrier position moves based on the position of views contained within it. This is useful when you want to constrain a view to the a set of views rather than to one specific view.

For example, figure 10 shows view C is constrained to the right side of a barrier. The barrier is set to the “end” (or the right side in a left-to-right layout) of both view A and view B. So the barrier moves depending on whether the right side of view A or view B is is farthest right.

To create a barrier, follow these steps:

  1. Click Guidelines  in the toolbar, and then click Add Vertical Barrieror Add Horizontal Barrier.
  2. In the Component Tree window, select the views you want inside the barrier and drag them into the barrier component.
  3. Select the barrier from the Component Tree, open the Attributes window, and then set the barrierDirection.

Now you can create a constraint from another view to the barrier.

You can also constrain views that are inside the barrier to the barrier. This way, you can ensure that all views in the barrier always align to each other, even if you don’t know which view will be the longest or tallest.

You can also include a guideline inside a barrier to ensure a “minimum” position for the barrier.

Figure 9. View C is constrained to a barrier, which moves based on the position/size of both view A and view B

Adjust the constraint bias

When you add a constraint to both sides of a view (and the view size for the same dimension is either “fixed” or “wrap content”), the view becomes centered between the two constraints with a bias of 50% by default. You can adjust the bias by dragging the bias slider in the Attributes window or by dragging the view, as shown in video 5.

If you instead want the view to stretch its size to meet the constraints, switch the size to “match constraints”.

Video 5. Adjusting the constraint bias

Adjust the view size

Figure 10. The Attributes window includes controls for 1 size ratio, 2 delete constraint, 3 height/width mode, 4 margins, and 5constraint bias.

You can use the corner handles to resize a view, but this hard codes the size so the view will not resize for different content or screen sizes. To select a different sizing mode, click a view and open the Attributes  window on the right side of the editor.

Near the top of the Attributes window is the view inspector, which includes controls for several layout attributes, as shown in figure 10 (this is available only for views in a constraint layout).

You can change the way the height and width are calculated by clicking the symbols indicated with callout 3 in figure 10. These symbols represent the size mode as follows (click the symbol to toggle between these settings):

  •  Fixed: You specify a specific dimension in the text box below or by resizing the view in the editor.
  •  Wrap Content: The view expands only as much as needed to fit its contents.
  •  Match Constraints: The view expands as much as possible to meet the constraints on each side (after accounting for the view’s margins). However, you can modify that behavior with the following attributes and values (these attributes take effect only when you set the view width to match constraints):
    • layout_constraintWidth_default
      • spread: Expands the view as much as possible to meet the constraints on each side. This is the default behavior.
      • wrap: Expands the view only as much as needed to fit its contents, but still allows the view to be smaller than that if the constraints require it. So the difference between this and using Wrap Content (above), is that setting the width to Wrap Content forces the width to always exactly match the content width; whereas using Match Constraints with layout_constraintWidth_default set to wrap also allows the view to be smaller than the content width.
    • layout_constraintWidth_minThis takes a dp dimension for the view’s minimum width.
    • layout_constraintWidth_maxThis takes a dp dimension for the view’s maximum width.

    However, if the given dimension has only one constraint, then the view expands to fit its contents. Using this mode on either the height or width also allows you to set a size ratio.

Note: You cannot use match_parent for any view in a ConstraintLayout. Instead use “match constraints” (0dp).

Figure 11. The view is set to a 16:9 aspect with the width based on a ratio of the height.

Set size as a ratio

You can set the view size to a ratio such as 16:9 if at least one of the view dimensions is set to “match constraints” (0dp). To enable the ratio, click Toggle Aspect Ratio Constraint (callout 1 in figure 10), and then enter the width:height ratio in the input that appears.

If both the width and height are set to match constraints, you can click Toggle Aspect Ratio Constraint to select which dimension is based on a ratio of the other. The view inspector indicates which is set as a ratio by connecting the corresponding edges with a solid line.

For example, if you set both sides to “match constraints”, click Toggle Aspect Ratio Constraint twice to set the width be a ratio of the height. Now the entire size is dictated by the height of the view (which can be defined in any way) as shown in figure 11.

Adjust the view margins

To ensure that all your views are evenly spaced, click Margin  in the toolbar to select the default margin for each view that you add to the layout. Any change you make to the default margin applies only to the views you add from then on.

You can control the margin for each view in the Attributes window by clicking the number on the line that represents each constraint (in figure 10, callout 4 shows the bottom margin is set to 28dp).

Figure 12. The toolbar’s Margin button.

All margins offered by the tool are factors of 8dp to help your views align to Material Design’s 8dp square grid recommendations.

Control linear groups with a chain

A chain is a group of views that are linked to each other with bi-directional position constraints. For example, figure 13 shows two views that both have a constraint to each other, thus creating a horizontal chain.

A chain allows you to distribute a group of views horizontally or vertically with the following styles (as shown in figure 14):

  1. Spread: The views are evenly distributed (after margins are accounted for). This is the default.
  2. Spread inside: The first and last view are affixed to the constraints on each end of the chain and the rest are evenly distributed.
  3. Weighted: When the chain is set to either spread or spread inside, you can fill the remaining space by setting one or more views to “match constraints” (0dp). By default, the space is evenly distributed between each view that’s set to “match constraints,” but you can assign a weight of importance to each view using thelayout_constraintHorizontal_weight and layout_constraintVertical_weight attributes. If you’re familiar with layout_weight in a linear layout, this works the same way. So the view with the highest weight value gets the most amount of space; views that have the same weight get the same amount of space.
  4. Packed: The views are packed together (after margins are accounted for). You can then adjust the whole chain’s bias (left/right or up/down) by changing the chain’s head view bias.

The chain’s “head” view (the left-most view in a horizontal chain and the top-most view in a vertical chain) defines the chain’s style in XML. However, you can toggle between spreadspread inside, and packed by selecting any view in the chain and then clicking the chain button  that appears below the view.

To create a chain of views quickly, select them all, right-click one of the views, and then select either Center Horizontally or Center Vertically, to create either a horizontal or vertical chain, respectively (see video 4).

A few other things to consider when using chains:

  • A view can be a part of both a horizontal and a vertical chain, making it easy to build flexible grid layouts.
  • A chain works properly only if each end of the chain is constrained to another object on the same axis, as shown in figure 13.
  • Although the orientation of a chain is either vertical or horizontal, using one does not align the views in that direction. So be sure you include other constraints to achieve the proper position for each view in the chain, such as alignment constraints.

Figure 13. A chain with just two views

Figure 14. Examples of each chain style

Video 4. Creating a chain from the action menu

Automatically create constraints

Instead of adding constraints to every view as you place them in the layout, you can move each view into the positions you desire, and then click Infer Constraints  to automatically create constraints.

Infer Constraints scans the layout to determine the most effective set of constraints for all views. It makes a best effort to constrain the views to their current positions while allowing flexibility. You might need to make some adjustments to be sure the layout responds as you intend for different screen sizes and orientations.

Autoconnect is a separate feature that is either on or off. When turned on, it automatically creates two or more constraints for each view as you add them to the layout, but only when appropriate to constrain the view to the parent layout. Autoconnect does not create constraints to other views in the layout.

Autoconnect is disabled by default. You can enable it by clicking Turn on Autoconnect  in the Layout Editor toolbar.

Posted in Game Guides

Learn the secret arts to MOBA gaming!

The secret arts,

what could it be?

Is it a mystery?

Is it a thriller?

Is it unknown to the real world?

So many questions left unanswered

But the best way to learn how to become good at something

is by watching the tutorials that are available online.

Created by the ones that specialized in making tutorials.

That is the best way to master the secret arts of Gaming.

Posted in Android Studio, Mobile Applications

Android Studio : Frame Layout

Android Studio : Frame Layout


Android User Interface Design: Frame Layouts

This post is part of a series called Android User Interface Design.
Android User Interface Design: Table Layouts
Android User Interface Design: Building a ListView Application

Frame layouts are one of the simplest layout types used to organize controls within the user interface of an Android application.

Understanding layouts is important for good Android application design. In this tutorial, you learn all about frame layouts, which are primarily used to organize individual or overlapping view controls on the screen. When used correctly, frame layouts can be the fundamental layout upon which many interesting Android application user interfaces can be designed.

Frame layouts are one of the simplest and most efficient types of layouts used by Android developers to organize view controls. They are used less often than some other layouts, simply because they are generally used to display only one view, or views which overlap. The frame layout is often used as a container layout, as it generally only has a single child view (often another layout, used to organize more than one view).

TIP: In fact, one place you’ll see frame layouts used is as the parent layout of any layout resource you design. If you pull up your application in the Hierarchy Viewer tool (a useful tool for debugging your application layouts), you’ll see that any layout resources you design are displayed within a parent view-a frame layout.

Frame layouts are very simple, which makes them very efficient. They can be defined within XML layout resources or programmatically in the application’s Java code. A child view within a frame layout is always drawn relative to the top left-hand corner of the screen. If multiple child views exist, then they are drawn, in order, one atop the other. This means that the first view added to the frame layout will display on the bottom of the stack, and the last view added will display on top.

Let’s look at a simple example. Let’s say we have a frame layout that is sized to control the entire screen (in other words, layout_width and layout_height attributes are both set to match_parent). We could then add three child controls to this frame layout:

  • An ImageView with a picture of a lake.
  • A TextView with some text to display towards the top of the screen.
  • A TextView with some text to display towards the bottom of the screen (Simply use the layout_gravity attribute to have the TextView “sink” to the bottom of the parent).

The following figure shows what this sort of layout would look like on the screen.

Frame Layout Figure 1

The most convenient and maintainable way to design application user interfaces is by creating XML layout resources. This method greatly simplifies the UI design process, moving much of the static creation and layout of user interface controls and definition of control attributes, to the XML, instead of littering the code.

XML layout resources must be stored in the /res/layout project directory hierarchy. Let’s take a look at the simple frame layout introduced in the previous section. Again, this screen is basically a frame layout with three child views: an image that fills the entire screen, upon which two text controls are drawn, each with the default, transparent background. This layout resource file, named /res/layout/framed.xml, is defined in XML as follows:

Recall that, from within the Activity, only a single line of code within the onCreate() method is necessary to load and display a layout resource on the screen. If the layout resource was stored in the /res/layout/framed.xml file, that line of code would be:

You can also programmatically create and configure frame layouts. This is done using the FrameLayout class (android.widget.FrameLayout). You’ll find the frame-specific parameters in the FrameLayout.LayoutParams class. Also, the typical layout parameters (android.view.ViewGroup.LayoutParams), such as layout_height and layout_width, as well as margin parameters (ViewGroup.MarginLayoutParams), still apply to FrameLayout objects.
Instead of loading a layout resource directly using the setContentView() method as shown earlier, you must instead build up the screen contents in Java and then supply a parent layout object which contains all the control contents to display as child views to the setContentView() method. In this case, your parent layout would be the frame layout.
For example, the following code illustrates how to reproduce the same layout described earlier programmatically. Specifically, we have an Activity instantiate a FrameLayout and place one ImageView control followed by two TextView controls within it in its onCreate() method:

The resulting screen looks exactly the same as the figure shown previously.

With other powerful layout types like linear layouts, relative layouts, and table layouts at your disposal, it’s easy to forget about frame layout. The efficiency of a frame layout makes it a good choice for screens containing few view controls (home screens, game screens with a single canvas, and the like). Sometimes other inefficient layout designs can be reduced to a frame layout design that is more efficient, while other times a more specialized layout type is appropriate. Frame layouts are the normal layout of choice when you want to overlap views.

FrameLayout is relatively simple. Because of this, numerous other layout types and view controls are based upon it. For instance, ScrollView is simply a FrameLayout that has scrollbars when the child content is too large to draw within the bounds of the layout. All Home screen app widgets reside within a FrameLayout.
One notable addition to all FrameLayouts is that they can take a foreground drawable in addition to the normal background. This is done via the android:foreground XML attribute. This could be used for, quite literally, a frame around the underlying views.

Android application user interfaces are defined using layouts, and frame layouts are one of the simplest and most efficient layout types available. The child control(s) of a frame layout are drawn relative to the top left-hand corner of the layout. If multiple child views exist within the frame layout, they are drawn in order, with the last child view on top.