[JAVA] [Android] I tried to make a material list screen with ListView + Bottom Sheet

Introduction

Nowadays, there is a tendency for material design to be held and whispered. It is very important that the appearance is refreshing, but I just hope that the usability will not be unsatisfactory without focusing on the appearance.

Personally, I feel that recent iOS is one example ...

Aside from that, I think it's necessary to know what Material Design is like, so let's make it right away!

Preparation

This time we need com.android.support: design. When using SVG for the Fab button, be sure to include com.android.support: support-vector-drawable as well. Also, if minSdkVersion is less than ** 21 **, you need to use ** Support Library **, so the description method will change slightly. be careful.

build.gradle

android {
  compileSdkVersion 26
  buildToolsVersion "26.0.1"
  defaultConfig {
    ...
    minSdkVersion 19
    targetSdkVersion 26
    vectorDrawables.useSupportLibrary = true  //Caution:When using the SVG icon, this description is required depending on the minSdkVersion(This time it is 19, so it is necessary)
  }
  buildTypes {
    ...
  }
}

dependencies {
  compile fileTree(include: ['*.jar'], dir: 'libs')
  compile 'com.android.support:appcompat-v7:26.1.0'
  compile 'com.android.support:support-v4:26.1.0'
  compile 'com.android.support:design:26.1.0'
  compile 'com.android.support:support-vector-drawable:26.1.0'
}

