I'm developing an app for cars where the user is able to register the car's plate number. In the home screen I want to show the image of a car with the user's plate (which is a textView). The problem is, whenever I fix it for some resolutions it stops working on others, does anyone know how fix this?
Here's my xml code:
<FrameLayout 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.bsbapps.happycars.HomeFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/notify"/>
<Button
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="callSubscribe"
android:text="#string/subscribe"/>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:gravity="center">
<ImageView
android:id="#+id/car_image"
android:adjustViewBounds="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/car"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="jfk-4548"
android:textStyle="bold"
android:layout_marginBottom="30dip"
android:layout_alignBottom="#id/car_image"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
</LinearLayout>
And here's the image if anyone wants to reproduce exactly what I'm having:
The result I get is (on Nexus 9):
And (on Nexus 5):
The problem is, whenever I fix it for some resolutions it stops working on others, does anyone know how fix this?
If you want to do it dimension-based, you should use multiple "dimens" files.
Change
android:layout_marginBottom="30dip"
to
android:layout_marginBottom="#dimen/someDimensionName"
and then declare someDimensionName in multiple dimens.xml files under resource folders named values-<screen-resolution>:
values/dimens.xml (default)
<dimen name="someDimensionName">30dp</dimen>
values-sw600dp/dimens.xml (large screens)
<dimen name="someDimensionName">60dp</dimen>
(Exact values-size will vary; this is just an example. See the documentation for further details/size options.)
Related
Im trying to make a Flashlight app for android (being an absolute beginner)
The concept is to make IronMan's chest light as the toggle button for the flash light UI.
I set Iron Man as a background ImageView. And set the chest light photo as the button's image src.
The problem is that, in different screen sizes, the alignment of the button gets changed as you can see in the screenshots below.
This is what it has to look like:
Button displaced when screensize changed:
If someone could help me out on how I could solve this problem, it would be great.
My XML code if that would be of any help:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
tools:context="example.flash.flash">
<!-- view for AdMob Interstitial Ad -->
<TextView
android:id="#+id/app_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:text="#string/interstitial_ad_sample"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/level"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/app_title"
android:layout_centerHorizontal="true"
android:text="#string/start_level"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/next_level_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="#string/next_level" />
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/iron"
android:id="#+id/imageView"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorBackground"
android:src="#drawable/onn"
android:scaleType="fitCenter"
android:layout_marginBottom="57dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
<com.google.android.gms.ads.AdView
android:id="#+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
ads:adSize="BANNER"
ads:adUnitId="#string/banner_home_footer"></com.google.android.gms.ads.AdView>
</RelativeLayout>
The problem is that you are designing the layout specific to one device/screen.
From the docs-
Android supports several configuration qualifiers that allow you to
control how the system selects your alternative resources based on the
characteristics of the current device screen. A configuration
qualifier is a string that you can append to a resource directory in
your Android project and specifies the configuration for which the
resources inside are designed.
See Different values folders in android as to how you can make different values/dimens.xml to suit different screens.
So create different values folder and check the docs - link
What parent layout are you using?
If RelativeLayout then you have to make buttons relative to each other.
I've tried to match as exactly as possible the tablet this is being designed for, a Samsung Tab S2 - 9.7" screen size, 2048x1536 - I've created an AVD to match that.
I've lined up the images as shown here:
But when I deploy it, they jump around, as shown here:
They get even worse depending on other tablets, but I'm just trying one for now. I'm using a full screen relative layout with DP for the dimensions and margins, so why do they jump around so much? Shouldn't it always be the same distance from the top/sides? How come even though the dimensions and pixels match exactly in the AVD and the tablet, it moves around?
I'm completely lost, I've read everything I can from setting margins in code to absolute layouts (no longer supported). Everything points back to DP, but even using an exact match tablet and designer, they change location and size.
<FrameLayout 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:background="#drawable/background_buttons"
tools:context="com.cimulus.samocoseat.MainMenu">
<!-- This FrameLayout insets its children based on system windows using
android:fitsSystemWindows. -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fullscreen_content_controls_a"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="UselessParent">
<ImageView
android:id="#+id/seatView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/seat"
android:layout_marginTop="60dp"
android:layout_marginBottom="60dp"
android:layout_marginLeft="245dp"
/>
<ImageButton
android:layout_width="124dp"
android:layout_height="75dp"
android:text="Seat Back Forward"
android:id="#+id/seatBackForward"
android:background="#drawable/left_inactive"
android:layout_marginTop="266dp"
android:layout_marginStart="38dp" />
<Button
android:layout_width="124dp"
android:layout_height="75dp"
android:text="Seat Back Forward"
android:id="#+id/legRightExtension"
android:background="#drawable/left_inactive"
android:layout_marginTop="142dp"
android:layout_marginLeft="100dp" />
</RelativeLayout>
</FrameLayout>
Any help is greatly appreciated.
Edit: I've also tried the relative layout existing on it's own, which gives me the same results overall:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fullscreen_content_controls_a"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_buttons">
<ImageView
android:id="#+id/seatView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/seat"
android:layout_marginTop="60dp"
android:layout_marginBottom="60dp"
android:layout_marginLeft="245dp"
/>
<ImageButton
android:layout_width="124dp"
android:layout_height="75dp"
android:text="Seat Back Forward"
android:id="#+id/seatBackForward"
android:background="#drawable/left_inactive"
android:layout_marginTop="266dp"
android:layout_marginStart="38dp" />
<Button
android:layout_width="124dp"
android:layout_height="75dp"
android:text="Seat Back Forward"
android:id="#+id/legRightExtension"
android:background="#drawable/left_inactive"
android:layout_marginTop="142dp"
android:layout_marginLeft="100dp" />
</RelativeLayout>
I had a similar problem and someone suggested using this library - https://github.com/intuit/sdp . It provides units, that are automatically scaled across devices with different screen characteristics. Hope it helps :)
I've got an activity layout specified in an XML file - activity_intro.xml - and I'm trying to create another one that is similar but slightly different - that's going to be activity_instructions.xml.
The Intro activity has a 9patch image at the bottom of the screen that is supposed to stay there and only adjust to different widths of the screens.
The Instructions activity is supposed to contain the same image but above 2 more buttons - all three of these views need to be always located at the bottom of the screen.
activity_intro.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" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#drawable/home_background" >
<LinearLayout
style="#style/Activity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/introAnimationImageView"
android:layout_width="152dip"
android:layout_height="176dip"
android:layout_gravity="center_horizontal"
android:contentDescription="#string/intro_animation_content_description"
android:src="#drawable/animation_intro01" />
<TextView
android:id="#+id/introTextViewTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/intro_title"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/introTextViewSubtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/intro_subtitle"
android:textAppearance="?android:attr/textAppearanceMedium" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/introButtonLoginSignup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="#string/intro_button_label_login_signup" />
<Button
android:id="#+id/introButtonInstructions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_alignRight="#+id/introButtonLoginSignup"
android:text="#string/intro_button_label_instructions" />
<Button
android:id="#+id/introButtonReportAnonymously"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/introButtonLoginSignup"
android:layout_centerHorizontal="true"
android:text="#string/intro_button_label_report_anonymously" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:contentDescription="#null"
android:scaleType="fitXY"
android:src="#drawable/footer_cityscape" />
</LinearLayout>
Result:
Since I've got working code for Intro, I wanted to make Instructions follow its example but the layout_weight property isn't behaving as expected. First of all, I was only trying to put in the 2 buttons and leave out the image:
<?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" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="0.1"
android:background="#drawable/home_background" >
<LinearLayout
style="#style/Activity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/instructionsTextViewTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/instructions_title_1"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="bold" />
<ImageView
android:id="#+id/instructionsImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/instructions_image_content_description"
android:src="#drawable/forms" />
<TextView
android:id="#+id/instructionsTextViewDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/instructions_description_1"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</ScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/instructionsButtonPrevious"
style="#style/ButtonPrevious"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="#string/instructions_button_label_previous" />
<Button
android:id="#+id/instructionsButtonNext"
style="#style/ButtonNext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="#string/instructions_button_label_next" />
</RelativeLayout>
</LinearLayout>
This only worked when I set the layout_weight of the bottom RelativeLayout to 1 (instead of 0) and for the ScrollView 0.1 (instead of 1). If I used the original values the RelativeLayout would take up all the screen. Could anyone explain to me why that is?
I also tried googling the issue and noticed people would suggest to set layout_height to 0dip which I tried but it also didn't work as expected.
Secondly, I tried adding the already mentioned ImageView to the bottom RelativeLayout. This, however, basically displays only the ImageView and not the buttons - or one of the buttons is on top of the image (hiding it). Why is that? Don't I specifically set the buttons to be placed below it?
What should the code look like in order for it to be doing what I expect it?
Further explanation:
Below are images that should help indicate what exactly I want to achieve. The green bits are the ScrollViews - I added them because Android devices tend to have diverse screen sizes. Their purpose is to present the content properly independently of the screen size, i.e. if the screen is small, the user will be able to scroll that part to read the entire text and view the image.
The red bit on the left (Intro) shows the ImageView that is supposed to always be at the bottom of the screen; it'll always be there, visible, and it's the green bit above it that will be movable.
If you take a look at the red bit on the right (Instructions), there's a Next button that's covering the image with the lorry/truck that was visible in the Intro screenshot. Now that's wrong - there should be 2 buttons BELOW the image, as seen on the last screenshot (the 2 blue rectangles).
I'm working on a ListView where each item has an image and some text. On my older phone, HTC Evo 4G, things came up exactly as expected. Image is nicely sized and text looks fine. Then I loaded the same app on my new phone, HTC One, and the images are so tiny they are useless. I know the HTC One has a significantly higher resolution, but I cannot figure out how to make each item in the ListView larger.
I'm not sure what to post, but I think the layout xml files are the issue.
Here's activity_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="vertical">
<LinearLayout android:id="#+id/LinearLayout01"
android:layout_height="wrap_content" android:orientation="horizontal"
android:layout_width="fill_parent" android:gravity="center_horizontal"
android:layout_marginTop="2dip" android:background="#669900">
<!--
Use layout_weight to stretch the EditText and compress the button.
To avoid text wrap, the editable text is forced to occupy only one
line
-->
<EditText android:layout_width="wrap_content"
android:typeface="normal"
android:layout_weight="1" android:lines="1" android:ellipsize="middle"
android:hint="#string/hint" android:id="#+id/search_key" android:layout_height="fill_parent" android:maxLines="1"></EditText>
<ImageButton android:layout_width="wrap_content" android:src="#drawable/ic_menu_search" android:adjustViewBounds="true"
android:layout_weight="0" android:id="#+id/btn_ok" android:layout_height="wrap_content"></ImageButton>
</LinearLayout>
<TextView android:layout_height="wrap_content" android:id="#+id/tweet_header"
android:gravity="right" android:layout_width="fill_parent" android:paddingRight="4dp"
android:background="#99cc33" android:textColor="#000000" android:textSize="21dp"></TextView>
<ListView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="#+id/tweet_list"></ListView>
</LinearLayout>
And the ListView is made up of this item.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/itemImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_height="wrap_content"
android:id="#+id/created_at"
android:text="now"
android:textSize="10sp"
android:layout_below="#id/itemImage"
android:layout_alignParentRight="true"
android:textStyle="italic"
android:layout_width="wrap_content"></TextView>
<TextView
android:id="#+id/itemURL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="itemURL"
android:visibility="invisible" />
</RelativeLayout>
So the app does this: It taps ebay for car data and presents the search results as line 1 with a picture, line 2 with the ebay item title. A hidden value is the URL so users can tap the ListView line and launch a web browser.
Looks like the wrap_content setting for the ImageView's layout_width and layout_height are the issue. When I switched that to numerical values, suddenly I saw it change size. Finally setting it to 100dp made the images viewable.
As an aside, I had a terrible time with ADS and the emulator. It consistently failed to re-load my updated app. Often complaining about the Package Manager and suggesting the some process was running. I little idea what was running and how to fix it. When I switched to loading the app straight to the phone, then it worked fine.
So, I think now I need to create a system that is proportional, and takes in to consideration the displaying devices resolution.
Problem is the Relative Layout width being wrap_content. Try changing that to match parent. then you would not have to go thru this ordeal
When I run my android application in Android version >=4 I got this out put(I didn't tested in android version 3):
When run the same application in android version 2.3 I got a bit different output:
You can see in second screenshot the image for about button is not visible. But when I try run the same application several times on 2.3 some times I got about image visible.Here is my code :
<?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" >
<include layout="#layout/actionbar_with_right_button" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:scrollbars="none" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:drawablePadding="#dimen/settings_text_view_drawable_padding"
android:drawableTop="#drawable/snooze_button"
android:gravity="center"
android:onClick="showRemainderSnoozeSettings"
android:padding="#dimen/settings_text_view_padding"
android:text="#string/snooze" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:drawablePadding="#dimen/settings_text_view_drawable_padding"
android:drawableTop="#drawable/help_button"
android:gravity="center"
android:onClick="showFaq"
android:padding="#dimen/settings_text_view_padding"
android:text="#string/help" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:drawablePadding="#dimen/settings_text_view_drawable_padding"
android:drawableTop="#drawable/about_button"
android:gravity="center"
android:onClick="showAbout"
android:padding="#dimen/settings_text_view_padding"
android:text="#string/about" />
</LinearLayout>
</ScrollView>
I didn't understand why this is happening.
Can anyone help me to solve this issue.
Edit :
One more important thing I forgot to mention when I changed android:drawableTop="#drawable/about_button" to android:drawableTop="#drawable/help_button" of about TextView. It worked perfectly. So it can be an issue of my about_button image. So I recreated the about image again and put in all drawable folder. Even after that also I didn't get any +ve result. This issue only in 2.3 or less.
Thanks
May this help you:
Seems like this is a bug with android, where sometimes the first image in the drawable folder doesn't get displayed.....
I had a similar bug - a particular drawable was not being displayed, no matter in what ImageView. So I Added a dummy image called aaaa.png to the drawable folder and problem was solved....