Android nerd

It is present from the first versions of the API, but not as popular as other dialog boxes due to the need for additional configuration, which is not always necessary. But from this it follows its main advantage — wide customizability, you can place anything you want in this element, use it as a notification element or a dialog box, while controlling the display interface completely.

For example, consider an application with one button, which, when clicked, will call PopUpWindow in the form of a CardView with text and a button. So we learn how to call the dialog box and handle events inside it.

In the next lesson, we will also look at the animation of the dialog box and use it in conjunction with the RecyclerView list.

To begin, add a dependency to display CardView in your bulid.gradle

dependencies {    implementation 'com.android.support:cardview-v7:28.0.0' }

After that, we will edit the basic layout of our application, add a button and change the background color for greater contrast.

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@color/cardview_dark_background"    tools:context=".MainActivity">    <Button        android:id="@+id/buttonPopup"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="@string/textButtonMain"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toTopOf="parent" /> </android.support.constraint.ConstraintLayout>

Now we will create another layout that will represent the PopUpWindow markup, add a CardView with an attached LinearLayout with text and a button

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:paddingLeft="10dp"    android:paddingRight="10dp"    android:gravity="center">    <android.support.v7.widget.CardView        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:cardCornerRadius="5dp">        <LinearLayout            android:padding="10dp"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:orientation="vertical">            <TextView                android:id="@+id/titleText"                android:layout_gravity="center"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="@string/textTitle"                android:textSize="20sp"                android:textStyle="bold"                android:padding="10dp"/>            <Button                android:id="@+id/messageButton"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:text="@string/textButton" />        </LinearLayout>    </android.support.v7.widget.CardView> </LinearLayout>

Consider the implementation of PopUpWindow as a separate class for sharing responsibility, create a class PopUpClass and proceed to the analysis of the code

package com.evanbishop.ept.popupwindowtestapp; import android.view.Gravity; import android.view.LayoutInflater; import android.view.MotionEvent; import android.view.View; import android.widget.Button; import android.widget.LinearLayout; import android.widget.PopupWindow; import android.widget.TextView; import android.widget.Toast; public class PopUpClass {   //PopupWindow display method    public void showPopupWindow(final View view) { //Create a View object yourself through inflater        LayoutInflater inflater = (LayoutInflater) view.getContext().getSystemService(view.getContext().LAYOUT_INFLATER_SERVICE);        View popupView = inflater.inflate(R.layout.pop_up_layout, null); //Specify the length and width through constants        int width = LinearLayout.LayoutParams.MATCH_PARENT;        int height = LinearLayout.LayoutParams.MATCH_PARENT; //Make Inactive Items Outside Of PopupWindow        boolean focusable = true; //Create a window with our parameters        final PopupWindow popupWindow = new PopupWindow(popupView, width, height, focusable); //Set the location of the window on the screen        popupWindow.showAtLocation(view, Gravity.CENTER, 0, 0); //Initialize the elements of our window, install the handler        TextView test2 = popupView.findViewById(R.id.titleText);        test2.setText(R.string.textTitle);        Button buttonEdit = popupView.findViewById(R.id.messageButton);        buttonEdit.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) { //As an example, display the message                Toast.makeText(view.getContext(), "Wow, popup action button", Toast.LENGTH_SHORT).show();            }        }); //Handler for clicking on the inactive zone of the window        popupView.setOnTouchListener(new View.OnTouchListener() {            @Override            public boolean onTouch(View v, MotionEvent event) { //Close the window when clicked                popupWindow.dismiss();                return true;            }        });    } }

Now it remains only to add a call to our PopUpClass class to our activity. To do this, create a button click handler and call the PopUpClass class method in it.

package com.evanbishop.ept.popupwindowtestapp; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; public class MainActivity extends AppCompatActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main); // Create a button handler and call the dialog box display method in it        Button popupButton = findViewById(R.id.buttonPopup);        popupButton.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                PopUpClass popUpClass = new PopUpClass();                popUpClass.showPopupWindow(v);            }        });    } }

Check how our dialog box is displayed, click on the button.

Now let's see if the click processing works in the window itself.

Conclusion

Now you know how to implement your own dialog with your content and can use it in your projects.

Thus, RecyclerView not only provides more modern functionality, but also encourages the developer to stick to a more efficient distributed class system. Knowing this, the transition to RecyclerView becomes a logical solution than just blindly following a fashion.

Before we proceed to the analysis of the component, you need to add a dependency to your build.gradle

dependencies {     implementation 'com.android.support:recyclerview-v7:28.0.0'   }

Do not forget to check that the versions of the imported components are the same, for example 28.0.0

The implementation of the RecyclerView consists of

1. layout with a declared list

2. layout for the list item

3. Adapter

4. Models for defining list data (optional, but strictly recommended item)

5. Initializing the list and adapter in activity

As an example, we will create a simple application with a list of goals that we want to achieve in our career in the next five years. I recommend that you always take a meaningful approach to educational projects, they may well turn out a successful application.

Add a list to the layout of our Activity, activity_main.xml

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout    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="@color/cardview_dark_background"    tools:context=".MainActivity">    <android.support.v7.widget.RecyclerView        android:id="@+id/recyclerView"        android:layout_width="match_parent"        android:layout_height="match_parent" /> </android.support.constraint.ConstraintLayout>

Now we will create a model for storing list items, i.e. our goals

title string

expected date of achievement

priority number

DreamModel

