Android 101 (初歩)

Trivial thing as adding a square can be intimidating when you start out coding…

So, here are some of the steps to guide you through how to grasp the very basic concepts in Android development.

When you create new project in Android Studio, it automatically generates a below code for you.

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main); // 1
    }
}

The code “1” basically says, “to set the activity_main.xml as the root layout”. In Android, you must have a root layout to contain other child elements such as layouts, views, buttons, etc.

There are other types of layouts such as RelativeLayout, etc. You can learn more in Google’s official document.

In a real-world scenario, you will often be required to write your program in “code”, so let’s see how we can replace this line “programmatically”

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 2. root LinearLayout
        LinearLayout rootLinearLayout = new LinearLayout(this);
        rootLinearLayout.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT));
        rootLinearLayout.setOrientation(LinearLayout.VERTICAL);
        setContentView(rootLinearLayout);
    }
}

in code “2”, we are creating a LinearLayout object and setting it as the contentView. You can think of it as the “root container for everything else” in that particular screen.

LinearLayout needs a layoutParams, and it is set to “MATCH_PARENT”, so it stretches to fit the entirety of the device screen.

LinearLayout automatically lines up any child element vertically or horizontally. Here, we are setting it to “VERTICAL”

When you build the project, you get this.

It looks pretty,,, BLANK!, but congratulations, you have just created a rootLinearLayout from scratch, programmatically.

Next, let’s add color to this rootLayout. It is easy as this.

rootLinearLayout.setBackgroundColor(Color.CYAN);

In case you want to change the App title, you can change it in app -> manifests -> AndroidManifests.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name" // 3
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.SimpleSquareExample"
        tools:targetApi="31">
        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>

            <meta-data
                android:name="android.app.lib_name"
                android:value="" />
        </activity>
    </application>

</manifest>

The code “3” is the line you want to look at. It says “@string/app_name”. It means a variable “app_name” is kept in a string file for the app name. You can find the string file at app -> res -> values -> strings.xml

<resources>
    <string name="app_name">Simple Square Example</string>
</resources>

In case you don’t want the app name to be displayed at all, you can set it in the onCreate() method (4).

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getSupportActionBar().hide(); // 4
        // root LinearLayout
        LinearLayout rootLinearLayout = new LinearLayout(this);
        rootLinearLayout.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT));
        rootLinearLayout.setOrientation(LinearLayout.VERTICAL);
        rootLinearLayout.setBackgroundColor(Color.CYAN);
        setContentView(rootLinearLayout);
    }
}

Let’s now add a child element to the rootLinearLayout.

Follow 5, 6 and 7 in the code below.

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getSupportActionBar().hide();
        // root LinearLayout
        LinearLayout rootLinearLayout = new LinearLayout(this);
        rootLinearLayout.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT));
        rootLinearLayout.setOrientation(LinearLayout.VERTICAL);
        rootLinearLayout.setBackgroundColor(Color.CYAN);
        setContentView(rootLinearLayout);

        // 5. creating a layout params
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 0);

        // 6. creating an element, color it red and set the weight
        RelativeLayout elementOne = new RelativeLayout(this);
        elementOne.setBackgroundColor(Color.RED);
        params.weight = 1;
        elementOne.setLayoutParams(params);

        // 7. add child element to the rootLinearLayout
        rootLinearLayout.addView(elementOne);

    }
}

I’m sure you are wondering, what is “weight”…?

It will be clear once you add another element to the rootLinearElement. Add the below code “8” in your onCreate() method.

// 8. creating another element, and adding to the rootLinearLayout
RelativeLayout elementTwo = new RelativeLayout(this);
elementTwo.setBackgroundColor(Color.BLUE);
elementTwo.setLayoutParams(params);

rootLinearLayout.addView(elementTwo);

Do you get the point? LinearLayout lets you align child elements in vertical or horizontal fashion. But, what if you want to change the ratio of the element size, like make the blue square bigger than the red?

