Fill RelativeLayout with Multiple Buttons or Views

Question

After struggling a lot with the rules of the RelativeLayout , I surrendered. So, I would really appreciate your help.

I am trying to load some array of Tags , and make Buttons of those Tags. So, programmatically, I am doing this. Using RelativeLayout for this, because in LinearLayout , there are 2 orientations: either vertical or horizontal .

Code for dynamically adding Buttons:

RelativeLayout innerLayout = (RelativeLayout) findViewById(R.id.innerRelativeLayout);
String tags[] = {"friends","love","motivate","sad","party","fun"};

for (int i = 0; i < tags.length; i++) {
    Button bt = new Button(this);
    bt.setText(tags[i]);
    bt.setId(i+1);
    bt.setBackgroundResource(R.drawable.radius_button_selector);
    bt.setPadding(10, 10, 10, 10);
    bt.setTextSize(20);

    RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
    if (i == 0) {
        params.addRule(RelativeLayout.ALIGN_PARENT_START);
    }
    else {
        params.addRule(RelativeLayout.RIGHT_OF, bt.getId() - 1);
    }
    params.setMargins(0, 0, 10, 10);
    bt.setLayoutParams(params);
    innerLayout.addView(bt);
}

What I am getting is this: (Image Screenshots)

What I want to achieve:

I want all the Buttons to be side by side and when the buttons get overflowed from the width of the screen, they should come to Next Line. Something like this: (Image Screenshot)

I am noob in Layouts. Please help me!

Thank you

Best Regards

Answer 1

RelativeLayout is not designed for this. You should probably try out FlexboxLayout . Some links:

https://android-developers.googleblog.com/2017/02/build-flexible-layouts-with.html

https://github.com/google/flexbox-layout

Answer 2

Try RecyclerView To Achive this view type of view . you can use recyclerview with GridLayoutManager . In gridview we have set number of item is one row if items are over its sift to next row .

FirstActivity

public class FirstActivity extends AppCompatActivity{
   RecyclerView recycler_view;
   GridLayoutManager manager;

   CustomAdapter customAdapter;
   protected void onCreate(Bundle savedInstanceState){
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_first);
      initView();
   }

   private void initView(){
      ArrayList<String> list=new ArrayList<>();
      list.add("8");
      list.add("10");
      list.add("11");
      list.add("12");
      list.add("14");
      list.add("16");
      list.add("18");
      recycler_view=findViewById(R.id.recycler_view);
      manager=new GridLayoutManager(this, 5);
      recycler_view.setLayoutManager(manager);
        customAdapter=new CustomAdapter(this, list);
      recycler_view.setAdapter(customAdapter);
   }
}

CustomAdapter

public class CustomAdapter extends RecyclerView.Adapter<CustomAdapter.MyHolder>{
   Context context;
   ArrayList<String> dataList;


   public CustomAdapter(Context context, ArrayList<String> dataList, ){
      this.context=context;
      this.dataList=dataList;

   }

   @NonNull

   @Override
   public MyHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i){
      View view=LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item_custom,viewGroup,false);
      MyHolder myHolder=new MyHolder(view);
      return myHolder;
   }

   @Override
   public void onBindViewHolder(@NonNull MyHolder myHolder, final int i){
      //check select item position
      if(selectItem==i){
         myHolder.textView.setTextColor(Color.RED);
      }else {
         myHolder.textView.setTextColor(Color.BLACK);
      }
    myHolder.textView.setText(dataList.get(i));
    myHolder.itemView.setOnClickListener(new View.OnClickListener(){
       @Override
       public void onClick(View v){

       }
    });
   }

   @Override
   public int getItemCount(){
      return dataList.size();
   }

   public class MyHolder extends RecyclerView.ViewHolder{
    TextView textView;
      public MyHolder(@NonNull View itemView){
         super(itemView);
         textView=itemView.findViewById(R.id.text_tv);
      }
   }
}