Running Environment
Android Studio 2020.3.1
1. Knowledge Summary
1.1 Common UI Components
Component Name | Effect |
---|---|
TextView | Non-editable Text Box |
EditView | Editable Text Box |
Button | Button |
CheckBox | Checkbox |
RadioGroup | Radio Box Group |
RadioButton | radio 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 Name | describe |
---|---|
orientation | An optional horizontal horizontal / vertical vertical layout is used for the Layout layout to represent the arrangement of all components within the layout. |
layout_width | Indicates 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_weight | Represents the weight of a component, which defaults to 0, is usually set to 1, and is associated with layout_width="0dp" combination |
text | Set the text displayed by the component |
textSize | Set font size for display text |
gravity | Set how it is done within the component Optional Left/Right/Center, etc. |
layout_gravity | Set the alignment of components relative to parent components |
RelativeLayout Relative Layout Layout Demo2
Property Name | describe |
---|---|
layout_centerInParent | When set to true, the component is at the center of the parent component and defaults to false |
layout_below | A value of @id/component ID indicates that the component is placed below a component |
layout_alignParentRight | When set to true, the component moves to the right of the parent component, defaulting to false |
layout_alignParentBottom | When set to true, the component moves below the parent component, defaulting to false |
EditText component Demo4
Property Name | describe |
---|---|
ems | Limit length |
hint | Set the text to prompt when the input box is empty |
inputType | Type 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 Name | describe |
---|---|
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)); } }); } } }