I have a strange problem.
I have an ImageView and on this ImageView is a WebView. This WebView ist as big as the ImageView an its background is transparent so that only the text is displayed by the WebView.
On my Galaxy Nexus this works perfectly.
But on my Sony Xperia, the WebView doesn't align the top and the bottom of the image. Left an Right alignment is O.K.
But why is this like this?
Here is my xml-code:
<ImageView
android:id="#+id/ImageView02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/textView1"
android:layout_centerHorizontal="true"
android:src="#drawable/product_pic_background" />
<RelativeLayout
android:id="#+id/contain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignBottom="#+id/ImageView02"
android:layout_alignLeft="#+id/ImageView02"
android:layout_alignRight="#+id/ImageView02"
android:layout_alignTop="#+id/ImageView02"
android:orientation="vertical"
android:paddingBottom="15dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:paddingTop="50dp" >
<WebView
android:id="#+id/produkttext"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:layout_alignParentStart="true"
android:longClickable="false"
android:scrollbars="vertical" />
</RelativeLayout>
1.Xperia arc. how it shouldn't be
2.Galaxy Nexus. how it should be
Ok, one solution to this, once we have the requirements:
<RelativeLayout
android:id="#+id/contain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="15dip"
android:paddingLeft="15dip"
android:paddingRight="15dip"
android:paddingTop="50dip" >
<WebView
android:id="#+id/produkttext"
android:longClickable="false"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:background="#+drawable/product_pic_background"
android:scrollbars="vertical" />
</RelativeLayout>
Then in the code:
WebView web = (WebView) findViewById(R.id.produkttext);
web.setBackgroundColor(0);
BitmapDrawable bd=(BitmapDrawable) this.getResources().getDrawable(R.drawable.product_pic_background);
RelativeLayout rl = (RelativeLayout) findViewById(R.id.yourId);
rl.getLayoutParams().height = bd.getBitmap().getHeight();
rl.getLayoutParams().width = bd.getBitmap().getWidth();
This will make the WebView transparent, so to see the background image, as well as to match the parent layout by width and height.
Then, the RelativeLayout will be set with the dimensions of the picture's drawable.
I haven't manage to test it (I can't at the moment), but if this doesn't work, I will delete this comment (and will possibly commit harakiri :-)).
Related
I'm trying to display a simple image in an imageview and it seems to be adding a border around the photo that isn't there in the source image. I placed the imageview in the parent view and set the image to it, and in the editor you can see a small sliver of the border but when I run it on a device or emulator more of a border appears.
I tried removing a pixel off the size of the photo in case there was a border but that didn't fix it. Below are the photos of the emulator and the editor to show the difference.
Editor:
Emulator:
Any help would be greatly appreciated, thank you.
EDIT: added xml file
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_home_screen"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="frolicindustries.strandstudybible.HomeScreen"
android:weightSum="1"
android:background="#android:color/background_light"
android:orientation="vertical"
android:baselineAligned="false">
<!--android:scaleType="fitCenter"-->
<!--android:cropToPadding="false"-->
<!--android:layout_weight="0.01"-->
<Button
android:text="Button"
android:layout_width="wrap_content"
android:id="#+id/About"
android:background="#drawable/aboutgradient"
android:layout_alignParentBottom="true"
android:layout_height="65sp"
android:layout_marginBottom="1dip"
android:layout_marginTop="1dip"
android:layout_alignRight="#+id/Extras"
android:layout_alignEnd="#+id/Extras"
android:layout_alignLeft="#+id/Bible"
android:layout_alignStart="#+id/Bible" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:id="#+id/Extras"
android:background="#drawable/extragradient"
android:layout_height="65sp"
android:layout_above="#+id/About"
android:layout_marginTop="1dip"
android:layout_alignRight="#+id/WTFW"
android:layout_alignEnd="#+id/WTFW"
android:layout_alignLeft="#+id/Bible"
android:layout_alignStart="#+id/Bible" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:id="#+id/Bible"
android:background="#drawable/biblegradient"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:elevation="0dp"
android:layout_height="65sp"
android:layout_marginLeft="-5dip"
android:layout_marginRight="-5dip"
android:layout_above="#+id/WTFW" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:id="#+id/WTFW"
android:background="#drawable/wtfwgradient"
android:layout_height="65sp"
android:layout_above="#+id/Extras"
android:layout_marginTop="1dip"
android:layout_alignRight="#+id/Bible"
android:layout_alignEnd="#+id/Bible"
android:layout_alignLeft="#+id/Bible"
android:layout_alignStart="#+id/Bible" />
<ImageView
android:id="#+id/imageView2"
android:src="#drawable/logo"
android:background="#null"
tools:targetApi="lollipop"
android:layout_width="match_parent"
android:adjustViewBounds="false"
app:srcCompat="#drawable/logo"
android:layout_alignRight="#+id/Bible"
android:layout_alignEnd="#+id/Bible"
android:layout_height="155sp" />
<ImageView
android:layout_width="match_parent"
android:src="#drawable/title"
android:id="#+id/imageView3"
android:layout_weight="0.29"
android:layout_height="wrap_content"
android:layout_above="#+id/Bible"
android:layout_alignRight="#+id/imageView2"
android:layout_alignEnd="#+id/imageView2"
android:cropToPadding="false"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:layout_below="#+id/imageView2" />
</RelativeLayout>
Check this,
my xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/content_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="#000"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.charu.its2017huree.MainActivity"
tools:showIn="#layout/app_bar_main"
android:orientation="vertical">
<ImageView
android:background="#FFF"
android:src="#drawable/amanda"
android:id="#+id/my_image_view"
android:layout_width="match_parent"
android:layout_height="300dp" />
</LinearLayout>
I have set an imageView and i found out it seems there is something wrong with it's left and right edges. I have given match_parent to my imageView already.So I add a background color to my imageView to find out what's going on.
But that's not enough for me i want to see the boundaries as well.It's there on your android mobile!
Settings >Developer Options >(scroll bit down) under category Drawing there is a option Show layout boundaries > Tick that option .. mm You get some kind of grids in your mobile.It's normal it will be gone when you untick that option.
Let's jump back to image view and see how it looks now!
Now i can clearly see a background color which i add in behind of the image
Also image view width boundary is fine,it's match_parent.You can see that from your layout boundaries.
MM sounds like image didn't fit properly then i try something with scaleType like android:scaleType="fitXY" and run and see how is it now .. all-right it seems she has taken the full space .. I mean in my imageView :D
This way you can clearly identify what'w wrong with your imageView
what is your image saved as? i would suggest .png extension. I would get the border when my images are jpg or anything else.
I'm trying to change the height of RelativeLayout as user scrolls, so it smoothly moves up. It's kinda working but its all flickering and glitching.
I tried to use setTranslationY, but that doesn't move the scrollview with the RelativeLayout.
int top = mScrollView.getScrollY();
int maxRelative = formulas.dpToPx(250);
int actualRelative = (int)((1.0-((float)top)/300.0)*((float)maxRelative));
RelativeLayout.LayoutParams layout_description = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT,
actualRelative);
mCollapsingLayout.setLayoutParams(layout_description);
mCollapsingLayout.requestLayout();
This is how it looks
http://imgur.com/7PL6Yt5
If you have any better idea how to shrink the RelativeLayout as you scroll, its appreciated.
Edit: here's my xml
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:id="#+id/collapsing.view">
<ImageView
android:id="#+id/collapsing.view.image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/theflash"
android:tint="#7F000000"
android:scaleType="centerCrop"/>
<ImageButton
android:id="#+id/favorite.button"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="?android:attr/selectableItemBackground"
android:scaleType="fitCenter"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="30dp"
android:src="#drawable/favorite_button"
/>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:paddingBottom="30px">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="The Flash"
android:textColor="#fff"
android:textSize="25sp"
android:layout_centerInParent="true"
/>
</FrameLayout>
</RelativeLayout>
<ScrollView
android:id="#+id/detail.scrollview"
android:layout_below="#+id/collapsing.view"
android:layout_width="match_parent"
android:fillViewport="true"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
</ScrollView>
There are several approaches to this, including readily available classes such as this one which basically does what you want. You may need to remove the parts for the shrinking text and so forth, but it's right where you need it
You need to place your RelativeLayout inside the ScrollView and try setTranslationY again - it should work
I have a layout with a custom ImageView, and two TextEdits; one above and one below. To make this fit on multiple screens I have surrounded the whole thing with a ScrollView.
However, when the ScrollView is added a massive gap (approx. the height of the screen) appears between the top TextEdit and the ImageView, and the ImageView and the bottom TextEdit.
I am only overriding the onDraw() method in the ImageView (and am still calling super.onDraw() from there)
This is my layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<EditText
android:id="#+id/top_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/top_hint" >
<requestFocus />
</EditText>
<com.javanut13.gememerator.MImageView
android:id="#+id/image_viewer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="0dp"
android:src="#drawable/ic_action_search" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/bottom_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:layout_weight="3"
android:hint="#string/bottom_hint" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/button_text" />
</LinearLayout>
</LinearLayout>
Ok, it turned out that my ImageView wasn't resizing its height when it scaled the image, and so it would keep the height of the raw image (which was from my camera; about 2000 pixels tall) and thus have a massive space above and below it.
I came across this question: (Image do not resize with ImageView) which says to add android:adjustViewBounds="true" to the ImageView, which fixes the problem.
I am trying to create an Activity for an Android app with two imageViews aligned side-by-side. my current layout config is as follows:
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:paddingTop="15dip" android:paddingBottom="15dip"
android:background="#drawable/dark_bg">
<ImageView android:id="#+id/numberDays"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:scaleType="fitStart"
android:src="#drawable/counter_01" />
<ImageView android:src="#drawable/counter_days"
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:scaleType="fitStart"
android:id="#+id/daysText"></ImageView>
</LinearLayout>
The first image will be a square (lets say 100x100) and the second image will be rectangular (300x100) - and I want them to be aligned next to each other but always be scaled to fit within the width of the device - is this possible just with layout config?
The current config just shows the first image the entire width (and almost height) of the screen and the second image is not shown at all. I have tried changing wrap_content with fill_parent and hardocding widths but that has just resulted in the both images being shown but the first image on top of the second image (both anchored left).
Thanks
UPDATED AGAIN:
I have updated my layout to look like this now including the ScrollView as recommended but no joy:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:gravity="top"
android:layout_width="fill_parent" android:layout_height="fill_parent" >
<!-- Header for activity - this has the countdown in it -->
<ScrollView android:id="#+id/ScrollView01" android:layout_height="wrap_content" android:layout_width="fill_parent">
<LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content"
android:gravity="right"
android:background="#drawable/dark_bg" android:orientation="horizontal">
<ImageView android:id="#+id/numberDays"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_weight="2"
android:src="#drawable/counter_01" />
<ImageView android:src="#drawable/counter_days"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/daysText"/>
</LinearLayout>
</ScrollView>
<!-- main body for the rest of the info -->
<LinearLayout android:orientation="horizontal" android:gravity="center"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="#drawable/light_bg">
</LinearLayout>
</LinearLayout>
Using the layout_weight as suggested has given both the images the right ratios and appear to be scaled perfectly, however, I am still having the problem whereby they are both anchored to the far left of the screen, so the first image is actually overlaid on top of the second image, rather than having them side by side.
Below is a screenshot of the Eclipse display:
try using layout_weight for both of the ImageView components. So something like:
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="15dip"
android:paddingBottom="15dip"
android:background="#drawable/dark_bg">
<ImageView android:id="#+id/numberDays"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:layout_weight="1"
android:src="#drawable/counter_01" />
<ImageView android:src="#drawable/counter_days"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:scaleType="fitStart"
android:layout_weight="1"
android:id="#+id/daysText"></ImageView>
</LinearLayout>
i added android:layout_weight="1" to each of them. Read up on layout_weight for LinearLayout definitions, it's very useful!
You can try creating a horizontal ScrollView with a layout_width of a pixel value greater than the two ImageViews combined, rather than fill_parent. Then place your LinearLayout inside of it.
I' have a view that contains several textViews an ImageView and a Button . Because on small screen devices (or in landscape mode on big ones ) not all are visible I use a Scroll as the parent of the whole hierarchy to allow the user to view all the information. The things are suck that the button must be at the buttom of the view . However on big screen device , where it remains enough space at the buttom , the button is put immediatelly below the last textview,and seems to occupy all the remaining space (resulting in an unnactractive view) . Trying to use android:allignParentButtom ="true" not only that it has no effect but it puts the button at top of the screen . Has anyone any ideea how could I accomplish what I described ?
here's the xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scroll_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true">
<RelativeLayout
android:id="#+id/gps_info_page1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerHorizontal="true">
<TextView
android:id="#+id/itsDateTimeValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="#string/eStrUnknown">
</TextView>
<RelativeLayout
android:id="#+id/directions"
android:layout_centerHorizontal="true"
android:layout_below="#+id/itsDateTimeValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/itsDirectionValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:layout_marginRight="2dip"
android:textSize="20sp">
</TextView>
<TextView
android:id="#+id/itsOrientation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:layout_marginLeft="2dip"
android:text="#string/eStrUnknown"
android:layout_toRightOf="#+id/itsDirectionValue">
</TextView>
</RelativeLayout>
<ImageView
android:id="#+id/itsImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/compass"
android:layout_below="#+id/directions"
android:layout_centerHorizontal="true">
</ImageView>
<RelativeLayout>
..."TextViews below the above image"
</RelativeLayout>
<RelativeLayout>
..."TextViews below the above"
</RelativeLayout>
<RelativeLayout>
..."TextViews below the above"
</RelativeLayout>
<RelativeLayout>
..."TextViews below the above"
</RelativeLayout>
<RelativeLayout
..."TextViews below the above"
</RelativeLayout>
<LinearLayout
android:id="#+id/div"
android:layout_width="fill_parent"
android:layout_height="1dip"
android:layout_below="#+id/sunset_layout"
android:background="#F333">
</LinearLayout>
<Button //adding here android:alignParentBottom="true" has described above behavior
android:layout_marginBottom="3dip"
android:layout_marginTop="20dip"
android:id="#+id/done_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/eStrDone"
android:textSize="18sp"
android:layout_below="#+id/div"
android:layout_centerHorizontal="true">
</Button>
</RelativeLayout>
</ScrollView>
What you can do is change sizes depending on the screen programatically.
With this line you get the density of the screen:
scale = getResources().getDisplayMetrics().density;
and this this you get the size:
windowManager = getWindowManager();
display = windowManager.getDefaultDisplay();
screenWidth = display.getWidth();
screenHeight = display.getHeight();
and with this you can get is its on portarit or landscape:
Configuration conf = context.getResources().getConfiguration();
With all this info, you can modify the screen as you like.
Sometimes is necesary to do some calculations because not only density is different but size is different (like nexus one and droid)
Hope this helps.
Daniel
You could put your scrollview inside a linearlayout and set weight of the scrollview as 1