How to let user know, an ImageView is clickable

Vojtěch Pešek Published at Dev

Vojtěch Pešek

I have an ImageView(see image below), which is clickable. When the user clicks on the ImageView, he gets redirected to website. This is all running fine.

My question is, how to let user know, he can click the image, how to make this feature visible?

I can add text under the image, but thats not, what i want. I would like some small icon or window(like dialog), which can be closed.

Thanks!

Vojtěch Pešek

So I searched and found this. This is @kgandroid suggested.

I add a little bit of code:

private FrameLayout mFrame;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    mFrame = new FrameLayout(this);
    mFrame.addView(LayoutInflater.from(getBaseContext()).inflate(R.layout.activity_single_list_view, null));
    setContentView(mFrame);

    SharedPreferences settings = getSharedPreferences(PREFS_NAME, 0);
    boolean overlayShown = settings.getBoolean("overlayShown", false);
    if(!overlayShown){
        setupHelpOverlay();
    }
    ...
}

private void setupHelpOverlay(){

    final View tutView = LayoutInflater.from(getBaseContext()).inflate(R.layout.activity_detail_overlay, null);
    if(mFrame != null){
        mFrame.addView(tutView);
    }

    // We need an Editor object to make preference changes.
    // All objects are from android.context.Context
    SharedPreferences settings = getSharedPreferences(PREFS_NAME, 0);
    SharedPreferences.Editor editor = settings.edit();
    editor.putBoolean("overlayShown", true);

    // Commit the edits!
    editor.commit();

    Button btnDismiss = (Button) tutView.findViewById(R.id.button_overlay);
    btnDismiss.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v){
            mFrame.removeView(tutView);
        }
    });
}

And the activity_deatil_overlay.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/transparent_gray" >

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/textView1"
        android:layout_centerHorizontal="true"
        android:textSize="20sp"
        android:gravity="center"
        android:textColor="@color/white"
        android:text="@string/overlay_text"
        android:paddingBottom="10dp" />

    <View
        android:id="@+id/textView1"
        android:layout_width="1dp"
        android:layout_height="1dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" />

    <Button
        android:id="@+id/button_overlay"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView1"
        android:layout_centerHorizontal="true"
        android:text="@string/overlay_button"
        android:textColor="@color/white"
        android:paddingTop="10dp" />

</RelativeLayout>

On the first start, it shows help overlay.