How to configure button size so that layout looks the same on both old device as well as new device?

0 votes
asked Sep 12, 2017 by jvalant-dave

I have a fragment that contains a Flow Layout (https://github.com/ApmeM/android-flowlayout). When this fragment is accessed, my app will programatically add four buttons to the flow layout plus any buttons that the user added themselves, which when clicked on will open the browser or app that I clicked on. Here's a screenshot of what it looks like on my Galaxy Tab S2 (Model SM-T710):

Video Links tab on Galaxy Tab S2

The top four buttons are provided by a server, and the last button 'FB' is a user defined link that was added by pressing the "Add a Link" button. This user defined link is saved and will also be added programatically the next time the fragment is accessed. I have another device, a Galaxy Tab 4 (Model SM-T530NU) which I believe is an older device when comparing it to the Tab S2. Here is a screenshot on how the layout looks on this tablet:

Fragment on Tab 4

This tablet has a bigger screen yet is still showing only 2 child views in the row. I'm guessing it has something to do with dp vs pixels or something along those lines but does anybody know how I can have it so that the bottom UI matches the top UI? Here is my code that adds the buttons dynamically.You can see the width and height for the button in the getLayoutParams() function.

private void updateFlowLayout(){
        //Get latest list of user and operator defined video links from middleware
        operatorVideoLinkItemList = getContentManager().getOperatorDefinedVideoLinks();
        userVideoLinkItemList = getContentManager().getUserDefinedVideoLinks();

        for(VideoLinkItem item : operatorVideoLinkItemList){
            final String url = item.getUrl();
            final ImageButton imageButton = new ImageButton(getActivity());
            FlowLayout.LayoutParams layoutParams = getLayoutParams();
            imageButton.setLayoutParams(layoutParams);
            IDongleCoreImage image = item.getIcon();
            String imageFilePath = image.getImageFilePath();
            imageFilePath = "file://"+imageFilePath;
            Picasso.with(getActivity()).load(imageFilePath).resize(250,150).centerInside().placeholder(R.drawable.app_icon).into(imageButton);
            if(StringUtils.containsIgnoreCase(url,"netflix") || StringUtils.containsIgnoreCase(url,"youtube")){
                imageButton.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        onYoutubeOrNetflixClick(url);
                    }
                });
            } else {
                imageButton.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        onUserLinkClick(url);
                    }
                });
            }
            videoLinksFlowLayout.addView(imageButton);
        }

        //Create buttons for each User Defined Video Link and add to Flow Layout
        for(VideoLinkItem item : userVideoLinkItemList) {
            final String title = item.getTitle();
            final String url = item.getUrl();
            final Button button = new Button(getActivity());
            FlowLayout.LayoutParams layoutParams = getLayoutParams();
            button.setLayoutParams(layoutParams);
            button.setTextSize(15);
            button.setText(title);
            button.setTextColor(getResources().getColor(R.color.app_highlight_yellow_color));
            button.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    onUserLinkClick(url);
                }
            });
            button.setOnLongClickListener(new View.OnLongClickListener() {
                @Override
                public boolean onLongClick(View v) {
                    onLongUserLinkClick(title, url);
                    return false;
                }
            });
            videoLinksFlowLayout.addView(button);
        }
    }

private FlowLayout.LayoutParams getLayoutParams(){
        FlowLayout.LayoutParams layoutParams;
        if(UiUtils.isTablet()){
            layoutParams = new FlowLayout.LayoutParams(400,300);
            layoutParams.setMargins(0,20,90,0);
        } else {
            layoutParams = new FlowLayout.LayoutParams(420,300);
            layoutParams.setMargins(0,20,50,20);
        }
        return layoutParams;
    }

Some ideas I have that maybe someone with more experience can guide me on: - I can perhaps use the DisplayMetrics class to measure the display metrics of this screen and based on that, set the layout parameters. This seems very hackish though.

1 Answer

0 votes
answered Sep 12, 2017 by jvalant-dave

I used Display Metrics class to find the width and height in pixels of both devices and created an if statement that will check for this height and width. Based on that, I set the button size. It is a bit hackish but this was the only solution I could think of.

Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
...