1

I am trying to build a help screen that is going to go on a mediaplayer. The idea is to put a fragment with a transparent theme on top of the current view. (See How do I create a help overlay like you see in a few Android apps and ICS? for the basic idea). Now, I understand the steps in the mentioned link, but how do I connect the circles and arrows and paragraphs next to each one (explaining what each one was) to the lower object? Example, I have an object:

R.id.music_button

and I want there to be and arrow that points to music button. Trying to support as many devices as we do it will be very difficult to just draw a few pictures as part of the top layout and expect them to line up. Again, how do I reference an object on a fragment below the top level?

Thanks

Update 1: Following advice from Nobu Games I have saved the location and passed it to the help fragment.

                View helpedButton = getView().findViewById(R.id.my_sources_button);
            int[] location = { 0, 0 };
            helpedButton.getLocationOnScreen(location);

I think this is right, but now I can not get the arrow to draw:

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View v = inflater.inflate(R.layout.fragment_help_main_menu, container, false);
    DebugLog.d(TAG, "View v is: " + v);
    RelativeLayout mainHelp = (RelativeLayout) v.findViewById(R.id.mainHelpLayout);
    DebugLog.d(TAG, "Layout is: " + mainHelp);
    ImageView arrow = new ImageView(getActivity());
    arrow.setX(location[0]);
    arrow.setY(location[1]);
    arrow.setImageResource(R.drawable.arrow1);
    arrow.setVisibility(arrow.VISIBLE);
    DebugLog.d(TAG, "Location x: " + location[0]);
    DebugLog.d(TAG, "Location y: " + location[1]);
    arrow.bringToFront();
    DebugLog.d(TAG, "CIRCLE " + arrow);
    mainHelp.addView(arrow);
    return v;
}

UPDATE 2 Using getLocationOnScreen and getLocationInWindow are giving me strange results. The button I am trying to draw an arrow too is in the lower right of the screen with some padding both below and to the right. The coordinates I am getting are x=1319 and 716 on a Sony GTV. If I use

        LayoutParams params = new RelativeLayout.LayoutParams(60, 40);
        params.topMargin = y;
        params.leftMargin = x;

The arrow draws, but in some funky places. I can use math or change the parameters around until it looks good in one view, but this is just the first of many arrows and lots of devices need to be supported. I really need to just pass the location of the button and have it not draw in funky places.

Community
  • 1
  • 1
Silas Greenback
  • 1,200
  • 8
  • 15

1 Answers1

0

If I understand you correctly you are trying to have a semi-transparent help screen overlay on top of your Fragment. That overlay illustrates the UI elements of the Fragment's view below.

So there are two possibilities for that:

Option 1

Before starting the help screen Fragment / Activity you need to get the position information of all the view elements you want to provide help for.

You could use View.getLocationOnScreen for that.

Then pass the location data alongside with an identifier for each UI element to your help screen. As Intent extra values for example.

Your help component needs to take these coordinates and calculate the absolute positions of your arrows.

Option 2

Create a help layout XML file that has the same alignments and dimensions like your Fragment's view. Use that help layout to correctly position your labels and arrow graphics. Use margins / paddings for positioning these elements.

tiguchi
  • 5,392
  • 1
  • 33
  • 39
  • I think option 1 is what I am looking for. I had read on getLocationOnScreen before, but didn't think about getting it BEFORE drawing the help layout on top. I am going to give this a go. Thanks. – Silas Greenback Jun 25 '12 at 21:25
  • Well, it's giving me the locations (I think the right ones), but it's not drawing now. – Silas Greenback Jun 26 '12 at 12:20