Android UI controls – basic usage of ExpandableListView

Hello viewer, You can now have our Tutorial Lessons in your android mobile device and read it offline.
Download kotlin Programming APP on PlayStore
Download Website SEO Lessons APP on PlayStore

ExpandableListView can display a view that scrolls vertically to show the entries in the two-level list, which is different from the list view (ListView). ExpandableListView allows two levels: a level list has a secondary list.
For example, in the phone settings, for the classification, have a very good effect. Mobile QQ is also the effect of this.

Android UI controls - basic usage of ExpandableListView - Android UI controls - basic usage of ExpandableListView - Android UI controls - basic usage of ExpandableListView - ExpandableListView

Use the general idea of ​​ExpandableListView

(1) to set the adapter to ExpandableListView, then you must first set the data source.

(2) data source, here is the adapter class ExpandableAdapter, this method inherits the BaseExpandableListAdapter , need to rewrite the inside of the 10 methods.
Data source, the use of a custom View layout, this time according to their own needs, to set the group and sub-layout style.
GetChildView () and getGroupView () methods to set the custom layout.

(3) data source set up directly to the ExpandableListView.setAdapter () to achieve this shrink function.

ExpandableListView complete code implementation

(1) activity_main.xml: Place an ExpandableListView control inside

<?xml version="1.0" encoding="utf-8" ?> 
<RelativeLayout  
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:paddingBottom= "@dimen/activity_vertical_margin" 
 android:paddingLeft= "@dimen/activity_horizontal_margin" 
 android:paddingRight= "@dimen/activity_horizontal_margin" 
 android:paddingTop= "@dimen/activity_vertical_margin" 
 tools:context= "com.smyhvae.expandablelistviewdemo.MainActivity" > 

<ExpandableListView 
 android:id= "@+id/expandableListView" 
 android:layout_width= "match_parent"  
android:layout_height= "wrap_content" /> 
</RelativeLayout>

 

(2) item_group.xml: the layout of the primary list of items

<?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:background="#cccccc"
              android:orientation="horizontal">

    <TextView
        android:id="@+id/tv_group"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:gravity="center"
        android:text="group text"
        android:textColor="#000000"
        />

</LinearLayout>

 

(3) item_child.xml: the layout of the second list of items

 

<?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:gravity="center"
              android:orientation="horizontal">

    <ImageView
        android:id="@+id/iv_child"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@mipmap/ic_launcher"/>

    <TextView
        android:id="@+id/tv_child"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="item text"
        android:textColor="#000000"/>

</LinearLayout>

 

(4) MainActivity.java:

 

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.ExpandableListView;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends Activity {

    //View
    private ExpandableListView expandableListView;

    // Model: Defined data
    private String[] groups = {"A", "B", "C"};

    // Note that the character array is not written{{"A1,A2,A3,A4"}, {"B1,B2,B3,B4,B5"}, {"C1,C2,C3,C4"}}
    private String[][] childs = {{"A1", "A2", "A3", "A4"}, {"A1", "A2", "A3", "B4"}, {"A1", "A2", "A3", "C4"}};


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        expandableListView = (ExpandableListView) findViewById(R.id.expandableListView);

        expandableListView.setAdapter(new MyExpandableListView());

    }


   // Customize the adapter for the ExpandableListView
    class MyExpandableListView extends BaseExpandableListAdapter {

        // Returns the number of first-level lists
        @Override
        public int getGroupCount() {
            return groups.length;
        }

        // returns the number of each secondary list
        @Override
        public int getChildrenCount(int groupPosition) { // The parameter groupPosition represents the first-level list
            Log.d("smyhvae", "-->" + groupPosition);
            return childs[groupPosition].length;
        }

        // return a single item of the first list (the returned object)
        @Override
        public Object getGroup(int groupPosition) {
            return groups[groupPosition];
        }

        // return a single item in the secondary list (the returned object)
        @Override
        public Object getChild(int groupPosition, int childPosition) {
            return childs[groupPosition][childPosition];  // Do not write it wrongly. groups[groupPosition][childPosition]
        }

        @Override
        public long getGroupId(int groupPosition) {
            return groupPosition;
        }

        @Override
        public long getChildId(int groupPosition, int childPosition) {
            return childPosition;
        }

        // Is the id of each item fixed? Generally true
        @Override
        public boolean hasStableIds() {
            return true;
        }

        // [IMPORTANT] Fill the first level list
        @Override
        public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {

            if (convertView == null) {
                convertView = getLayoutInflater().inflate(R.layout.item_group, null);
            } else {

            }
            TextView tv_group = (TextView) convertView.findViewById(R.id.tv_group);
            tv_group.setText(groups[groupPosition]);
            return convertView;
        }

        // [IMPORTANT] Fill the secondary list
        @Override
        public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {

            if (convertView == null) {
                convertView = getLayoutInflater().inflate(R.layout.item_child, null);
            }

            ImageView iv_child = (ImageView) convertView.findViewById(R.id.iv_child);
            TextView tv_child = (TextView) convertView.findViewById(R.id.tv_child);

            //iv_child.setImageResource(resId);
            tv_child.setText(childs[groupPosition][childPosition]);

            return convertView;
        }

   // Can the item in the secondary list be selected? Can be changed to true
        @Override
        Public boolean isChildSelectable (int groupPosition, int childPosition) {
            Return true;
        }
    }


}

About The Author

Related posts

Leave a Reply