how to align segment item?

I want to align the data 11 to the left. how to align?
[Segment item xml]
<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"/>
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>

columnCount = 4 segmentItemCount = 6
In this case, how do I align to the left?
For now layouting algorithm doesn't support such a case, I will try to add support for this