Android : imageview over imageview issue - android

I using following code in my layout , i want to show both image , (image over another image)
But i see just one image on screen
<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:background="#drawable/splash_bg_gradient"
android:id="#+id/splash_gradient"
tools:context="com.android.abc.activity.SplashActivity" >
<ImageView
android:id="#+id/splash_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_centerInParent="true"
android:contentDescription="#string/desc_splash_graphics"/>
<ImageView
android:id="#+id/splash_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType = "fitXY"
android:adjustViewBounds="true"
android:contentDescription="#string/desc_splash_graphics"/>
</RelativeLayout>
Please help , thanks

use FrameLayout instead of RelativeLayout. RelativeLayout should only be used for complex layouts, it's much heavier than FrameLayout also.
<FrameLayout 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:background="#drawable/splash_bg_gradient"
android:id="#+id/splash_gradient"
tools:context="com.android.abc.activity.SplashActivity" >
<ImageView
android:id="#+id/splash_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:contentDescription="#string/desc_splash_graphics"/>
<ImageView
android:id="#+id/splash_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType = "fitXY"
android:adjustViewBounds="true"
android:contentDescription="#string/desc_splash_graphics"/>
</FrameLayout>

You should do this:
<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:background="#drawable/splash_bg_gradient"
android:id="#+id/splash_gradient"
tools:context="com.android.abc.activity.SplashActivity" >
<ImageView
android:id="#+id/splash_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType = "fitXY"
android:adjustViewBounds="true"
android:contentDescription="#string/desc_splash_graphics"/>
<ImageView
android:id="#+id/splash_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:contentDescription="#string/desc_splash_graphics"/>
</RelativeLayout>
Elements in a RelativeLayout are displayed in order of their declaration.

Related

Android: gravity ImageView in RelativeLayout failed

I would like to align this ImageView in center (horizontal and vertical):
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/titletab"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="#dimen/slidingtab_icon_header"
android:gravity="center">
<ImageView
android:id="#+id/icon"
android:layout_width="#dimen/slidingtab_item_icon_size"
android:layout_height="#dimen/slidingtab_item_icon_size"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_event_black_18dp"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_alignParentBottom="true"
android:background="#color/sliding_tab_border_color"/>
</RelativeLayout>
If I don't add the line (the View) after my ImageView it's perfect, it's work, but with this line the gravity doesn't work.
Thanks by advance!
You need to change some property and your view is perfect. Just check below and you see I change gravity property in .
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/titletab"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="#dimen/slidingtab_icon_header"
>
<ImageView
android:id="#+id/icon"
android:layout_width="#dimen/slidingtab_item_icon_size"
android:layout_height="#dimen/slidingtab_item_icon_size"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_launcher"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_alignParentBottom="true"
android:background="#color/sliding_tab_border_color"/>
</RelativeLayout>
You need to use
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
instead of
android:layout_gravity="center_horizontal|center_vertical"
because This is works in LinearLayout.
But, for RelativeLayout you need to use above property for gravity set.
Try android:layout_centerInParent="true" property of Relativelayout and remove the gravity.
<ImageView
android:id="#+id/icon"
android:layout_width="#dimen/slidingtab_item_icon_size"
android:layout_height="#dimen/slidingtab_item_icon_size"
android:layout_centerInParent="true"
android:src="#drawable/ic_event_black_18dp"/>
You shoud use layout_alignBottom instead layout_alignParentBottom in View element.
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_alignBottom="#+id/icon"
android:background="#color/sliding_tab_border_color" />
Change your code with this .
It is working and i changed the icon to the one which was available with me, you can use your icon
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/titletab"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="#dimen/slidingtab_icon_header">
<ImageView
android:id="#+id/icon"
android:layout_width="#dimen/slidingtab_item_icon_size"
android:layout_height="#dimen/slidingtab_item_icon_size"
android:src="#drawable/abc_ic_ab_back_mtrl_am_alpha"
android:layout_gravity="center_horizontal"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/li">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_alignParentBottom="true"/>
</LinearLayout>
</RelativeLayout>
You can use one more layout element to merge ImageView and View elements. Like this;
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/titletab"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="#dimen/slidingtab_icon_header"
android:gravity="center">
<RelativeLayout
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/icon"
android:layout_width="#dimen/slidingtab_item_icon_size"
android:layout_height="#dimen/slidingtab_item_icon_size"
android:src="#drawable/ic_event_black_18dp"/>
<View
android:layout_below="#+id/icon"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/sliding_tab_border_color"/>
</RelativeLayout>
</RelativeLayout>

