Show Emoji category page id indicator

Bug: 10538430
Change-Id: I767fa8d41c789125af266f2203b4bad7452bc0a5

java/res/layout/emoji_keyboard_view.xml

@@ -72,6 +72,11 @@
         android:id="@+id/emoji_keyboard_pager"
         android:layout_width="match_parent"
         android:layout_height="wrap_content" />
+    <com.android.inputmethod.keyboard.EmojiCategoryPageIndicatorView
+        android:id="@+id/emoji_category_page_id_view"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:background="@color/emoji_category_page_id_view_background" />
     <LinearLayout
         android:id="@+id/emoji_action_bar"
         android:orientation="horizontal"

java/res/values/colors.xml

@@ -55,4 +55,6 @@
     <color name="setup_text_action">@android:color/holo_blue_light</color>
     <color name="setup_step_background">@android:color/background_light</color>
     <color name="setup_welcome_video_margin_color">#FFCCCCCC</color>
+    <color name="emoji_category_page_id_view_background">#FF000000</color>
+    <color name="emoji_category_page_id_view_foreground">#80FFFFFF</color>
 </resources>

java/res/values/dimens.xml

@@ -113,13 +113,14 @@
     <dimen name="gesture_floating_preview_text_offset">73dp</dimen>
     <dimen name="gesture_floating_preview_horizontal_padding">24dp</dimen>
     <dimen name="gesture_floating_preview_vertical_padding">16dp</dimen>
-    <dimen name="gesture_floating_preview_round_radius">3dp</dimen>
+    <dimen name="gesture_floating_preview_round_radius">2dp</dimen>
 
     <!-- Emoji keyboard -->
     <fraction name="emoji_keyboard_key_width">14.2857%p</fraction>
     <fraction name="emoji_keyboard_row_height">33%p</fraction>
     <fraction name="emoji_keyboard_key_letter_size">90%p</fraction>
     <integer name="emoji_keyboard_max_key_count">21</integer>
+    <dimen name="emoji_category_page_id_height">3dp</dimen>
 
     <!-- Inset used in Accessibility mode to avoid accidental key presses when a finger slides off the screen. -->
     <dimen name="accessibility_edge_slop">8dp</dimen>

java/src/com/android/inputmethod/keyboard/EmojiCategoryPageIndicatorView.java

@@ -0,0 +1,67 @@
+/*
+ * Copyright (C) 2013 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.android.inputmethod.keyboard;
+
+import com.android.inputmethod.latin.R;
+
+import android.content.Context;
+import android.graphics.Canvas;
+import android.graphics.Paint;
+import android.util.AttributeSet;
+import android.widget.LinearLayout;
+
+public class EmojiCategoryPageIndicatorView extends LinearLayout {
+    private static final float BOTTOM_MARGIN_RATIO = 0.66f;
+    private final Paint mPaint = new Paint();
+    private int mCategoryPageSize = 0;
+    private int mCurrentCategoryPageId = 0;
+    private float mOffset = 0.0f;
+
+    public EmojiCategoryPageIndicatorView(Context context) {
+        this(context, null /* attrs */);
+    }
+
+    public EmojiCategoryPageIndicatorView(Context context, AttributeSet attrs) {
+        super(context, attrs);
+        mPaint.setColor(context.getResources().getColor(
+                R.color.emoji_category_page_id_view_foreground));
+    }
+
+    public void setCategoryPageId(int size, int id, float offset) {
+        mCategoryPageSize = size;
+        mCurrentCategoryPageId = id;
+        mOffset = offset;
+        invalidate();
+    }
+
+    @Override
+    protected void onDraw(Canvas canvas) {
+        if (mCategoryPageSize == 0) {
+            // If the category is not set yet, just clear and return.
+            canvas.drawColor(0);
+            return;
+        }
+        final float height = getHeight();
+        final float width = getWidth();
+        final float unitWidth = width / mCategoryPageSize;
+        final float left = unitWidth * mCurrentCategoryPageId + mOffset * unitWidth;
+        final float top = 0.0f;
+        final float right = left + unitWidth;
+        final float bottom = height * BOTTOM_MARGIN_RATIO;
+        canvas.drawRect(left, top, right, bottom, mPaint);
+    }
+}

java/src/com/android/inputmethod/keyboard/EmojiKeyboardView.java

@@ -80,6 +80,7 @@ public final class EmojiKeyboardView extends LinearLayout implements OnTabChange
 
     private TabHost mTabHost;
     private ViewPager mEmojiPager;