It is easy. You create another layout params and set the weight as you like. Your entire code will look something like this. The code 9 and 10 are where you want to look at.

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getSupportActionBar().hide();
        // root LinearLayout
        LinearLayout rootLinearLayout = new LinearLayout(this);
        rootLinearLayout.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT));
        rootLinearLayout.setOrientation(LinearLayout.VERTICAL);
        rootLinearLayout.setBackgroundColor(Color.CYAN);
        setContentView(rootLinearLayout);

        // creating a layout params
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 0);

        // creating an element
        RelativeLayout elementOne = new RelativeLayout(this);
        elementOne.setBackgroundColor(Color.RED);
        params.weight = 1;
        elementOne.setLayoutParams(params);

        // add child element to the rootLinearLayout
        rootLinearLayout.addView(elementOne);

        // 9. create another layout params
        LinearLayout.LayoutParams params2 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 0);
        params2.weight = 2;

        // creating another element, and adding to the rootLinearLayout
        RelativeLayout elementTwo = new RelativeLayout(this);
        elementTwo.setBackgroundColor(Color.BLUE);
        // 10. set params2 to the element
        elementTwo.setLayoutParams(params2);

        rootLinearLayout.addView(elementTwo);

    }
}

“weight” can be any floating point value.

Next, let’s make the corner of the square rounded. Use a class called GradientDrawable.

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getSupportActionBar().hide();
        // root LinearLayout
        LinearLayout rootLinearLayout = new LinearLayout(this);
        rootLinearLayout.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT));
        rootLinearLayout.setOrientation(LinearLayout.VERTICAL);
        rootLinearLayout.setBackgroundColor(Color.CYAN);
        setContentView(rootLinearLayout);

        // creating a layout params
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 0);

        // creating an element
        RelativeLayout elementOne = new RelativeLayout(this);
        elementOne.setBackgroundColor(Color.RED);
        params.weight = 1;
        elementOne.setLayoutParams(params);

        // add child element to the rootLinearLayout
        rootLinearLayout.addView(elementOne);

        // create another layout params
        LinearLayout.LayoutParams params2 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 0);
        params2.weight = 2;

        // 11. for rounded corner
        GradientDrawable gd = new GradientDrawable();
        gd.setColor(Color.YELLOW);
        gd.setCornerRadius(200);

        // creating another element, and adding to the rootLinearLayout
        RelativeLayout elementTwo = new RelativeLayout(this);
        elementTwo.setBackgroundColor(Color.BLUE);
        // 12. set gd as the background. Noticed the element's background color is no longer blue, but yellow?
        elementTwo.setBackground(gd);
        // set params2 to the element
        elementTwo.setLayoutParams(params2);

        rootLinearLayout.addView(elementTwo);
    }
}

You can create complex layout just by using LinearLayout or RelativeLayout, and add child elements to it, however ways you want. Follow steps 13 – 19 to see how it works.

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getSupportActionBar().hide();
        // root LinearLayout
        LinearLayout rootLinearLayout = new LinearLayout(this);
        rootLinearLayout.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT));
        rootLinearLayout.setOrientation(LinearLayout.VERTICAL);
        rootLinearLayout.setBackgroundColor(Color.CYAN);
        setContentView(rootLinearLayout);

        // creating a layout params
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 0);

        // creating an element
        // 13. change the layout type to LinearLayout
        LinearLayout elementOne = new LinearLayout(this);
        // 14. set orientation to HORIZONTAL
        elementOne.setOrientation(LinearLayout.HORIZONTAL);
        elementOne.setBackgroundColor(Color.RED);
        params.weight = 1;
        elementOne.setLayoutParams(params);

        // 15. creating childElements
        LinearLayout childElementOne = new LinearLayout(this);
        childElementOne.setBackgroundColor(Color.GREEN);
        // 16.  create a layout params
        LinearLayout.LayoutParams childLP = new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT);
        childLP.weight = 1;
        childElementOne.setLayoutParams(childLP);

        // 17. adding childElement to elementOne
        elementOne.addView(childElementOne);

        // 18. creating another child element
        LinearLayout childElementTwo = new LinearLayout(this);
        childElementTwo.setBackgroundColor(Color.BLUE);
        childElementTwo.setLayoutParams(childLP);

        // 19. adding it to the parent element
        elementOne.addView(childElementTwo);

        // add child element to the rootLinearLayout
        rootLinearLayout.addView(elementOne);

        // create another layout params
        LinearLayout.LayoutParams params2 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 0);
        params2.weight = 2;

        // for rounded corner
        GradientDrawable gd = new GradientDrawable();
        gd.setColor(Color.YELLOW);
        gd.setCornerRadius(200);

        // creating another element, and adding to the rootLinearLayout
        RelativeLayout elementTwo = new RelativeLayout(this);
        elementTwo.setBackgroundColor(Color.BLUE);
        elementTwo.setBackground(gd);
        // set params2 to the element
        elementTwo.setLayoutParams(params2);

        rootLinearLayout.addView(elementTwo);

    }
}

