UI Interface Design - Android

Keywords: Android Attribute Java xml

Android UI Interface Design - with Reference Documents

UI Interface Design

1. Basic Components

1. Text class components

The feature is to display text information in the interface

1.1 TextView
Reference Document docs
attribute Interpretation Explain
textSize Text Size Properties Unit: sp
textColor Text color Attribute values: 1. Can be displayed in the left preview of AS 2. Click on the preview icon to adjust the color display
maxWidth Maximum width Unit: dp
layout_marginBottom Bottom Outer Margin Should be the property value of Layout Manager
layout_width Typically wrap_content ViewGroup.LayoutParams Properties
layout_height Typically wrap_content
1.2 EditText (a subclass of the textview component)

Reference Document docs

attribute Interpretation Explain
layout_width wide Typically match_parent
layout_height high Typically wrap_content
hint Prompt message EditText is very common
inputType Set password textPassword-Number-Date, etc. docs
drawableLeft Draw an image to the left of the text docs
android:drawablePadding Draw the spacing between the image and the text Use in combination
lines Number of rows in the edit box, special: scrolling display over the number of rows docs

2. Button class components

2.1 Button, a common button component (a subclass of the textview component)

Reference Document docs

2.1.1 Button Events - Common Listeners

What is a listener

  1. Set up listeners for components
  2. Actions that trigger the listener (user)
  3. Code to execute