package com.evan.ept.recyclerviewtestapp; public class DreamModel {    private String name;  //Name of achievement    private String date; //Achievement date (do not use the Date class to simplify)    private int level;  //Level of importance    //Class constructor is used to identify all fields of the model.    DreamModel(String name, String date, int level){        this.name = name;        this.date = date;        this.level = level;    } // Methods for getting model fields    public String getName() {        return name;    }    public String getDate() {        return date;    }    public int getLevel() {        return level;    } }

Create a layout file for the list item, based on the material design patterns, use the CardView element to display, update the gradle dependency list

dependencies {    implementation 'com.android.support:cardview-v7:28.0.0' }

and create a layout file item_layout.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:padding="10dp"    android:layout_height="wrap_content">    <android.support.v7.widget.CardView        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:cardCornerRadius="5dp">        <LinearLayout            android:layout_width="match_parent"            android:layout_height="match_parent"            android:padding="10dp"            android:orientation="vertical">            <TextView                android:id="@+id/dreamName"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_gravity="center"                android:textStyle="bold"                android:textSize="16sp"                android:text="@string/template_name_main" />            <LinearLayout                android:layout_width="match_parent"                android:layout_height="match_parent"                android:weightSum="2"                android:padding="10dp"                android:orientation="horizontal">                <TextView                    android:id="@+id/dreamDate"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_weight="1"                    android:gravity="center"                    android:textColor="@android:color/holo_orange_light"                    android:text="@string/template_date_main"                    android:textSize="14sp"/>                <TextView                    android:id="@+id/dreamLevel"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_weight="1"                    android:gravity="center"                       android:textColor="@android:color/holo_orange_light"                    android:text="@string/template_impt_main"                    android:textSize="14sp"/>            </LinearLayout>        </LinearLayout>    </android.support.v7.widget.CardView> </LinearLayout>

Let’s create an adapter DreamAdapter, a class that performs the main work on filling and preparing elements for display in RecyclerView

package com.evan.ept.recyclerviewtestapp; import android.content.Context; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; import android.widget.Toast; import java.util.List; public class DreamAdapter extends RecyclerView.Adapter<DreamAdapter.ViewHolder> {    private LayoutInflater inflater;    // Procurement for View which will be created through inflater    private List<DreamModel> dreamList; // List with objects of our models    private Context cntxt;    // Constants for text    private final String DATA_TEXT = "Reach to ";    private final String LEVEL_TEXT = "Importance ";    private final String LEVEL_POST_TEXT = "/5"; // Through the constructor, set the list and context of the inflater    DreamAdapter(Context cntxt, List<DreamModel> dreamList){        this.dreamList = dreamList;        this.cntxt = cntxt;        inflater = LayoutInflater.from(cntxt);    }    // Create a View object and return the ViewHolder with this parameter    @Override    public DreamAdapter.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {        View view = inflater.inflate(R.layout.item_layout, viewGroup, false);        return new ViewHolder(view);    } // Fill our layout with data from the model via ViewHolder    @Override    public void onBindViewHolder(DreamAdapter.ViewHolder viewHolder, int currentItem) { // Get model object by number        DreamModel dreamModel = dreamList.get(currentItem);        // Set via TextView holder with data from the model        viewHolder.dreamName.setText(dreamModel.getName());        viewHolder.dreamDate.setText(DATA_TEXT + dreamModel.getDate());        viewHolder.dreamLevel.setText(LEVEL_TEXT + dreamModel.getLevel() + LEVEL_POST_TEXT);    } // Get the total length of the list    @Override    public int getItemCount() {        return dreamList.size();    }    // Use the ViewHolder implementation as a well-established pattern to quickly display elements    class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {        final TextView dreamName, dreamDate, dreamLevel;        ViewHolder(View view){            super(view);            view.setOnClickListener(this);            dreamName  =  view.findViewById(R.id.dreamName);            dreamDate  =  view.findViewById(R.id.dreamDate);            dreamLevel =  view.findViewById(R.id.dreamLevel);        }        @Override        public void onClick(View view) { // Display the name of the selected target            Toast.makeText(cntxt, dreamList.get(getAdapterPosition()).getName(), Toast.LENGTH_SHORT).show();        }    } }

And add the initialization of the list and the adapter to our activity MainActivity, also create the setInitialData method to add data to our list

package com.evan.ept.recyclerviewtestapp; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity {    List<DreamModel> dreamsList = new ArrayList<>(); // List of models    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main); // Before initializing the list, create and fill in the list        setInitialData();        RecyclerView recyclerView = findViewById(R.id.recyclerView); // Set the LayoutManager (the location of the items in the list, select a simple vertical list) recyclerView.setLayoutManager(new LinearLayoutManager(this));        //Creat adapter        DreamAdapter adapter = new DreamAdapter(this, dreamsList);        //Set the list for adapter        recyclerView.setAdapter(adapter);    }   // Fill the model with data for your taste    private void setInitialData() {        dreamsList.add(new DreamModel("Moonwalk on Mars", "2027", 99));        dreamsList.add(new DreamModel("Moonwalk on moon", "2025", 5));        dreamsList.add(new DreamModel("Be like Elon Musk", "2021", 5));        dreamsList.add(new DreamModel("Make a stratup", "end of 2019", 2));        dreamsList.add(new DreamModel("Learn RecyclerView", "2019", 5));    } }

Now make sure the list is displayed correctly.

To handle clicks, we use the following code in the adapter (highlighted in bold)

class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {    final TextView dreamName, dreamDate, dreamLevel;    ViewHolder(View view){        super(view);        view.setOnClickListener(this);        dreamName  =  view.findViewById(R.id.dreamName);        dreamDate  =  view.findViewById(R.id.dreamDate);        dreamLevel =  view.findViewById(R.id.dreamLevel);    }    @Override    public void onClick(View view) {        //Example print        Toast.makeText(cntxt, dreamList.get(getAdapterPosition()).getName(), Toast.LENGTH_SHORT).show();    } }

Check if the information from the item is displayed correctly.

Conclusion