Change Expandable Indicator in Expandablelistview

Change expandable indicator in ExpandableListView

expandable listview

 <ExpandableListView
    android:id="@+id/expandable_list"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:groupIndicator="@drawable/group_indicator"
    android:transcriptMode="alwaysScroll" />

setindicator here iam useing setindicator code like this this working nice

 DisplayMetrics metrics = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(metrics);
    int width = metrics.widthPixels; 

 mExpandableList = (ExpandableListView)findViewById(R.id.expandable_list);
 mExpandableList.setIndicatorBounds(width - GetPixelFromDips(50), width - GetPixelFromDips(10));  

   public int GetPixelFromDips(float pixels) {
    // Get the screen's density scale 
    final float scale = getResources().getDisplayMetrics().density;
    // Convert the dps to pixels, based on density scale
    return (int) (pixels * scale + 0.5f);
}

res/drawable/group_indicator

  <?xml version="1.0" encoding="utf-8"?>

     <selector xmlns:android="http://schemas.android.com/apk/res/android">            
           <item android:drawable="@drawable/arrow_right" android:state_empty="true">  </item>            
           <item android:drawable="@drawable/arrow_down" android:state_expanded="true"></item>                
           <item android:drawable="@drawable/arrow_right"></item>
     </selector>

Change icon of expandable list view

Change your icon size to 32 X 32, put your icon in drawable-mdpi and then try this code

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
       <item android:drawable="@drawable/expandedicon" android:state_expanded="true"/>
       <item android:drawable="@drawable/defaulticon"/>
    </selector>

Put on the right the indicator of an ExpandableListView in Android

I don't know a way to do that from XML but i'll tell you a way to do so dynamically in your adapter.

First you have to remove group indicator from your xml

 <ExpandableListView [...] 
    android:groupIndicator="@null" />

Then in your layout of the parent add an imageview in the right position of your layout.

Then in your custom adapter do the following

public View getGroupView(int groupPosition, boolean isExpanded,
        View convertView, ViewGroup parent) {
  ...

    if (isExpanded) {
        groupHolder.img.setImageResource(R.drawable.group_down);
    } else {
        groupHolder.img.setImageResource(R.drawable.group_up);
    }
  ...

}

How to change ExpandableListView group indicator position?

setIndicatorBounds(int, int) does not work properly for Android 4.3.
They introduced a new method setIndicatorBoundsRelative(int, int) which works ok for 4.3.

public int GetPixelFromDips(float pixels) {
    // Get the screen's density scale 
    final float scale = getResources().getDisplayMetrics().density;
    // Convert the dps to pixels, based on density scale
    return (int) (pixels * scale + 0.5f);
}

@Override
public void onWindowFocusChanged(boolean hasFocus) {
    super.onWindowFocusChanged(hasFocus);
    DisplayMetrics metrics = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(metrics);
    int width = metrics.widthPixels; 
    if(android.os.Build.VERSION.SDK_INT < android.os.Build.VERSION_CODES.JELLY_BEAN_MR2) {
        explvList.setIndicatorBounds(width-GetPixelFromDips(35), width-GetPixelFromDips(5));
    } else { 
        explvList.setIndicatorBoundsRelative(width-GetPixelFromDips(35), width-GetPixelFromDips(5));
    }
}

android:change indicator icon and size of expandablelistview used for navigation

You can use the following code:

<ExpandableListView android:id="@+id/android:list"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    android:layout_marginTop="10dp"
    android:groupIndicator="@drawable/settings_selector" />

... where the setting_selector is:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:drawable="@drawable/up_arrow" 
         android:state_empty="true" />
   <item android:drawable="@drawable/down_arrow" 
         android:state_expanded="true" />
</selector>

ExpandableListView change drawable state_expanded

After long research and trial and error I did not find a way to make it work with states. However, I used the images itself like the following:

public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
    MOMenuItem headerTitle = (MOMenuItem) getGroup(groupPosition);

    LayoutInflater infalInflater = (LayoutInflater) this.mContext
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    LinearLayout linLayout = (LinearLayout) infalInflater.inflate(R.layout.list_header, parent, false);
    convertView = linLayout;

    View indicator = convertView.findViewById(R.id.indicator_image);

    if (indicator != null) {
        ImageView indicatorImage = (ImageView) indicator;
        if (getChildrenCount(groupPosition) == 0) {
            indicatorImage.setVisibility(View.INVISIBLE);
        } else {
            indicatorImage.setVisibility(View.VISIBLE);

            if (isExpanded) {
                indicatorImage.setImageResource(R.drawable.arrow_up);
            } else {
                indicatorImage.setImageResource(R.drawable.arrow_down);
            }
        }
    }

    ...
}

Sadly, the cleaner solution with a drawable and a state wasn't working. I hope this will help others stumbling upon this question.

Android: how to change the position of ExpandableListView Indicator?

Use setIndicatorBounds:

Sets the drawing bounds for the indicators (at minimum, the group
indicator is affected by this; the child indicator is affected by this
if the child indicator bounds are set to inherit).

Changing the location of indicator in ExpandableListView causing problems

Here's an example of custom expandable list view:

