Search code examples
androidandroid-relativelayoutandroid-framelayout

With FrameLayout as root layout, add view on top of another one, with offset of X,Y


I'd like to place a view on top of an existing view. The view I'm targeting is inside a LinearLayout, which resides in a FrameLayout.

I'm thinking there's a way to do this with RelativeLayout because I already have it partially working. I'd like to align the new view to the bottom-left or top-left (as the origin) and then offset X and Y to some precise value that I specify.

How can this be achieved?

Here's the idea:

public static void placeTextRelativeToBottomLeftOfViewAtXY(final FrameLayout layout, View component, int x, int y, String text) {

    final TextView textView = new TextView(getContext());
    textView.setId((int)System.currentTimeMillis());
    final RelativeLayout relativeLayout = new RelativeLayout(getContext());
    RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);
    params.setMargins(x, y, 0,0);
    params.addRule(RelativeLayout.LEFT_OF, component.getId());
    relativeLayout.setLayoutParams(params);
    relativeLayout.setBackgroundColor(Color.TRANSPARENT);
    textView.setText("+500 points!");
    textView.bringToFront();
    relativeLayout.addView(textView, params);
    layout.addView(relativeLayout);
}

Solution

  • Based on the additional information in comments, even if it is possible to overlap a different layouts inside a FrameLayout, those layouts will only be able to position their own children. A RelativeLayout won't be able to position one of its child views relative to a view in a different sibling or parent Layout.

    The way to go would be to flattern the heierarchy of Layouts, setting the root layout to a RelativeLayout or a ConstraintLayout.

    ConstraintLayout is more flexible in terms of positioning views, but it is also more difficult to learn.

    Here I am leaving an alternative to be used with RelativeLayout as the root view. The important items to look at are the setting of the LayoutParams which is sometimes a bit confussing.
    The LayoutParams are set on the child view, but the class used depends on the parent view.

    Also take in mind that to keep margins display independent you need to convert dp into pixels (for the sake of simplicity I haven't done that, but there are examples of how to do this here in SO).

    It also uses View.generteViewId() go get an id for a view created dynamically.

    To make it simple I included the reference View in the xml, but i could have also been created dynamically.

    Layout

    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/rlContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <TextView
            android:id="@+id/tvCenterText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Texto estatico"
            android:layout_centerInParent="true"/>
    
    </RelativeLayout>
    

    Main Activity

    public class DynamicViewsActivity extends AppCompatActivity {
    
        RelativeLayout rlContainer;
        TextView centerText;
    
        @Override
        protected void onCreate(@Nullable Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_dynamicviews);
    
            rlContainer = findViewById(R.id.rlContainer);
    
            centerText = findViewById(R.id.tvCenterText);
    
    
            placeTextRelativeToBottomLeftOfViewAtXY(rlContainer, centerText, 100,10, "Hola");
    
        }
    
        public void placeTextRelativeToBottomLeftOfViewAtXY(final RelativeLayout layout, View component, int x, int y, String text) {
    
            final TextView textView = new TextView(this);
            textView.setId(View.generateViewId());
            RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
            params.setMargins(x, y, x,y);
            params.addRule(RelativeLayout.LEFT_OF, component.getId());
            params.addRule(RelativeLayout.ALIGN_BASELINE, component.getId());
            textView.setLayoutParams(params);
            textView.setText(text);
            layout.addView(textView);
        }
    }