[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!

material.gif

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'
}
スクリーンショット 2017-09-23 22.09.48.png

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.

Recommended Posts

[Android] I tried to make a material list screen with ListView + Bottom Sheet
I want to make a list with kotlin and java!
I tried to make an Android application with MVC now (Java)
I tried to make a group function (bulletin board) with Rails
I tried to make a simple face recognition Android application using OpenCV
[iOS] I tried to make a processing application like Instagram with Swift
I tried to make a Web API that connects to DB with Quarkus
I tried to make Basic authentication with Java
I tried to break a block with java (1)
I tried to make a machine learning application with Dash (+ Docker) part3 ~ Practice ~
I tried to implement a function equivalent to Felica Lite with HCE-F of Android
I tried to make a simple game with Javafx ① "Let's find happiness game" (unfinished)
I tried to make a login function in Java
I tried to create a shopping site administrator function / screen with Java and Spring
I tried to make a simple game with Javafx ① "Let's find happiness game" (unfinished version ②)
I tried to make an introduction to PHP + MySQL with Docker
I tried to modernize a Java EE application with OpenShift.
I want to make a function with kotlin and java!
I tried using Hotwire to make Rails 6.1 scaffold a SPA
I tried to make a client of RESAS-API in Java
I tried to create a padrino development environment with Docker
I tried to make a message function of Rails Tutorial extension (Part 2): Create a screen to display
I tried to interact with Java
Make a list map with LazyMap
How to make a splash screen
I tried to create a simple map app in Android Studio
I want to make a button with a line break with link_to [Note]
[Unity] I tried to make a native plug-in UniNWPathMonitor using NWPathMonitor
[Java] I tried to make a maze by the digging method ♪
I tried to make a machine learning application with Dash (+ Docker) part2 ~ Basic way of writing Dash ~
I tried to make a parent class of a value object in Ruby
Make a family todo list with Sinatra
I tried to get started with WebAssembly
I tried to make an automatic backup with pleasanter + PostgreSQL + SSL + docker
I tried to make a machine learning application with Dash (+ Docker) part1 ~ Environment construction and operation check ~
I tried to build a Firebase application development environment with Docker in 2020
Make a family todo list with Sinatra
I made a virtual currency arbitrage bot and tried to make money
I tried playing with BottomNavigationView a little ①
I tried to make a talk application in Java using AI "A3RT"
I made a rock-paper-scissors app with android
I tried to implement ModanShogi with Kinx
I tried to make a program that searches for the target class from the process that is overloaded with Java
[LINE @] I tried to make a Japanese calendar Western calendar conversion BOT [Messaging API]
I tried to create a portfolio with AWS, Docker, CircleCI, Laravel [with reference link]
A story when I tried to make a video by linking Processing and Resolume
[Java] I tried to connect using a connection pool with Servlet (tomcat) & MySQL & Java
I tried to automatically generate a class to convert from a data class to a Bundle with APT
I tried to clone a web application full of bugs with Spring Boot
[Small story] I tried to make the java ArrayList a little more convenient
[Android] I want to make QA easier ... That's right! Let's make a debug menu!
When I tried to use a Wacom tablet with ubuntu 20.04, I didn't recognize it.
I tried to verify AdoptOpenJDK 11 (11.0.2) with Docker image
I tried to manage struts configuration with Coggle
I tried to manage login information with JMX
I tried to develop a man-hour management tool
I did Java to make (a == 1 && a == 2 && a == 3) always true
Make software that mirrors Android screen to PC 1
I wanted to make (a == 1 && a == 2 && a == 3) true in Java
I tried to develop a website to record expenses.
I tried to implement a server using Netty