I have few images that i want to use for the help. Where each image will be used in one activity. i have the images in drawable directory and referencing them using aliases for the different configurations. the images are extension is png.
in the UI designer the image is displayed, but not in run-time. it show white view
my Layout
<?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:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<View
android:id="#+id/help_img_screen"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:background="#drawable/todays_reminders_help"
android:contentDescription="#string/content_description" />
<CheckBox
android:id="#+id/help_chx_dont_show"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/dont_show_help" />
</LinearLayout>
my drawable todays_reminders_help.xml
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="fill"
android:src="#drawable/todays_reminders_activity_help" >
</bitmap>
i am getting white view at run-time not the image i am referencing? this happen on my test device.
However, when i test on the emulator it worked with no issue
You can try couple of things:
1. In your todays_reminders_help.xml, try to set the android:layout_width and android:layout_height to match_parent
2. Just to make sure if things are working as expected, you can test by setting a non-zero height for View with id help_img_screen. i.e replace
<View
android:id="#+id/help_img_screen"
android:layout_height="0dip"
android:layout_weight="1"
..../>
with
<View
android:id="#+id/help_img_screen"
android:layout_height="100dp"
..../>
and see if that helps. If it works, then you need to figure out why layout_weight is not working - you might have to use hierarchy viewer tool to see why it's not working.
Lastly, i would recommend that you approach this problem in a different way -
Make the View an ImageView and in real time i.e in the Java code, you can set the image src or background dynamically based on the activity/context. You can completely avoid using another layout file todays_reminders_help.xml
Hope this helps.
Related
Many similar questions were posted here, and I took my time to read them all. Majority of these posts uses ScrollView like this:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#CACACA"
android:fillViewPort="true" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</RelativeLayout>
</ScrollView>
But i dont want to use scrollview. I only use Relative layout which has 2 childs, lottiefile animation and textview to display No Internet Error page. In Android Studio preview shows white background on device size as I expected, but when I test it on my Pocophone F1, relativelayout does not take any background color (even though white color is set). What am I missing here ? Can RelativeLayout fill the device screen background color at all ?
Here are screenshots and code I am working on:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF">
<com.airbnb.lottie.LottieAnimationView
android:id="#+id/noInternetAnimation"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_centerInParent="true"
app:lottie_autoPlay="true"
app:lottie_loop="true"
app:lottie_rawRes="#raw/internet_error" />
<TextView
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_below="#id/noInternetAnimation"
android:layout_centerHorizontal="true"
android:text="#string/no_internet"
android:textSize="20sp"
android:textStyle="bold" />
</RelativeLayout>
Check the screenshot, app preview on the right has white background as expected.
Now, check this when it is installed on my phone in real device.
Did you try changing your RelativeLayout to a ConstraintLayout just to see if it works? Your XML doesn't look complex at all, so I don't see why is not working
I have an ImageView that when I look at in the XML preview layout on Eclipse looks fine, but when I launch the app on my hardware device a big whitespace comes to surround it. This is what the actual image is, without the whitespace that is being added. Here is my XML file too. How do I get rid of this whitespace?
Since your image shouldn't be too large, try this:
<?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" >
<ImageView
android:id="#+id/linkMe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="cat"
android:src="#drawable/ashsc" />
</LinearLayout>
This way, the image won't attempt to scale and won't create bounds outside the ImageView's image.
I've got a weird gap in my Android layout. I've set the background colors of my views and layouts so that you can see what is where. The gray box in the middle is the gap. I've got a RelativeLayout overall (white background), with a toolbar at the top (seen in pink), then a LinearLayout which is everything else (seen in yellow). In that yellow layout I've got two children: detail information (seen in blue), and a ListView (seen in red). However, the gray area in the middle... I have no idea where that is coming from.
Here is my layout file (with some info clipped for readability):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rootView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#fff"
>
<RelativeLayout
android:id="#+id/toolbar"
android:layout_width="fill_parent"
android:layout_height="44dp"
android:background="#drawable/toolbar_gradient"
android:layout_alignParentTop="true"
android:background="#f0f"
>
<Button style="#style/Button.Done" />
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#id/toolbar"
android:paddingTop="4dp"
android:weightSum="10"
android:orientation="vertical"
android:background="#ff0"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="3.5"
android:weightSum="9"
android:orientation="vertical"
android:background="#00f"
>
</LinearLayout>
<ListView
android:id="#+id/tableView"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="6.5"
android:background="#f00" >
</ListView>
</LinearLayout>
</RelativeLayout>
What is happening here? What am I missing?
EDIT: It appears the layout xml may not be the problem. I've been working to reduce and reduce and reduce and find the real culprit. It's looking like my problem exists in the ListAdapter code. Will update more as I discover it.
Did you try removing the android:layout_alignParentBottom="true" line from the definition of your first LinearLayout?
Ok, so after what felt like endless iterations of removing things until it was fixed and adding things back in until it broke again to narrow down to the specific problem I have discovered my error. I narrowed the problem down to my styling on the layout of the cells inside the ListView above.
I created a script awhile back to help me generate many different style.xml copies for different layout sizes and such so that I can provide good font size or layout_height values for different devices and make them look right. However, due to an error in my styles template, the style.xml which was being generated with a line <item name="android:layout_height">dp</item>. The missing number before the dp caused whacky behavior.
sigh Well, THAT sucked. ;)
My goal is to display 6 images (1 image, 6 times) across one line on my screen. My approach was to nest a RelativeLayout inside of a LinearLayout. My issue is that when I'm in 'portrait' mode, I cannot see all of my images. The more I resize my image, the more of the images I can fit, But I'm at a point where I do not want it to be any smaller. I assumed that by default, it would just wrap what it can't fit, but that doesnt seem to be the case. Theres no auto re-size to fit? Also, how can I manually decide how much space is between each image? Thanks!
Basically, you need to provide two different xml files for your app, one for portrait, once for landscape as per: Providing Resources. android will pick the proper xml file based on orientation.
and this ImageView.ScaleType explains the different scaling styles
Here is what I would suggest:
res/layout-land/main.xml
<?xml version="1.0" encoding="utf-8" ?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<ImageView
android:id="#+id/debris_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:weight="1"
android:src="#drawable/image1"
</ImageView
... repeat 5 more times ...
</LinearLayout>
the weight element should make them all fit but there might be a conflict with scaleType. anyway that should do it for your landscape, for portrait, you could either make it so there were two rows of images, or you could use a horizontalScrollView as below:
res/layout-port/main.xml
<?xml version="1.0" encoding="utf-8" ?>
<HorizontalScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<ImageView
android:id="#+id/debris_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:weight="1"
android:padding="15dp"
android:src="#drawable/image1"
</ImageView
... repeat 5 more times ...
</LinearLayout>
</HorizontalScrollView>
really, you could prolly just use the portrait main.xml as your only layout file and just have it be horizontally scrolling regardless of orientation. you might need to change some times in the portrait main.xml as i am at work and im not sure how well weight works with horizontalScrollView
as far as the space between each element, you would use android:padding like i have above.
I'd like to know how to draw two PNG pictures onto the screen.
My XML layout: (named paperxml.xml)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layoutid"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/paperid"
android:src="#drawable/paperrepresentation"
/>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rockid"
android:src="#drawable/rockrepresentation"
android:layout_alignTop="#id/paperid"
/>
</RelativeLayout>
What would be the java code to instantiate the XML layout and display both ImageViews on the screen at the same time?
Simply calling setContentView(R.drawable.paperxml); crashes my application on startup.
Replace the xml with:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layoutid"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView android:id="#+id/paperid"
android:src="#drawable/paperrepresentation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView android:id="#+id/rockid"
android:src="#drawable/rockrepresentation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
Explanation:
RelativeLayout doesn't use android:orientation="vertical".
Every view should have android:layout_width and android:layout_height.
Add the xmlns:android thing just in the first element.
Calling setContentView(R.drawable.paperxml); is not crashing your code - it's your XML file. Macarse has the correct answer to your problem, and keep your code the same!
You may also want to look at the View Tutorials for some examples of setting up your XML and using different View objects.
I put the XML in but it only displays one ImageView Here's a screenshot of the emulator I took. i852.photobucket.com/albums/ab87/thomasjakway1/Capture.png Its worth mentioning that the file shown is paperrepresentation
If you look hard enough you will see that at the bottom there is a second very tiny image. You just need to increase the scale.