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

1.1 Common UI Components

Component NameEffectTextViewNon-editable Text BoxEditViewEditable Text BoxButtonButtonCheckBoxCheckboxRadioGroupRadio Box GroupRadioButtonradio 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 NamedescribeorientationAn 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" combinationtextSet the text displayed by the componenttextSizeSet font size for display textgravitySet 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 Namedescribelayout_centerInParentWhen set to true, the component is at the center of the parent component and defaults to falselayout_belowA value of @id/component ID indicates that the component is placed below a componentlayout_alignParentRightWhen set to true, the component moves to the right of the parent component, defaulting to falselayout_alignParentBottomWhen set to true, the component moves below the parent component, defaulting to false

EditText component Demo4

Property NamedescribeemsLimit lengthhintSet the text to prompt when the input box is emptyinputTypeType 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 NamedescribeView 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)); } }); } } }

Add new comment

For adding a comment, please log in

Login or create account

0 comments