CODEWITHSUNDEEP
androidandroid-relativelayout
Chris
Chris

Reputation: 556

How do you centre a child view in its parent on Android?

I'm having a heck of a time centering a child view within its parent on Android (disclaimer: I'm an iOS dev with little experience on Android). What I want is very simple: centre an indeterminate progress view (spinner) inside it's web view parent.

The web view is part of a Fragment, and is layed out as follows in Android Studio:

WebView layout

As you can see, it's using RelativeLayout. Also, here is the XML: 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
tools:context=".WrappedWebViewFragment">

    <WebView
        android:id="@+id/fragment_web_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true" >

    </WebView>
</RelativeLayout>

In the Fragment class, I instantiate the spinner and attempt to centre it:

public void onStart() {
    super.onStart();

    WebView webView = getView().findViewById(R.id.fragment_web_view);
    ProgressBar spinner = new ProgressBar(getActivity());
    RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(100, 100);
    layoutParams.addRule(RelativeLayout.CENTER_IN_PARENT);
    webView.addView(spinner, layoutParams);
    ...
}

As far as I understand, RelativeLayout is used to position child views relative to its parent, so I'm unsure why this doesn't work. Here is what I'm seeing (the spinner appears at the top left):

enter image description here

How do I center the spinner?

Upvotes: 1

Views: 833

Answers (2)

pistolcaffe
pistolcaffe

Reputation: 879

WebView extends AbsoluteLayout. Therefore, addRule of RelativeLayout.LayoutParams does not apply. Also, since webview is an absoluteLayout, adding a view to a webview does not seem to be a good idea. Because AbsoluteLayout does not support the gravity property, you must calculate the x and y values for center directly. It would be a good idea to write in the layout file to look over the webview and dismiss progress when the webview is loaded.

If you still want to place it directly in the webview, you can try the following approach. (It does not seem like a good way)

public class MyWebView extends WebView {
    private boolean isFirstLayout = true;

    public MyWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        Button v = new Button(getContext());
        v.setText("test");
        AbsoluteLayout.LayoutParams lp = new AbsoluteLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, 0, 0);
        v.setLayoutParams(lp);
        addView(v);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        if (isFirstLayout) {
            View v = getChildAt(0);
            AbsoluteLayout.LayoutParams lp = (LayoutParams) v.getLayoutParams();
            lp.x = (getWidth() / 2) - (v.getWidth() / 2);
            lp.y = (getHeight() / 2) - (v.getHeight() / 2);
            v.setLayoutParams(lp);
            isFirstLayout = false;
        }
    }

}

Upvotes: 1

Ho&#224;ng Vũ Anh
Ho&#224;ng Vũ Anh

Reputation: 677

Why don't create a progressbar in xml file, i think it's simple, like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".WrappedWebViewFragment">

    <WebView
        android:id="@+id/fragment_web_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

     <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:indeterminate="true"
        android:max="100"
        android:minHeight="50dp"
        android:minWidth="200dp"
        android:progress="1" />

</RelativeLayout>

Upvotes: 0

Related Questions