Expandable list view move group icon indicator to right

Question

As regards to expandable list view, the group icon indicator is positioned to the left side, can I move the indicator and positioned it to the right? Thanks.

Answer 1

The best way to do this is below but not for all Android Version So use 2nd or third method specified below

ViewTreeObserver vto = mExpandableListView.getViewTreeObserver();

    vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
                 mExpandableListView.setIndicatorBounds(mExpandableListView.getRight()- 40, mExpandableListView.getWidth());
        }
    });

or this:

@Override
public void onWindowFocusChanged(boolean hasFocus) {
    super.onWindowFocusChanged(hasFocus);
    mExpandableListView.setIndicatorBounds(mExpandableListView.getRight()- 40, mExpandableListView.getWidth());
} 

will move that indicator to right of list view even on device and on tab also.

or you can do this in a postdelayed thread.

 (new Handler()).post(new Runnable() {

        @Override
        public void run() {
              mExpandableListView.setIndicatorBounds(mExpandableListView.getRight()- 40, mExpandableListView.getWidth());
        }
    });

Answer 2

Expandable list view move group icon indicator to right

The setIndicatorBounds(int left, int right) is used to set the indicator bounds for the group view of an expandable list view.

explvList.setIndicatorBounds(width-GetDipsFromPixel(35), width-GetDipsFromPixel(5));
Here width means device width.

/Convert pixel to dip 
public int GetDipsFromPixel(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);
} 

FYI: The width is equal to width specified in the setBounds method. Here in my snippet it is 35.Other wise the icon is disturbed. For more details you may visit here:

• https://developer.android.com/reference/android/widget/ExpandableListView.html#setIndicatorBounds(int,%20int)

• https://developer.android.com/reference/android/widget/ExpandableListView.html#setIndicatorBoundsRelative(int,%20int)

Answer 3

I have tried to using setIndicatorBounds and setIndicatorBoundsRelative but the icon not showing as nice as expected. So I change my code as per below :

create a group layout :

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:background="@drawable/header_selector" >

    <ImageView
        android:id="@+id/icon"
        android:layout_width="25dp"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="12dp"
        android:layout_marginRight="12dp"
        android:contentDescription="@string/desc_list_item_icon"
        android:src="@drawable/ic_home" />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_toRightOf="@id/icon"
        android:gravity="center_vertical"
        android:minHeight="?android:attr/listPreferredItemHeightSmall"
        android:paddingRight="40dp"
        android:textAppearance="?android:attr/textAppearanceListItemSmall"
        android:textColor="@color/list_item_title" />

    <TextView
        android:id="@+id/counter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginRight="8dp"
        android:background="@drawable/counter_bg"
        android:textColor="@color/counter_text_color" />

    <ImageView
        android:id="@+id/icon_expand"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="200dp"
        android:layout_toRightOf="@+id/counter"
        android:contentDescription="@string/desc_list_item_icon"
        android:src="@drawable/navigation_expand"
        android:visibility="visible" />

    <ImageView
        android:id="@+id/icon_collapse"
        android:layout_width="25dp"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="200dp"
        android:layout_toRightOf="@+id/counter"
        android:contentDescription="@string/desc_list_item_icon"
        android:src="@drawable/navigation_collapse"
        android:visibility="gone" /> 

</RelativeLayout>

and using this layout in adapter class inside getGroupView method :

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

        NavDrawerItem itemHeader = (NavDrawerItem) getGroup(groupPosition);

        LayoutInflater inflater = (LayoutInflater) this.context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        View view = null;
        if (convertView == null) {
            view = (View) inflater.inflate(R.layout.drawer_header_item, null);
        } else {
            view = convertView;
        }

        ImageView icon = (ImageView) view.findViewById(R.id.icon);

        if (itemHeader.isIconVisible()) {
            icon.setImageResource(itemHeader.getIcon());
        } else {
            icon.setVisibility(View.GONE);
        }

        TextView textTitle = (TextView) view.findViewById(R.id.title);
        textTitle.setText(" " + itemHeader.getTitle());

        TextView textCount = (TextView) view.findViewById(R.id.counter);

        if (itemHeader.getCounterVisibility()) {
            textCount.setText(itemHeader.getCount());
        } else {
            textCount.setVisibility(View.GONE);
        }

        ImageView iconExpand = (ImageView) view.findViewById(R.id.icon_expand);
        ImageView iconCollapse = (ImageView) view
                .findViewById(R.id.icon_collapse);

        if (isExpanded) {
            iconExpand.setVisibility(View.GONE);
            iconCollapse.setVisibility(View.VISIBLE);
        } else {
            iconExpand.setVisibility(View.VISIBLE);
            iconCollapse.setVisibility(View.GONE);
        }

        if (getChildrenCount(groupPosition) == 0) {
            iconExpand.setVisibility(View.GONE);
            iconCollapse.setVisibility(View.GONE);
        }

        return view;
    }

With this method you can adjust the position of the expand/collapse icon properly. hope it helps.

Answer 4

Write this code in Expandable Base adapter.

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

    String headerTitle = (String) getGroup(groupPosition);
    if (convertView == null) {
        LayoutInflater infalInflater = (LayoutInflater) this._context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        convertView = infalInflater.inflate(R.layout.list_group, null);
    }

    TextView lblListHeader = (TextView) convertView
            .findViewById(R.id.lblListHeader);
     imgs = (ImageView) convertView
            .findViewById(R.id.img_list);
    lblListHeader.setTypeface(null, Typeface.BOLD);
    lblListHeader.setText(headerTitle);
    if (isExpanded) {
  imgs.setImageResource(R.drawable.up_arrow);
    }
    else {
        imgs.setImageResource(R.drawable.downs_arrow);
    }

    return convertView;
}

• List item

Answer 5

All XML solution! I found a better way of tackling this issue. This does not require you to mess with display metrics, no need to programmatically hack it.

This is what you need to do:

1) set layout direction to right-to-left

<ExpandableListView
...
android:layoutDirection="rtl" />

2) make sure your list item layout includes this (yes, you'll need custom layout):

android:gravity="left" //to adjust the text to align to the left again
android:layoutDirection="ltr"  //OR this line, based on your layout

And you are good to go!

Answer 6

I'm using the following short piece inspired by this sample that requires two drawables on the folder:

if (isExpanded) {
    ListHeader.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.up, 0);
} else {
    ListHeader.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.down, 0);
} 

Anyway, I had to adopt goodKode's solution as well "to get rid off" the default arrows.

So, I'd advise to stick with the simple solution previously provided as it's the most minimalist and precise approach.