Place SeekBar over Imageview in Android? - android

Greetings,
I have the following layout in Android. I'm trying to make it so the seekbar is displayed ontop of the image (I have some code that makes it visible and invisible(Or rather GONE).
I was wondering if anyone could tell me how to position it so that the seekbar goes over the imageview, therefore allowing the imageview to take up the entire screen.
Thanks
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<.imageOverlay android:id="#+id/surface"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<SeekBar
android:id="#+id/seekbar"
android:layout_width="100px"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:max="255"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/surfaceimage"
android:scaleType="fitXY"
/>


Got it working with the following - I added framelayout instead of linearlayout.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<.imageOverlay android:id="#+id/surface"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/surfaceimage"
android:scaleType="fitXY"
/>
<SeekBar
android:id="#+id/seekbar"
android:layout_width="100px"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:max="255"/>
</FrameLayout>
</RelativeLayout>

Related

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"

Android: How to place a linear layout showing a image at the bottom of a layout?

I have used LinearLayout in my activity, in that I need to display another LinearLayout containing image to be displayed at the bottom.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:background="#drawable/gamelevelscreen"
android:orientation="vertical" >
.......
<LinearLayout
android:id="#+id/linearLayout_AdMob"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true"
android:gravity="center">
</LinearLayout>
</LinearLayout>
But the image is not completely aligned at the bottom. Its a little above the bottom.
I have completed the layout designing and it will be a lot of rework to make it Relative now. Kindly give solution to make it happen in LinearLayout only.

Use Relative layout instead of Linear layout or use Weight for doing this in Linear layout.
Try this it will surely help you.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:id="#+id/linearLayout_AdMob"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</RelativeLayout>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayout_AdMob"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</RelativeLayout>

Try this..
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/gamelevelscreen"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayout_AdMob"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:layout_alignParentBottom="true">
</LinearLayout>
</RelativeLayout>

// 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:padding="5dp"
android:orientation="vertical" >
<LinearLayout
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1">
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout_AdMob"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher"/>
</LinearLayout>
</LinearLayout>

Android: how to scale an image to fill the background of a LinearLayout without preserving aspect ratio?

I have got a RelativeLayout like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/favoriteLinearLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/background1"
>
....
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/background2"
android:layout_below="#+id/linearLayout1"
>
....
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearLayout3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/background3"
android:layout_below="#+id/linearLayout2"
>
....
</LinearLayout>
</RelativeLayout>
I want to have a different background image in each of the three LinearLayouts and this image should be scaled to fill its LinearLayout without preserving the aspect ratio of the image. And I don't want each LinearLayout to be scaled to fit the size of the image (if the image is higher than the LinearLayout, I want the image height to be reduced).
Hereafter what it should look like:
Anyone knows how to do this ?
Thanks !!

You can use an imageView and set its scaleType to fitXY.
Here's an example:
<FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent">
<ImageView
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:src="#drawable/blue_dark_background" android:scaleType="fitXY" />
<LinearLayout>....</LinearLayout>
</FrameLayout>
Please let me know if this helps you.
Regards!
EDIT
This a more clear example
<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:weightSum="3"
android:orientation="vertical">
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:src="#drawable/ic_menu_share" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</LinearLayout>
</FrameLayout>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:src="#drawable/ic_menu_share" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</LinearLayout>
</FrameLayout>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:src="#drawable/ic_menu_share" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</LinearLayout>
</FrameLayout>
</LinearLayout>

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>

TabHost with FrameLayout under LinearLayout

I've got a small problem with an xml file and a TabHost containing a FrameLayout that shows a ListActivity. A small LinearLayout shall be at the bottom but this is always shown in front of the ListActivity so there are items in the ListActivity behind the LinearLayout even when you scroll the ListView down. I've tried many combinations of different Layouts but I couldn't find a solution :|
Maybe you've got an idea?
Thanks!
This picture might explain my concern: http://img822.imageshack.us/i/listactivity.png/
And here is the xml code:
<?xml version="1.0" encoding="utf-8"?>
<TabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#231f20">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="There are items behind me..." />
<Button
android:id="#+string/connect"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Connect"
android:layout_gravity="center_horizontal"
android:layout_margin="5dp"/>
</LinearLayout>

You can achieve what you want by using a RelativeLayout:
<?xml version="1.0" encoding="utf-8"?>
<TabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabWidget
android:id="#+id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"/>
<FrameLayout
android:id="#+id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#id/tabs"
android:layout_above="#+id/footer" />
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/footer"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#231f20"
android:layout_alignParentBottom="true">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="There are items behind me..." />
<Button
android:id="#+string/connect"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Connect"
android:layout_gravity="center_horizontal"
android:layout_margin="5dp"/>
</LinearLayout>
</RelativeLayout>
</TabHost>

Here's an example of a layout I use in one of my apps:
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:weightSum="100"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<!-- This layout will always remain on top -->
<LinearLayout
android:id="#+id/TopBarLayout"
android:background="#drawable/textview_bottom"
android:layout_weight="10"
android:paddingLeft="10dip"
android:paddingRight="10dip"
android:orientation="horizontal"
android:gravity="center_vertical|left"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:weightSum="100"
>
<TextView
android:layout_marginRight="5dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Mode »"
/>
<Button
style="#style/Tab_Button"
android:id="#+id/ModeChangeButton"
/>
<TextView
android:layout_marginRight="5dip"
android:layout_marginLeft="5dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="»"
/>
<Button
android:paddingRight="5dip"
android:paddingLeft="5dip"
style="#style/Tab_Button"
android:id="#+id/DateChangeButton"
/>
<View
android:layout_weight="100"
android:layout_width="0dip"
android:layout_height="wrap_content"
/>
<ImageButton
style="#style/Tab_Button"
android:id="#+id/ConfigButton"
android:src="#drawable/gear"
/>
</LinearLayout>
<!-- Frame for tab content -->
<FrameLayout
android:background="#000000"
android:layout_weight="78"
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="0dip"
/>
<!-- Tabs at bottom of screen -->
<TabWidget
android:background="#drawable/textview_top"
android:layout_weight="12"
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="0dip"
/>
</LinearLayout>
</TabHost>
Here, my LinearLayout is at the top of the screen, but that's an easy fix. You'll probably want to use layout_weight as shown here.

Categories

Resources