Also, if you want to use the SVG icon this time, right-click [app]-> [res]-> [drawable], select [New]-> [Vector Asset], and say "add" *** If you select the ** mark icon, a file called *** ic_add_black_24dp.xml *** will be created. I wanted a white icon, so I added ʻandroid: fillColor = "@ color / white" `to the created xml file and saved it as *** ic_add_white_24dp.xml ***. The sample code refers to that file, so change it accordingly to suit your environment.

ic_add_white_24dp.xm

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportHeight="24.0"
        android:viewportWidth="24.0">

  <path
      android:fillColor="@color/white"
      android:pathData="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</vector>

Let's implement it easily

This time, I made a simple friend list / edit screen using "List View" + "Bottom Sheet". Below is the sample code.

MainActivity.java

public class MainActivity extends AppCompatActivity {
  private BottomSheetBehavior behavior;
  private ArrayList<String> friend;
  private ArrayAdapter<String> friend_adapter;
  private int position;  //Remember which row in the ListView was clicked

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

    // toolbar
    Toolbar toolbar = findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    // bottom sheet
    View bottomSheet = findViewById(R.id.bottom_sheet);
    behavior = BottomSheetBehavior.from(bottomSheet);
    behavior.setState(BottomSheetBehavior.STATE_HIDDEN);

    // friend data
    friend = new ArrayList<>();
    for (int i = 0; i < 30; i++) {
      friend.add("friend" + i);
    }

    friend_adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, friend);

    ListView friendList = findViewById(R.id.list_friend);
    friendList.setAdapter(friend_adapter);
    friendList.setOnItemClickListener(new AdapterView.OnItemClickListener() {
      @Override
      public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
        //When you click the friend list, the Bottom Sheet opens. Close if already open.
        if (behavior.getState() == BottomSheetBehavior.STATE_EXPANDED) {
          behavior.setState(BottomSheetBehavior.STATE_HIDDEN);
        } else {
          behavior.setState(BottomSheetBehavior.STATE_EXPANDED);
          position = i;
        }
      }
    });

    // fab button
    FloatingActionButton mFab = findViewById(R.id.fab_button);
    mFab.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        // editText view
        final EditText input = new EditText(MainActivity.this);
        input.setInputType(InputType.TYPE_CLASS_TEXT);
        input.setMaxLines(1);

        // create dialog
        new AlertDialog.Builder(MainActivity.this)
                .setTitle("sign up")
                .setMessage("Please enter your registered name")
                .setView(input)
                .setPositiveButton("Registration", new DialogInterface.OnClickListener() { //OK button settings
                  public void onClick(DialogInterface dialog, int whichButton) {
                    friend.add(input.getText().toString());
                    friend_adapter.notifyDataSetChanged();
                    dialog.dismiss();
                  }
                })
                .setNegativeButton("Cancel", new DialogInterface.OnClickListener() { // Cancelボタンの設定
                  public void onClick(DialogInterface dialog, int whichButton) {
                    dialog.dismiss();
                  }
                })
                .show();

        behavior.setState(BottomSheetBehavior.STATE_HIDDEN);
      }
    });

    // menu list
    ArrayAdapter<String> menu_adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1);
    menu_adapter.add("rename");
    menu_adapter.add("Delete");
    menu_adapter.add("close");

    ListView menuList = findViewById(R.id.list_menu);
    menuList.setAdapter(menu_adapter);
    menuList.setOnItemClickListener(new AdapterView.OnItemClickListener() {
      @Override
      public void onItemClick(AdapterView<?> adapterView, View view, final int i, long l) {
        switch (i) {
          case 0:
            // editText view
            final EditText input = new EditText(MainActivity.this);
            input.setInputType(InputType.TYPE_CLASS_TEXT);
            input.setMaxLines(1);

            // create dialog
            new AlertDialog.Builder(MainActivity.this)
                    .setTitle("rename")
                    .setMessage(friend.get(position) + "Rename")
                    .setView(input)
                    .setPositiveButton("Change", new DialogInterface.OnClickListener() { //OK button settings
                      public void onClick(DialogInterface dialog, int whichButton) {
                        friend.set(position, input.getText().toString());
                        friend_adapter.notifyDataSetChanged();
                        dialog.dismiss();
                      }
                    })
                    .setNegativeButton("Cancel", new DialogInterface.OnClickListener() { // Cancelボタンの設定
                      public void onClick(DialogInterface dialog, int whichButton) {
                        dialog.dismiss();
                      }
                    })
                    .show();
            break;
          case 1:
            // create dialog
            new AlertDialog.Builder(MainActivity.this)
                    .setTitle("Delete")
                    .setMessage(friend.get(position) + "Do you really want to delete")
                    .setPositiveButton("Delete", new DialogInterface.OnClickListener() { //OK button settings
                      public void onClick(DialogInterface dialog, int whichButton) {
                        friend.remove(position);
                        friend_adapter.notifyDataSetChanged();
                        dialog.dismiss();
                      }
                    })
                    .setNegativeButton("Cancel", new DialogInterface.OnClickListener() { // Cancelボタンの設定
                      public void onClick(DialogInterface dialog, int whichButton) {
                        dialog.dismiss();
                      }
                    })
                    .show();
            break;
        }
        behavior.setState(BottomSheetBehavior.STATE_HIDDEN);
      }
    });
  }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
                                                 xmlns:app="http://schemas.android.com/apk/res-auto"
                                                 android:layout_width="match_parent"
                                                 android:layout_height="match_parent">

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        app:theme="@style/ThemeOverlay.AppCompat.ActionBar"/>

    <ListView
        android:id="@+id/list_friend"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

  </LinearLayout>

  <LinearLayout
      android:id="@+id/bottom_sheet"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="@android:color/white"
      android:orientation="vertical"
      app:behavior_hideable="true"
      app:behavior_peekHeight="200dp"
      app:layout_behavior="@string/bottom_sheet_behavior">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="15dp"
        android:layout_marginTop="15dp"
        android:text="Menu"
        android:textSize="18sp"/>

    <ListView
        android:id="@+id/list_menu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:divider="@color/white"/>

  </LinearLayout>

  <android.support.design.widget.FloatingActionButton
      android:id="@+id/fab_button"
      android:layout_width="56dp"
      android:layout_height="56dp"
      android:layout_margin="20dp"
      app:layout_anchor="@id/bottom_sheet"
      app:layout_anchorGravity="right|top"
      app:srcCompat="@drawable/ic_add_white_24dp"/>

</android.support.design.widget.CoordinatorLayout>

I think it's a good idea to copy and paste it as it is to make it work. There is no such difficult description, so the shortcut is to fumble and deepen your understanding while making some changes.