ExpandableListView - border around the parent and its children

Question

I have a view that uses an ExpandableListView that has a ton of logic around it and in adapters. For example, it looks like

I have a requirement to display the same view with a different skin that has extension / hide hiding and has a border around the parent and its children, something like this

I see that attributes have a border for the entire control, or just a parent or an individual child, but nothing has a border around the parent and its children.

Has anyone done something like this? If you do not use Expandablelistview and recreate the view, is there anyway I can reach the border?

Edit 1:

, , .

2:

, ,

setting parent to            ┎─┒ 

and all-but-last children to ┃ ┃

and last child to            ┖─┚

,

- , , .

Answer 1

EDIT , ItemDecoration ExpandableListView, RecyclerView ItemDecoration, :

ExpandableListView

public class ExpandableListViewItemDecoration extends ExpandableListView {
private List<ItemDecorationListView> itemDecorations = new ArrayList<>(1);

/* ... */

public void addItemDecoration(ItemDecorationListView item){
    itemDecorations.add(item);
}

@Override
public void draw(Canvas canvas) {
    super.draw(canvas);
    final int count = itemDecorations.size();
    for (int i = 0; i < count; i++) {
        itemDecorations.get(i).onDrawOver(canvas, this);
    }
}

ItemDecorationListView:

public abstract class ItemDecorationListView {