+    private EmojiCategoryPageIndicatorView mEmojiCategoryPageIndicatorView;
 
     private KeyboardActionListener mKeyboardActionListener = KeyboardActionListener.EMPTY_LISTENER;
 
@@ -197,6 +198,14 @@ public final class EmojiKeyboardView extends LinearLayout implements OnTabChange
             return mCurrentCategoryId;
         }
 
+        public int getCurrentCategoryPageSize() {
+            return getCategoryPageSize(mCurrentCategoryId);
+        }
+
+        public int getCategoryPageSize(int categoryId) {
+            return mShownCategories.get(categoryId).mPageCount;
+        }
+
         public void setCurrentCategoryId(int categoryId) {
             mCurrentCategoryId = categoryId;
         }
@@ -205,6 +214,10 @@ public final class EmojiKeyboardView extends LinearLayout implements OnTabChange
             mCurrentCategoryPageId = id;
         }
 
+        public int getCurrentCategoryPageId() {
+            return mCurrentCategoryPageId;
+        }
+
         public void saveLastTypedCategoryPage() {
             Settings.writeEmojiCategoryLastTypedId(
                     mPrefs, mCurrentCategoryId, mCurrentCategoryPageId);
@@ -435,12 +448,16 @@ public final class EmojiKeyboardView extends LinearLayout implements OnTabChange
         mEmojiPager.setOffscreenPageLimit(0);
         final Resources res = getResources();
         final EmojiLayoutParams emojiLp = new EmojiLayoutParams(res);
-        emojiLp.setPagerProps(mEmojiPager);
+        emojiLp.setPagerProperties(mEmojiPager);
+
+        mEmojiCategoryPageIndicatorView =
+                (EmojiCategoryPageIndicatorView)findViewById(R.id.emoji_category_page_id_view);
+        emojiLp.setCategoryPageIdViewProperties(mEmojiCategoryPageIndicatorView);
 
         setCurrentCategoryId(mEmojiCategory.getCurrentCategoryId(), true /* force */);
 
         final LinearLayout actionBar = (LinearLayout)findViewById(R.id.emoji_action_bar);
-        emojiLp.setActionBarProps(actionBar);
+        emojiLp.setActionBarProperties(actionBar);
 
         // TODO: Implement auto repeat, using View.OnTouchListener?
         final ImageView deleteKey = (ImageView)findViewById(R.id.emoji_keyboard_delete);
@@ -455,7 +472,7 @@ public final class EmojiKeyboardView extends LinearLayout implements OnTabChange
         spaceKey.setBackgroundResource(mKeyBackgroundId);
         spaceKey.setTag(Constants.CODE_SPACE);
         spaceKey.setOnClickListener(this);
-        emojiLp.setKeyProps(spaceKey);
+        emojiLp.setKeyProperties(spaceKey);
         final ImageView sendKey = (ImageView)findViewById(R.id.emoji_keyboard_send);
         sendKey.setBackgroundResource(mEmojiFunctionalKeyBackgroundId);
         sendKey.setTag(Constants.CODE_ENTER);
@@ -466,6 +483,7 @@ public final class EmojiKeyboardView extends LinearLayout implements OnTabChange
     public void onTabChanged(final String tabId) {
         final int categoryId = mEmojiCategory.getCategoryId(tabId);
         setCurrentCategoryId(categoryId, false /* force */);
+        updateEmojiCategoryPageIdView();
     }
 
 
@@ -475,6 +493,7 @@ public final class EmojiKeyboardView extends LinearLayout implements OnTabChange
                 mEmojiCategory.getCategoryIdAndPageIdFromPagePosition(position);
         setCurrentCategoryId(newPos.first /* categoryId */, false /* force */);
         mEmojiCategory.setCurrentCategoryPageId(newPos.second /* categoryPageId */);
+        updateEmojiCategoryPageIdView();
     }
 
     @Override
