I have an issue with an image in my application.
I would like to have a header image that would take all the width of my application.
To do that, I created an extremely wide picture with the main object in the center,
then center that bitmap in my layout.
Using that code:
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/header"
android:gravity="center_horizontal|bottom" />
and that layout definition:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:background="#ffffff"
android:layout_gravity="center_horizontal" >
<LinearLayout
android:id="#+id/accueil_layout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff"
android:layout_gravity="center_horizontal" >
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="150dip"
android:background="#drawable/bitmap_header"
android:layout_weight="1">
<TextView
android:id="#+id/allure"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/txt_allure"
/>
</FrameLayout>
<TextView
android:id="#+id/slogan"
android:text="#string/txt_slogan"
/>
that code this is well working at the first execution.
as you can see here : http://imagebin.org/index.php?mode=image&id=169619
if I call an other Intent and then go back to that one, it's still displayed normally.
But if I call another Intent to the same activity,
the second instance of this activity is displayed weirdly.
as here : http://imagebin.org/index.php?mode=image&id=169620
As anyone an idea, on how I could resolve this?
I think that has to do something with TextView under FrameLayout, because it is not displayed on second picutre. Maybe change FrameLayout to RelativeLayout or LinearLayout and see what happens.
Related
I added a fragment with an ImageView, which is a PNG image, and a TextView just below it.
The fragment is showing fine but when I rotate the screen the image will take most of the screen and the TextView is partially cut.
Here's the 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">
<ImageView
android:id="#+id/shopping_cart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/shopping_cart" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_below="#id/shopping_cart"
android:text="#string/no_data"
android:gravity="center"/>
</RelativeLayout>
I'm trying to find a way to resize the image in order to show both image and text in the screen
try using a scroll-view as the root element if u want to retain the same image size rather than resizing the image. Here's a small snippet -
<ScrollView
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:fillViewport="true">
<RelativeLayout
android:id="#+id/container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
(all your view elements)
</RelativeLayout>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/text_image_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
(Enter view here)
</LinearLayout>
Alright, so firstly ensure that you have the image for the ImageView in all densities. I would suggest that you use this attribute in your ImageView code:
https://developer.android.com/reference/android/widget/ImageView.ScaleType.html
The scale type defines how your image should scale according to the view. I faced a similar issue once, and i was able to solve it using this. Having said that, i have not seen the image you are using, so i cannot be very sure of it. But, i would say that you use:
android:scaleType="centerCrop"
you can find the definition of the attribute on the link provided above. Also, i do not know what devices you are targeting for your app, but its always good to keep views inside a scroll view so that they are visible even on a smaller screen.
Give it a try, if not by centerCrop, then maybe by some other attribute.
Cheers!!
Here is the 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:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/shopping_text"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="#string/no_data"/>
<ImageView
android:id="#+id/shopping_cart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/shopping_text"
android:src="#drawable/shopping_cart"/>
</RelativeLayout>
My Android app's main activity looks like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background"
android:orientation="vertical" >
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ScrollView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:orientation="vertical"
android:paddingLeft="60dp"
android:paddingTop="53dp" >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/billAmountText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/billAmount_string"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/billAmount"
android:layout_width="173dp"
android:layout_height="wrap_content"
android:layout_below="#id/billAmountText"
android:layout_marginTop="3dp"
android:inputType="numberDecimal" />
</RelativeLayout>
</ScrollView>
</RelativeLayout>
In order to make sure the background image (defined in the first RelativeLayout) does not get squeezed when the keyboard pops up, I have set android:windowSoftInputMode="stateVisible|adjustPan in the manifest file for my activity. All good with the background and layout now, nothing gets resized.
But the problem is that my ScrollView doesn't work now because I suppose the system thinks the window doesn't need resizing due to my above modification to the manifest - so the ScrollView is not activated. The opposite happens when I take android:windowSoftInputMode="stateVisible|adjustPan out, the scrolling works, but the background gets squeezed when the keyboard pops out.
Is there any way to code it so that my background doesn't get squeezed, and my ScrollView still works? Thanks!
Try to use in your activity the property windowSoftInputMode with the following values:
android:windowSoftInputMode="stateAlwaysHidden|adjustResize"
I don't know if it's necessary but you can try to add to your layout's ScrollView tag the fillViewPort to true.
So it should look like something I show you below:
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true">
<!-- Other Views -->
</ScrollView>
Let me know about your progress.
In your scrollview put a relative layout, child 0 is an imageview, and child 1 is your content. Use the imageview for your background image (src) rather than the background of the scrollview. The imageview will respect scaleTypes, whereas the background of a layout will not.
I want to design a layout like in this image
Frame 1 is gray and he Frame 2 is transparent. I think we need to use FrameLayout but I don't know exactly how to use it.
Indeed you could use a FrameLayout or a RelativeLayout(at least for the Frame 1) but you don't say what exactly do you want to do with those frames(this will change things a bit). I would use a RelativeLayout because I'm guessing you'll have content in frame 1 besides frame 2:
<RelativeLayout android:id="#+id/frame1" android:background="#c1c1c1"// other attributes>
<FrameLayout android:id="#+id/frame2" android:layout_centerInParent="true"
android:background="#android:color/transparent"// other attributes />
</RelativeLayout>
one way can be:
<?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"
android:background="#c0c0c0" >
<LinearLayout
android:layout_width="200dp"
android:layout_height="100dp"
android:layout_centerInParent="true"
android:background="#ffffff"
android:gravity="center" >
</LinearLayout>
</RelativeLayout>
You can not make the above like screen using two frames, because it is not possible to put one frame in to the another frame layout, so you can make it by using another way like, take one relative layout and put the frame inside it like,
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/black" >
<FrameLayout
android:id="#+id/frameLayout1"
android:layout_width="250dp"
android:layout_height="100dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="180dp"
android:background="#color/tbl_green">
</FrameLayout>
</RelativeLayout>
may be this can help you.
Im stuck in getting this to work.
Look at the picture below, i want the bubble to be placed under the image.
And of course would like to be able to place the view wherever i like.
I think the problem is in the parent view so i add parent xml to .
Maybe i need to change RelativeLayout to something else,
I have tried many things but nothing works
.
Here is my xml for the bubble
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout android:id="#+id/frameLayout_balloon_gallery_activity_send"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView android:id="#+id/imv_balloon_gallery_activity_send"
android:src="#drawable/balloon_gallery"
android:scaleType="fitCenter"
android:layout_height="fill_parent"
android:layout_width="fill_parent"/>
</FrameLayout >
here is the parent that i insert the bubble into
.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:id="#+id/relativelayout_main_activity_back"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical">
<Gallery xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gallery_activity_back"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:spacing="2dip"
android:gravity="top"
android:paddingTop="20dip"
/>
<RelativeLayout
android:id="#+id/relativeLayoutinner_activity_back"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<EditText
android:id="#+id/etx_addtext_activity_back"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:singleLine="false"
android:text="#string/string_enter_text_here"
/>
</RelativeLayout>
</RelativeLayout>
You will want to create a RelativeLayout that contains both the ImageView and the bubble inside it. Position the bubble below the ImageView using the position below attribute. From there you can move the RelativeLayout around wherever and the bubble will remain under the image.
Check out how the Quick Actions were implemented here http://www.londatiga.net/it/how-to-create-quickaction-dialog-in-android/. The functionality is similar to what you want.
I'm trying to create a very simple android screen with the following content: top banner, webview and bottom banner. for some reason, i can't do it. my xml look like:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="#+id/FrameLayout02"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:orientation="vertical"
android:fitsSystemWindows="true" android:isScrollContainer="false">
<ImageView android:layout_width="wrap_content" android:layout_above="#+id/Web"
android:layout_height="fill_parent" android:layout_gravity="top"
android:src="#drawable/logo"></ImageView>
<WebView android:layout_gravity="center" android:id="#+id/Web"
android:layout_height="fill_parent" android:layout_width="fill_parent"></WebView>
<ImageView android:layout_width="wrap_content" android:layout_below="#+id/Web"
android:layout_height="fill_parent" android:layout_gravity="bottom"
android:src="#drawable/logo"></ImageView>
</LinearLayout>
what is wrong?
Thanks,
Daniel
Short answer all is wrong. Your code is a mess.
Long answer. You are trying to have an ImageView above a WebView and at the bottom another ImageView. I'm not exactly sure what of the mistakes broke it but that's also not important. Take a look at my example XML code.
<?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/topimage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:src="#drawable/icon"/>
<ImageView android:id="#+id/bottomimage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:src="#drawable/icon"/>
<WebView android:id="#+id/web"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/topimage"
android:layout_above="#id/bottomimage"/>
</RelativeLayout>
Now what my XML does is simple. It uses a RelativeLayout as a container to allow a more flexible child alignment. The ImageView called topimage will adjust its height to its content and fill the parent in width. It is aligned to its parents top. The second ImageView is similar with the only exception that it is pinned to its parents bottom. The WebView is aligned in between both ImageViews. It adjust it's height to the 'ImageView`s heights.
Try to always keep some kind of structure in your XML and also Java code so you and also others can throw a look at it without starting to cry.