[Android] Chapter 1 | UI Design | Summary of Knowledge Points | Include Demo

Running Environment

Android Studio 2020.3.1

1. Knowledge Summary

1.1 Common UI Components

Component NameEffect
TextViewNon-editable Text Box
EditViewEditable Text Box
ButtonButton
CheckBoxCheckbox
RadioGroupRadio Box Group
RadioButtonradio button
  • RadioButtons under the same RadioGroup are mutually exclusive, meaning that only one RadioButton can be selected for the same group and no influence can be made by different groups.

1.2 Display hints

Toast.makeText(MainActivity.this,'Tip', Toast.LENGTH_LONG).show();

1.3 Listen for Events

Click the button Demo1

Button.setOnclickListener(new View.OnclickListener(){
	@Override
	public void onClick(View view){
	}
});

Check Multiple Check Box Demo5

CheckBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
	@Override
	public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
    }
});

RadioBox Group Select an Item Demo6

RadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
	@Override
	public void onCheckedChanged(RadioGroup radioGroup, int i) {
                RadioButton rb = findViewById(i);
    }
});

1.4 Common attributes

Property Namedescribe
orientationAn optional horizontal horizontal / vertical vertical layout is used for the Layout layout to represent the arrangement of all components within the layout.
layout_widthIndicates the width of the current component, either by filling in a specific value + unit dp/sp, or by matching_ Parent (width of previous level) or wrap_content (width inside component)
layout_weightRepresents the weight of a component, which defaults to 0, is usually set to 1, and is associated with layout_width="0dp" combination
textSet the text displayed by the component
textSizeSet font size for display text
gravitySet how it is done within the component Optional Left/Right/Center, etc.
layout_gravitySet the alignment of components relative to parent components

RelativeLayout Relative Layout Layout Demo2

Property Namedescribe
layout_centerInParentWhen set to true, the component is at the center of the parent component and defaults to false
layout_belowA value of @id/component ID indicates that the component is placed below a component
layout_alignParentRightWhen set to true, the component moves to the right of the parent component, defaulting to false
layout_alignParentBottomWhen set to true, the component moves below the parent component, defaulting to false

EditText component Demo4

Property Namedescribe
emsLimit length
hintSet the text to prompt when the input box is empty
inputTypeType of input, textPassword / Phone, etc.

1.5 Analysis

App Running Framework

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    	super.onCreate(savedInstanceState);
    	// Configuration file for setting layout
        setContentView(R.layout.layout_main);
    	// Run Content...
    }
Method Namedescribe
View findViewById (int id)Finds xml-configured components based on their ID name, typically R.id.xx or R.color.xx, and returns a subclass of View, such as TextView / Buton

2. Demo

2.1 Implement displaying text after clicking a button

Achieving results:

layout_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="test"
        />
</LinearLayout>

MainActivity.java

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

        Button bt = (Button)findViewById(R.id.button);

        bt.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "ok!", Toast.LENGTH_LONG).show();
            }
        });
    }
}

2.2 Implement RelativeLayout relative layout

Achieving results:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textSize="20dp"
        android:text="Centered" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView"
        android:textSize="20dp"
        android:text="Near Center" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:textSize="20dp"
        android:text="Lower Right Corner" />

</RelativeLayout>

MainActivity.java

import androidx.appcompat.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);
    }
}

2.3 Implementing different text layouts

Achieving results:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <Button
        android:id="@+id/button"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:text="Button 1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:text="Button 2" />
</LinearLayout>

MainActivity.java

import androidx.appcompat.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);
    }
}

2.4 Fake pages for landing

Achieving results:


activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center"
    >

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textSize="25dp"
        android:gravity="center"
        android:text="Login interface" />

    <EditText
        android:id="@+id/editTextNumber"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:ems="10"
        android:hint="User name"
        android:inputType="textPersonName" />

    <EditText
        android:id="@+id/editTextTextPassword"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:ems="10"
        android:hint="Password"
        android:inputType="textPassword" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Land" />

</LinearLayout>

MainActivity.java

import androidx.appcompat.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);
    }
}

2.5 Selecting multiple hobbies

Achieving results:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Please choose your hobby:" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >

        <CheckBox
            android:id="@+id/checkBox1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Run" />

        <CheckBox
            android:id="@+id/checkBox2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Meditation" />

        <CheckBox
            android:id="@+id/checkBox3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Sleep" />

    </LinearLayout>

    <TextView
        android:id="@+id/tv_result"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView" />

</LinearLayout>

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.TextView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
    ArrayList<CheckBox> checkboxes = new ArrayList<>();
    TextView tv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        checkboxes.add(findViewById(R.id.checkBox1));
        checkboxes.add(findViewById(R.id.checkBox2));
        checkboxes.add(findViewById(R.id.checkBox3));

        tv = findViewById(R.id.tv_result);

        for(CheckBox c : checkboxes){
            c.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
                @Override
                public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                    updateCheckBox();
                }
            });
        }
    }
    public void updateCheckBox(){
        String showInfo = "";
        for(CheckBox c : checkboxes)
            if(c.isChecked())
                showInfo += c.getText() + " ";
        tv.setText(showInfo);
    }
}

2.6 Implement Choosing Your Favorite Programming Language

Achieving results:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Please select your favorite programming language among these three"/>

    <RadioGroup
        android:id="@+id/radio_group"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/rb1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="C++" />

        <RadioButton
            android:id="@+id/rb2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Java" />

        <RadioButton
            android:id="@+id/rb3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Python" />

    </RadioGroup>

    <TextView
        android:id="@+id/tv_result"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TextView" />


</LinearLayout>

MainActivity.java

package com.example.ycc_task1_6;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TextView tv = findViewById(R.id.tv_result);
        RadioGroup rg = findViewById(R.id.radio_group);
        rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int i) {
                RadioButton rb = findViewById(i);
                tv.setText(rb.getText());
            }
        });
    }
}

2.7 Implement Click Button to Get Input Box Information

Achieving results:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <EditText
        android:id="@+id/editText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="Please enter content"
        android:inputType="phone" />
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="test" />
    <TextView
        android:id="@+id/tv_result"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView" />
</LinearLayout>

MainActivity.java

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button bt = findViewById((R.id.button));
        TextView tv = findViewById(R.id.tv_result);
        EditText et = findViewById(R.id.editText);
        bt.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String info = et.getText().toString();
                tv.setText(info);
            }
        });
    }
}

2.8 Implement button to modify label color

Achieving results:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="See what color I am~"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <Button
            android:id="@+id/bt_blue"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="blue" />

        <Button
            android:id="@+id/bt_red"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="gules" />

        <Button
            android:id="@+id/bt_green"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="green" />
    </LinearLayout>
</LinearLayout>

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>

    <color name="colorRed">#FF0000</color>
    <color name="colorBlue">#03A9F4</color>
    <color name="colorGreen">#4CAF50</color>
</resources>

MainActivity.java

package com.example.ycc_task1_8;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.HashMap;

public class MainActivity extends AppCompatActivity {
    TextView tv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        HashMap<Button, Integer> bts = new HashMap<>();
        bts.put(findViewById(R.id.bt_blue), Color.BLUE);
        bts.put(findViewById(R.id.bt_red), Color.RED);
        bts.put(findViewById(R.id.bt_green), R.color.colorGreen);

        tv = findViewById(R.id.tv);
        for(Button b : bts.keySet()){
            b.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    tv.setTextColor(bts.get(b));
                }
            });
        }
    }
}

Tags: Android

Posted on Tue, 19 Oct 2021 12:52:58 -0400 by rodneykm

Hot Tags

©2023 Programmer Help