B4A Library XmlLayoutBuilder - Load Xml layouts

Edit: this tutorial was written before CreateResouce keyword was available. Simpler usage example:

The standard way to build the UI in Basic4android is with the visual designer / designer script.

You can also create UI elements by code.

This library adds a third option which is to use xml files to define the layout. This is Google's standard method.

This option is especially useful if you want to reuse resources created for an Android Java project.

All three options can be combined together.

This library provides several resources related methods. You can read more about Android resources here: http://developer.android.com/guide/topics/ui/declaring-layout.html

Before we start you should remember that the compiler "cleans" the objects folder during compilation. The compiler will delete the extra resource files if they are not read-only.

The simplest solution is to add the following attribute to force all the res files to be read-only:
B4X:
  #CustomBuildAction: 1, c:\windows\system32\attrib.exe, +r res\*.* /s
You might need to correct the path.

The example code is:
B4X:
Sub Activity_Create(FirstTime As Boolean)
   Dim x As XmlLayoutBuilder
   'load the layout
   x.LoadXmlLayout(Activity, "layout1")
   'load the Animation
   anim = x.LoadAnimation("wave_scale", "anim")
   'get a view based on the id
   button1 = x.GetView("fade_animation")
   'get a drawable object
   Activity.Background = x.GetDrawable("smlnpatch160dpi")

   Panel1 = x.GetView("panel1")
   Panel1.Color = Colors.White
   Dim spinner1 As Spinner
   spinner1.Initialize("")
   spinner1.AddAll(Array As String("1", "2", "3"))
   Panel1.AddView(spinner1, 0, 0, Panel1.Width, Panel1.Height)
End Sub

Folder structure:

SS-2013-10-22_11.11.30.png


Layout file:
B4X:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:paddingLeft="16dp"
  android:paddingRight="16dp"
  android:orientation="vertical" >


   <TextView
  android:layout_width="match_parent" android:layout_height="wrap_content"
  android:layout_weight="0" android:paddingBottom="4dip"
  android:textAppearance="?android:attr/textAppearanceMedium"
  android:text="@string/activity_animation_msg"/>

   <Button android:id="@+id/fade_animation"
  android:layout_width="wrap_content" android:layout_height="wrap_content"
  android:text="@string/activity_animation_fade"
     android:tag="Button1"
     >
  <requestFocus />
  </Button>
   <Panel
     android:id="@+id/panel1"
  android:layout_width="200dp" android:layout_height="80dp">
   </Panel>

  <CheckBox
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
     android:tag="chk1" />
</LinearLayout>

LoadXmlLayout method loads the layout file and adds the views to the activity or panel.
Once the layout is loaded you can use GetView to get a reference to a view based on the view's id attribute.

If you want to handle the view's events then you need to set the "EventName" in android:tag attribute.
You can handle events of the following views:
EditText, Button, CheckBox, RadioButton, Label (TextView), AutoCompleteEditText (AutoCompleteTextView), ToggleButton, ImageView, SeekBar and Panel.

Panel is treated differently as it is not a native view. Panel allows you to add other views (programmatically or with Panel.LoadLayout) to the loaded layout.

LoadAnimation loads an Animation object defined in an xml file. It allows you to create all kinds of animations including a set of animations (not possible with the standard Animations library).
http://developer.android.com/guide/topics/graphics/view-animation.html

The other methods allow you to load drawables and strings from the resource files.

Notes

- When using the rapid debugger, you need to right click on the libraries tab and choose Refresh after you update the resources. Otherwise the device app may not be redeployed and the old resources will be used.
 

Attachments

  • XmlLayoutExample.zip
    26.1 KB · Views: 2,997
  • XmlLayoutBuilder.zip
    5.3 KB · Views: 5,025
Last edited:

shashkiranr

Active Member
Licensed User
Longtime User
Hi All,

I am not able to capture the event of seekbar loaded using the xmllayout builder. Here the below xml.
B4X:
<?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="wrap_content" 
    android:padding="0dp"
    android:tag="original"
    android:gravity="center_vertical">
                 
    <SeekBar
        android:id="@+id/temposeek"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:progressDrawable="@drawable/custom_progress"
        android:maxHeight="3dp"
        android:minHeight="3dp"
        android:splitTrack="false"
        android:tag="TempoSeek"
        >     
    </SeekBar>
         
</LinearLayout>

I am having the sub to capture the seekchange event
B4X:
Sub TempoSeek_ValueChanged (Value As Int, UserChanged As Boolean)
    Log("change")
 
End Sub

Is there something I have missed. Is there any alternative way I can set the listener to the loaded seekbar. Kindly let me know.

Best,
SK

Edit: I found out a way.

Used the below code to set a listener on the seekbar
B4X:
Dim e As JavaObject = jo.CreateEvent("android.widget.SeekBar.OnSeekBarChangeListener","temposeek",False)
    jo.RunMethod("setOnSeekBarChangeListener",Array As Object(e))

Sub temposeek_Event (MethodName As String, Args() As Object) As Object
  
End Sub
 
Last edited:

moster67

Expert
Licensed User
Longtime User
I was trying to load an xml-file using the new ConstraintLayout but I got an error while the R.file was generated:

B4X:
B4A version: 6.30
Parsing code.    (0.00s)
Compiling code.    (0.07s)
Compiling layouts code.    (0.00s)
Organizing libraries.    (0.00s)
Generating R file.    Error
res\layout\layxml.xml:10: error: No resource identifier found for attribute 'layout_constraintTop_toTopOf' in package 'b4a.example'
res\layout\layxml.xml:10: error: No resource identifier found for attribute 'layout_constraintBottom_toBottomOf' in package 'b4a.example'
res\layout\layxml.xml:10: error: No resource identifier found for attribute 'layout_constraintLeft_toLeftOf' in package 'b4a.example'
res\layout\layxml.xml:10: error: No resource identifier found for attribute 'layout_constraintRight_toRightOf' in package 'b4a.example'

This is the xml-file:

B4X:
<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.mikael.myapplication.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="16dp"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="16dp"
        android:id="@+id/txtbox1" />
</android.support.constraint.ConstraintLayout>

I noted that my project in Android Studio was using two dependencies:
-appcompat-v7
-constraint-layout
as can be shown here:

B4X:
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:24.2.1'
    testCompile 'junit:junit:4.12'
    compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha8'
}

I tried to add the following two attributes in my B4A-project:

B4X:
#AdditionalJar: com.android.support:appcompat-v7
#AdditionalJar: constraint-layout

but it did not work.

Am I doing something wrong or is is simply B4A and the XMLLayoutBuilder library which cannot handle this new layout?
 

tuhatinhvn

Active Member
Licensed User
Longtime User
Updated 2021, XmlLayoutBuilder is not updated for AppCompat activity. If i use without Appcompat when i use tag "Panel" on Xml, app works well.
But when i use with appCompat error will display is Didn't find class android.View.Panel

Can you check and update for it?
 
Top