I'm trying to create a cross platform app using Xamarin.Forms. As far as I know, the UI will be created from the code and the .axml file will be generated automatically.
Can I modify the .axml file to edit the UI? I tried editing but all that comes up is what is written in the code. ie: hello forms
UPDATE
public static Page GetMainPage ()
{
return new simplerow ();
}
In Xamarin.Forms you can create your pages from markup definitions that are shared across all platforms.
Typically you will write all your content pages using Xamarin.Forms, however you can mix-and-match native pages into an application should you so wish.
These shared common pages, written in Xamarin.Forms, will reside maybe in a PCL project, or a Shared Project so these can then be re-used in the platform-specific projects, each targeting a specific platform OS.
You can write these common pages, either in code, or in XAML. You can even choose to write some pages one way, and some the other if you so choose.
A Xamarin.Forms page is processed at runtime through the interpretation of the page composition that has been created.
Each control that is specified on a page, has its own platform specific renderer, behind the scenes, that will produce output that is targetted to that OS.
When writing Xamarin.Forms pages, for-the-most, you will start to learn a new way of creating pages that is abstracted from the intricacies of creating mobile applications on each different platform OS.
There is therefore no editable .axml that is generated etc as you will write your pages using Xamarin.Forms markup and controls, and even your own or other custom-controls to produce your own application pages.
The following link shows some examples of how to write XAML pages.
The following link shows some examples of how to write from code-behind pages.
Along with the previous answer re: .xaml instead of .axml, you need to remember to change the startup code in app.cs to use your new .xaml form. Replace the "new ContentPage {...};" with "new MyForm();" (where "MyForm" is the name of your shiny new XAML form).
EDIT: Downloaded the project from the dropbox link. Comments below...
I see several issues here. I think you may need to go through the walkthroughs and sample applications provided by Xamarin to get up to speed with the concepts behind XF apps.
First, you are trying to use an Activity as your application's page. In a Xamarin Forms app, it must be a View of some sort, not a platform-specific visual such as Activity.
Second, remove the "test.xml" file from your Android project's Resources/layout folder; while XAML files are indeed XML, they have an 1) have a file extension of .xaml and 2) belong in the shared project.
Here's what you need to do to get your project working: (I'm assuming you're using VS here, under Xamarin Studio, it's slightly different.)
Right-click your "testforms" shared project
Click Add from the context menu and select "New Item"
In the dialog that appears, select "Forms XAML Page" and in the Name area enter a name (such as "MyForm")
(If you're using XS, choose "New File" and "Forms ContentPage")
This will add two files to your project: a XAML file containing your layout (e.g.: MyForm.xaml), and a code-behind file (e.g.: MyForm.xaml.cs).
Open the XAML file, and modify the Label element so that the Text attribute is
Text = "Hello, World!"
Modify the body of GetMainPage in your App.cs to the following:
return new MyForm();
Run the app
Hope this helps!
You got it wrong. Forms are created either through code or XAML. No axml or anything persistent is generated at platform level, everything is done in runtime(XAML is sort of compiled at compile time).
So, modify either code or XAML if you wish to change something. Or, if you need something more demanding, than consider either subclassing an existing Renderer or create you own.
Related
My Problem might not be valid. And the points I mention here might be little incorrect as I am neither perfect nor expert.
I have a shopping application and I want to start building a modular application. Like I want to add Affiliate User( the module which adds certain functionality or this will display some extra pages in an application) in the application.
A similar situation happens in the Frameworks: We add and enable the certain module and in return framework load everything as required.
for this, I want following changes like:
add an entry in the NavigationView displaying "Affiliate Label".
load fragments (just adding one more fragment for one more label/option from navigation view).
Let's say I have a library project that contains a Fragment and all relevant code.
How can I build the application automatically let's say just by writing "true" somewhere in the XML?
Automatically here means label is added, Intents are performed on click of label etc.
<Modules>
<enable>true/false</enable>
</Modules>
This is just the simple scenario.
You could do this (like everywhere when it comes to writing code) in many possible ways.
The "file" way:
Make a new file named something like modules.txt with key value pairs. Load the file and check whether a module is enabled or not.
The "Constant" way:
Make an abstract class which only contains public static final variables which describe your modules.
The "package manager" way:
See create Android Application plugins/extensions (apk)
The "multiple" apk way:
Note that this is not reccomended!
we encourage you to develop and publish a single APK
multiple apk support
To add to codewing's answer, you can also use Gradle's resource management capabilities to accomplish this, so you only ever need to look in one place for an enabled/disabled status.
For this, you have 2 solid options.
The first starts with a boolean which can be split by flavor:
<bool name="module_x_enabled">true</bool>
The second would be to inject your values into a String resource after Gradle merges the resources by adding something like this to your build.gradle file, then comparing that enabled value:
<string name="module_x_enabled">MODULE_X_ENABLED_PLACEHOLDER</string>
android.applicationVariants.all{ variant ->
variant.mergeResources.doLast{
replaceInValues(variant, 'MODULE_X_ENABLED_PLACEHOLDER', MODULE_X_ENABLED)
}
}
def replaceInValues(variant, fromString, toString) {
File valuesFile = file("${buildDir}/intermediates/res/merged/${variant.dirName}/values/values.xml")
String content = valuesFile.getText('UTF-8')
content = content.replaceAll(fromString, toString)
valuesFile.write(content, 'UTF-8')
}
Where MODULE_X_ENABLED would be a setting in your gradle.properties file like:
MODULE_X_ENABLED=true
Edit: or better yet,
Why not pull the settings from some kind of server so that you don't need to rebuild and relaunch to update a client's module?
I have created a lot of UI working on Android platform.
There, I used xml. What happens in android is that
when you have a fairly large UI screen with multiple blocks/sections
putting up all the code inside one xml file could be messy.
So they have provided tag.
What it does is :
We can create separate xml files defining separate components
and these separate xml files can be included inside one parent
xml.
This keeps the code very modular, easy to maintain and easy to debug.
Very recently I started working on HTML for some Web App,
and there is huge/huge UI on one single page.
i.e. multiple tabs and multiple sections in them.
Now, I don't want to put in everything inside one single html file.
Is there way by which I can create separate files and display them
one at a time or as per required.
You can get Angular.js and then user ng-route together with a custom directive. It's pretty simple actually.
Download their stuff. And then call it on your HTML.
Also, add this script aswell: //ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js
Should be pretty easy and you might learn something new.
Here, let me give you a hand. Create a file called app.js, add the following inside:
var app = angular.module('myapp', ['ngRoute'])
app.directive("nameOfElement", function () {
return {
templateUrl:'badassPartial.html'
};
});
On your HTML put this: <html ng-app="myapp">
Then create the file badassPartial.html this will be the partial.
And all you gotta do now is call it like so wherever you want to call it in your HTML: <name-of-element></name-of-element>
Note, the <name-of-element></name-of-element> is the name that you declare in app.directive("nameOfElement", function () { but for every camelCase you add a '-'
Hope this does something for you.
Also, you will need to create a new directive for every partial and then call their element.
I had developed 3 applications in android where the major functionalities are the same but the UI looks different. Images and the background color of the screens are different.
NOw, i want to create a single code base from which i can generate multiple .apk files for the 3 apps.
I tried creating 3 different packages for src folder for the 3 apps. But i dont know how to set the res folder for these apps.
Need pointers on creating a single code base from which we can generate multiple .apk files which includes only the respective src and res folders.
Use an Android Library Project that contains all your common code.
Create separate Android projects that reference the Library Project (you will need to copy your Manifest into each of these and make sure all components are declared with their full Java package name).
Put any resources specific to each app (drawables, colors etc) into the individual project resource folders and they will override similarly named resources in the library project at build time.
i think the best option is to use ant, you'll need to add an ant target for each build and change the resource folder.
if you use the generated build.xml, the res folder is defined like this
<property name="resource.absolute.dir" location="res" /> so you'll want to override that
Can't you put all of your common code into a library project and then just reference that project from each of the 3 unique projects that each contain the relevant resources.
Update: This answer is now obsolete when using the Gradle build system.
Why don't you use a single application, that does three different things based on SharedPreferences values set by the user, or from context at install time. If you really want to separate, you can have three different activities, and you decide which one to launch from a silent main Activity that redirects to either of the different ones.
An alternative is to have a unique activity that inflates itself dynamically from 3 different layouts at onCreate time.
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (...custom check for layout... equals(layout1)) {
setContentView(R.layout.main_layout1);
} else if (... equals(layout2)) {
setContentView(R.layout.main_layout2);
} else if (... equals(layout3)) {
setContentView(R.layout.main_layout3);
} else {
throw new IllegalStateException("Unknown layout!");
}
... your onCreate stuff....
}
It will make code maintenance easier (only one code source to modify, only one version-list and changeset to maintain)
Check here:
How to use SharedPreferences in Android to store, fetch and edit values
I would suggest using Gradle flavors.
It seems to explain all the basics really well. I just finished converting to Gradle today, and it works great. Custom app icons, names, and strings, etc.
As the website explains, part of the purpose behind this design was to make it more dynamic and more easily allow multiple APKs to be created with essentially the same code, which sounds similar what you're doing.
Also see a recent question I had, referring to your project structure and using custom code for each app.
As you probably know, Mozilla aims to do the mobile UI on fennec as native Java/Android UI.
That includes using the layout XML files, which by default use stuff like
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="#string/text_a"
/>
with #string/text_a being resolved to text_a in a strings.xml file, doing l10n.
We'd like to use something else, and I wonder if/how we can hook that up in the XML files.
So, I'd love to get pointers to android source code that actually does the string lookup, for one.
And I have three ideas on how to hook up something custom, which are not fact-checked, basically because I haven't managed to find the code that does stuff yet:
#moz-l10n/text_a, with a java-implemented service giving back values for that resource type
moz:l10n="text_a" custom attribute that would get hooked up to post process the generated widgets
subclass the widgets we want to localize with our scheme, adding (2)
I hope that there are folks out here that have a good idea to point me to good paths or shoot some down.
PS: I'd appreciate a lack of bike-shed about whether android l10n scheme is good or not.
So, I'd love to get pointers to android source code that actually does the string lookup, for one.
android.content.res.Resources delegates to android.content.res.AssetManager and the getResourceText() method. That in turn dives into a native loadResourceValue() method. And you're on your own from there... :-)
1) #moz-l10n/text_a, with a java-implemented service giving back values for that resource type
Unless you are going to pre-process your faux resource files with your own build tools, generating valid Android resource files into the res/ directory, you cannot invent new resource types (e.g., #moz-10n). That would require modifications to the build tools and the firmware.
2) moz:l10n="text_a" custom attribute that would get hooked up to post process the generated widgets
3) subclass the widgets we want to localize with our scheme, adding 2)
Your option #3 is definitely possible and is fairly typical when creating custom widgets. It's conceivable that the techniques for it (usually involving a res/values/attrs.xml file with a declare-styleable resource) could somehow be applied to a standard widget class, but I've never seen that done. Of course, you could always do the pre-processing as in how you'd accomplish option #1.
I have an existing android app. I wanted to change its menu structure without disturbing the existing code. For this I added 2 new java files and relative xmls in the existing project and updated the manifest.xml with the new starter activity.
The issue which I am facing is in the java code. I am not able to reference the elements of the new xmls xxx.findViewById(R.id.xxx)
The error coming up: cannot be resolved or is not a valid field
Please suggest something, I am a newbee
When you build an application, Android will create a file called "R.java". This file basically is an index to all resources in your project (strings, layouts, drawables, etc.). If you add new resources by hand, you cannot refer to these resources because they have no ID in the R class.
According to this page you can use the aapt tool to (re?)generate the R file, but I have no experience with this myself.