Creating a Custom grid pattern
Multi tool use
Clash Royale CLAN TAG#URR8PPPCreating a Custom grid pattern
Gridview Image
I want to create a grid view like in the image I have attached for the project in this company I am working for. I have tried both with Flexbox Layout manager and staggered grid view. But whenever I set top margin for the centre images the row height of the recycler view increases, so I am unable to achieve the interlocking design I want. I have added my code, please tell me what I am doing wrong?.
Main Activity
public class MainActivity extends AppCompatActivity {
ArrayList<String> xdx;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
xdx=new ArrayList<>();
for(int e=0;e<=50;e++)
{
if(e%2==0) {
xdx.add("http://www.gstatic.com/webp/gallery/4.jpg");
}
else
{
xdx.add(e, "https://gstatic/userimage/female.jpg");
}
}
int y=1;
recyclerx ddt=new recyclerx(MainActivity.this,xdx);
// recyclerxz ddtx=new recyclerxz(MainActivity.this,xdx);
RecyclerView recyclerView = (RecyclerView) findViewById(R.id.ede);
FlexboxLayoutManager layoutManager = new FlexboxLayoutManager(MainActivity.this);
layoutManager.setFlexWrap(FlexWrap.WRAP);
layoutManager.setFlexDirection(FlexDirection.ROW);
layoutManager.setAlignItems(AlignItems.STRETCH);
//
// StaggeredGridLayoutManager layoutManager=new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL);
// layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANS);
recyclerView.setLayoutManager(layoutManager);
recyclerView.setAdapter(ddt);
// layoutManager.getColumnCountForAccessibility(recyclerView,recyclerView.State);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
Recycler Adapter
package com.dummy.combxlistgrid;
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.ImageView;
import android.widget.TextView;
import com.bumptech.glide.Glide;
import com.bumptech.glide.request.RequestOptions;
import com.google.android.flexbox.FlexWrap;
import com.google.android.flexbox.FlexboxLayoutManager;
import java.util.ArrayList;
import java.util.Random;
/**
* Created by arun on 28/03/18.
*/
public class recyclerx extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
private Context context;
View yx;
ImageView img_android;
ArrayList<String> d,e;
public recyclerx(Context context, ArrayList<String> t) {
this.context = context;
this.d=t;
}
@Override
public int getItemViewType(int position) {
if (position%3==1) {
Log.e("the position :"+position," margin : b");
return 1;
} else {
Log.e("the position :"+position," margin : a");
return 0;
}
}
public class ViewHolder1 extends RecyclerView.ViewHolder {
// each data item is just a string in this case
public ImageView gtx;
public TextView posx;
public View layout;
public ViewHolder1(View v) {
super(v);
layout = v;
gtx = (ImageView) v.findViewById(R.id.gtx);
posx=v.findViewById(R.id.posx);
}
public ImageView getLabel1() {
return gtx;
}
public TextView getLabel2() {
return posx;
}
public void setLabel1(ImageView xtg) {
this.gtx = gtx;
}
}
public class ViewHolder2 extends RecyclerView.ViewHolder {
public ImageView xtg;
public TextView posx;
public View layout;
public ViewHolder2(View v) {
super(v);
layout = v;
xtg = (ImageView) v.findViewById(R.id.xtg);
posx=v.findViewById(R.id.posx);
}
public ImageView getLabel1() {
return xtg;
}
public TextView getLabel2(){return posx;}
public void setLabel1(ImageView xtg) {
this.xtg = xtg;
}
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
RecyclerView.ViewHolder viewHolder = null;
LayoutInflater inflater = LayoutInflater.from(viewGroup.getContext());
switch (viewType) {
case 0:
View v1 = inflater.inflate(R.layout.gridsingle, viewGroup, false);
viewHolder = new ViewHolder1(v1);
break;
case 1:
View v2 = inflater.inflate(R.layout.griddouble, viewGroup, false);
viewHolder = new ViewHolder2(v2);
break;
}
return viewHolder;
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
switch (holder.getItemViewType()) {
case 0:
ViewHolder1 vh1 = (ViewHolder1) holder;
configureViewHolder1(vh1, position);
ViewGroup.LayoutParams lp = vh1.getLabel1().getLayoutParams();
break;
case 1:
ViewHolder2 vh2 = (ViewHolder2) holder;
configureViewHolder2(vh2, position);
ViewGroup.LayoutParams lp2 = vh2.getLabel1().getLayoutParams();
break;
}
}
@Override
public int getItemCount() {
if (d!=null) {
return d.size();
}
else
{
return 0;
}
}
private void configureViewHolder1(ViewHolder1 vh1, int position) {
Glide.with(context).applyDefaultRequestOptions(RequestOptions.circleCropTransform()).load(d.get(position)).into(vh1.getLabel1());
vh1.getLabel2().setText("" + position);
ViewGroup.LayoutParams lp = vh1.getLabel1().getLayoutParams();
if (lp instanceof FlexboxLayoutManager.LayoutParams) {
FlexboxLayoutManager.LayoutParams flexboxLp = (FlexboxLayoutManager.LayoutParams) lp;
flexboxLp.setFlexGrow(1f);
}
}
private void configureViewHolder2(ViewHolder2 vh2, int position) {
Glide.with(context).applyDefaultRequestOptions(RequestOptions.circleCropTransform()).load(d.get(position)).into(vh2.getLabel1());
vh2.getLabel2().setText(""+position);
ViewGroup.LayoutParams lp = vh2.getLabel1().getLayoutParams();
if (lp instanceof FlexboxLayoutManager.LayoutParams) {
FlexboxLayoutManager.LayoutParams flexboxLp = (FlexboxLayoutManager.LayoutParams) lp;
flexboxLp.setFlexGrow(1f);}
}
}
grid single layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:layout_marginBottom="1dp"
android:background="#a600ff"
>
<ImageView
android:id="@+id/gtx"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="100dp"
android:layout_height="100dp"
android:foregroundGravity="top"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="@+id/posx"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:textSize="14sp"
android:textStyle="bold" />
</android.support.constraint.ConstraintLayout>
grid double layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="190dp"
android:background="#590359"
>
<ImageView
android:id="@+id/xtg"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="bottom"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
<TextView
android:id="@+id/posx"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:textSize="14sp"
android:textStyle="bold" />
</android.support.constraint.ConstraintLayout>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