@@ -485,7 +504,23 @@ public final class EmojiKeyboardView extends LinearLayout implements OnTabChange
     @Override
     public void onPageScrolled(final int position, final float positionOffset,
             final int positionOffsetPixels) {
-        // Ignore this message. Only want the actual page selected.
+        final Pair<Integer, Integer> newPos =
+                mEmojiCategory.getCategoryIdAndPageIdFromPagePosition(position);
+        final int newCategoryId = newPos.first;
+        final int newCategorySize = mEmojiCategory.getCategoryPageSize(newCategoryId);
+        final int currentCategoryId = mEmojiCategory.getCurrentCategoryId();
+        final int currentCategoryPageId = mEmojiCategory.getCurrentCategoryPageId();
+        final int currentCategorySize = mEmojiCategory.getCurrentCategoryPageSize();
+        if (newCategoryId == currentCategoryId) {
+            mEmojiCategoryPageIndicatorView.setCategoryPageId(
+                    newCategorySize, newPos.second, positionOffset);
+        } else if (newCategoryId > currentCategoryId) {
+            mEmojiCategoryPageIndicatorView.setCategoryPageId(
+                    currentCategorySize, currentCategoryPageId, positionOffset);
+        } else if (newCategoryId < currentCategoryId) {
+            mEmojiCategoryPageIndicatorView.setCategoryPageId(
+                    currentCategorySize, currentCategoryPageId, positionOffset - 1);
+        }
     }
 
     @Override
@@ -523,6 +558,15 @@ public final class EmojiKeyboardView extends LinearLayout implements OnTabChange
         mKeyboardActionListener = listener;
     }
 
+    private void updateEmojiCategoryPageIdView() {
+        if (mEmojiCategoryPageIndicatorView == null) {
+            return;
+        }
+        mEmojiCategoryPageIndicatorView.setCategoryPageId(
+                mEmojiCategory.getCurrentCategoryPageSize(),
+                mEmojiCategory.getCurrentCategoryPageId(), 0.0f /* offset */);
+    }
+
     private void setCurrentCategoryId(final int categoryId, final boolean force) {
         if (mEmojiCategory.getCurrentCategoryId() == categoryId && !force) {
             return;

java/src/com/android/inputmethod/keyboard/EmojiLayoutParams.java

@@ -30,6 +30,7 @@ public class EmojiLayoutParams {
     public final int mEmojiPagerHeight;
     private final int mEmojiPagerBottomMargin;
     public final int mEmojiKeyboardHeight;
+    private final int mEmojiCategoryPageIdViewHeight;
     public final int mEmojiActionBarHeight;
     public final int mKeyVerticalGap;
     private final int mKeyHorizontalGap;
@@ -47,23 +48,32 @@ public class EmojiLayoutParams {
                 (int) defaultKeyboardHeight, (int) defaultKeyboardHeight);
         mKeyHorizontalGap = (int) (res.getFraction(R.fraction.key_horizontal_gap_ics,
                 defaultKeyboardWidth, defaultKeyboardWidth));
+        mEmojiCategoryPageIdViewHeight =
+                (int) (res.getDimension(R.dimen.emoji_category_page_id_height));
         final int baseheight = defaultKeyboardHeight - mBottomPadding - mTopPadding
                 + mKeyVerticalGap;
         mEmojiActionBarHeight = ((int) baseheight) / DEFAULT_KEYBOARD_ROWS
                 - (mKeyVerticalGap - mBottomPadding) / 2;
-        mEmojiPagerHeight = defaultKeyboardHeight - mEmojiActionBarHeight;
+        mEmojiPagerHeight = defaultKeyboardHeight - mEmojiActionBarHeight
+                - mEmojiCategoryPageIdViewHeight;
         mEmojiPagerBottomMargin = mKeyVerticalGap / 2;
         mEmojiKeyboardHeight = mEmojiPagerHeight - mEmojiPagerBottomMargin - 1;
     }
 
-    public void setPagerProps(ViewPager vp) {
+    public void setPagerProperties(ViewPager vp) {
         final LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) vp.getLayoutParams();
-        lp.height = mEmojiPagerHeight - mEmojiPagerBottomMargin;
+        lp.height = mEmojiKeyboardHeight;
         lp.bottomMargin = mEmojiPagerBottomMargin;
         vp.setLayoutParams(lp);
     }
 
-    public void setActionBarProps(LinearLayout ll) {
+    public void setCategoryPageIdViewProperties(LinearLayout ll) {
+        final LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) ll.getLayoutParams();
+        lp.height = mEmojiCategoryPageIdViewHeight;
+        ll.setLayoutParams(lp);
+    }
+
+    public void setActionBarProperties(LinearLayout ll) {
         final LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) ll.getLayoutParams();
         lp.height = mEmojiActionBarHeight;
         lp.topMargin = 0;
@@ -71,7 +81,7 @@ public class EmojiLayoutParams {
         ll.setLayoutParams(lp);
     }
 
-    public void setKeyProps(ImageView ib) {
+    public void setKeyProperties(ImageView ib) {
         final LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) ib.getLayoutParams();
         lp.leftMargin = mKeyHorizontalGap / 2;
         lp.rightMargin = mKeyHorizontalGap / 2;