how to align segment item?

[YKW93]

I want to align the data 11 to the left. how to align?

[Segment item xml] <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:layout_marginBottom="5dp">

<RelativeLayout
        android:layout_width="65dp"
        android:layout_height="65dp">

    <com.aby.lib.widget.CircleImageView
            android:id="@+id/civ_fuel_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:border_color="@color/color_ff4d4d4d"
            app:border_width="1dp"
            android:layout_centerInParent="true"
            android:src="@android:color/white"/>

    <TextView
            android:id="@+id/tv_fuel_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:textColor="@color/color_ff4d4d4d"
            android:textSize="14sp"
            android:text="@string/dummy"/>

</RelativeLayout>

[Adapter class]

public class ColorSegmentAdapter extends SegmentAdapter<ColorSegmentAdapter.SegmentColor, ColorSegmentAdapter.ColorSegmentVH> {

    private Context mContext;

    public ColorSegmentAdapter(Context context) {
        this.mContext = context;
    }

    @NonNull
    @Override
    protected ColorSegmentVH onCreateViewHolder(@NonNull LayoutInflater layoutInflater, ViewGroup parent, int viewType) {
        return new ColorSegmentVH(LayoutInflater.from(mContext).inflate(R.layout.circle_text_segment, parent, false));
    }

    class ColorSegmentVH extends SegmentViewHolder<SegmentColor> {

        @BindView(R.id.civ_fuel_image)
        CircleImageView civFuelImage;

        @BindView(R.id.tv_fuel_text)
        TextView tvFuelText;

        @BindView(R.id.rl_check_icon)
        RelativeLayout rlCheckIcon;

        View mRootView;

        public ColorSegmentVH(@NonNull View sectionView) {
            super(sectionView);
            ButterKnife.bind(this, sectionView);
            civFuelImage.setBorderWidth(8);
            mRootView = sectionView;
        }

        @Override
        protected void onSegmentBind(SegmentColor segmentData) {
            if (segmentData.getTitle().equals("")) {
                mRootView.setVisibility(View.INVISIBLE);
                mRootView.setSelected(false);
            }
            else {
                civFuelImage.setImageResource(segmentData.getBackgroundColor());
                civFuelImage.setBorderColor(mContext.getResources().getColor(segmentData.getUnSelectBorderColor(), null));
                tvFuelText.setText(segmentData.getTitle());
                tvFuelText.setTextColor(mContext.getResources().getColor(segmentData.getTitleColor(), null));
            }
        }

        @Override
        public void onSegmentSelected(boolean isSelected, boolean isReselected) {
            super.onSegmentSelected(isSelected, isReselected);
            if (isSelected || isReselected) {
                civFuelImage.setBorderColor(mContext.getResources().getColor(getSegmentData().getSelectBorderColor(), null));
                rlCheckIcon.setVisibility(View.VISIBLE);
            }
            else {
                civFuelImage.setBorderColor(mContext.getResources().getColor(getSegmentData().getUnSelectBorderColor(), null));
                rlCheckIcon.setVisibility(View.INVISIBLE);
            }
        }
    }

    public static class SegmentColor {
        private int backgroundColor;
        private int unSelectBorderColor;
        private int selectBorderColor;
        private int titleColor;
        private String title;

        public SegmentColor(int backgroundColor, int unSelectBorderColor, int titleColor, String title) {
            this(backgroundColor, R.color.colorPrimary, unSelectBorderColor, titleColor, title);
        }

        public SegmentColor(int backgroundColor, int selectBorderColor, int unSelectBorderColor, int titleColor, String title) {
            this.backgroundColor = backgroundColor;
            this.selectBorderColor = selectBorderColor;
            this.unSelectBorderColor = unSelectBorderColor;
            this.titleColor = titleColor;
            this.title = title;
        }

        public int getBackgroundColor() {
            return backgroundColor;
        }

        public void setBackgroundColor(int backgroundColor) {
            this.backgroundColor = backgroundColor;
        }

        public String getTitle() {
            return title;
        }

        public void setTitle(String title) {
            this.title = title;
        }

        public int getBorderColor() {
            return unSelectBorderColor;
        }

        public void setBorderColor(int borderColor) {
            this.unSelectBorderColor = borderColor;
        }

        public int getUnSelectBorderColor() {
            return unSelectBorderColor;
        }

        public void setUnSelectBorderColor(int unSelectBorderColor) {
            this.unSelectBorderColor = unSelectBorderColor;
        }

        public int getSelectBorderColor() {
            return selectBorderColor;
        }

        public void setSelectBorderColor(int selectBorderColor) {
            this.selectBorderColor = selectBorderColor;
        }

        public int getTitleColor() {
            return titleColor;
        }

        public void setTitleColor(int titleColor) {
            this.titleColor = titleColor;
        }
    }

}

[color setting]

segColorControl.setAdapter(colorSegmentAdapter);

segmentColors.add(new ColorSegmentAdapter.SegmentColor(android.R.color.white, R.color.color_ff9b9b9b, android.R.color.black, "1"));
        segmentColors.add(new ColorSegmentAdapter.SegmentColor(R.color.color_F9F7EA, android.R.color.white, android.R.color.black, "2"));
        segmentColors.add(new ColorSegmentAdapter.SegmentColor(R.color.color_A9A9A9, android.R.color.white, android.R.color.black, "3"));
        segmentColors.add(new ColorSegmentAdapter.SegmentColor(android.R.color.black, android.R.color.white, android.R.color.white, "4"));
        segmentColors.add(new ColorSegmentAdapter.SegmentColor(R.color.color_FF2600, android.R.color.white, android.R.color.white, "5"));
        segmentColors.add(new ColorSegmentAdapter.SegmentColor(R.color.color_945200, android.R.color.white, android.R.color.white, "6"));
        segmentColors.add(new ColorSegmentAdapter.SegmentColor(R.color.color_FFFB00, android.R.color.white, android.R.color.black, "7"));
        segmentColors.add(new ColorSegmentAdapter.SegmentColor(R.color.color_0433FF, android.R.color.white, android.R.color.white, "8"));
        segmentColors.add(new ColorSegmentAdapter.SegmentColor(R.color.color_008F00, android.R.color.white, android.R.color.white, "9"));
        segmentColors.add(new ColorSegmentAdapter.SegmentColor(R.color.color_942193, android.R.color.white, android.R.color.white, "10"));
        segmentColors.add(new ColorSegmentAdapter.SegmentColor(android.R.color.white, R.color.color_ff9b9b9b, android.R.color.black, "11"));

segColorControl.addSegments(segmentColors);
        segColorControl.notifyConfigIsChanged();

[SegmentedControl]

<segmented_control.widget.custom.android.com.segmentedcontrol.SegmentedControl
                        android:id="@+id/seg_color_control"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="15dp"
                        app:columnCount="5"/>

[RobertApikyan]

The segmented control algorithm for layout do not support such a case, however this could be achieved with some little hacking ...

Here is the result

Wrap parent RelativeLayout in circle_text_segment.xml with FrameLayout as shown below

<FrameLayout android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <RelativeLayout
        android:layout_width="65dp"
        android:layout_height="65dp">

        <ImageView
            android:id="@+id/civ_fuel_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:src="@android:color/white"/>

        <TextView
            android:id="@+id/tv_fuel_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:textSize="14sp"/>

    </RelativeLayout>

</FrameLayout>

[YKW93]

columnCount = 4 segmentItemCount = 6

In this case, how do I align to the left?

[RobertApikyan]

For now layouting algorithm doesn't support such a case, I will try to add support for this