Recently I've been working on my first android app that converts to and from different units of temperatures. I have all the actual coding down pat, but I'm having an issue creating a GUI for it. I've been using the DroidDraw UI builder to generate the xml code; Inside of DroidDraw I'm using RelativeLayout throughout the entire UI. Whenver I create it in DroidDraw it looks fine in the preview, but when I try to run the app, it always ends up looking like basically a jumbled mess:
Does this have anything to due with requirements for different screen sizes, and if so, how can I fix it?
Adding some extra information, I'm not running it through an emulator; I'm running it on my captivate which has a 480x800 screen. Also, I'm building using the NetBeans IDE with the NBAndroid Plugin.
Here's my [main.xml][2] file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/widget32"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<EditText
android:id="#+id/input"
android:layout_width="100px"
android:layout_height="wrap_content"
android:textSize="18sp"
android:layout_alignTop="#+id/output"
android:layout_alignParentLeft="true"
>
</EditText>
<TextView
android:id="#+id/widget42"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Output"
android:layout_below="#+id/ftok"
android:layout_alignLeft="#+id/ktoc"
>
</TextView>
<TextView
android:id="#+id/widget41"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Input"
android:layout_below="#+id/ftok"
android:layout_alignParentLeft="true"
>
</TextView>
<Button
android:id="#+id/ftok"
android:layout_width="104px"
android:layout_height="wrap_content"
android:text="Far To Kel"
android:textStyle="bold"
android:layout_alignTop="#+id/ctok"
android:layout_alignParentLeft="true"
>
</Button>
<Button
android:id="#+id/ctok"
android:layout_width="104px"
android:layout_height="wrap_content"
android:text="Cel To Kel"
android:textStyle="bold"
android:layout_alignTop="#+id/ktoc"
android:layout_alignLeft="#+id/ctof"
>
</Button>
<Button
android:id="#+id/ktoc"
android:layout_width="104px"
android:layout_height="wrap_content"
android:text="Kel To Cel"
android:textStyle="bold"
android:layout_below="#+id/ctof"
android:layout_alignParentRight="true"
>
</Button>
<Button
android:id="#+id/ctof"
android:layout_width="104px"
android:layout_height="wrap_content"
android:text="Cel To Far"
android:textStyle="bold"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
>
</Button>
<Button
android:id="#+id/ktof"
android:layout_width="104px"
android:layout_height="wrap_content"
android:text="Kel To Far"
android:textStyle="bold"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
>
</Button>
<Button
android:id="#+id/ftoc"
android:layout_width="104px"
android:layout_height="wrap_content"
android:text="Far To Cel"
android:textStyle="bold"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
>
</Button>
<TextView
android:id="#+id/widget50"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Temperature Conversion is Fun!"
android:textSize="16sp"
android:textStyle="bold"
android:layout_below="#+id/widget49"
android:layout_toRightOf="#+id/widget41"
>
</TextView>
<TextView
android:id="#+id/widget49"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Kel=Kelvin"
android:layout_below="#+id/widget48"
android:layout_alignLeft="#+id/ctok"
>
</TextView>
<TextView
android:id="#+id/widget48"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cel=Celcius"
android:layout_below="#+id/widget47"
android:layout_alignLeft="#+id/ctok"
>
</TextView>
<TextView
android:id="#+id/widget47"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Far=Fahrenheit"
android:layout_below="#+id/input"
android:layout_alignLeft="#+id/ctok"
>
</TextView>
<EditText
android:id="#+id/output"
android:layout_width="100px"
android:layout_height="wrap_content"
android:textSize="18sp"
android:layout_below="#+id/widget42"
android:layout_toRightOf="#+id/ctok"
>
</EditText>
</RelativeLayout>
Any help would be much appreciated.
I never used droiddraw for real world layouts before and just downloaded it to test a bit around.
And from what I see: I would not recommend using it.
All the generated layouts use px by default as a unit to specify view sizes. That is a very bad idea in terms of android layouts (due to the many screen sizes/densities around) and should almost never be neccessary (I have yet to find a layout where that's useful). And even worse, I can't specify any other unit in the properties tab.
That leads to the exact problems you are seeing. Layouts which look correct on the screen size they were designed for and horribly failing on every other screen.
I recommend writing XML by hand. Or if you rather use a WYSIWYG editor, use the eclipse ADT plugin, that editor improved a lot recently.
Since the Dalvik Virtual Machine is heavily based on the Java Virtual Machine and I'm a Java Programmer, I can offer a little advice. If the droid API has an equivalent to JPanel, organize stuff with Panels (it looked like you may do that already). Also, check to see if the frame has a "refresh()" type of function - Usually that helps to tell the window to organize stuff accordingly.
Related
I've created a notification out of custom view.
The problem is that it looks fine on a Nexus 5X device but it looks broken on Samsung Galaxy S4 device.
My notification contains Hebrew content, so it needs to be with a right-to-left direction (meaning buttons are on the left and text is on the right).
This is what the notification looks like on the Nexus 5X device (just like I meant it to look):
This is what the notification looks like on the Samsung Galaxy S4 device:
As you can see, the notification on the Galaxy S4 is differently (the buttons on the right, the text indentation is off and so on)
I have to say that most of the app looks fine on both of the devices.
This is the only thing that set the two apart.
In addition, both of the devices are set to the same language and locale.
This is the code of the layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1"
android:layout_marginTop="-4dip"
android:layoutDirection="locale">
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="59dp"
android:text="סבבה"
android:layout_height="227dp"
android:id="#+id/attendButton"
android:layout_marginLeft="-5dip"
android:layout_marginTop="-72dip" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="59dp"
android:text="לא טוב"
android:layout_height="245dp"
android:id="#+id/declineButton"
android:layout_marginLeft="-7dip"
android:layout_marginTop="-80dip" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Event Name"
android:tag="event"
android:id="#+id/eventName"
android:textColor="#android:color/black"
android:textSize="21sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:text="TextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/textView"
android:layout_weight="1"
android:visibility="invisible"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="EventTime"
android:id="#+id/eventTimeTxt"
android:textColor="#000000"
android:gravity="right"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="EventDayOfWeek"
android:id="#+id/eventDayOfTheWeekTxt"
android:textColor="#000000"/>
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="yesFromInvited"
android:textColor="#000000"
android:id="#+id/yesFromInvitedTxt"/>
</LinearLayout>
</LinearLayout>
I'm thinking that the location of the text and the buttons in the notification might have something to do with the fact that the content is in Hebrew (Right-to-Left language).
I have tried it on two different Galaxsy S4 devices, both of them have Android 5.0.1, and it looks the same in both of them. All of the devices are the same language and locale.
What can I do in order to fix this issue?
I won't refer to the fact that your design not following the design recommendation for Notification (as you can read here).
What I will say is that, regarding the fact that you declared that your content will be Hebrew, you just didn't design your xml attributes properly. You should use:
android:layoutDirection="rtl"
And also make sure to add android:supportsRtl="true" in the Application tag in the manifest.
And your buttons need to be inserted at the end of the root LinearLayout, not in the start.
Your xml should be something like that:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/eventName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:tag="event"
android:text="שם האירוע"
android:textColor="#android:color/black"
android:textSize="21sp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView"
android:visibility="invisible"/>
<TextView
android:id="#+id/eventTimeTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:text="EventTime"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#000000"/>
<TextView
android:id="#+id/eventDayOfTheWeekTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="EventDayOfWeek"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#000000"/>
</LinearLayout>
<TextView
android:id="#+id/yesFromInvitedTxt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="yesFromInvited"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#000000"/>
</LinearLayout>
<Button
android:id="#+id/attendButton"
style="?android:attr/buttonStyleSmall"
android:layout_width="59dp"
android:layout_height="227dp"
android:layout_marginLeft="-5dip"
android:layout_marginTop="-72dip"
android:text="סבבה"/>
<Button
android:id="#+id/declineButton"
style="?android:attr/buttonStyleSmall"
android:layout_width="59dp"
android:layout_height="245dp"
android:layout_marginLeft="-7dip"
android:layout_marginTop="-80dip"
android:text="לא טוב"/>
In your samsung device RTL is getting applied, its possible because samsung customize android framework.
Here I think you should disable RTL by setting android:layoutDirection="ltr" property in XML.
First, open the Galaxy S4's Developer Options page from the Android Settings menu and check "Force RTL layout direction". Check if the notification changes in any way - if it does, it means that the device does not correctly recognize the layout as being RTL in the first place.
Alternatively, you will need to check whether your device actually supports RTL locales. Keep in mind that a locale is not just <language>_<country>, but also has the notion of scripts, variants and extensions. Easiest way to check this:
Configuration config = getResources().getConfiguration();
if(config.getLayoutDirection() == View.LAYOUT_DIRECTION_RTL) {
//in Right To Left layout
}
Apart from that, when you create layouts that are meant to work with RTL locales, avoid using android:gravity="right" or android:gravity="left". Use end and start instead.
I'm begin to learning android programming and I did not know much about this language
I write a program. I do not know why when I see my user interface it is good but when I run it with different emulators , each emulator show it in different way
enter code here : <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" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context="com.example.faezeh.homework2.MainActivity"
android:orientation="vertical"
>
<TextView android:text="تمرین دوم"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textSize="50sp"
android:textColor="#ff4400"
android:paddingTop="30dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="مدیریت یادداشت"
android:layout_gravity="center_horizontal"
android:textSize="40sp"
android:textColor="#000000"
android:paddingTop="30dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="تاریخ : 1393/12/26"
android:layout_gravity="center_horizontal"
android:textSize="40sp"
android:textColor="#000000"
android:paddingTop="30dp"
/>
<Button
android:id="#+id/theList"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="فهرست یادداشت ها"
android:textSize="30sp"
android:textColor="#000000"
android:background="#00ffff"
android:layout_gravity="center_horizontal"
android:layout_marginTop="30dp"
/>
<Button
android:id="#+id/search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="جستجوی یادداشت "
android:textSize="30sp"
android:textColor="#000000"
android:background="#00ffff"
android:layout_marginTop="10dp"
android:layout_gravity="center_horizontal"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="bottom"
>
<Button
android:id="#+id/aboutUs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="درباره ما"
android:textSize="35sp"
android:textColor="#000000"
android:background="#00ffff"
android:layout_gravity="left|bottom"
/>
<Button
android:id="#+id/setting"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="تنظیمات"
android:textSize="35sp"
android:textColor="#000000"
android:background="#00ffff"
android:layout_gravity="right|bottom"
/>
</LinearLayout>
try to see this thing in your eclipse then your user interface will never change.
you can convert Activity check at here is schreen size 15 schreen sizes are given here to check all android device follow these size once
Since android is available for various types of devices, here I am saying the screen size of the device. So every device comes under certain category with their corresponding screen size, these category are probably LDPI, MDPI, HDPI, XHDPI and XXHDPI. So the design we do usually varies among different screen size.
For detail information regarding the multiple screen size in android and how to handle it, do visit:
http://developer.android.com/guide/practices/screens_support.html
what i have to do to fix this? for example nexus one and nexus 5 show
my program in different way . what i have to do to both of them show
it in right way? – faezeh 1 hour ago
Well for this case you have to particularly design your screens in such a way that it optimize all the screen size. For this here are some key design parameters you should look on:
use textAppearnce instead of textSize property like :
android:textAppearance="?android:attr/textAppearanceLarge"
Try to hard code your controls specially buttons, as dp automatically resize according to the screen size of device.
Try to use layout_weight property in your design.
If you follow this basic guideline, then there will be no problem.
Cheers
I am very novice in android platform.I am trying to design an application.For the design purpose i have taken RelativeLayout .But the unique thing that i am noticing is while seeing it in graphical Layout in eclipse ,Buttons and EditText are at different position while it is at right position when seeing in emulator.
Here is my code..
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/pnr_bg"
android:orientation="vertical"
android:padding="0dp" >
<ImageButton
android:id="#+id/ImageButton01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="100dp"
android:layout_marginTop="220dp"
android:maxHeight="30dp"
android:src="#drawable/pnr_normal" />
<ImageButton
android:id="#+id/ImageButton01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="266dp"
android:layout_marginTop="220dp"
android:maxHeight="30dp"
android:src="#drawable/tenq_normal" />
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:ems="10" >
<requestFocus />
</EditText>
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/editText1"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:src="#drawable/submit" />
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_column="0"
android:layout_columnSpan="6"
android:layout_gravity="right|bottom"
android:layout_row="6"
android:layout_height="match_parent"
android:textColor="#0f0f0f" />
Why is this happening.Will it do any impact on the different size of the mobile screens.
Please help me..
Yes that's correct thing. Whatever layout/UI you see, it won't be the same in emulator or real device. Reason being is android comes with multiple and variety of resolutions. The layout which you see while designing is just to preview the design or we can say just a sample preview of UI with controls/widgets you have taken.
You can consider it as an advantage of designing UI/layout in android for different resolutions/multiple screens.
When I say advantage, it means you can design just a single layout and can preview it for multiple screens, and so you would be having better idea.
Update:
Just check the image and do the same thing as depicted in image, to preview all screens. Once again I am repeating, the preview which you are seeing is just a preview, it would looks somewhat different in real devices.
I'm currently learning android development, and before I get too stuck in to a large project, I decided I would need to learn about making an application accessible from as many devices as possible.
So I have a test application using RelativeLayout. The top-level activity has 6 large menu buttons on it. These buttons are square graphical images (not 9-patch buttons as they are - to my knowledge - too graphically primitive). On the device I'm using for testing, these buttons appear in a perfect 2x3 arrangement like such:
However, when I try and run this application on a larger device, the buttons will appear like so:
Is there a way to scale non-9-patch buttons based on the size of the screen, so that they will always appear like the first image? Is this recommended? If not, is there an alternative way of doing such a layout for different screen sizes?
My ideal layout would be scalable across different devices, like so:
I am using similar menu. And here is first row of it. The buttons in this menu has labels too.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dip"
android:layout_marginRight="20dip"
android:gravity="center" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dip" >
<Button
android:id="#+id/screen_home_btn_profile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/selector_ic_my_profile" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:paddingBottom="5dip" >
<TextView
style="#style/label_text_style_home_screen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/screen_home_label_my" />
<TextView
style="#style/label_text_style_home_screen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/screen_home_label_profile"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dip" >
<Button
android:id="#+id/screen_home_btn_application"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/selector_ic_my_application" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:paddingBottom="5dip" >
<TextView
style="#style/label_text_style_home_screen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/screen_home_label_my" />
<TextView
style="#style/label_text_style_home_screen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/screen_home_label_application"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
It seems you are giving outer margins to the buttons. Align them in center and give spaces between 2 buttons and not the screen border & buttons.
I am using the default EditText control in my app and the font and resolution looks very poor, especially in comparison to whatever DbTextViewer or the Internet/Chrome browser is using, which looks much cleaner.
The app is intended to run on larger-screen device like tablets, and not so much phones.
How do you improve the appearance of the text here?
Here is my app
DbTextEditViewer looks much nicer
main.xml
<EditText
android:id="#+id/edtx"
android:inputType="textFilter|textMultiLine"
android:textSize="10sp" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="0dp"
android:paddingBottom="0dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:orientation="horizontal" >
<Button
android:id="#+id/button2"
android:paddingBottom="8dp"
android:layout_width="wrap_content"
android:layout_height="26sp"
android:textSize="8sp"
android:text="save"/>
</LinearLayout>
</LinearLayout>
I found the answer to my question indirectly at
https://stackoverflow.com/a/6922397/266457
http://developer.android.com/guide/practices/screens_support.html