CODEWITHSUNDEEP
androidxmllayout
Jordi Castilla
Jordi Castilla

Reputation: 26961

Center ProgressBar and Image in XML android layout

I have a loading screen for my android app.

It's working ok if I only use background image or ProgressBar, but when I try to center both elements in the middle of the screen I get that:

layout_wrong

So far my activityy_main.xml looks like that:

<?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="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/mainLayout"
    tools:context="com.siconet.axa.MainActivity" >

    <RelativeLayout
        android:id="@+id/loadingPanel"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/axa_logo" />

        <ProgressBar
            android:layout_width="250px"
            android:layout_height="250px"
            android:indeterminate="true" />

    </RelativeLayout>

    <WebView 
        android:id="@+id/webView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />
</RelativeLayout>

What I want to achieve is something like this: enter image description here

Upvotes: 0

Views: 1100

Answers (4)

hoanngothanh
hoanngothanh

Reputation: 90

Try use Frame Layout instead of RelativeLayout in "loadingPanel"

Upvotes: 0

codeMagic
codeMagic

Reputation: 44571

Try using centerInParent instead. Something like...

 <RelativeLayout
    android:id="@+id/loadingPanel"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_centerInParent="true" >  // right here

But I think a better approach would be to just use a LinearLayout.Try the below layout...

<?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="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/mainLayout" >

<LinearLayout
    android:id="@+id/loadingPanel"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent ="true"
    android:orientation="vertical">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/play"
        android:layout_gravity="center_horizontal" />

    <ProgressBar
        android:layout_width="250px"
        android:layout_height="250px"
        android:background="@drawable/pause"
        android:indeterminate="true" />

</LinearLayout >

<WebView
    android:id="@+id/webView"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:visibility="gone"/>
</RelativeLayout>

Take note of the different changes but this layout gives me the following ...

enter image description here

I don't see your ImageView in the second image so I centered them both. If you can explain where that should be then I can adjust this layout for that.

Upvotes: 1

A.R.
A.R.

Reputation: 2641

Try this layout

   <?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="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/mainLayout"
    tools:context="com.siconet.axa.MainActivity" >

    <RelativeLayout
        android:id="@+id/loadingPanel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />

        <ProgressBar
            android:layout_width="250px"
            android:layout_height="250px"
            android:layout_centerInParent="true"
            android:indeterminate="true" />

    </RelativeLayout>

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

Hope this helps you.

Upvotes: 1

GuiRoCo
GuiRoCo

Reputation: 71

Try adding to your progressBar this line android:layout_centerInParent="true"

Upvotes: 1

Related Questions