Hexgon Layout / HoneyComb Layout

Hexagon Layout - Honey Comb Layout

Project: The Path Game 

Objective: To create Hexagon Layout (Honey Comb Layout) for x7 Mode of the game

Solution:

Create a Relative Layout which is placed at the vertical and horizontal center of its parent layout.

Create a Linear Layout (LL5) containing 9 ImageViews (for each hexagon tile in the row) inside the Relative Layout. Align it vertically (android:layout_centerVertical="true") and horizontally (android:layout_centerHorizontal="true") to the center of Relative Layout. Since it has odd number of tiles the middle of the Relative Layout passes through the center tile of LL5.

Create a Linear Layout LL4 containing 8 ImageViews inside the Relative Layout with horizontal alignment to the center of RelativeLayout (Note: no center vertical alignment here). The LL4 has to be placed on top of the LL5 (android:layout_above="@+id/LL5"). Here the middle of the Relative Layout passed between the 4th and 5th tile of the row.

Construct LL3, LL2 and LL1 in similar fashion one on top of the other.

Similarly construct LL6 below LL5, LL7 below LL6, LL8 below LL7 and LL9 below LL8 for lower rows.

Custom Swipe Action

Project : The Path Game

Requirement:  Implement swipe (up,down,left & right) action on the a specific layout.
When users swipes on the layout(in red) the header tile moves in the direction of swipe.

Solution:
Create a View.OnTouchListener set it as the on touch listener for the required layout.

FLIP Animation

Project  : The Path Game

Requirement 
Create flip effect on ImageButtons : When play button is touched, the menu buttons (achievement, leader-board, sound and in-app purchase buttons) should flip-out to become blank tiles and the game-mode(x5, x7 and hex) buttons should flip-in from blank tiles. Play button changes into 'back' button and when 'back' button is touched, game-mode buttons should flip-out and menu buttons should flip in.

Solution
Create two ObjectAnimator for each ImageButton to be flipped, one which animates the rotation around Y axis from 0 to 90 and another from 90 to 180 around Y axis.

Create two functions which uses these ObjectAnimators to create the flipping effect
Now when the play button is clicked, the flipOutLeaderboard() is called which flips out the icon side of the tile and flips in the blank side. When the back button is clicked, flipInLeaderboard() is called which flips out the blank side and flips in the icon side . Here the play button and the back button are one and the same, so a Boolean value has to toggled to record the state of the tile ie user facing side of the tile.