Develop Reference

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:
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:

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.

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

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 ...
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.

Try use Frame Layout instead of RelativeLayout in "loadingPanel"

Vertical and horizontal center

I am able to center my image horizontal, but not vertical.. any idea's what might cause this? It should be in the center of the screen. I have also tried android:layout_gravity="center_vertical" but doesn't seem to do the trick...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical" >
<ImageView
android:id="#+id/splash"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/splash" />
</LinearLayout>

A LinearLayout does not allow this behavior. Try a RelativeLayout instead.
<?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:orientation="vertical" >
<ImageView
android:id="#+id/splash"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/splash" />
</RelativeLayout>

Why do you need a LinearLayout at all? You can just use the ImageView with the scaleType=center
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/splash"
android:src="#drawable/splash"
android:scaleType="center" />
That's your whole xml...

You will have to use RelativeLayout for such behavior. I can't think of a good way to do it with LinearLayout. Additionally, you can try the Graphical Layout (depends on the editor you are using).

I used two images in invisible mode just for create space.
Try this:
<LinearLayout 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:orientation="vertical" >
<ImageView
android:id="#+id/fake"
android:layout_width="wrap_content"
android:layout_height="200dp"
android:src="#drawable/splash"
android:visibility="invisible" />
<ImageView
android:id="#+id/splash"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/splash" />
<ImageView
android:id="#+id/fake"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/splash"
android:visibility="invisible" />
</LinearLayout>

Relative layout wrap width and height according to background image

The problem which i am facing is very strange relative layout is not warping width and height according to image.it is showing relativelayout on full screen as you can see Image
Code:
<?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="#drawable/img_bg_wood">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#drawable/nine_man_morris" >
</RelativeLayout>
</RelativeLayout>
I solve the issue when i place ImageView in relative layout it works perfect as you can see Image.
Code:
<?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="#drawable/img_bg_wood">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/nine_man_morris" />
</RelativeLayout>
</RelativeLayout>
But the problem is i don't want to use imageview because it is still shows RelativeLayout in full screen. i want to wrap relativelayout according to image just like the above code showing.

// try this
<?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="#drawable/img_bg_wood">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/nine_man_morris"
android:gravity="center">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#A0000000"
android:clickable="true"
android:focusable="true">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<!-- The Background Image -->
<ImageView
android:layout_width="wrap_content"
android:scaleType="fitXY"
android:layout_centerInParent="true"
android:id="#+id/background_image"
android:layout_height="wrap_content"
android:src="#drawable/bg_pic"
/>
<!-- The view group containd around the image -->
<LinearLayout
android:orientation="vertical"
android:layout_alignBottom="#id/background_image"
android:layout_alignLeft="#id/background_image"
android:layout_alignRight="#id/background_image"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
This should solve your problem

android webview layout to take remaining space

I want to create, what seems to be a simple layout, but I am having a few problems with it.
The layout consists of a header, body which is a webview, and a footer banner on bottom as seen on the attached sketch.
I need the webview to take all the remaining space between the header and footer.
I have tried this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#drawable/back"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/banner"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/banner" />
<WebView
android:id="#+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/bck"
android:layout_weight="2"
android:layout_gravity="center"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="4">
<com.mobclix.android.sdk.MobclixMMABannerXLAdView
android:id="#+id/banner_adview"
android:layout_width="320dip"
android:layout_height="50dip"
android:layout_gravity="center"
android:layout_alignParentBottom="true" />
</RelativeLayout>

Put all of them inside a RelativeLayout and in the webview use layout_below="#id/header_banner" and layout_above="#+id/footer_banner"

This will work for you:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/ddd"
android:orientation="vertical" >
<ImageView
android:id="#+id/banner1"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:src="#drawable/atm" />
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/webview1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
/>
<ImageView
android:id="#+id/banner2"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="0"
android:src="#drawable/atm" />
</LinearLayout>

Center a View in Android between bottom and top views

I need somehow to do this :
I tried playing with Relative Layout, I placed top imageview and bottom button but how do I place my gridview in the center? BUT BETWEEN top image and bottom button?

Have the top image and the bottom button use wrap_content for height, and the GridView use 0dip for height along with a weight of 1. This will cause the top and bottom elements to measure first, and the GridView will get all remaining space in the middle.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView android:id="#+id/top_image"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<GridView android:id="#+id/grid"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1" />
<Button android:id="#+id/bottom_button"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>

adamp's answer didn't work for me. This is what I found to work perfectly:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView android:id="#+id/top_image"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" />
<Button android:id="#+id/bottom_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
<LinearLayout
android:id="#+id/container_layout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/bottom_button"
android:layout_below="#id/top_image"
android:gravity="center" >
<GridView android:id="#+id/grid"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
</RelativeLayout>
I've used this with other LinearLayouts in place of the GridView, with android:gravity="center" set on the innermost layout as well to make all of its text views and images centered horizontally as well as vertically.

use something like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center">
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/table">
<TableRow
android:weightSum="100">
<ImageView android:id="#+id/image1"
android:src="#drawable/icon"
android:visibility="visible"
android:gravity="center"
android:layout_weight="50" />
</TableRow>
<TableRow
android:weightSum="100">
<GridView
android:layout_height="wrap_content"
android:layout_width="wrap_content">
</GridView>
</TableRow>
<TableRow
android:weightSum="100">
<Button android:id="#+id/btn1"
android:visibility="visible"
android:gravity="center"
android:layout_weight="50" />
</TableRow>
</TableLayout>
</LinearLayout>

You could try this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView android:id="#+id/top_image"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<GridView android:id="#+id/grid1"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1" />
<Button android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>

Add these to your Grid View:
android:layout_above="#id/bottom_button"
android:layout_below="#id/top_image"