I have got an application that is essentially a giant calculator. Within this application it has a total of 75 unique equations and each one has different number of variables and displayed results. I currently have a sliding drawer implemented with the list of the equations of them to choose from and when they click on it, I have a fragment area to put the screen for calculating it. I am currently just implementing a fragment activity for each calculation along with a layout for each one. Does anyone know what best practice is for accomplishing something with this many screens? Do I accomplish them by creating the layout on the fly in the activity? Do I keep it how it is? I am just trying to figure out if the tedious work I am doing with this can be accomplished in an easier manner (I know I have to create the activities to do the work) .
EDIT
The layouts vary in complexity depending on the calcuation. Some of them are to the nth entry from the user and requires a gridview while others will just be simple like example below:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android=blah blah
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:background="DCDCDC"
android:orientation="horizontal" >
<EditText
android:id="#+id/etTempInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_below="#+id/tvTempInputLabel"
android:ems="10"
android:inputType="numberSigned" >
<requestFocus />
</EditText>
<TextView
android:id="#+id/tvTempInputLabel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="10dp"
android:text="Medium_Text"
android:textAppearance="?androd:attr/textAppearanceMedium" >
</TextView>
<Spinner
android:id="#+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/etTempInput"
android:layout_toRightOf="#+id/etTempInput" />
<TextView
android:id="#+id/tvTempResult"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/etTempInput"
android:layout_marginTop="22dp"
android:text="Medium_Text"
android:textAppearance="?androd:attr/textAppearanceMedium" >
</TextView>
<Button
android:id="#+id/btnTempCalc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/tvTempResult"
android:text="Calculate" />
</RelativeLayout>
really hard without seeing the layouts, but it sounds as building up the layouts dynamically ( perhaps from building-blocks in xml ) could tidy things up
The answer I came to with this is to just create each page by itself as there is no consistency between the pages. I looked at several options but none of them met my needs. So look out 75 layouts and code files here I come.
Related
So Android Studio has the drag/drop feature in the design tab. I am able to place the elements where I want them, and the layout looks great on the screen.
However, when I go to run the app emulator, it looks completely different. Everything gets shoved up to the top-left hand corner of the screen, nowhere near where I placed it in design mode.
Is there a way to have your elements show the same way in the emulator, as the way you place them in design mode? Right now I'm having to go back and edit all the code each time.
I have my code below, as well as a image link below to further clarify my point.Comparison of Design mode vs App Emulator
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.luke.currencyconverter.MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enter The Amount in Dollars"
tools:layout_editor_absoluteX="-159dp"
tools:layout_editor_absoluteY="126dp" />
<TextView
android:id="#+id/textView2"
android:layout_width="403dp"
android:layout_height="0dp"
android:text="Enter The Amount in Dollars:"
android:textColor="#android:color/black"
android:textSize="22sp"
tools:layout_editor_absoluteX="33dp"
tools:layout_editor_absoluteY="365dp" />
<ImageView
android:id="#+id/currency"
android:layout_width="361dp"
android:layout_height="450dp"
app:srcCompat="#drawable/currency"
tools:layout_editor_absoluteX="12dp"
tools:layout_editor_absoluteY="-117dp" />
<Button
android:id="#+id/convert"
android:layout_width="361dp"
android:layout_height="wrap_content"
android:onClick="convert"
android:text="Convert"
tools:layout_editor_absoluteX="12dp"
tools:layout_editor_absoluteY="462dp" />
<EditText
android:id="#+id/dollarField"
android:layout_width="368dp"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="numberDecimal"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="408dp" />
</android.support.constraint.ConstraintLayout>
Drag and drop for android will only place the object within the screen. To keep it there you should modify the xml so that the objects will be constrained to each other.
You can use either relative layout or constraint layout for an easier time in designing your layout.
I figured it out. I was using "constraint layout", and I needed to use "relative layout".
I just had this error as well and as annoying as it sounds, my solution was to delete my xml file and recreate it.
I am new to android programming and am trying to understand the android architecture and how are applications built around it.
So there is no real world need for this as of now. Its just some experimentation that I am doing to learn the stuff. What I want here is 3 different views, TextView, EditText and Button, horizontally next to each other. To achieve this here's the activity_main.xml that I am using : -
<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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
<EditText android:id="#+id/edit_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/edit_message" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text_to_appear_on_button" />
</LinearLayout>
On running the MainActivity.java, that has setContentView(R.layout.activity_main);, in the onCreate(), I get the TextView and the EditText widgets on the screen, horizontally next to one another, but not the Button. I wonder why ?
And strangely I have observed that the last element inside
<LinearLayout>..</LinearLayout>
is the one that gets vanished from the screen. So if <Button .. /> is exchanged with say <TextView .. />then its the <TextView> element that will not be visible on the screen now.
Please explain what am I missing out here.
I am running the MainActivity.java on the emulator and am using Eclipse as my IDE, if this information helps further.
It depends on what you want to do. If you want three things horizontally in a LinearLayout, you will likely run out of space on the screen. To guarantee that all three fit, set:
android:layout_width="match_parent"
android:layout_weight="1"
For all 3. You can mess around with the weight as you see fit, but basically this will tell the rendering to fit all three objects on the screen horizontally, each one taking up 1/3 of the screen (if you change weight, it will be different values).
If using LinearLayout, you will probably nest multiple layouts, with a main vertical LinearLayout containing several horizontal ones. It is a valid approach, and is probably a matter of preference. LinearLayout allow for weights, which can be extremely useful because they are one way of guaranteeing things don't get cut off the screen.
RelativeLayout is another approach, wherein you specify where things on the screen are relative to each other (Left, Right, Above, Below). While these don't use weights, you can align elements with the edges of the screen and get the same effect.
As I said, the approach is largely a matter of preference, and usually some mesh of both works pretty well.
I recommend to you use relative layout for your xml ,If you use linear your widgets are assigned one by one,not your wish.its for your further developement
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="101dp"
android:layout_marginTop="50dp"
android:text="TextView" />
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView1"
android:layout_below="#+id/textView1"
android:layout_marginTop="67dp"
android:ems="10" >
<requestFocus />
</EditText>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/editText1"
android:layout_below="#+id/editText1"
android:layout_marginTop="59dp"
android:text="Button" />
</RelativeLayout>
First let me attempt to layout what I am trying to accomplish here.
EditText
EditText SearchButton
ListView (search result. there can be only one, ListView with adapter and height of wrap_content seems to work for this, there is a button to add the result to the ListView below. Once the add button is clicked this ListView collapses, which is exactly what I am after)
TextView (label for objects added)
ListView (list of objects added, again I'm using an adapter for the list row layout)
SaveButton
I was going to paste the code that I have but there is just too much to go through. The issues I am having are with the ListViews. Basically, the ListView that contains the objects added will end up pushing the SaveButton off of the screen. I have tried a ton of solutions laid out on this and many other sites but they just don't seem to work right.
Basically, I want the SaveButton to always be at the bottom and I don't want it to get pushed off the screen when the ListView gets too big. The only solution I have found to "work" was to explicitly set the height of the ListViews. However, this causes problems when going from tablet to phone (Nexus7 & Galaxy S3). I thought that using dip for sizes would prevent this from happening but apparently not.
If anyone has a good strategy for creating this type of layout that would be great. Or even a good resource for learning how to use Android's clunky UI system (it really leaves a bit to be desired).
Edit: here is my attempt at using a RelativeLayout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/main_background"
android:orientation="vertical" >
<EditText
android:id="#+id/plan_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:ems="10"
android:hint="#string/plan_name_hint"
android:textColor="#color/text_color" >
<requestFocus />
</EditText>
<EditText
android:id="#+id/object_search_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/plan_name"
android:ems="10"
android:hint="#string/search_objects_text"
android:textColor="#color/text_color" >
</EditText>
<Button
android:id="#+id/objects_search_button"
style="#style/button_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/object_search_text"
android:layout_below="#id/plan_name"
android:layout_alignParentRight="true"
android:background="#drawable/black_button"
android:text="#string/search_objects_button_label" />
<ListView
android:id="#+id/search_result"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/object_search_text"
android:background="#color/main_background"
android:textColor="#color/text_color" >
</ListView>
<TextView
android:id="#+id/objects_list_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/search_result"
android:paddingBottom="8dip"
android:paddingLeft="8dip"
android:text="#string/plan_objects_list_label"
android:textColor="#color/text_color"
android:textSize="22sp"
android:textStyle="bold" />
<ListView
android:id="#+id/plan_objects"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/objects_list_label"
android:background="#color/main_background"
android:textColor="#color/text_color" >
</ListView>
<Button
android:id="#+id/save_plan_button"
style="#style/button_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#drawable/black_button"
android:paddingLeft="8dip"
android:text="#string/save_button_label" />
If you think the Android UI system is clunky, you obviously haven't tried to understand it. For most things its extremely well designed.
If you want a certain view (or views) to always be at the bottom, then you want to make your screen a RelativeLayout and put android:layout_alignParentBottom="true" on those element(s). Then add android:layout_above="id" on whatever you want to be above them, where id is the id of the element you want at the bottom.
Make the SaveButton and ListView at the same hierarchy level. e.g if your parent layout is RelativeLayout in your SaveButton add this property android:layout_alignParentBottom="true"
It looks like the only real solution here is to use explicit sizes for the list views and plan accordingly for different screen sizes (i.e. create different layouts for different screens and outlined here.). I was hoping for something a little more generic. Oh well.
I have a log In page with username and password fields. I would like to know the best place to put the log-in button below them. Should it be left-aligned, centered, right-aligned or fill the entire width of the parent?
Is there a industry standard or best practice for Android Log In Buttons?
An idea would be to align them below the edit text views that will be completed. That's the most elegant way to do it.
You can try something like this
Or maybe something like this one
I would say put the login button below the fields. And center it, filling the same amount of space as the fields. This would look the best and would show up great in landscape and portrait.
A lot of companies put a lot of research into the best UI layouts.
The basic layout for login activity that I stumble upon everywhere in a books looks like this:
<TextView android:id="#+id/userNameLbl"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:text="Username: "
android:layout_alignParentTop="true" />
<EditText android:id="#+id/userNameText"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_below="#id/userNameLbl" />
<TextView android:id="#+id/pwdLbl"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_below="#id/userNameText"
android:text="Password: " />
<EditText android:id="#+id/pwdText"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_below="#id/pwdLbl" />
<Button android:id="#+id/btn" android:onClick="doClick"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:text="Login" />
So it's pretty much similar to what #Arkde tried to show you in the second link.
Hope this helps.
I am trying to achieve this in an android app layout.
So far I have managed to get the buttons the way I wish, but I am having trouble working out how I am going to implement the divider and the layout on the right side of it.
Here is what I have so far:
<?xml version="1.0" encoding="utf-8"?>
<!-- this is main activity's layout. a main menu of sorts. -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:gravity="center" android:background="#drawable/background">
<RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:id="#+id/layout_maintest2_relativelayoutleft">
<Button android:text="#string/string_main_NewCalculation" android:drawableLeft="#drawable/calculator5" android:onClick="onClickButton_NewCalculation" android:id="#+id/button_main_NewCalculation" android:layout_width="300px" android:layout_height="90px" android:drawablePadding="0px"></Button>
<Button android:text="#string/string_main_Help" android:drawableLeft="#drawable/question" android:onClick="onClickButton_Help" android:id="#+id/button_main_Help" android:layout_width="150px" android:layout_height="90px" android:drawablePadding="0px" android:layout_below="#id/button_main_NewCalculation"></Button>
<Button android:text="#string/string_main_Share" android:drawableLeft="#drawable/share" android:onClick="onClickButton_Share" android:id="#+id/button_main_Share" android:layout_width="150px" android:layout_height="90px" android:drawablePadding="0px" android:layout_below="#id/button_main_NewCalculation" android:layout_toRightOf="#id/button_main_Help"></Button>
</RelativeLayout>
<RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="#+id/layout_maintest2_relativelayoutright" android:layout_toRightOf="#id/layout_maintest2_relativelayoutleft" android:layout_alignTop="#id/layout_maintest2_relativelayoutleft">
<TextView android:layout_width="wrap_content" android:textSize="24px" android:textStyle="bold" android:layout_height="match_parent" android:id="#+id/textView_calculator_CalculatorTitle" android:text="#string/string_calculator_CalculatorTitle"></TextView>
</RelativeLayout>
</LinearLayout>
Its hard to tell from the image you uploaded but are you trying to keep the two relative layouts side by side?
You can try to position the layouts by declaring them to be drawn to one side of the parent or the other. I cant remember off the top of my head at the moment and I know thats a crappy answer but I think the answer is somewhere in here
http://developer.android.com/guide/topics/ui/layout-objects.html
Take a look at the android:layout_alignParentRight="true" declaration.
Im pretty sure I used something similar to position multiple views and buttons in the same parent before. Try it out and when I get back to my work computer on monday Ill look through my projects and see which one I know works the best.