ImageView cannot be centered in a RelativeLayout - android

I've already tried adding layout_gravity, and gravity, and centerInParent.. but the image view still shows up at the left upper corner of the screen..Am I missing something?
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:id="#+id/noHistroySign"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:gravity="center"
android:background="#drawable/sign"
/>
....

I have tested your layout. Your ImageView is already in center. Its correct.
I think there is a problem in android:background="#drawable/sign" perhaps sign image is not displaying correctly or not found or not in drawable folder.
Try to change different image and other image will be in center perfectly.

Put this code in your imageview
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"

In RelativeLayout using below property we centered ImageView or other child view.Just add below line in ImageView property.
android:layout_centerVertical="true"

remove
android:layout_gravity="center"
android:gravity="center"
and write
android:src="#drawable/sign"
inplace of
android:background="#drawable/sign"

Try this
<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=".MainActivity" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/sign" />
</RelativeLayout>
Or try this
<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=".MainActivity" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/sign" />
</RelativeLayout>

Related

How to center fit image in linear layout?

I have an xml screen with three children linear layouts in a parent linear layout of vertical orientation. First child contains an image view and when running the application I can not view any image. Why? is the image size too big?? If so.. how to scale it? However Image is view able in my design tab. of android stdudio. Below is my complete code for xml file.
<?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:id="#+id/activity_sign_up"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.root.my_laoder.SignUp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:scaleType="centerInside"
android:src="#drawable/ty"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical"
android:paddingTop="50dp"
>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="number"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingTop="50dp"
>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"/>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
/>
</LinearLayout>
</LinearLayout>
1. Add attribute android:gravity="center_horizontal" to LinearLayout, to show ImageView in center.
2. Update ImageView width to android:layout_width="wrap_content" and remove attribute android:layout_gravity="center".
3. Use android:scaleType="fitXY" instead of android:scaleType="centerInside"
Try this:
<?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:id="#+id/activity_sign_up"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/ty" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical"
android:paddingTop="50dp">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="number" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingTop="50dp">
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5" />
</LinearLayout>
</LinearLayout>
OUTPUT:
what are the dimens values for these parameters?
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
and why you are using separate linearlayout for imageView even with parent layout as linear?
kindly remove that
have you checked the size of image you are using as a background in ImageView? if size is large than probably image is pushing your rest of your views out of the screen.try to give fixed width and height let's say 100dp for both and see if you are able to see anything.
If you wanna make imageView centre horizontally use in ImagView view
android:layout_gravity="center_horizontal"
above line of code will not work with separate linear layout for ImageView. If you are gonna use separate layout for ImageView anyway, use below line of code inside that linearlayout
android:gravity="center_horizontal"
Note: sorry I'm not able to leave a comment.
Try this for your ImageView:
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:scaleType="centerInside"
android:src="#android:drawable/btn_minus" />
I think you missed scaleType of ImageView, Follow the steps to make your image center
1. Add attribute android:layout_gravity="center_horizontal" to show ImageView in center.
2. Set ImageView layout_width="match_parent" and
layout_height="#dimen/fixed_height"
==> height will be fixed but width will automatically adjust
according to device size
3. and set scaleType="fitEnd" or scaleType="fitCenter"
==> fitEnd is ( Scale the image from the end of the container ) and
possible to have space on top
if image is different each time.
==> fitCenter is (Scale the image from center) and possibility to
have space in top and bottom
Example:
<ImageView
android:id="#+id/cover_image"
android:layout_width="match_parent"
android:layout_height="#dimen/fixed_height"
android:layout_gravity="center_horizontal"
android:scaleType="fitEnd" />

Removing space above and below ImageView in Android

Hello I need help as i Am adding an ImageView in my android xml file and i get an extra space above and below it i have tried to see the options that i can use to remove it one of them was adding android:adjustViewBounds="true"
but when i do that that it removes my action Bar completely below is my code
<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="com.example.fred.yebo.MainFragment">
<ImageView
android:id="#+id/yeboAdd"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/dice"
/>
</RelativeLayout>
Try this attribute :
android:adjustViewBounds="true"
automatically scales the height of the View.
<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="com.example.fred.yebo.MainFragment">
<ImageView
android:id="#+id/yeboAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/cal" />
</RelativeLayout>
Please check this answer.
You can try with scaleType property of your imageView
android:scaleType="fitXY"
this line scale your image with size of your container.There are a few properties of scaleType you can try which will be better for your case.Hope to help you!
<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="com.example.fred.piku.MainFragment">
<ImageView
android:id="#+id/pikuAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/dice" />
</RelativeLayout>

Background fit LinearLayout

I want the background picture not to be deformed, but everytime I try, ImageView appears in front of other UI elements.
I already tried with an image view android:src and scaleType=center,
and when I try with another layout, then I can't make the picture fit.
try settings scaleType=matrix, if that didnt help either then there is issues with intrinsic padding , i will post customImageview Then.
cheers!
Try this:
<?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"
android:orientation="vertical" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:contentDescription="#string/xxxx"
android:src="#drawable/xxxx" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/xxxx"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/today"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="xxx"
android:textSize="xxsp" />
</RelativeLayout>
</LinearLayout>

How to not overlapping with RelativeLayout

I'm trying to get a layout like this:
OK, I want the scroll to begin at the end of the first imageview and I want the scroll to finish at he start of the second imageview. I mean, I don't want imageviews to overlap the scroll. I don't know if I've explained well.
First I tried with LinearLayout but I can't align at the bottom the second ImageView. With RelativeLayout, ImageViews overlap the scroll, I can set margin-top to the scroll to solve the problem with the first ImageView, but I don't know how to solve the problem wit the second ImageView.
I also tried to use a RelativeLayout inside the LinearLayout like this:
<LinearLayout ....>
<ImageView ...></ImageView>
<ScrollView...></ScrollView>
<RelativeLayout...>
<ImageView....></ImageView>
</RelativeLayout>
</LinearLayout>
The second ImageView doesn't appear. I guess scroll is overlapping it.
I Would appreciate any help. Thanx you.
Use
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/imageViewTop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageViewBottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:src="#drawable/ic_launcher" />
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/imageViewBottom"
android:layout_below="#+id/imageViewTop"
android:background="#006600" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
</LinearLayout>
</ScrollView>
</RelativeLayout>
In your xml, put your ListView below imageview1 and above imageView2.
Make sure to use a relativelayout as a parent.
you can do like this
<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:background="#android:color/black"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TextView
android:id="#+id/topView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:text="top view" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottomView"
android:layout_below="#+id/topView"
android:background="#android:color/holo_red_dark" />
<TextView
android:id="#+id/bottomView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#android:color/white"
android:text="bottom view" />
</RelativeLayout>

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.

Categories

Resources