What you want to see if you apply this code in your new project:

create this code into activity

public class ExpActivity extends Activity
{

    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // Находим наш list 
        ExpandableListView listView = (ExpandableListView)findViewById(R.id.exListView);

        //Создаем набор данных для адаптера        
        ArrayList<ArrayList<String>> groups = new ArrayList<ArrayList<String>>();
        ArrayList<String> children1 = new ArrayList<String>();
        ArrayList<String> children2 = new ArrayList<String>();
        children1.add("Child_1");
        children1.add("Child_2");
        groups.add(children1);
        children2.add("Child_1");
        children2.add("Child_2");
        children2.add("Child_3");
        groups.add(children2);       
       //Создаем адаптер и передаем context и список с данными
        ExpListAdapter adapter = new ExpListAdapter(getApplicationContext(), groups);
        listView.setAdapter(adapter);
    }
} 

add expandableListView into main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<ExpandableListView
        android:id="@+id/exListView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:indicatorLeft="250dp"
        android:indicatorRight="300dp"
    />
</LinearLayout>

create an adapter class

public class ExpListAdapter extends BaseExpandableListAdapter {

    private ArrayList<ArrayList<String>> mGroups;
    private Context mContext;

    public ExpListAdapter (Context context,ArrayList<ArrayList<String>> groups){
        mContext = context;
        mGroups = groups;
    }

    @Override
    public int getGroupCount() {
        return mGroups.size();
    }

    @Override
    public int getChildrenCount(int groupPosition) {
        return mGroups.get(groupPosition).size();
    }

    @Override
    public Object getGroup(int groupPosition) {
        return mGroups.get(groupPosition);
    }

    @Override
    public Object getChild(int groupPosition, int childPosition) {
        return mGroups.get(groupPosition).get(childPosition);
    }

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

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

    @Override
    public boolean hasStableIds() {
        return true;
    }

    @Override
    public View getGroupView(int groupPosition, boolean isExpanded, View convertView,
                             ViewGroup parent) {

        if (convertView == null) {
            LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = inflater.inflate(R.layout.group_view, null);
        }

        if (isExpanded){
           //Изменяем что-нибудь, если текущая Group раскрыта
        }
        else{
            //Изменяем что-нибудь, если текущая Group скрыта
        }

        TextView textGroup = (TextView) convertView.findViewById(R.id.textGroup);
        textGroup.setText("Group " + Integer.toString(groupPosition));

        return convertView;

    }

    @Override
    public View getChildView(int groupPosition, int childPosition, boolean isLastChild,
                             View convertView, ViewGroup parent) {
        if (convertView == null) {
            LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = inflater.inflate(R.layout.child_view, null);
        }

        TextView textChild = (TextView) convertView.findViewById(R.id.textChild);
        textChild.setText(mGroups.get(groupPosition).get(childPosition));

        Button button = (Button)convertView.findViewById(R.id.buttonChild);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(mContext,"button is pressed",5000).show();
            }
        });

        return convertView;
    }

    @Override
    public boolean isChildSelectable(int groupPosition, int childPosition) {
        return true;
    }
}

the names of methods and parameters is quite informative. methods getGroupView and getChildView returns View for pparents and children accordingly. using the parameter isExpanded in the method getGroupView, we ca, for instance, change the back of group in different states. using LayoutInflater we use custom layout for our list.

group_view.xml

<?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="match_parent">
    <TextView
            android:id="@+id/textGroup"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_marginLeft="5dp"
            android:layout_marginTop="20dp"
            android:textColor="@android:color/white"
            android:textStyle="bold"
            />
</LinearLayout>

child_view.xml

<?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="match_parent">
  <TextView
     android:id="@+id/textChild"
     android:layout_width="wrap_content"
     android:layout_height="40dp"
     android:layout_marginLeft="20dp"
     android:layout_marginTop="20dp"
     android:textColor="@android:color/white"
     />
  <Button
     android:id="@+id/buttonChild"
     android:layout_width="100dp"
     android:layout_height="40dp"
     android:layout_marginLeft="150dp"
     android:layout_marginTop="10dp"
     android:text="Button"
     android:focusable="false"
     />
</LinearLayout>

in the child view we added a button, in the adapter method getChildView controlling its pressed. in the similar way we can add buttons and other elements in group_view.xml .

also, we can pin listeners to our list.

•OnChildClickListener — pressing on an element
•OnGroupCollapseListener – collapsing group
•OnGroupExpandListener – expanding group
•OnGroupClickListener – press on group

now lets look at groupIndicater - indicator of the group state. it's placement pointed in main.xml with parameters indicatorLeft, indicatorRigh - corresponding to left and right border. by default the indicator placed on the left side, what is not so cool.

also we can add custom images, for that, we need to add indicator.xml in the folder drawable with this code.

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_expanded="true"
          android:drawable="@drawable/imageOpen">
    </item>
    <item android:state_empty="true"
          android:drawable="@drawable/imageClose">
    </item>
</selector>

where imageOpen is for expanded group
imageClose is for collapsed group

next time we need to add a row for parameters of our list in main.xml

android:groupIndicator="@drawable/indicator"

---

Related Topics