Include layout in XML depends on condition - android

I have parent layout with databinding. I want to add child layout depends on logic.
I expected to need similar code:
<include
android:id="#+id/layout_id"
layout="#{model.isOk ? #layout/layout_container_1 : #layout/layout_container_2}"
app:model="#{model}" />
But I get error:
android.databinding.tool.processing.ScopedException: [databinding] {"msg":"included value (#{model.isOk ? #layout/layout_container_1 : #layout/layout_container_2}) must start with #layout/.","file":"x.xml","pos":[]}
Is it possible to include child layout dynamically through "if-else" condition? If yes what is the best way? Any samples are welcome!

Is it possible to include child layout dynamically through "if-else" condition?
So far, this is not possible, because the layout attribute must point to a certain layout before the data-binding works:
(Data Binding) As its name implies, it binds data to a layout, so there must be a layout first, in order to bind data to it.
In other words, the layout="#{model.isOk ? #layout/layout_container_1 : #layout/layout_container_2}" doesn't work because there should be an existing layout before examining model.isOk, and also the layout attribute expects a layout resource after the # symbol.
So, we need to do that programmatically instead of the XML layout. And this an be done by replacing the <include> with ViewStub which is a sort of deferring layout inflation to be done in the activity.
So before inflating the ViewStub layout, you can have a chance to check whether the model.isOk in the activity before deciding which layout can be inflated on the ViewStub.
And hence based on the model.isOk value, we can set the layout with binding.myLayoutStub.myViewStub?.layoutResource = R.layout.layout_container_1
Eventually we can inflate the new ViewStub layout using binding.myLayoutStub.myViewStub?.inflate() method.
Using the ViewStub, will make you have a couple of binding object, one for the activity (or fragment), and the other for the inflated layout of the ViewStub.
Here is an example like yours:
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<data>
<variable
name="model"
type="com.example.android.databindingexample.ActivityViewModel" />
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ViewStub
android:id="#+id/layout_stub"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
And we've layout_container_1 & layout_container_2 that only differ in the the textview value:
layout_container_1.xml:
<?xml version="1.0" encoding="utf-8"?>
<layout>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/purple_200">
<TextView
android:id="#+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Layout 1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
ViewModel:
class ActivityViewModel : ViewModel() {
var isOk = true
}
Then decide which layout in the activity based on the model.isOk whenever you inflate the ViewStub:
class MainActivity : AppCompatActivity() {
private lateinit var binding: ActivityMainBinding
// This is of Any type as it will be casted later to the proper DataBinding generated class when the ViewStub layout inflated
private lateinit var stubBinding: Any
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
val model = ViewModelProvider(this).get(ActivityViewModel::class.java)
binding.model = model
// Listener to ViewStub inflation so that we can change its layout
binding.layoutStub.setOnInflateListener { _, inflated ->
stubBinding =
(if (model.isOk) DataBindingUtil.bind<LayoutContainer1Binding>(
inflated
)
else DataBindingUtil.bind<LayoutContainer2Binding>(
inflated
))!!
// Changing the text of the inflated layout in the ViewStub using the ViewStubBinding
if (model.isOk)
(stubBinding as (LayoutContainer1Binding)).textview.text = "This is Layout container 1"
else
(stubBinding as (LayoutContainer2Binding)).textview.text = "This is Layout container 2"
}
// Inflating the ViewStub
if (!binding.layoutStub.isInflated) {
binding.layoutStub.viewStub?.layoutResource = if (model.isOk)
R.layout.layout_container_1 else R.layout.layout_container_2
binding.layoutStub.viewStub?.inflate()
}
}
}
Preview:

This is impossible with the current implementation of <include> tag. By "implementation" I mean how it is actually used by the SDK.
<include> tag is parsed in the process of layout inflation which means layout attribute of <include> tag must have a layout resource ID defined before any of your code logic can be executed. While data-binding is what you can use after a layout was successfully inflated.

Related

How to modify the layout expression dynamically in data binding layout?