center crop not cropping photo in relativelayout

I want to center crop an image but its not doing anything just stretching my photo - can someone please help.
Thanks in advance
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/Photos"
android:layout_width="fill_parent"
android:layout_height="300dp">
<ImageView
android:id="#+id/background_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/girl"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
/>
</RelativeLayout>
Change your image view to this
<ImageView
android:id="#+id/background_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/girl"
android:scaleType="centerCrop" />
Edit: after testing .. you should specify the 'layout_width' and the 'layout_height' inside 'FrameLayout'.
for example:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_gravity="center"
android:src="#drawable/girl"
android:scaleType="center"> //
</ImageView>
</FrameLayout>

LinearLayout expanding elements

I have a imageView and a linear layout inside a linear layout. It looks like this:
What I want to happen is have the second linear layout with all of the buttons and params be a fixed height, and then have the image view height be dynamic depending on whatever the size of the screen is. So if there is a large screen then the image will be large and the button and sliders will always be the same.
Here is a snippet of what I have:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
>
<ImageView
android:id="#+id/imgPreview"
android:layout_width="match_parent"
android:layout_height="400dp"
android:visibility="visible"
android:layout_gravity="center_vertical|right"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:scaleType="centerCrop"
/>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="fill_parent">
Is there an easy way to do this?
You can do this by giving the ImageView a layout_height of 0dp and setting its layout_weight to 1. The inner LinearLayout will have its layout_height set to wrap_content.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" >
<ImageView
android:id="#+id/imgPreview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:visibility="visible"
android:scaleType="centerCrop" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Your button and slider content here>
</LinearLayout>
</LinearLayout>
Yes, you can do this using:
android:layout_height="0dp"
android:layout_weight="YOUR VALUE"

Android how to overlap an ImageView on top of a LienearLayouy so that they have the same size?

Hi and thanks for any suggestion.
I need to put an ImageView to overlapp over a LinearLayout.
I have tried this:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/background"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/backgroundimage"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/gradient_box"
android:layout_gravity="center"
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:orientation="vertical"
android:layout_gravity="center">
But this is the result I get (the ImageView shrinks to a single line)
I have tried using RelativeLayout, this is the result I get.
CLOSE, but the ImageView now expands to fill all the available space and does not "wrap content" as I need to.
The desired result would be like this:
PS: I cannot use android:background="image" because i need to change it at runtime.
You can use a Relativ Layout that contains the LinearLayout and then align the ImageView with the LinearLayout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/background"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/linear"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:orientation="vertical"
android:layout_gravity="center">
<ImageView
android:id="#+id/backgroundimage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/gradient_box"
android:layout_alignLeft="#id/linear"
android:layout_alignRight="#id/linear"
android:layout_alignTop="#id/linear"
android:layout_alignBottom="#id/linear"
android:layout_gravity="center"
android:scaleType="fitCenter" />
If you just want to set the image as a background you can just set a background image for the linear layout:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/background"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/blue" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:orientation="vertical"
android:background="#drawable/gradient_box"
android:layout_gravity="center">
PS: I cannot use android:background="image" because i need to change it at runtime.
Why not? Use setBackgroundResource.

Space unwanted layout and image

like the title said it there are some "space" before and after an image and i don't want it.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/fond"
>
<ImageView
android:id="#+id/imageView1"
android:contentDescription="#string/desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/top"
android:layout_gravity="top"
/>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/fond1"
>
</LinearLayout>
</LinearLayout>
So like you can see i have a first Layout with a background.
The ImageView is just after and should be on the top but it didn't.
The second Layout is to much after the image.
->
first layout
--unwanted space--
image
--unwanted space--
second layout
If anyone know how to delete this "space", thanks.
Use android:adjustViewBounds="true" inside your ImageView. That way your ImageView will be adjusted to the provided image bounds.
Use Relative layout this Way::
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/fond"
>
<ImageView
android:id="#+id/imageView1"
android:contentDescription="#string/desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/top"
android:layout_gravity="top"
android:layout_alignParentTop="true"
/>
<LinearLayout
android:layout_below="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#drawable/fond1"
>
</LinearLayout>
</RelativeLayout>

Categories

Resources