Add constraint to view progmatically - android-constraintlayout

I have inflated the following view inside a constraint layout.
View :
<?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="50dp"
android:background="#color/colorPrimary"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".25"
android:text="menu"/>
<android.support.v7.widget.SearchView
android:layout_width="0dp"
android:layout_weight="1"
android:layoutDirection="rtl"
android:layout_height="match_parent">
</android.support.v7.widget.SearchView>
</LinearLayout>
View added to contraint layout using the following code:
ConstraintLayout constraintLayout = findViewById(R.id.root);
View inflatedLayout= inflater.inflate(R.layout.menu, constraintLayout, false); constraintLayout.addView(inflatedLayout);
The view moves to the top of the screen because there are no constraints. It overlaps the toolbar which is at the top of the layout. The toolbar is simply constrained to be at the top of the parent with its id as android:id="#+id/toolbar"
How do I add the constraints progmatically so that the inflated view is constrained below the toolbar.
I have used constraint set to add the constraint to the inflated view like this:
LayoutInflater inflater = LayoutInflater.from(PaymentStatus2.this);
ConstraintLayout constraintLayout = findViewById(R.id.nested);
View inflatedLayout= inflater.inflate(R.layout.menu, constraintLayout, false);
constraintLayout.addView(inflatedLayout);
ConstraintSet set = new ConstraintSet();
set.connect(constraintLayout.getId(),ConstraintSet.TOP,inflatedLayout.getId(),ConstraintSet.TOP,50);
set.connect(constraintLayout.getId(),ConstraintSet.START,inflatedLayout.getId(),ConstraintSet.START,0);
set.applyTo(constraintLayout);
In the first connect line I am connecting the parents top to the inflated view's top and setting a margin of 50dp which should server my purpose of keeping it below the toolbar which is 50dps in height but that does not reflect in the layout.
Thinking that the view needs atleast two contaraints i make the second connection still it is not working.
This is how it looks like :
https://ibb.co/r2wK83V
the inflated layout is still moving to the top as if there are no constrainsts on it.

For anyone else stuck with this I found out how it is done.
Inflate the layout add it then clone the layout, then you need to connect all four constraint ends then only will it work.
The connect function takes five params
(i)the view id of the view,(ii)the constraint direction, (iii)the other view id ,(iv)the constraint direction, (v)margin
ConstraintLayout constraintLayout = findViewById(R.id.nested);
View inflatedLayout= inflater.inflate(R.layout.menu, constraintLayout , false);
inflatedLayout.setLayoutParams(new ConstraintLayout.LayoutParams(0,0));
constraintLayout.addView(inflatedLayout,0);
ConstraintSet set = new ConstraintSet();
set.clone(constraintLayout);
set.connect(inflatedLayout.getId(),ConstraintSet.TOP,toolbar.getId(),ConstraintSet.BOTTOM,8);
set.connect(inflatedLayout.getId(),ConstraintSet.START,constraintLayout.getId(),ConstraintSet.START,8);
set.connect(inflatedLayout.getId(),ConstraintSet.END,constraintLayout.getId(),ConstraintSet.END,8);
set.connect(inflatedLayout.getId(),ConstraintSet.BOTTOM,swipeRefreshLayout.getId(),ConstraintSet.TOP,8);
set.applyTo(constraintLayout);

Related

How to get element's id of another view SAPUI5

