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.

	View.OnTouchListener gestureListener = new View.OnTouchListener() {
	public boolean onTouch(View v, MotionEvent event) {
	switch(event.getAction()){
	case MotionEvent.ACTION_DOWN:
	x1 = event.getX(); //get x-point of finger down
	y1 = event.getY(); //get y-point of finger down
	break;
	case MotionEvent.ACTION_UP:
	x2 = event.getX(); //get x-point of finger up
	y2 = event.getY(); //get x-point of finger up
	dy = y2 - y1; //y distance of swipe
	dx = x2 - x1; //x distance of swipe
	absDX = Math.abs(dx);
	absDY = Math.abs(dy);
	if(absDX < SWIPE_MIN_DISTANCE && absDY < SWIPE_MIN_DISTANCE){
	// y and x distance of swipe should be greater than a minimum value
	}else{
	if(absDX >= absDY){
	if(dx > 0){
	moveRight();
	}else{
	moveLeft();
	}
	}else{
	if(dy > 0){
	moveDown();
	}else{
	moveUp();
	}
	}
	}
	break;
	}
	return true;
	}
	};

view raw custom_swipe hosted with ❤ by GitHub

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.

	ImageButton leaderBoard = (ImageButton) this.findViewById(R.id.MenuLeaderboard);
	ObjectAnimator board_flip_0_90 = ObjectAnimator.ofFloat(leaderBoard,View.ROTATION_Y, 0,90);
	ObjectAnimator board_flip_90_180 = ObjectAnimator.ofFloat(leaderBoard,View.ROTATION_Y, 90, 180);

view raw flip_1 hosted with ❤ by GitHub

Create two functions which uses these ObjectAnimators to create the flipping effect

	/*
	This function first rotates the tile from 0 to 90 degree and then changes the image of the tile
	and then rotates it from 90 to 180. This gives the effect of flipping a tile with two faces.
	Here the flipOutLeaderboard() flipsOut the side with icon and flips in the gray tile.
	flipInLeaderboard() flipsout the gray side and flips in the side with icon.
	*/
	public void flipOutLeaderboard(){
	board_flip_0_90 .start();
	ImageButton leaderBoard = (ImageButton) this.findViewById(R.id.MenuLeaderboard);
	leaderBoard.setImageResource(R.drawable.gray_tile);
	board_flip_90_180 .start();
	}
	public void flipInLeaderboard(){
	board_flip_90_180.reverse();
	ImageButton leaderBoard = (ImageButton) this.findViewById(R.id.MenuLeaderboard);
	leaderBoard.setImageResource(R.drawable.rank_tile);
	board_flip_0_90.reverse();
	}

view raw flip_2 hosted with ❤ by GitHub

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.

	/*
	This method is called when onClick is triggered for the play/back ImageButton. The playVisible is set to true in onCreate method.
	*/
	public void showModes(View button){
	if(playVisible){
	flipOutLeaderboard();
	playVisible = false; // play side of the tile is not visible
	}else{
	flipInLeaderboard();
	playVisible = true; // play side is visible
	}
	}

view raw flip_3 hosted with ❤ by GitHub