Two ways to add event listeners in AS

  1. Anonymous internal class as click event listener
  2. Implemented through the onClick property Event Listener Steps:

  1. Setting component ID in XML

  2. Create component objects and findViewById (R.id. [string]) initialize

  3. Component object calls setOnClickListener(new View.OnClickListener(){




  4. For example, add the message prompt box Toast.makeText(this, "single button"), Toast.LENGTH_SHORT).show(); attribute steps:

  1. Write a method in Activity that contains parameters of type View
  2. android:onClick="Method name of step 1"
2.2 Picture Button ImageButton Component


  • All onClick events can start on a single machine


  • ImageButton has no text property
attribute Interpretation Explain
src Picture Resource Properties Under @mipmap/file
background background Set background value to'#0000', background is transparent, avoid gray
2.3 RadioButton Component

Reference Document docs

Use nested with tags

2.3.1 Add Selection Change Event

setOnCheckedChangeListener(new RadioGroup)

  1. Get RadioGroup Object Call
  2. Object calls setOnCheckedChangeListener method
  3. Newa RadioGroup.OnCheckedChangeListener listener
  4. Override Abstract methods, remark here on anonymous internal classes Detailed Connection
  5. Toast Tip Box
2.4 Checkbox CheckBox Component

Reference Document docs

  • Check function
  • Diagram Diagram
  • Subclasses of Button
  • Label wrapping doesn't need to be used like RaidoGroup

3. Date Time Class Components

Date Picker: Reference Documents

Time Picker - Reference Document

Timer Chronometer - Reference Document

2. Advanced Components

1. Progress Bar Class Component

1.1 ProgressBar

Reference Document docs

Real-time accuracy - Determinate Progress

Loading - Indeterminate Progress

attribute Interpretation Explain
style Progress Bar Type Six types of Widget.ProgressBar.Horizontal; Widget.ProgressBar.Small; Widget.ProgressBar.Large; Widget.ProgressBar.Large; Widget.ProgressBar.Small.Inverse
Or theme property value: android:attr/progressBarStyleHorizontal
max Maximum Define a maximum value, for example, 100
progress Speed of progress For example: 50
Threads - Flowcharts
 Step 1: Determine whether it is completed or not, step 2 or step 3;
Step 2: Call the setProgress() method to update the progress and return to step 1
 Step 3: Call the setVisibility() method to set the progress bar to not show, end

Knowledge Points:

  1. Label
  2. Set the full screen display when loading, getWindow()
  3. Message Processing as Component Update Subthread
  4. Create thread simulation progress handler

Layout file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_marginBottom="30dp" />



package com.ws.progressbardemo;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.View;
import android.view.WindowManager;
import android.widget.ProgressBar;
import android.widget.Toast;

public class MainActivity extends Activity {
    private ProgressBar progressBar;
    private int mProgress=0;
    private Handler mhandler;
    protected void onCreate(Bundle savedInstanceState) {
                WindowManager.LayoutParams.FLAG_FULLSCREEN);//Set full screen display, cancel status fields such as signal at the top of the phone
        progressBar = findViewById(R.id.progressBar);
        mhandler = new Handler(){
            public void handleMessage(@NonNull Message msg) {
                //Processing message operations
                if(msg.what == 0x111){
                    Toast.makeText(MainActivity.this, "Time-consuming operation completed", Toast.LENGTH_SHORT).show();
        //Create a trip simulation time-consuming operation
        new Thread(new Runnable() {
            public void run() {
                while (true){
                    mProgress = doWork();
                    Message m = new Message();
                        m.what = 0x111;//Custom Message Code, //Time-consuming Operation Not Completed
                        m.what = 0x110;//Time-consuming operation completed
            private int doWork(){
                mProgress += Math.random()*10;
                try {
                } catch (InterruptedException e) {
                return mProgress;
1.2 SeekBar Drag Bar

Reference Document docs - Yes ProgressBar Subclasses

attribute Interpretation Explain
android:thumb Draw your thumb on the search bar. You can refer to another resource as'', or you can refer to topic properties as''.@[+][package:]type/name?[package:]type/name
1.3 RatingBar Rating Comment Bar

Reference Document docs - Yes ProgressBar Subclasses

attribute Interpretation Explain
android:numStars The number of stars (or rating items) to show. Number of Stars
android:rating The rating to set by default.
android:stepSize The step size of the rating. 0.5 stars by default
android:isIndicator Can only see, can't modify

2. Image Class Components

Mainly used to display pictures

2.1 ImageView

Reference Document docs

attribute Interpretation Explain
android:src Sets a drawable as the content of this ImageView. @drawable or@mipmap
android:scaleType Scale type The default is equal scale scaling
android:adjustViewBounds Set this to true if you want the ImageView to adjust its bounds to preserve the aspect ratio of its drawable. Set to true, adjust the component to wrap its own content, and set maxWidth and maxHeight to wrap the picture perfectly without exceeding its maximum width
android:tint To color Similar mask
2.2 Image Switcher ImageSwitcher

Reference Document docs

Image Switching + Animation Effects

`setInAnimation(Animation inAnimation)`
2.3 Grid View GridView

Reference Document docs

1. Add a picture resource and cannot pass an attribute (src)

2. Adapter Adapter: An interface connecting back-end data to front-end display, an important link between data and UI components

3. Where the data source can be ArrayList and Cursor

Four adapters:

  • ArrayAdapter
  • SimpleAdapter
  • SimpleCursorAdapter: Database content is presented as a list
  • BaseAdapter: Customizable

Note: Creating an adapter is complex

3. List Class Components

3.1 Dropdown List Spinner

Reference Docs

  1. Drop-down options can be specified through the android:entries property and XML array resources
  2. Specify the adapter setAdapter () method
3.2 List View ListView

For example: WeChat Friends Directory

  1. Add ListView Component
  2. Create a LinearLayout layout file and set ImageView and TextView tag parameters
  3. Create an adapter under Avtivity to pass parameters
  4. Set up the adapter and output the status bar


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

        android:layout_height="match_parent" />



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



package com.ws.listview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.ListIterator;
import java.util.Map;
import java.util.SimpleTimeZone;

public class MainActivity extends AppCompatActivity {

    protected void onCreate(Bundle savedInstanceState) {
        int[] imageid = new int[]{R.drawable.img01,R.drawable.img02,R.drawable.img03,R.drawable.img04,
        String[] titleid = new String[]{"Wang Yi","Wang Er","Wang San","Wong 4","Wong 5","Wong 6","Wong 7","Wong 8","Wong 9","Wong 10","Wong 11","Wong 12"};
        List<Map<String,Object>> listitem = new ArrayList<>();
        for (int i =0;i<imageid.length;i++){
            Map<String,Object> map = new HashMap<>();
        SimpleAdapter simpleAdapter = new SimpleAdapter(this,listitem,R.layout.main,
                new String[]{"image","title"},new int[]{R.id.imageView,R.id.textView});
        ListView listView = findViewById(R.id.listView);
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Map<String,Object> map = (Map<String, Object>) parent.getItemAtPosition(position);
                Toast.makeText(MainActivity.this,  map.get("title").toString(), Toast.LENGTH_LONG).show();

3.3 ScrollView/HorizontalScrollView - very common

Vertical reference document docsHorizontal reference document docs , two ways to add a scrolling view: in XML and in Java code

  1. Components are added normally, but be aware that you cannot have multiple subcomponents, so you can use them nested in the Layout Manager
  2. In Java code:
    • Create a scroll view object using the construction method ScrollView
    • Applying the addview method to add components to the scrolling view
    • Add Scroll View to Layout Manager

4. Common Components

4.1 Tab

Reference Document docs

  1. Add TabHost, TabWidget, and TabContent components to the layout file
  2. Write a tab XML layout file
  3. Get and initialize the TabHost component
  4. weiTabHost Object Add Tab
Fifteen original articles were published. Approved 0. Visited 479
Private letter follow

Posted by lajollabob on Thu, 30 Jan 2020 18:38:47 -0800