Lastly, you can get crazier elements inside RelativeLayout. Follow steps 20 – 30.

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getSupportActionBar().hide();
        // root LinearLayout
        LinearLayout rootLinearLayout = new LinearLayout(this);
        rootLinearLayout.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT));
        rootLinearLayout.setOrientation(LinearLayout.VERTICAL);
        rootLinearLayout.setBackgroundColor(Color.CYAN);
        setContentView(rootLinearLayout);

        // creating a layout params
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 0);

        // creating an element
        // change the layout type to LinearLayout
        LinearLayout elementOne = new LinearLayout(this);
        // set orientation to HORIZONTAL
        elementOne.setOrientation(LinearLayout.HORIZONTAL);
        elementOne.setBackgroundColor(Color.RED);
        params.weight = 1;
        elementOne.setLayoutParams(params);

        // creating childElements
        LinearLayout childElementOne = new LinearLayout(this);
        childElementOne.setBackgroundColor(Color.GREEN);
        // create a layout params
        LinearLayout.LayoutParams childLP = new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT);
        childLP.weight = 1;
        childElementOne.setLayoutParams(childLP);

        elementOne.addView(childElementOne);

        LinearLayout childElementTwo = new LinearLayout(this);
        childElementTwo.setBackgroundColor(Color.BLUE);
        childElementTwo.setLayoutParams(childLP);

        elementOne.addView(childElementTwo);

        // add child element to the rootLinearLayout
        rootLinearLayout.addView(elementOne);

        // create another layout params
        LinearLayout.LayoutParams params2 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 0);
        params2.weight = 2;

        // for rounded corner
        GradientDrawable gd = new GradientDrawable();
        gd.setColor(Color.YELLOW);
        gd.setCornerRadius(200);

        // creating another element, and adding to the rootLinearLayout
        RelativeLayout elementTwo = new RelativeLayout(this);
        elementTwo.setBackgroundColor(Color.BLUE);
        elementTwo.setBackground(gd);
        // set params2 to the element
        elementTwo.setLayoutParams(params2);

        rootLinearLayout.addView(elementTwo);

        // 20. creating child elements for elementTwo
        RelativeLayout childElementA = new RelativeLayout(this);
        childElementA.setBackgroundColor(Color.RED);
        // 21. new layout params and set width and height to 200 
        RelativeLayout.LayoutParams rlp1 = new RelativeLayout.LayoutParams(200, 200);
        // 22. add rule to make it align to the parent's top
        rlp1.addRule(RelativeLayout.ALIGN_PARENT_TOP);
        childElementA.setLayoutParams(rlp1);
        // 23. generating an ID for the view. View.generateViewId() will automatically generate an ID that does not conflict with other IDs. It is a lot better than you manually managing them.
        childElementA.setId(View.generateViewId());

        // 24. adding it to the elementTwo
        elementTwo.addView(childElementA);

        // 25. creating another child element
        RelativeLayout childElementB = new RelativeLayout(this);
        childElementB.setBackgroundColor(Color.MAGENTA);
        // 26. creating another layout params. This time, set the width and height to 400
        RelativeLayout.LayoutParams rlp2 = new RelativeLayout.LayoutParams(400, 400);
        // 27. adding a rule to make it just below childElementA
        rlp2.addRule(RelativeLayout.BELOW, childElementA.getId());
        // 28. you can even add margins to it!
        rlp2.topMargin = 50;
        // 29. add another rule to make it align to the right of childElementA
        rlp2.addRule(RelativeLayout.RIGHT_OF, childElementA.getId());
        // 30. again, you can add whatever margins to it!
        rlp2.leftMargin = 100;
       
        childElementB.setLayoutParams(rlp2);

        elementTwo.addView(childElementB);
    }
}

