I have an app with a tabHost; on one of the tabs I have an image for the background, but the image is not filling the whole screen:
My image is 480 x 800 px
my home.xml:
<?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"
android:background="#drawable/home_bgnd">
</LinearLayout>
How do I fix this code so I'll have the image covering the whole screen?
It seems you are using tabhost in that case you have to look into your xml layout in which you have tabhost.
check for padding in view containing android:id="#android:id/tabcontent" and remove that padding or margin from there.
Use ImageView in your XML and set android:scaleType="fitXY" to make it stretch to its parent layout. As parent layout, I would suggest you to use FrameLayout so the image can act as background to it.
For example:
<?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">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:src="#drawable/your_source"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<!-- your other views here -->
</LinearLayout>
</FrameLayout>
Related
I've been working on an app and am looking to adding a text view below the Camera view so that I could display some text there.
But, for some reason when trying to drag a text view into the layout it doesn't show up on the final screen.
This is my code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/topLayout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:keepScreenOn="true">
<com.google.android.CameraSourcePreview
android:id="#+id/preview"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.GraphicOverlay
android:id="#+id/faceOverlay"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</com.google.android.CameraSourcePreview>
</LinearLayout>
Layout view com.google.android.CameraSourcePreview height is set as 'match_parent' , so its eating up all the space on the view-port.
Try giving particular height and you should be able to see textview added below CameraSourcePreview.
Hope it helps.
Most likely, you're not able to add the TextView due to there not being enough space on the screen.
You're using a LinearLayout which displays all of it's views one after the other in either a vertical or horizontal manner.
Your CameraSourcePreview has it's height and width set to match_parent, which means it'll stretch completely on the screen. However, in a LinearLayout, this also means that there's no space to place the next View because it'll be placed off the screen.
You can add android:layout_weight="1" to your CameraSourcePreview. This will allow your TextView to fit into the LinearLayout because it's basically your CameraSourcePreview telling others it'll resize itself to allow for other components to fit on the screen.
But if you don't want your CameraSourcePreview to resize itself based on other Views, then you should look into using some other Layouts instead of LinearLayout. Perhaps one such as ConstraintLayout or RelativeLayout will work better, since they allow overlapping Views on top of each other.
This is happening because the height of the camera view is taking the whole space on the display you can use layout_weight for LinearLayout to make some necessary space for your TextView.
Just make height of CameraSourcePreview equals to 0dp and add a property
android:layout_weight="1"
So this it would look like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/topLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:keepScreenOn="true"
android:orientation="vertical">
<com.google.android.CameraSourcePreview
android:id="#+id/preview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<com.google.android.GraphicOverlay
android:id="#+id/faceOverlay"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</com.google.android.CameraSourcePreview>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="some text here" />
</LinearLayout>
Instead of using LinearLayout I suggest to use FrameLayout which is easy to control for your case. It is also possible to display textView on CameraSourcePreview by using following code
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/topLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:keepScreenOn="true">
<com.google.android.CameraSourcePreview
android:id="#+id/preview"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_gravity ="center">
<com.google.android.GraphicOverlay
android:id="#+id/faceOverlay"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</com.google.android.CameraSourcePreview>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="some text here"
android:layout_gravity ="center|bottom" />
</FrameLayout>
I have a linear layout like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:gravity="center_horizontal"
android:background="#drawable/bgapp" >
What I need now is the possibility to set the background image ScaleType value in order to fill the screen everytime, this because I'm going to download the image and then I'm going to set it as background but without ScaleType the images will not keep it's aspect ratio based on the screen densities.
What I found is this solution:
<?xml version="1.0" encoding="utf-8"?>
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/bgapp"
android:scaleType="centerCrop"
android:gravity="bottom|left" />
But It doesn't work as expected.. Is there a way to set a LinearLayout scaleType property or do I need to change my layout?
View's background is stretched depending on the size of the View.
Image scaling is supported by ImageView, and to use it together with the LinearLayout you need an additional container, that will overlay the 2 children (e.g. a FrameLayout):
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/bgapp"
android:scaleType="centerCrop"/>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:gravity="center_horizontal">
...
</LinearLayout>
</FrameLayout>
what changes shall I make to bring the relative layout in bottom?
<?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" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="86dp"
android:layout_alignParentBottom="true"
android:layout_weight="0.08"
android:gravity="bottom" >
</RelativeLayout>
</LinearLayout>
You need to change your parent Layout to be a RelativeLayout, since the attribute android:layout_alignParentBottom does nothing for LinearLayout children:
<?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" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="86dp"
android:layout_alignParentBottom="true" >
</RelativeLayout>
</RelativeLayout>
You can achieve that by using a FrameLayout instead of a LinearLayout since it stacks childs from top to bottom by default.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="86dp"
android:layout_gravity="bottom" >
</RelativeLayout>
</FrameLayout>
use
<?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" >
<!-- replace this by any other layout or view. You might want something here, right? -->
<View android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="86dp">
</RelativeLayout>
</LinearLayout>
There are two issues here. The first being that
android:gravity
is wrong. This sets the gravity for the contents of this Views children. So for example used in a TextView it would place the text at the bottom if the TextView. What you want instead is
android:layout_gravity
this sets the Views gravity within its parent.
The second problem is that android:gravity="bottom" doesn't work as you would expect in a LinearLayout who's orientation is vertical. I'm not sure I can explain why well so I will try to find a link in a bit that explains it. But if you change the orientation of the LinearLayout to horizontal you will see this.
So your best options are to change the orientation if that's a possibility and if not then change the root ViewGroup to a RelativeLayout and use the property android:alignParentBottom="true" as someone already suggested.
Edit for explanation
This blog post and this SO answer, among others explain it a little. But basically, if the orientation is horizontal then the Views are layed out from left to right as we expect so you can't control the left and right gravity. With a vertical orientation, the same is true for top and bottom gravity because where they are placed vertically is already determined by Android when you set that orientation. I hope this makes sense.
I have a problem with my ScrollView. It has an ImageView inside it. The imageView holds an image which is 480 * 3000 px. So It needs to be in a ScrollView so the user will have the ability to scroll down.
The problem is: when I test the application, the ScrollView does not wrap to the image hight. There is a black space under the image which is strange for me.
This is my XML code. I look forward for your opinion
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ScrollView
android:id="#+id/scroll_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/image"
android:src="#drawable/image01"
android:scaleType="fitStart" />
</ScrollView>
</RelativeLayout>
Update:
This is how my image looks like with #ruhalde code. I can't take a screenshoot since it is big and you'll not see the whole picture so I draw it.
Rewrite your layout. Make the ScrollView the outer most element. Take a look at this good tutorial for more information: http://mobiforge.com/designing/story/understanding-user-interface-android-part-1-layouts
Use a LinearLayout instead of RelativeLayout which is deprecated by now. Set fillViewPort=true in your ScrollView XML or programatically if you want with setFillViewPort(true).
Put imageview inside a LinearLayout and that inside ScrollView, your XML should look like this:
LinearLayout
---ScrollView
----LinearLayout
------ImageView
Check out my XML here working good with a 800 x 4000 pixels image, perfectly scrolling vertical:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ScrollView android:id="#+id/scrollView1"
android:layout_width="fill_parent" android:layout_height="wrap_content">
<LinearLayout android:id="#+id/linearLayout1"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<ImageView android:id="#+id/mapa" android:layout_height="wrap_content"
android:layout_width="wrap_content"></ImageView>
</LinearLayout>
</ScrollView>
</LinearLayout>
To those who might be interested:
My problem was with the image I'm using, not how I organize my layouts. Thanks.
I believe you should use scrollView tag before your layout tag
I'm currently stuck on my landscape layout. I am implementing a Gallery, and would like it to fit the relative layout's height, and wrap the content via the width. I tried scaleType centerInside, messing with different types of layout_height/width.
Here's where the relevant part of my XML looks like (I apologize for the lack of formatting):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:padding="10dip"
android:orientation="vertical">
<RelativeLayout
android:orientation="horizontal"
android:layout_height="wrap_content"
android:layout_width="fill_parent">
<Gallery xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gallery"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:scaleType="centerInside"
/>
Here is the image
of the cutoff.
I don't believe you can apply scaleType to a Gallery: looking at http://developer.android.com/reference/android/widget/Gallery.html I don't see scaleType as one of the supported attributes.
EDIT: You should apply the scaleType attribute on the ImageView you are putting in the Gallery.
I don't think wrap_content works well with the width of a Gallery view.
Instead use android:layout_toRightOf, it will ensure that the Gallery doesn't extend into the area of your textviews. The following code is an example, but I have not tested it.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<LinearLayout
android:id="#+id/right_side"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:layout_alignParentLeft="true">
*put your textviews here*
</LinearLayout>
<Gallery
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_toLeftOf="#id/right_side"
/>
</RelativeLayout>