Android Program to design Credit Card Helper using LinearLayout

I have already explained Linear Layout in the example given before, so here I will be just going to design the Credit Card Helper giving you the explanation of the code. In this example, we will be just coding in the XML file as we are just going to design it and not going to add any functionality to it.

The first Linear Layout is the Linear Layout for the entire design which is set to the orientation as vertical and weightSum as 8. So you will see that in each and every linear layout, the layout_weight has been taken as 1 so we have 6 Linear Layouts so layout_weight is 1 for each and 1 for the 2 buttons. Hence total weightSum=8. The orientation for the entire layout is taken as vertical as we want all the elements to be one below another and inside each nested Linear Layouts we have taken orientation as horizontal as we want the TextView and the EditText besides each other.

Steps to create the application:-

Open Android Studio and create a new Android application and name it as “CreditCardHelper” and company domain as codedost so your package will be automatically set.
Open an empty activity and name it as MainActivity.
Copy the default content of res/layout/activity_main.xml file to include in Linear Layout.
Run the application to launch Android emulator or you can run it on your mobile also(which is way faster).

XML File(res/layout/activity_main.xml):

<?xml version="1.0" encoding="utf-8"?>
<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:background="#000"
    android:weightSum="8"
    android:orientation="vertical"
    tools:context="com.example.creditcardhelper.MainActivity">

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:gravity="center"
        android:layout_weight="1"
        android:weightSum="2"
        android:orientation="horizontal">

        <TextView
            android:text="Enter Card Balance ($)"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:gravity="center"
            android:textColor="#0f0"
            android:layout_weight="1"
            android:id="@+id/textView1" />

        <EditText
            android:id="@+id/text1"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:background="#fff"
            android:layout_height="35dp"/>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:gravity="center"
        android:weightSum="2"
        android:layout_weight="1"
        android:orientation="horizontal">


        <TextView
            android:text="Enter Yearly Interest Rate (%)"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:gravity="center"
            android:textColor="#0f0"
            android:layout_weight="1"
            android:id="@+id/textView2" />

        <EditText
            android:id="@+id/text2"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:background="#fff"
            android:layout_height="35dp"/>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout3"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:weightSum="2"
        android:gravity="center"
        android:layout_weight="1"
        android:orientation="horizontal">

        <TextView
            android:text="Enter Minimum Payment ($)"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textColor="#0f0"
            android:layout_weight="1"
            android:id="@+id/textView3" />

        <EditText
            android:id="@+id/text3"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:background="#fff"
            android:layout_height="35dp"/>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout4"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:weightSum="2"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="horizontal">

        <TextView
            android:text="Final Card Balance ($)"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textColor="#0f0"
            android:layout_weight="1"
            android:id="@+id/textView4" />

        <EditText
            android:id="@+id/text4"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:background="#fff"
            android:layout_height="35dp"/>

    </LinearLayout>


    <LinearLayout
        android:id="@+id/linearLayout5"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:gravity="center"
        android:weightSum="2"
        android:layout_weight="1"
        android:orientation="horizontal">

        <TextView
            android:text="Months Remaining"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textColor="#0f0"
            android:layout_weight="1"
            android:id="@+id/textView5" />

        <EditText
            android:id="@+id/text5"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:background="#fff"
            android:layout_height="35dp"/>

    </LinearLayout>



    <LinearLayout
        android:id="@+id/linearLayout6"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:weightSum="2"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="horizontal">

        <TextView
            android:text="Interest Paid Will Be ($)"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textColor="#0f0"
            android:layout_weight="1"
            android:id="@+id/textView6" />

        <EditText
            android:id="@+id/text6"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:background="#fff"
            android:layout_height="35dp"/>


    </LinearLayout>



    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="COMPUTE"
        android:id="@+id/button7"
        android:textSize="24sp" />


    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="CLEAR"
        android:id="@+id/button8"
        android:textSize="24sp" />

</LinearLayout>

MainActivity.java

package com.codedost.creditcardhelper;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

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

CODEDOST

Android Program to design Credit Card Helper using LinearLayout