Oh, yes. One final tip. In order to get the perfect circle, set the cornerRadius the half size of the shape. Follow, 31 – 33

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getSupportActionBar().hide();
        // root LinearLayout
        LinearLayout rootLinearLayout = new LinearLayout(this);
        rootLinearLayout.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT));
        rootLinearLayout.setOrientation(LinearLayout.VERTICAL);
        rootLinearLayout.setBackgroundColor(Color.CYAN);
        setContentView(rootLinearLayout);

        // creating a layout params
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 0);

        // creating an element
        // change the layout type to LinearLayout
        LinearLayout elementOne = new LinearLayout(this);
        // set orientation to HORIZONTAL
        elementOne.setOrientation(LinearLayout.HORIZONTAL);
        elementOne.setBackgroundColor(Color.RED);
        params.weight = 1;
        elementOne.setLayoutParams(params);

        // creating childElements
        LinearLayout childElementOne = new LinearLayout(this);
        childElementOne.setBackgroundColor(Color.GREEN);
        // create a layout params
        LinearLayout.LayoutParams childLP = new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT);
        childLP.weight = 1;
        childElementOne.setLayoutParams(childLP);

        elementOne.addView(childElementOne);

        LinearLayout childElementTwo = new LinearLayout(this);
        childElementTwo.setBackgroundColor(Color.BLUE);
        childElementTwo.setLayoutParams(childLP);

        elementOne.addView(childElementTwo);

        // add child element to the rootLinearLayout
        rootLinearLayout.addView(elementOne);

        // create another layout params
        LinearLayout.LayoutParams params2 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 0);
        params2.weight = 2;

        // for rounded corner
        GradientDrawable gd = new GradientDrawable();
        gd.setColor(Color.YELLOW);
        gd.setCornerRadius(200);

        // creating another element, and adding to the rootLinearLayout
        RelativeLayout elementTwo = new RelativeLayout(this);
        elementTwo.setBackgroundColor(Color.BLUE);
        elementTwo.setBackground(gd);
        // set params2 to the element
        elementTwo.setLayoutParams(params2);

        rootLinearLayout.addView(elementTwo);

        // creating child elements for elementTwo
        RelativeLayout childElementA = new RelativeLayout(this);
        childElementA.setBackgroundColor(Color.RED);
        RelativeLayout.LayoutParams rlp1 = new RelativeLayout.LayoutParams(200, 200);
        rlp1.addRule(RelativeLayout.ALIGN_PARENT_TOP);
        childElementA.setLayoutParams(rlp1);
        childElementA.setId(View.generateViewId());

        elementTwo.addView(childElementA);

        RelativeLayout childElementB = new RelativeLayout(this);
        childElementB.setBackgroundColor(Color.MAGENTA);

        RelativeLayout.LayoutParams rlp2 = new RelativeLayout.LayoutParams(400, 400);

        // 31. create another GradientDrawable
        GradientDrawable gd2 = new GradientDrawable();
        // 32. btw, you can assign any color by using Color.argb method.
        gd2.setColor(Color.argb(255, 252, 186, 3));
        // 33. set cornerRatius to 200 (half of 400)
        gd2.setCornerRadius(200);
        childElementB.setBackground(gd2);

        rlp2.addRule(RelativeLayout.BELOW, childElementA.getId());
        rlp2.addRule(RelativeLayout.RIGHT_OF, childElementA.getId());
        rlp2.leftMargin = 100;
        rlp2.topMargin = 50;
        childElementB.setLayoutParams(rlp2);

        elementTwo.addView(childElementB);
    }
}