I have 3 views say first,second & third. I need to access a vertical layout's id of second view from first view. For which I have used sap.ui.getCore().byId("__xmlview1--spend_layt"); to retrieve it. It works but when I navigate to third view & come back, id changes to __xmlview28--spend_layt & the control not works. How to fix this?
EDIT :
First.view.xml
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="budgetspend.controller.First" xmlns:html="http://www.w3.org/1999/xhtml"
displayBlock="true">
<App id="BA_APP">
<pages>
<HBox width="100%" height="100%" id="header_container">
<items>
<Image class="logo" src="../images/logo_new.png"/>
<Image class="header" src="../images/header-bg.png"/>
<html:ul class="tab">
<html:li>
<html:a id="onBud" class="tablinks active">Tab 1
</html:li>
<html:li>
<html:a id="onSpend" class="tablinks">Tab 2</html:a>
</html:li>
</html:ul>
<mvc:XMLView viewName="budgetspend.view.second"/>
</items>
</HBox>
</pages>
</App>
</mvc:View>
In the second view, I use 2 vertical layouts. one for tab 1 & another for tab 2. Only one visible at a time. Tab click events are written in First.controller.js. I don't know how to access ID's of vertical layouts(in second view) from First.
I am just exploring how standard html will work on SAPUI5 as I am aware of using sap.m.IconTab.
What you are facing is due to the dynamic creation of elements. Every time you leave a screen and goes back into it, the items are regenerated, but they can't have the same ID, since they were used before.
One solution to this is to create a Utils folder, and create an object, let's say UIHelper.
This file would look like this:
jQuery.sap.declare('my.app.Utils.UIHelper');
my.app.Utils.UIHelper = {
controllerInstance1 : null,
controllerInstance2 : null,
controllerInstance3 : null,
//Add "getters and setters" for each of these attributes (repeat for Controller 2 & 3)
setControllerInstance1 : function(oController){
this.controllerInstance1 = oController;
},
getControllerInstance1 : function(){
return this.controllerInstance1;
}
};
Now, at the controller file for each of your views, you add the following line at the top of the file:
jQuery.sap.require('my.app.Utils.UIHelper');
And on the onInit event of those controllers, you set the controller instance on the UIHelper object:
my.app.Utils.UIHelper.setControllerInstance1(this);
And when you want to get the different views from anywhere in the code, assuming that the views are assigned to one of the controllers, you can just use the following:
my.app.Utils.UIHelper.getControllerInstance1().getView();
Update in my answer after the update on the question:
To access the layout from the second view, you could do the following:
var layout = my.app.Utils.UIHelper.getControllerInstanceView2().byId('spend_layt');

Cannot set the height of MaterialSlider - How to override CSS?

Somewhere in materialize.min.css the slider class is getting its height assigned. I am simply not able to override this.
What I tried is to set the height in the constructor of my widget:
public class HomeViewImpl extends Composite implements HomeView {
public HomeViewImpl() {
initWidget(uiBinder.createAndBindUi(this));
int height = Window.getClientHeight();
slider.getElement().getStyle().setHeight(height, Unit.PX);
}
}
I also tried to overwrite it in my own css file and I also tried to override Widget.onLoad() with the same result. I can resize the slider afterwards but not on when its actually loaded. Since I want it to use up the entire available space it has to be resized "on load".
Please note that setting fullscreen="true" is not an option since this would mess up the arrangement of my parallax effect I am using here as well.
<m:MaterialSlider ui:field="slider" fullscreen="false">
<m:MaterialSlideItem height="100%">
<m:MaterialImage url="http://mayastepien.nl/googlecalendar/google-drinks.jpg" />
<m:MaterialSlideCaption textAlign="CENTER">
<m:MaterialTitle title="This is our big Tagline" description="Here's our small slogan." />
</m:MaterialSlideCaption>
</m:MaterialSlideItem>
<m:MaterialSlideItem height="100%">
<m:MaterialImage url="http://dreamatico.com/data_images/car/car-1.jpg" />
<m:MaterialSlideCaption textAlign="CENTER">
<m:MaterialTitle title="This is our big Tagline" description="Here's our small slogan." />
</m:MaterialSlideCaption>
</m:MaterialSlideItem>
</m:MaterialSlider>
According to the source code in
https://github.com/GwtMaterialDesign/gwt-material/blob/master/gwt-material/src/main/java/gwt/material/design/client/ui/MaterialSlider.java
..you can set the height attribute on MaterialSlider too (in your UiBinder xml).
You probably know this, but relative height only works when the height of parent elements is set too.
See for instance
Make div 100% height of browser window

Gtk::ScrolledWindow disable scroll to focused child