    public void onDrawOver(Canvas c, ListView parent) {
    }
}

ItemDecorator:

public class ItemDecoratorBorderListView extends ItemDecorationListView {

private final Paint paint = new Paint();
private final int size;

public ItemDecoratorBorderListView(int size, @ColorInt int color) {
    this.size = size;
    paint.setColor(color);
    paint.setStrokeWidth(size);
    paint.setStyle(Paint.Style.STROKE);
}

public static final String TAG = ItemDecoratorBorderListView.class.getSimpleName();

@Override
public void onDrawOver(Canvas c, ListView parent) {
    super.onDrawOver(c, parent);
    int childCount = parent.getChildCount();
    for (int i = 0; i < childCount; i++) {
        View child = parent.getChildAt(i);
        if (isHeader(child, parent, i)) {
            for (int j = i + 1; j < childCount; j++) {
                View childEnd = parent.getChildAt(j);
                boolean end = isHeader(childEnd, parent, i) || j == childCount - 1;
                if (end) {
                    if (BuildConfig.DEBUG) { Log.d(TAG, String.format(Locale.ENGLISH, "Draw called i: %d, j: %d", i, j)); }
                    childEnd = parent.getChildAt(j - 1);
                    if (j == childCount - 1) { childEnd = parent.getChildAt(j); }
                    float top = child.getTop() + child.getTranslationY() + size + child.getPaddingTop();
                    float bottom = childEnd.getBottom() + childEnd.getTranslationY() - size - childEnd
                            .getPaddingBottom();

                    float right = child.getRight() + child.getTranslationX() - size - child.getPaddingRight();
                    float left = child.getLeft() + child.getTranslationX() + size + child.getPaddingLeft();
                    c.drawRect(left, top, right, bottom, paint);
                    i = j - 1;
                    break;
                }
            }
        }
    }
}

public boolean isHeader(View child, ListView parent, int position) {
    //You need to set an Id for your layout
    return child.getId() == R.id.header;
}

}

ExpandableListView:

expandableList.addItemDecoration(new ItemDecoratorBorderListView(
            getResources().getDimensionPixelSize(R.dimen.stroke_size),
            Color.GRAY
    ));

:

RecyclerView ItemDecoration, , , , .

:

public class ItemDecoratorBorder extends RecyclerView.ItemDecoration {

private final Paint paint = new Paint();
private final int size;

public ItemDecoratorBorder(int size, @ColorInt int color) {
    this.size = size;
    paint.setColor(color);
    paint.setStrokeWidth(size);
    paint.setStyle(Paint.Style.STROKE);
}

public static final String TAG = ItemDecoratorBorder.class.getSimpleName();

@Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
    super.onDrawOver(c, parent, state);
    if (parent.getLayoutManager() == null) { return; }
    int childCount = parent.getChildCount();
    RecyclerView.LayoutManager lm = parent.getLayoutManager();
    for (int i = 0; i < childCount; i++) {
        View child = parent.getChildAt(i);
        if (isHeader(child, parent)) {
            for (int j = i + 1; j < childCount; j++) {
                View childEnd = parent.getChildAt(j);
                boolean end = isHeader(childEnd, parent) || j == childCount - 1;
                if (end) {
                    if (BuildConfig.DEBUG) { Log.d(TAG, String.format(Locale.ENGLISH, "Draw called i: %d, j: %d", i, j)); }
                    childEnd = parent.getChildAt(j - 1);
                    if (j == childCount - 1) {
                        childEnd = parent.getChildAt(j);
                    }
                    float top = child.getTop() + child.getTranslationY() + size + child.getPaddingTop();
                    float bottom = lm.getDecoratedBottom(childEnd) + childEnd.getTranslationY() - size - childEnd.getPaddingBottom();

                    float right = lm.getDecoratedRight(child) + child.getTranslationX() - size - child.getPaddingRight();
                    float left = lm.getDecoratedLeft(child) + child.getTranslationX() + size + child.getPaddingLeft();
                    c.drawRect(left, top, right, bottom, paint);
                    i = j - 1;
                    break;
                }
            }
        }
    }
}

public boolean isHeader(View child, RecyclerView parent) {
    int viewType = parent.getLayoutManager().getItemViewType(child);
    return viewType == R.layout.layout_header;
}

, .

my github repo

Answer 2

, , recycleView listView. , :

- ┎─┒, - : ┎ ┒, : ──.

: `groupbg.xml:

    <?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#000" />
        </shape>
    </item>
    <item android:left="2dp" android:top="2dp" android:right="2dp">
        <shape android:shape="rectangle">
            <solid android:color="#fff" />
        </shape>
    </item>
</layer-list>

normalchild.xml:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid android:color="#000" />
    </shape>
</item>
<item android:left="2dp" android:right="2dp">
    <shape android:shape="rectangle">
        <solid android:color="#fff" />
    </shape>
</item>

bottomchild.xml:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid android:color="#000" />
    </shape>
</item>
<item android:bottom="2dp">
    <shape android:shape="rectangle">
        <solid android:color="#fff" />
    </shape>
</item>

:

private int childrenCount;


    @Override
    public int getChildrenCount(int groupPosition) {

        return childrenCount = data.get(groupPosition).getItems().length;
    }



    @Override
    public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
        View view;
        if (convertView == null){
            view = LayoutInflater.from(context).inflate(R.layout.item, parent, false);
        }
        else {
            view = convertView;
        }


        view.setBackground(context.getResources().getDrawable(R.drawable.groupbg));
        TextView lblNumber = view.findViewById(R.id.lblNumber);
        TextView lblName = view.findViewById(R.id.lblName);

        lblNumber.setText((groupPosition + 1) + ".");
        lblName.setText(((TestModel)getGroup(groupPosition)).getCategory());

        return view;
    }



    @Override
    public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {

        View view;
        if (convertView == null){
            view = LayoutInflater.from(context).inflate(R.layout.item_child, parent, false);
        }
        else {
            view = convertView;
        }

        TextView lblNumber = view.findViewById(R.id.lblNumber);
        TextView lblName = view.findViewById(R.id.lblName);

        lblNumber.setText((childPosition + 1)+ ".");
        lblName.setText((String)getChild(groupPosition, childPosition));

        if (childPosition < childrenCount)
            view.setBackground(context.getResources().getDrawable(R.drawable.normalchild));
        else view.setBackground(context.getResources().getDrawable(R.drawable.bottomchild));
        return view;
    }

Answer 3

. Custom RecyclerView, , ExpandableListView.