How to overlap imageviews in a layout

Question

I am facing an issue with the space between the views. Using a LinerLayout and dynamically adding views(ImageViews) to the linear layout.

I want to adjust the space between the imageview. I want them to have an overlap - when a new view is added.

Current view of the app

Currently a blue back ground is applied to highlight the two linear layouts.

code to add Image view to the existing layout

dealerImages= (LinearLayout) findViewById(R.id.dealerImages);
    dealerImages.setBackgroundColor(Color.BLUE);

ImageView view = new ImageView(BlackJack.this);
    view.setImageResource(R.drawable.back);
    dealerImages.addView(view);

Every time I add a new view - I want to specify the relative position to the old view. I want the new view to start from the center of the last view in the layout.

Please let me know if you need any additional details. Please suggest if I need to use any other layout to make things easier.

Edit - Posting the code here

 playerLayoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,RelativeLayout.LayoutParams.MATCH_PARENT);
    dealerLayoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,RelativeLayout.LayoutParams.MATCH_PARENT);


private void dealTwoCardsEach(){
    player.addCard(hit());
    ImageView imageView = new ImageView(BlackJack.this);
    imageView.setImageResource(getResourceId(player.getFirstCard()));
    playerImages.addView(imageView, player.getCards().size()-1);

    dealer.addCard(hit());
    imageView = new ImageView(BlackJack.this);
    imageView.setImageResource(getResourceId(dealer.getFirstCard()));
    dealerImages.addView(imageView);

    player.addCard(hit());
    if(player.getCount() == 21)
        player.setBlackJack(true);

    imageView = new ImageView(BlackJack.this);
    imageView.setImageResource(getResourceId(player.getSecondCard()));
    updateMarginForPlayer(); // updating start margin
    playerImages.addView(imageView, player.getCards().size()-1, playerLayoutParams);

    dealer.addCard(hit());
}


private void updateMarginForPlayer(){
        playerLayoutParams.setMarginStart(playerLayoutParams.getMarginStart()+100);
}

Please not i am not setting any margin for the first card for the player. I can see both the cards until here. First Image with start margin of 0 and the second Image with start margin of 100.

private void handleHit(){
    Card c1 = hit();
    player.addCard(c1);

    ImageView imageView = new ImageView(this);
    imageView.setImageResource(getResourceId(c1));
    updateMarginForPlayer();
    playerImages.addView(imageView, playerLayoutParams);

}

On click of the 'Hit' button is when handleHit() gets called. and the new images being added are making all the images from 2nd till the currrent view invisible. I can only see the first and last(latest added).

score 0 · Accepted Answer · edited May 23 '17 at 11:54

0

A LinearLayout stacks views in a linear fashion one after another. You can never create an overlapping layout with just a LinearLayout it will always stack it next to the current view based on whatever orientation it is defined with.

What you are looking for is RelativeLayout in a relative layout, the views are stacked dependent to each other, and since it is also a ViewGroup class the same code will work for it too.

Check the relative layout doc here and a brief post of their comparison here

Also, when you create a child in relative layout you can add params to where it goes or simply add a margin which is half the size of your original layout to stack them from centre!

You dont have to call the update params, instead add params to the imageview.

  ImageView imageView = new ImageView(this);
    imageView.setImageResource(getResourceId(c1));
      RelativeLayout.LayoutParams layoutParams= new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    layoutParams.setMargins(100,0,0,0);
    imageView.setLayoutParams(layoutParams);

    playerImages.addView(imageView, playerLayoutParams);

edited May 23 '17 at 11:54

Community

1
1

answered Apr 04 '17 at 18:59

MadScientist

2,134
14
27

Thank you. That seems to be working. But now after adding a new view at the specified margin - i cant see the views below it. I can only see the first and the latest. Is there a attribute that I need to set to the child view before adding for them to be visible always. – Lochan Apr 04 '17 at 22:27
they are not visible because they might be below the last view, can you post your code so i can edit it for you! – MadScientist Apr 05 '17 at 05:24
I edited the original question with the code. Please take a look. – Lochan Apr 05 '17 at 12:17
check edit. check the part of your code inside handleHit() – MadScientist Apr 05 '17 at 12:33

How to overlap imageviews in a layout

1 Answers1