I have a very big Gtk::EventBox in a Gtk::ScrolledWindow.
The moment I do grab_focus() at my Gtk::EventBox,
the Gtk::ScrolledWindow scrolls to the top of the Gtk::EventBox.
How can I disable this behaviour ?
Gtk::EventBox does not inherit Gtk::Scrollable
and therefor gets wrapped with a Gtk::Viewport
when it gets added to a Gtk::ScrolledWindow.
To disable scroll to focused child you need to change the focus_hadjustment/focus_vadjustment
//Disable scroll to focused child
auto viewport = dynamic_cast<Gtk::Viewport*>(m_scrolled.get_child());
if (viewport) {
auto dummy_adj = Gtk::Adjustment::create(0,0,0);
viewport->set_focus_hadjustment(dummy_adj);
viewport->set_focus_vadjustment(dummy_adj);
}

Monodroid tabs view

After implementing the Tabs Widget Sample I tried to play with it and add the third tab only after changing to the second tab
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.Main);
TabHost.TabSpec spec;
spec = TabHost.NewTabSpec("tab_test1").SetIndicator("TAB 1").SetContent(Resource.Id.textview1);
TabHost.AddTab(spec);
spec = TabHost.NewTabSpec("tab_test2").SetIndicator("TAB 2").SetContent(Resource.Id.textview2);
TabHost.AddTab(spec);
//spec = TabHost.NewTabSpec("tab_test3").SetIndicator("TAB 3").SetContent(Resource.Id.widget0);
//TabHost.AddTab(spec);
TabHost.TabChanged += new EventHandler<Android.Widget.TabHost.TabChangeEventArgs>(TabHost_TabChanged);
TabHost.CurrentTab = 0;
}
void TabHost_TabChanged(object sender, TabHost.TabChangeEventArgs e)
{
if (TabHost.TabWidget.TabCount < 3)
{
TabHost.TabSpec spec;
spec = TabHost.NewTabSpec("tab_test3").SetIndicator("TAB 3").SetContent(Resource.Id.widget0);
TabHost.AddTab(spec);
}
}
The problem is that I see the 3rd view overlay-ed on the first view before clicking the tabs, even though the 3rd tab appears only after clicking the 2nd tab. What's going on?
I'm guessing it's because the Third tab doesn't have tab to go to (since we don't create a TabSpec) so it just displays it directly on the screen.
You could set the content you want to display when the third tab is visible to invisible shown in the example below;
<TextView
android:visibility="invisible"
android:id="#+id/textview3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="this is a third tab" />
and then when the tab is displayed, the text view is made visible again.
Hope this helps,
ChrisNTR

setOnclilcklistener for images of footer

i am adding a footer having 2 imageviews to my app using include tag.
I am able to view the footer and access the image view ids in source code but am not able to setOnclicklistener to these imageviews.
In main.xml i have
include layout="#layout/common_footer"
In common_footer.xml
?xml version="1.0" encoding="UTF-8"?
LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#228b22"
ImageView android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"
android:paddingRight="20px"
android:clickable="false"
ImageView android:id="#+id/image2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/sample_0"
android:clickable="false"
LinearLayout
In source code
View inflatedView = View.inflate(this, R.layout.common_footer, null);
ImageView b = (ImageView)inflatedView.findViewById(R.id.image1);
LinearLayout.LayoutParams lp=new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT
,LayoutParams.WRAP_CONTENT);
b.setLayoutParams(lp);
b.setClickable(false);
b.setSelected(false);
b.setOnClickListener(mClickListener);
}
private OnClickListener mClickListener = new OnClickListener()
{
public void onClick(View v)
{
Intent i = new Intent(TableImageLayout.this, TableImageLayout2.class);
startActivity(i);
}
};
But my Onclicklistener is not working.
Please forward your valuable suggestions
Thanks in advance:)
Hello i have solved the issue
Earlier i was using viewgroup as null.
View inflatedView = View.inflate(this, R.layout.common_footer, null);
the problem will be solved if we provide the view group as the parent layout.
As my layout is table layout tb.
View inflatedView = View.inflate(this, R.layout.common_footer, tb); works fine.