How to construct a keyboard hints layout in android

Question

Right now I have created a keyboard layout using linear layout, each key is an image e.g. "Q" , "W" , "E" are different images.

The problem is , how to add the hints image live the above? the idea is , the hints image is hidden by default and when user long press the key , the hints image is shown.

And I have the set of hints images. Any ideas to add them to the keyboard layout ?

Thanks a lot for helping. Here is the keyboard layout reference

<LinearLayout
        android:id="@id/training_keyboard"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_alignParentBottom="true"
        android:padding="5dp"
        android:background="@color/colorBg">

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:weightSum="10"
            android:gravity="center"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/key1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="手"
                android:src="@drawable/keyboard_letter_r1_1" />

            <ImageView
                android:id="@+id/key2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="田"
                android:src="@drawable/keyboard_letter_r1_2" />

            <ImageView
                android:id="@+id/key3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="水"
                android:src="@drawable/keyboard_letter_r1_3" />

            <ImageView
                android:id="@+id/key4"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="口"
                android:src="@drawable/keyboard_letter_r1_4" />

            <ImageView
                android:id="@+id/key5"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="廿"
                android:src="@drawable/keyboard_letter_r1_5" />

            <ImageView
                android:id="@+id/key6"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="卜"
                android:src="@drawable/keyboard_letter_r1_6" />

            <ImageView
                android:id="@+id/key7"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="山"
                android:src="@drawable/keyboard_letter_r1_7" />

            <ImageView
                android:id="@+id/key8"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="戈"
                android:src="@drawable/keyboard_letter_r1_8" />

            <ImageView
                android:id="@+id/key9"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="人"
                android:src="@drawable/keyboard_letter_r1_9" />

            <ImageView
                android:id="@+id/key10"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="心"
                android:src="@drawable/keyboard_letter_r1_10" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:weightSum="10"
            android:gravity="center"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/key11"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="日"
                android:src="@drawable/keyboard_letter_r2_1" />

            <ImageView
                android:id="@+id/key12"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="尸"
                android:src="@drawable/keyboard_letter_r2_2" />

            <ImageView
                android:id="@+id/key13"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="木"
                android:src="@drawable/keyboard_letter_r2_3" />

            <ImageView
                android:id="@+id/key14"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="火"
                android:src="@drawable/keyboard_letter_r2_4" />

            <ImageView
                android:id="@+id/key15"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="土"
                android:src="@drawable/keyboard_letter_r2_5" />

            <ImageView
                android:id="@+id/key16"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="竹"
                android:src="@drawable/keyboard_letter_r2_6" />

            <ImageView
                android:id="@+id/key17"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="十"
                android:src="@drawable/keyboard_letter_r2_7" />

            <ImageView
                android:id="@+id/key18"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="大"
                android:src="@drawable/keyboard_letter_r2_8" />

            <ImageView
                android:id="@+id/key19"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:tag="中"
                android:padding="2dp"
                android:src="@drawable/keyboard_letter_r2_9" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:weightSum="10"
            android:gravity="center"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/sound"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="2"
                android:padding="2dp"
                android:src="@drawable/sound_on" />

            <ImageView
                android:id="@+id/key20"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="難"
                android:src="@drawable/keyboard_letter_r3_1" />

            <ImageView
                android:id="@+id/key21"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="金"
                android:src="@drawable/keyboard_letter_r3_2" />

            <ImageView
                android:id="@+id/key22"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="女"
                android:src="@drawable/keyboard_letter_r3_3" />

            <ImageView
                android:id="@+id/key23"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="月"
                android:src="@drawable/keyboard_letter_r3_4" />

            <ImageView
                android:id="@+id/key24"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="弓"
                android:src="@drawable/keyboard_letter_r3_5" />

            <ImageView
                android:id="@+id/key25"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                android:padding="2dp"
                android:tag="一"
                android:src="@drawable/keyboard_letter_r3_6" />

            <ImageView
                android:id="@+id/reload"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:layout_weight="2"
                android:padding="2dp"
                android:src="@drawable/reload" />

        </LinearLayout>
</LinearLayout>

Hematology

Customize outer most layout, name as KeyboadLayout and Override onDraw and draw dynamic layout for hits on canvas after super drawing. – Ensanguine

Have you tried PopupWindow? developer.android.com/reference/android/widget/PopupWindow.html – Bart

Answer 1

use popupWindow. show popupView above your key view.

private void showPopUp(View v) {  
    LinearLayout layout = new LinearLayout(this);  
    layout.setBackgroundColor(Color.GRAY);  
    TextView tv = new TextView(this);  
    tv.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));  
    tv.setText("I'm a pop -----------------------------!");  
    tv.setTextColor(Color.WHITE);  
    layout.addView(tv);  

    popupWindow = new PopupWindow(layout,120,120);  

    popupWindow.setFocusable(true);  
    popupWindow.setOutsideTouchable(true);  
    popupWindow.setBackgroundDrawable(new BitmapDrawable());  

    int[] location = new int[2];  
    v.getLocationOnScreen(location);  

    popupWindow.showAtLocation(v, Gravity.NO_GRAVITY, location[0], location[1]-popupWindow.getHeight());  
}  

Candiot

thanks for the answer, is there any way to implement in XML layout? – Hematology

@Hematology View layout = View.inflate(v.getContext(), R.layout.xxx, null); popupWindow = new PopupWindow(layout, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); – Candiot