Rotating ImageView's inside LinearLayout

Question

I am working on an Android card game. I want to display all the players cards, and so I created 4 LinearLayouts. 1 for top player, left side player, right side player, and the bottom player.

I am trying to use the same images for the cards, and therefor I try to rotate the cards of the side players (left and right players).

For some reason, the top and bottom players cards looks good, but the side players cards are too small.

This is my left player layout:

 <LinearLayout
        android:id="@+id/leftParentLayout"
        android:layout_width="80dp"
        android:layout_height="200dp"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.026"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.381">

        <ImageView
            android:id="@+id/player_left_card_3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center_vertical|center_horizontal"
            android:layout_weight="1"
            android:clickable="false"
            android:paddingBottom="1dp"
            android:paddingEnd="1dp"
            android:paddingLeft="1dp"
            android:paddingRight="1dp"
            android:rotation="90" />

        <ImageView
            android:id="@+id/player_left_card_5"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center_vertical|center_horizontal"
            android:layout_weight="1"
            android:clickable="false"
            android:paddingBottom="1dp"
            android:paddingEnd="1dp"
            android:paddingLeft="1dp"
            android:paddingRight="1dp"
            android:rotation="90" />

        <ImageView
            android:id="@+id/player_left_card_1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center_vertical|center_horizontal"
            android:layout_weight="1"
            android:clickable="false"
            android:paddingBottom="1dp"
            android:paddingEnd="1dp"
            android:paddingLeft="1dp"
            android:paddingRight="1dp"
            android:rotation="90" />

        <ImageView
            android:id="@+id/player_left_card_2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center_vertical|center_horizontal"
            android:layout_weight="1"
            android:clickable="false"
            android:paddingBottom="1dp"
            android:paddingEnd="1dp"
            android:paddingLeft="1dp"
            android:paddingRight="1dp"
            android:rotation="90" />

        <ImageView
            android:id="@+id/player_left_card_4"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center_vertical|center_horizontal"
            android:layout_weight="1"
            android:clickable="false"
            android:paddingBottom="1dp"
            android:paddingEnd="1dp"
            android:paddingLeft="1dp"
            android:paddingRight="1dp"
            android:rotation="90" />

    </LinearLayout>

Although the height should be 200 and width 80, the cards are smaller. I suspect the card sizes are being calculated before the rotation, and then the rotation shrinks them somehow, it seems like the cards width of the left player is the same width as the top player, but it should be bigger because of the rotation.

How can I rotate the cards, but keep them at their original size? Thanks.

Here is a screenshot from the game.

https://stackoverflow.com/questions/8981845/android-rotate-image-in-imageview-by-an-angle — RonTLV, Jun 21 '17 at 11:02

pro_cheats · Answer 1 · 2017-06-21T11:32:31.807

0

I suspect the card sizes are being calculated before the rotation, and then the rotation shrinks them somehow..

I think this might be wrong. Android calculates final width and height measurements and accommodate in the Layout. Because it is concerned with what it displays finally and it refers the properties that you have mentioned.

Try giving wrap_content in width or height or both for indivdual cards in the ImageView like -

android:layout_width="wrap_content"
android:layout_height="wrap_content"

Also note 200dp should accomodate all 5 cards width plus the padding that you have (2dp per card). And 80dp width should accomodate the height of your card plus 2dp padding. Else give higher layout_width and layout_height for LinearLayout.

edited Jun 21 '17 at 11:32

answered Jun 21 '17 at 11:26

pro_cheats

1,534
1
15
25

Hi, thank you for your response! I tried what you said, but it doesn't seem to change anything – Billy Jun 21 '17 at 15:06
try `android:layout_width="wrap_content" android:layout_height="wrap_content"` for `LinearLayout` may be? – pro_cheats Jun 21 '17 at 15:42

Rotating ImageView's inside LinearLayout

1 Answers1