Let's say I have a data binding layout that looks something like this,
<layout xmlns:android="http://schemas.android.com/apk/res/android"
...
<data>
<variable
name="foo"
type="com.example.sudokugame.Foo" />
</data>
...
<TextView
android:id="#+id/cell_1"
style="#style/cell"
android:text="#{foo.bar}" />
...
</layout>
I want to inflate the layout and add it to another parent layout. So, my question is, is there any to modify the layout expression in the textview so it would look something like this,
...
<TextView
android:id="#+id/cell_1"
style="#style/cell"
android:text="#{foo.baz}" <!-- or something else like foo.something -->
....
Is it possible? And if not is there any way to build a data binding layout completely programmatically without even defining an XML layout so that it could be added to another layout?
Use binding adapters to achieve this. Here is how you can do,
#BindingAdapter("dynamicText")
fun TextView.setDynamicText(foo: Foo) {
text = if (<your_condition>) {
foo.bar;
} else {
foo.something;
}
}
Now change your xml textview property to,
<TextView
android:id="#+id/cell_1"
style="#style/cell"
android:dynamicText="#{foo}" />

Android App setContentView(R.layout.activity_main) vs View binding - layout_gravity not respected

I decided to finally jump into Kotlin this month as a hobby project. I'm working through a Udacity course (Android app dev with Kotlin).
I was just trying to replace the viewById with View binding (as a test for me). Which works fine.
But why if I use setContentView(view) from the binding does my layout no longer respect the gravity?
My layout file for my main activity is linear, with center-vertical layout_gravity
<<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:orientation="vertical"
android:layout_gravity="center_vertical"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textSize="30sp"
android:layout_gravity="center_horizontal"/>
<Button
android:id="#+id/roll_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/roll"
android:layout_gravity="center_horizontal"
/>
</LinearLayout>
When I use the old setContentView(R.layout.main_activity) in my activity, this displays as expected in the center of the screen
class MainActivity : AppCompatActivity() {
#RequiresApi(Build.VERSION_CODES.P)
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
// Let's do it the trad way without binding
setContentView(R.layout.activity_main)
val rollButton: Button = findViewById(R.id.roll_button)
Image with central gravity
If I swap this out for view binding instead and replace the setContentView as shown below
var binding = ActivityMainBinding.inflate(layoutInflater)
val view = binding.root
setContentView(view)
The app still runs, but now the text and button are at the top of the screen.
image top aligned
I was just testing that I could make this work in general, as I'd prefer to use in real life (anything to reduce nullPointer exceptions). But if I can't even get a simple example to work properly I'm stuffed.
Does anyone know what I am doing wrong? Or what concept I'm missing?
Try to change android:layout_gravity="center_horizontal" to android:layout_gravity="center" or maybe try to use RelativeLayout I heard that it's one of the best layouts.
I'm having trouble with this same problem. I was looking at the documentation for View Binding and it states:
"View binding doesn't support layout variables or layout expressions,
so it can't be used to declare dynamic UI content straight from XML
layout files."
I'm wondering if it's related to that? I'm still very new to this, but it's the only thing I can find so far that makes some sense to me.
UPDATE: Found another question asking the same thing (How to use View Binding with Linear Layout?)
Changed android:layout_gravity="center_vertical" to android:gravity="center", but then had an issue with the preview in Layout Editor not showing it centered; to remedy that I added tools:layout_gravity="center_vertical" so the activity_main.xml shows this now at the top:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
tools:layout_gravity="center_vertical"
android:orientation="vertical"
tools:context=".MainActivity">
Might not be the best solution, but works to show you the preview and then when you actually run it!
XML layout_-prefixed attributes work with the parent view. When you inflate a view without a parent, the layout_* attributes have no effect.
An activity's setContentView(int) normally delegates to PhoneWindow#setContentView(int) that implicitly uses a parent container layout when inflating the XML layout. That's why the 1-arg inflation works in an activity.
View binding does not implicitly supply any parent layouts. You need to explicitly supply it with the three-arg inflate(int, View, boolean) method call where the first arg is the layout id, second one is the parent and the third controls whether the inflated layout should be added to the parent when inflating.
The usual an easy use case is to use fragments where the onCreateView() callback supplies you with a parent container layout and you can just return inflate(id, container, false).
The PhoneWindow content layout is lazily generated, so you kinda have a chicken-and-egg problem. Calling setContentView() generates the content layout but when calling it you kinda want to already have inflated the view binding with a parent content layout.
My suggestion is to move the layout code away from your activity and instead use a fragment for it. Then you can use view binding in your fragment.

How to include an Android layout but also access its elements in binding?

I'm doind this on my activity:
<include
android:id="#+id/withGyroLayout"
layout="#layout/with_gyro_layout"/>
Where with_gyro_layout.xml is
<androidx.constraintlayout.widget.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">
<com.example.util.FixedTransformerViewPager
android:id="#+id/viewPagerTop"
android:layout_width="0dp"
android:layout_height="143dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.example.util.FixedTransformerViewPager
android:id="#+id/viewPagerBottom"
android:layout_width="0dp"
android:layout_height="143dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/viewPagerTop" />
</androidx.constraintlayout.widget.ConstraintLayout>
However, I can't access the elements viewPagerBottom or viewPagerTop from the binding for my activity:
binding.viewPagerBottom.setVisibility(View.VISIBLE);
binding.viewPagerTop.setVisibility(View.VISIBLE);
I tried putting with_gyro_layout.xml around <merge>...</merge> but it also didn't solve.
I want to be able to change programatically between with_gyro_layout.xml and without_gyro_layout.xml and also access its inner elements by the binding. How can I do that?
Two things are required in order to use ViewBinding with an included layout.
<merge> is not supported
The documentation only covers Data Binding, and not View Binding, but it does appear to be applicable to both. See https://developer.android.com/topic/libraries/data-binding/expressions#includes
Data binding doesn't support include as a direct child of a merge element.
In other words, the layout must have a real, concrete view as its root element. The following is supported:
<LinearLayout ...>
<TextView ... />
<TextView ... />
</LinearLayout>
But a layout with a <merge> root is not supported:
<merge ...>
<TextView ... />
<TextView ... />
</merge>
The <include> tag must specify an ID
It is, in general, possible to include a layout without explicitly specifying an ID. View Binding does not support this:
<include layout="#layout/included_layout"/>
Even if the included layout has an ID on its root element, it is still not supported. Instead, you must explicitly specify the ID on the <include> tag:
<include
android:id="#+id/some_id"
layout="#layout/included_layout"/>
Once both of these conditions are satisfied, your generated binding for the outer layout will include a reference to the binding of the included layout. Let's say our two files are outer_layout.xml and included_layout.xml. Then these two files would be generated:
OuterLayoutBinding.java
IncludedLayoutBinding.java
And you could reference the included views like this:
val outerBinding = OuterLayoutBinding.inflate(layoutInflater)
val innerBinding = binding.someId // uses the id specified on the include tag
val innerView = innerBinding.viewPagerTop
Or, for short:
val binding = OuterLayoutBinding.inflate(layoutInflater)
val innerView = binding.someId.viewPagerTop

Android ViewBinding unable to render LinearLayout configuration

The ViewBinding implementation is unable to render the layout configuration for LinearLayout used in my code, while the same layout works with the older technique of findViewById()
I have setup the gradle to use ViewBinding
android {
...
buildFeatures {
viewBinding = true
}
Below is the activity which uses a LinearLayout
activity_main.xml
<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="wrap_content"
android:layout_gravity="center_vertical"
android:orientation="vertical"
tools:context=".MainActivity">
<ImageView
... />
<Button
... />
</LinearLayout>
The corresponding Kotlin class includes the binding instance with its root view passed to setContentView()
MainActivity.kt
private lateinit var binding: ActivityMainBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityMainBinding.inflate(layoutInflater)
...
setContentView(binding.root)
}
While the Layout editor renders a correct alignment of the app, once it is launched onto the emulator the layout configuration such as center_vertical alignment set using layout_gravity of LinearLayout is ignored.
Is something incorrect or missing the way ViewBinding is implemented?
in your activity_main.xml give id to your LinearLayout
There are one possibility is that your LinearLayout have not any id.
When you are doing binding.root it keeps a reference of root view which is LinearLayout in your case.
As per the official document:
If view binding is enabled for a module, a binding class is generated
for each XML layout file that the module contains. Each binding class
contains references to the root view and all views that have an ID.
Give id to your LinearLayout android:id="rootView, rebuild your project and try to run.
I hope, it will solve your issue.
Thanks & Happy coding..!
Had the same issue, Solved with adding android:gravity="center_vertical" to LinearLayout in activity_main.xml
<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="wrap_content"
android:gravity="center_vertical"
android:layout_gravity="center_vertical"
android:orientation="vertical"
android:id="#+id/root_view"
tools:context=".MainActivity">
</LinearLayout>
I had the same problem doing an exercise in the "Developing Android Apps with Kotlin" course.
I did not find a solution because I suppose that without using view binding, a view above the one in main_activity.xml must be taken as root (probably the same full screen), so when using layout_gravity without view binding, it works, because it positions the LinearLayout relative to the screen. However, when using view binding, I assume that it takes the LinearLayout as its root, so layout_gravity does nothing (again, I'm not sure, I don't know very well how view binding works).
The solution I used was to simply try to achieve the same view with something different. For this in activity_main.xml I used:
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="vertical"
tools:context=".MainActivity">

Android Data Binding Programmatically Instantiated View

The Android documentation does a great job of describing how one can create a binding class using a layout xml file. But I have a couple of questions.
Is there a way to create a data binding class for a custom view that is instantiated programmatically? For example, lets say I have two custom view classes and I want to bind the same view model object to them programmatically without using any xml. The classes are as follows:
class MyViewModel {
}
class MyCustomView extends View {
}
class MyAnotherCustomView extends MyCustomView {
}
Now lets say I instantiate MyCustomView/MyAnotherCustomView using:
MyCustomView customView = new MyCustomView(context);
How do I go about using data binding in this case? Is this possible using the official Android data binding framework? If not, what other frameworks/libraries are available or recommended to achieve this?
My second question is a follow up of the first question. Lets say it is not possible to achieve what I want in my first question. Then, I will have to define a my_custom_view.xml file. This will look something like this:
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">
<data>
<variable name="user" type="com.example.User"/>
</data>
<com.example.name.MyCustomView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#{user.firstName}"/>
</layout>
Now, if I want to use MyAnotherCustomView which is a subclass of MyCustomView keeping the binding logic the same, will I have to create a new xml file my_another_custom_view.xml just to replace MyCustomView with MyAnotherCustomView to define the same binding?
The answer to the first question is "No." Android data binding requires the XML to generate the binding classes.
In your second question, you offer a solution that will work. If you go that route, one way to do it is to use the ViewDataBinding base class setters to set your variables. I can imagine a method like this:
public void addCustomView(LayoutInflater inflater, ViewGroup container, User user) {
ViewDataBinding binding = DataBindingUtil.inflate(inflater,
this.layoutId, container, true);
binding.setVariable(BR.user, user);
}
Here, I've assumed the selection of which custom View is determined by a field layoutId. Each possible layout will have to define a user variable of type User.
I don't know the particulars of your use, but if you want to dynamically choose which custom view to load, you could use a ViewStub. You could also do the same thing with just visibility if you don't have any tremendous overhead in loading your custom Views.
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data>
<import type="android.view.View"/>
<variable name="user" type="com.example.User"/>
<variable name="viewChoice" type="int"/>
</data>
<FrameLayout ...>
<!-- All of your outer layout, which may include binding
to the user variable -->
<ViewStub android:layout="#layout/myCustomView1"
app:user="#{user}"
android:visiblity="#{viewChoice == 1} ? View.VISIBLE : View.GONE"/>
<ViewStub android:layout="#layout/myCustomView2"
app:user="#{user}"
android:visiblity="#{viewChoice == 2} ? View.VISIBLE : View.GONE"/>
</FrameLayout>
</layout>

Categories

Resources