Issue
I'm trying to create a design with multiple hexagon shape buttons.I'm able to create a single hexagon button, but in my case i have a list of items which need to be shown in a design pattern like below.
if such list design is possible through RecyclerView
that would be much better.
Solution
A bit tricky but here is how i solved it. Have a recyclerView like below
<android.support.v7.widget.RecyclerView
android:id="@+id/hexa_rcv"
android:layout_margin=""@dimen/hexa_dp""
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
make 2 folders inside res "values-sw360dp" and "values-sw400dp". create dimens.xml in both the folders. dimens.xml inside values-sw360dp should have
<resources>
<dimen name="margin_16_dp">16dp</dimen>
<dimen name="hexa_dp">25dp</dimen>
</resources>
dimens.xml inside values-sw400dp should have
<resources>
<dimen name="margin_16_dp">16dp</dimen>
<dimen name="hexa_dp">55dp</dimen>
</resources>
And one item for the recyclerView like below
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tv_1"
android:layout_width="100dp"
android:layout_height="100dp"
android:gravity="center"
android:textColor="@color/white"
android:textSize="18sp"
android:text="ICU_HDW"
android:background="@drawable/hexagon"/>
Next have a get the reference of recyclerView and set GridaLayoutManager with column size as 3. make every 5th item's span size as 2(so that 4th item will have span size 1 and 5th item will have size 2 hence both together will complete the row and next item will be placed in next row)
I have used kotlin here you can convert to java
RecyclerView hexaRcv = (RecyclerView) findViewById(R.id.hexa_rcv);
GridLayoutManager manager = new GridLayoutManager(this, 3);
manager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
@Override
public int getSpanSize(int position) {
int size = 1;
if ((position + 1) % 5 == 0){
size = 2;
}
return size;
}
});
hexaRcv.setLayoutManager(manager);
hexaRcv.setAdapter(new GridAdapter());
Below is the GridAdapter ()
public class GridAdapter extends RecyclerView.Adapter<GridAdapter.HexagonHolder> {
@Override
public GridAdapter.HexagonHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.hexa_tv, parent, false);
return new HexagonHolder(view);
}
@Override
public void onBindViewHolder(GridAdapter.HexagonHolder holder, int position) {
int pos = position + 1;
int topMargin = pxFromDp(holder.textView.getContext(), -17);
int leftMargin = pxFromDp(holder.textView.getContext(), 51); //3 times of 17
GridLayoutManager.LayoutParams param = (GridLayoutManager.LayoutParams) holder.textView.getLayoutParams();
if (pos < 4) {
param.setMargins(0, 0, 0, 0);
} else if ((pos + 1) % 5 == 0 || pos % 5 == 0) {
param.setMargins(leftMargin, topMargin, 0, 0);
} else {
param.setMargins(0, topMargin, 0, 0);
}
holder.textView.setLayoutParams(param);
}
@Override
public int getItemCount() {
return 17;
}
static class HexagonHolder extends RecyclerView.ViewHolder {
TextView textView;
HexagonHolder(View v) {
super(v);
textView = v.findViewById(R.id.tv_1);
}
}
private int pxFromDp(final Context context, final float dp) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, context.getResources().getDisplayMetrics());
}
}
for first 3 items no margin. After that all item will have a negative top margin of 75 (i.e. -75px). every 4th and 5th item will not only have top margin of -75 but will also have a left margin of 165.
You can use constant or actually calculate them based on screen width or use dip.
Below is the hexagon.xml save it in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="512dp"
android:height="512dp"
android:viewportWidth="512"
android:viewportHeight="512">
<path
android:fillColor="#148275"
android:pathData="M485.291,129.408l-224-128c-3.285-1.877-7.296-1.877-10.581,0l-224,128c-3.328,1.899-5.376,5.44-5.376,9.259v234.667
c0,3.819,2.048,7.36,5.376,9.259l224,128c1.643,0.939,3.456,1.408,5.291,1.408s3.648-0.469,5.291-1.408l224-128
c3.328-1.899,5.376-5.44,5.376-9.259V138.667C490.667,134.848,488.619,131.307,485.291,129.408z" />
</vector>
Answered By - hemant patel
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.