Working with XML

XML as you have learnt in the course of this tutorial is the acronym of eXtensible Markup Language, it is responsible for the layout of your app.

This is an example of an XML syntax.

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context="com.android.rexben.myapplication.MainActivity">



    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Hello World!"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintRight_toRightOf="parent"

        app:layout_constraintTop_toTopOf="parent" />





</android.support.constraint.ConstraintLayout>

Any tag you open in XML must be closed.

<TextView

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="Hello">

    

</TextView>

While there are some self-closing tags

<TextView

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="Hello World!"

    android:textSize="30sp"

     />

Camel case is using uppercase for the first letter of words when two or more words are combined together. For instance: textColor, toBottomOf, TextView etc.

Working with TextViews

TextView is responsible for the plain texts that are displayed on your device. In order to display a text with XML, you will make use of the TextView.

Go to your activity_main.xml file, copy and paste the following line of code

<TextView

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="My First Android App"

    android:textSize="30sp"

    android:textColor="@color/colorAccent"

    android:background="@color/colorPrimaryDark"

    />

android:layout_width="wrap_content" It is responsible for the width of your text, it could be set to match_parent, wrap_content, or to any size in dp (100dp, 50dp, 200dp). Same goes for the height.

android:text="My First Android App" Anything you enter here will show on your app

   

android:textSize="30sp" This affect how big your text will appear. Remember textSize are stored in “sp” and not “dp”.

android:textColor="@color/colorAccent" This affect the color of your text

  

  android:background="@color/colorPrimaryDark" This affect the background of your text and not your text.

Working with ImageView

ImageView is responsible for images displayed on your device. In order to display any type of image, you will make use of ImageView.

<ImageView

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:src="@mipmap/ic_launcher"

    />

 android:src="@mipmap/ic_launcher" It is responsible for the source where your image is located.

@mipmap is the folder where the image is located and ic_launcher is the name of the image.

To display your Image

Go to your pictures or wherever you save the picture you want to use.

Copy it Ctrl + C or right click and select copy (for windows).

Paste on the drawable folder in res folder in your Android Studio project and click “Ok”

Then you use the image your app.

<ImageView

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:src="@drawable/BeautyPlus_20171225181620_save"

    />

Working with Button

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"    android:text="Proceed"
    />

Working with margin and padding

When I started learning Android Programming, I had issues with margin and padding, I got used to margin and forgot padding with caused me little. Margin and Padding can be used interchangeably in some cases but I will spell out the difference.

You use margin when you want to adjust the whole view (textview, layout, imageview etc.). When you use android:layout_margin = “15dp”, it adjust the view at the top, bottom, left and right but if you want the margin for only top use android:layout_marginTop =”10dp”. For margin left, android:layout_marginLeft =”10dp”. For margin right, android:layout_marginRight =”10dp”. For margin bottom, android:layout_marginBottom=”10dp”.

You can use padding when you want to adjust the padding of a view. This is where it gets tricky, if use padding in a button, it will adjust the text inside the button and not the entire button. To adjust the whole button, you will use margin. Padding adjust the texts and not the whole view(TextView).

To use padding, android:padding =”16dp”, like margin it affects all the sizes. To set padding to the top, use android:paddingTop =”16dp”. To set padding to the left, android:paddingLeft =”16dp”. To set padding to the right, android:paddingRight =”16dp”  and to the bottom, android:paddingBottom =”16dp”.

Below is the example showing the different between margin and padding

As shown above, the first one is padding, you can see how padding was added to each sides, bringing all the text to the middle.

The second example is margin, you can see that it moved the TextView and not the text only.

Don’t forget to drop your comment. Tell us your challenges, having challenges is normal. I had a lot when I started the journey into Android Programming.

Walking with Layouts

Layouts are responsible for how your TextViews, ImageViews and other views are displayed. Layouts are called the parent view groups. I will introduce you to LinearLayout and RelativeLayouts for now.

LinearLayout

 As the name implies, it is linear and simple. Not complex or compound.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    android:orientation="vertical"
    tools:context="com.android.rexben.myapplication.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:textSize="30sp"
         />

</LinearLayout>

Copying this line of code will give you an error “unresolved package name”, to fix this;

Go to your MainActivity.java file and copy a line of code as indicated below

And paste in your activity_main.xml where I highlighted in the image below

As you enter more views, it will be arranged beside each other to the right (horizontal orientation) and below each other (vertical orientation).  

Whenever you are using LinearLayout, don’t forget to set your “orientation”, by default it is set to horizontal but if you want it to be set to vertical, use this code below.

android:orientation="vertical".