I have a Samsung Galaxy Tab on which I do development for Android phones. It uses the camera for scanning, so I can't run it on the emulator. Is there any way I can run it on the Tab device, but have it display the same size as a phone? This would be extremely helpful when testing the layouts.
A solution
You could place your entire layout inside another layout and make your phone layout if you may, have specific pixel dimensions. The gray area is the container which will expand to the dimensions of the tablet, the one with the turtle is your phone screen inside which your layout will reside.
The code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#CCCCCC">
<RelativeLayout
android:id="#+id/your_layout_inside_this"
android:layout_width="768px"
android:layout_height="1280px"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:background="#FFFFFF"></RelativeLayout>
</RelativeLayout>
The preview
Considerations
Don't use this on a production app. I don't think there is a problem with this approach as far as the testing goes and you may have to take into account the density of the tablet compared to the density of the phone you are testing.
If your testing expands to other things like I may infer from your question, such as taking a picture, you may have to skip using the native intents for taking a picture and use a surfaceview with the dimensions of the phone, but that's a totally different story and question.
Related
I'm really struggling to get my app built in AndroidStudio to display any images that are larger in width or height than 300pixels on the device (Samsung galaxy tab 4 10" and galaxy note 4) they display fine in the android studio design view and all the other images in the app work fine, except for the 2 slightly bigger ones (being 1280x800 and 816x721).
This is a really odd bug as about 5% of the time on a clean and rebuild of the app one of them might appear.
I've tried cleaning,rebuilding,restarting AndroidStudio, various layouts, all different sizes and scaling methods for the image view and no luck the only thing that seems to make the imageview's render is reducing the size of the image until they're under 300 pixels, at which point they are obviously too blurry.
Here is the source code for the layout xml of the splash screen which is displaying the 1280x800resolution image.
<LinearLayout 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........SplashScreen">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/loading_screen_image"
android:src="#drawable/loadingscreen"
android:scaleType="centerCrop"
/>< /LinearLayout>
The activity class does nothing beyond start the next activity after 2 seconds, but I can post the code if people want to see it.
Any help would be really appreciated.
imageView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
This code worked on my project.
I'm pretty new with Android development in general. Now we have a UI designer who lets say provided a UI design in photoshop with a template of 720x1280 (xhdpi). So then I take the measurement in pixel and then divide them by 2 to bring it back to mdpi.
When I run the app on phone that doesn't have soft buttons, it matches perfectly with the design provided by the UI designer.
But when the app is ran on phone that have the soft buttons, like the HTC m8, the soft buttons hides the bottom of the app.
Is there a way to fix this issue?
Should the designer make 2 UI design? 1 without soft buttons and 1 without soft buttons? Then in my app I should detect which UI to use? Is there a better solution than this?
Here is an example of my issue :
So the left, is the UI design, the middle is running on phone without soft buttons, and the right is running on the phone with soft buttons.
And here is the xml if you are interested
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="match_parent"
android:layout_height="450dp"
android:background="#android:color/holo_blue_dark">
</View>
<View
android:layout_width="match_parent"
android:layout_height="116dp"
android:padding="10dp"
android:background="#android:color/holo_red_dark">
</View>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#android:color/holo_blue_dark">
</View>
Any help with this is appreciated,
Now we have a UI designer who lets say provided a UI design in photoshop with a template of 720x1280 (xhdpi)
First, 720x1280 is not tied to xhdpi. Density is not related to screen resolution.
Second, not every Android device has a screen resolution of 720x1280, or even a 16:9 aspect ratio.
But when the app is ran on phone that have the soft buttons, like the HTC m8, the soft buttons hides the bottom of the app.
Let's consider this from the standpoint of a Web site. What you are saying is equivalent to saying that you are trying to design an implement a Web site that only supports 720x1280, and if the user has the audacity to have a browser window that is sized differently, the site will not work.
This would be considered by most to be a flawed design, or possibly a flawed implementation of a flawed design.
Web designers and developers should be well-versed in the concept of responsive design, using fluid layouts and the like to make use of available browser window space.
Mobile app development is no different.
A designer is welcome to make a mockup or wireframe of a UI for a 720x1280 resolution screen. However, the designer needs to design around a range of possible screen sizes (not to mention portrait versus landscape orientation). Therefore the designer needs to specify the rules for the layout, not merely create a mockup. And those rules need to take into account differing screen sizes, measured in inches or density-independent pixels (dp in Android, equivalent to CSS pixels for Web developers), not hardware pixels.
Is there a way to fix this issue?
Have the designer provide actual rules for the layout, using mockups primarily as a vehicle to depict the implementation of those rules. Your job would then be to interpret those rules and encode them using built-in containers (e.g., LinearLayout, RelativeLayout, TableLayout, GridLayout) or possibly your own custom ViewGroups as needed.
Should the designer make 2 UI design?
The designer should make one design, but possibly a few mockups, to help explain how that design is responsive for different screen sizes and orientations.
Learning some Android development through trial and error, however I'm having a slight issue with the rendering of buttons on top of an image view depending on the resolution of the phone.
I have an imageview with two imagebuttons (at the moment) on top. They are relative to the imageview. I will post the xml markup below. The issue is when I run this on the "Nexus 4" in Android studio, everything looks correct. When I debug through my Samsung Galaxy S4, the imagebuttons are off slightly, and I'm not sure why this would be a problem if everything is truly relative to the imageview. I understand that the resolutions are different, but how would one go about making sure that this renders the same on the smallest of screens, as well as the newer 1080p screens that are becoming more popular?
I can post pictures if need be, but I feel that the xml will provide adequate information on the issue.
Any help is appreciated. Thanks in advance!
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/SRMap"
android:layout_alignParentTop="false"
android:layout_alignParentLeft="false"
android:background="#drawable/sr_map"
android:layout_columnSpan="2"
android:layout_rowSpan="1"
android:layout_column="0"
android:layout_row="0"
android:contentDescription="Map of Summoners Rift"
android:cropToPadding="false"
android:layout_marginBottom="177dp"/>
<ImageButton
android:layout_width="15dp"
android:layout_height="15dp"
android:id="#+id/BlueSideAlert_BlueBuff"
android:background="#drawable/blue_alert_circle"
android:layout_alignTop="#+id/SRMap"
android:layout_alignLeft="#+id/SRMap"
android:layout_marginLeft="90dp"
android:layout_marginTop="128dp"/>
<ImageButton
android:layout_width="15dp"
android:layout_height="15dp"
android:id="#+id/BlueSideAlert_RedBuff"
android:background="#drawable/blue_alert_circle"
android:layout_alignTop="#+id/SRMap"
android:layout_alignLeft="#+id/SRMap"
android:layout_marginLeft="180dp"
android:layout_marginTop="215dp"/>
but how would one go about making sure that this renders the same on the smallest of screens, as well as the newer 1080p screens that are becoming more popular?
See the Docs here about supporting different screen sizes/resolutions. You create separate layout files adjusted to what you need. Simply use different qualifiers for the layout folder name according to the docs and the correct one will be used according to the device that loads it.
You can try and adjust one file to work on different screens but you are a lot better off using different layouts if it will be ran on different screen sizes and resolutions.
For example: you can have a default res/layout folder and a res/layout-large to be used on larger screens
I handled this in a fairly ugly way, but it works across all screen sizes now. Basically say the primary image was 800x800 dp (the image view). The buttons would be smaller than this (20x20 dp), however through transparency, i created 800x800 dp imageviews (note: no longer buttons) with everything transparent but the "icon" (still 20x20 dp). Although slightly larger in terms of file size, it's negligible in my case. Now no matter what the size of the screen, the imageviews all stretch the same amount, thus removing any guesswork from using the different pixel densities.
I realize that this wasn't the most graceful solution, but I cannot see any drawback aside from making some of the layout development more difficult, and the image files are slightly larger. I used Paint.NET in order to create the .png's that I used.
I am creating an app that is relevant to me, and that I figured would be easy to implement using some of the core functionality already provided in android. My idea is a simple League of Legends Jungle Timer Application. This is important to know as I link the pictures so people can understand the context.
Note that both images are the same resolution, there is just no border on the second one.
http://i.stack.imgur.com/Ad3LZ.jpg
http://i.stack.imgur.com/NfhRM.png
Additional details:
For this app I have disabled the "landscape" orientation, I plan on doing this using some of the details that were provided on this page (layouts).
All of these icon ImageViews are relative to the map, which is the first link, so they will always resize correctly. There are 12 of them also, if it matters.
Thanks all for your help!
I want to develop an app which will support different screen sizes.
I've read the official guide a lot of times, but I can not understand this. I created a brand new app with a main activity, then I put a black square on the screen with 100dp x 100dp dimensions, just like this:
res/layout/activity_main.xml:
<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" >
<FrameLayout
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#000000"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
/>
</RelativeLayout>
When I run this application on my emulator - I get this screen:
And when I run the application on my device (Galaxy tab 2), I get a screen like this:
As you can see, the square running on device is smaller than running on the emulator.
I am using DP in my XML width and height. Is the square supposed to be in the same proportion in all resolutions? If not, what can I do to get this square in the same size in all resolutions?
Yes, this can be confusing.
However, different devices have different amounts of 'DP's. The purpose of this is so that larger screens can hold more content. If you're using images, you can provide different sizes for different screen densities.
For more info, see this page: http://developer.android.com/guide/practices/screens_support.html
So my problem is simple- I want to use XML layouts to precisely control the positioning of widgets on multiple devices. To do this, I thoroughly read the google docs on supporting multiple devices. According to this part, the WVGA854 and HVGA are both considered "Normal screen" size. So theoretically, positioning a widget on WVGA854 should look the same as with HVGA. However, the resultant screenshot shows otherwise.
The widget appears relatively higher placed on the WVGA854 skin. The XML code is shown below, and was placed under the layout-normal/ folder:
<?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:orientation="vertical" >
<ImageButton
android:id="#+id/button1"
android:src="#drawable/icon_unlock"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="300dp"
android:text="Button" />
</RelativeLayout>
The drawables I constructed are in the proper ratios (3:4:6:8 as recommended). So why does this positioning mismatch happen? I beginning to think that using XML to position things is quite fruitless. My app requires very accurate positioning of widgets so even this slight mismatch is a problem. Any help how I can remedy this?
EDIT:
What I want is for the widget to be placed in a manner such that the ratio of margin from top to the margin from bottom is exactly the same across devices. From the screenshot, you can see that this ratio is not the same for WQVGA854 and HVGA.
"Normal Screen" size does not mean that screens have the exact same number of dip. You need to think of it as a bucket which contains a number of different screen sizes which are all similar in physical size.
so using fixed size margins and paddings is not (easily) going to achieve the effect you need. So please clarify your question and give an example of what you exactly want to achieve.