Develop Reference

2x2 buttons in a scrollview

I’m trying to put a matrix (2 x 2) of buttons into a constraint layout and then to put the constraint (with the 4 buttons included) layout into a scroll view and finally to add the scroll view into the main layout. The code is provided here below. Can anyone tell me what do I wrong since finally the bar appears instead of the matrix of buttons? It was planned to have 4 buttons visible, but in fact 2 buttons is appearing. Are there any suggestion how to make the task smarter way. Thank you in advance!
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ConstraintLayout layout = findViewById(R.id.layout);
ConstraintLayout.LayoutParams params = new ConstraintLayout.LayoutParams(200, 200);
ConstraintLayout constraintLayout = new ConstraintLayout(MainActivity.this);
constraintLayout.setLayoutParams(params);
GradientDrawable shape1 = new GradientDrawable();
shape1.setColor(Color.BLUE);
GradientDrawable shape2 = new GradientDrawable();
shape2.setColor(Color.GREEN);
Button button11 = new Button(MainActivity.this);
Button button12 = new Button(MainActivity.this);
Button button21 = new Button(MainActivity.this);
Button button22 = new Button(MainActivity.this);
ConstraintLayout.LayoutParams params01 = new ConstraintLayout.LayoutParams(100,100);
button11.setLayoutParams(params01);
button11.setX(0);
button11.setY(0);
constraintLayout.addView(button11);
ConstraintLayout.LayoutParams params02 = new ConstraintLayout.LayoutParams(100,100);
button12.setLayoutParams(params02);
button12.setX(100);
button12.setY(0);
constraintLayout.addView(button12);
ConstraintLayout.LayoutParams params03 = new ConstraintLayout.LayoutParams(100,100);
button21.setLayoutParams(params03);
button21.setX(0);
button21.setY(100);
constraintLayout.addView(button21);
ConstraintLayout.LayoutParams params04 = new ConstraintLayout.LayoutParams(100,100);
button22.setLayoutParams(params04);
button22.setX(100);
button22.setY(100);
constraintLayout.addView(button22);
ScrollView SV = new ScrollView(MainActivity.this);
ConstraintLayout.LayoutParams SVparams = new ConstraintLayout.LayoutParams(300,300);
SV.setLayoutParams(SVparams);
constraintLayout.setBackground(shape1);
SV.setBackground(shape2);
SV.addView(constraintLayout);
layout.addView(SV);
}
<?xml version="1.0" encoding="utf-8"?>
<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:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
</androidx.constraintlayout.widget.ConstraintLayout>

My solution:
ConstraintLayout.LayoutParams params03 = new ConstraintLayout.LayoutParams(100,100);
params03.topToTop = PARENT_ID;
params03.setMargins(0, 100, 0, 0);
button21.setLayoutParams(params03);
button21.setX(0);
constraintLayout.addView(button21);
ConstraintLayout.LayoutParams params04 = new ConstraintLayout.LayoutParams(100,100);
params04.topToTop = PARENT_ID;
params04.setMargins(0, 100, 0, 0);
button22.setLayoutParams(params04);
button22.setX(100);
constraintLayout.addView(button22);
It looks like there's a bug when you put a ConstraintLayout inside a ScrollView. The ConstraintLayout's height defaults to WRAP_CONTENT. So when you set it to any other heights, it won't change. Also setY does not work. You have to set vertical constraints for the buttons in the bottom row to position them vertically.
Result:

If your target is really just simple 2x2 button grid(matrix), then I'm wondering why should you need to achieve this dynamically, when you can just describe all the layout in xml even if its just a fragment for some more complex view or, say, a list/grid item; moreover, you already have xml describing your ConstraintLayout. So in perspective it may look like this:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="300dp"
android:layout_height="300dp"
android:background="#8FFF0E">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#105BFF">
<Button
android:id="#+id/btnFirst"
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/btnSecond"
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_constraintStart_toEndOf="#id/btnFirst"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/btnThird"
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/btnFirst"/>
<Button
android:id="#+id/btnFourth"
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_constraintStart_toEndOf="#id/btnThird"
app:layout_constraintTop_toBottomOf="#id/btnSecond"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
After having it all in prepared view, you can either operate buttons by ids (either, hiding/showing them or changing their properties).
By the topic - you obviously can do it programmatically with the help of ConstraintSet. Check this one: ConstraintLayout: change constraints programmatically

android margins not working when dynamically inserting views

I have a simple view:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/contact_selected"
android:layout_marginTop="10dp"
android:layout_marginEnd="5dp"
android:orientation="horizontal"
android:padding="3dp">
<TextView
android:id="#+id/txt_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Billy Bob"
/>
</LinearLayout>
When I statically copy the LinearLayout markup into my main activity layout, the margins are as expected. However, when I add the view into the main activity layout dynamically, the margins are ignored. Here's how I insert the view
LayoutInflater inflater = (LayoutInflater)
getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = inflater.inflate(R.layout.test, null);
TextView txt_title = (TextView)view.findViewById(R.id.txt_title);
txt_title.setText("Dynamic #1");
llayout.addView(view, llayout.getChildCount()-1);
View view2 = inflater.inflate(R.layout.test, null);
txt_title = (TextView)view2.findViewById(R.id.txt_title);
txt_title.setText("Dynamic #2");
llayout.addView(view2, llayout.getChildCount()-1);
Here's what it looks like:
The container in the main layout is a LinearLayout, which is a child of a HorizontalScrollView. Any insight is appreciated.

When dynamically adding views, you shouldn't inflate the View with a null ViewGroup parent. So, in other words you should be using inflater.inflate(R.layout.test, linearLayout, false);. The parent is used when determining what type of layout parameters to generate. Pass your parent container (in this case, your linear layout), so it correctly instantiates the ViewGroup.MarginLayoutParams from your XML.

This happens because you need to give "Margin" to layouts dynamically. You can do this by creating an object of "LayoutPrams", like this:-
LinearLayout ll = new LinearLayout(this);
ll.setOrientation(LinearLayout.VERTICAL);
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
layoutParams.setMargins(30, 20, 30, 0);
Here , you can set the LayoutParams to the linearlayout:
ll.addView(okButton, layoutParams);
Hope it helps.

First, you have to get display density.
related docs are https://developer.android.com/reference/android/util/DisplayMetrics.html
and get ID which you want set margin view.
for my case,
layout_login_box = (ConstraintLayout)findViewById(R.id.login_layout_box);
float density = getResources().getDisplayMetrics().density;
ConstraintLayout.LayoutParams params = (ConstraintLayout.LayoutParams)layout_login_box.getLayoutParams();
params.setMargins((int) (24 * density),0,(int) (24 * density),(int) (16 * density));
layout_login_box.setLayoutParams(params);
Also, you can change ConstraintLayout to your own view.

Linearlayout overlay another linearlayout

I have some problem with add linearlayout dynamically. It's add on the top of screen, overlay other linearlayout.
Here XML,code and results.
XML:
<TextView
android:id="#+id/top_km"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#888"
android:gravity="top"
android:textColor="#fff"
android:textSize="30dip"
android:layout_centerHorizontal="true"/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/top_km"
android:id="#id/textLayout">
</RelativeLayout>
Code:
myLayout = (RelativeLayout) page.findViewById(R.id.textLayout);
LinearLayout linLayout = new LinearLayout(this);
linLayout.setOrientation(LinearLayout.VERTICAL);
LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
myLayout.addView(linLayout);
LinearLayout hozLayout = new LinearLayout(this);
hozLayout.setOrientation(LinearLayout.HORIZONTAL);
LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
myLayout.addView(hozLayout);
Results:
enter link description here
Thanks

Don't use a RelativeLayout as your holder. Use a LinearLayout with orientation="vertical" instead.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/top_km"
android:orientation="vertical"
android:id="#id/textLayout" />
then in code
myLayout = (LinearLayout) page.findViewById(R.id.textLayout);
followed by
// rest of your code

It's because you use RealativeLayout for proper adding use
1. RelativeLayout.LayoutParams for st LayoutParams
2. In LayoutParams use field below
Example:
RelativeLayout rl=new RelativeLayout(this);
LinearLayout ll1=new LinearLayout(this);
TextView tx1=new TextView(this);
tx1.setText("Test1");
ll1.addView(tx1);
rl.addView(ll1);
LinearLayout ll2=new LinearLayout(this);
TextView tx2=new TextView(this);
tx2.setText("Test1");
ll2.addView(tx1);
rl.addView(ll2);
RelativeLayout.LayoutParams lp2=(LayoutParams) ll2.getLayoutParams();
And then use lp2.addRule
Here some help:
Parameters
verb One of the verbs defined by RelativeLayout, such as ALIGN_WITH_PARENT_LEFT.
anchor The id of another view to use as an anchor, or a boolean value(represented as TRUE) for true or 0 for false). For verbs that don't refer to another sibling (for example, ALIGN_WITH_PARENT_BOTTOM) just use -1.

Maybe it's easier for you to add it in the XML file with android:visibility="GONE" and then in the code just show it (View.VISIBLE) or hide it (View.GONE).

Android - Implement Views programmatically

I want to implement an imageview and a textview side by side. I achieved this by using XML. However i wanted to achieve this programmatically but had no luck so far. My XML and Java code are below. Please help me to execute programmatically.
I'm executing the Java code in a fragment.
XML CODE:
<RelativeLayout
android:id="#+id/rl1"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<com.loopj.android.image.SmartImageView
android:id="#+id/my_image1"
android:layout_width="160dip"
android:layout_height="100dip"
android:adjustViewBounds="true"
android:scaleType="fitXY"
/>
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/my_image1"
android:layout_alignTop="#+id/my_image1"
android:layout_toRightOf="#+id/my_image1"
android:gravity="center_vertical"
/>
</RelativeLayout>
JAVA CODE:
RelativeLayout rl1 = new RelativeLayout(getActivity());
RelativeLayout.LayoutParams rlParams;
rlParams = new RelativeLayout.LayoutParams(
newLayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT));
rlParams.addRule(LinearLayout.VERTICAL);
rl1.setLayoutParams(rlParams);
SmartImageView siv1 = new SmartImageView(getActivity());
siv1.setId(rand.nextInt(50000) + 1);
siv1.setLayoutParams(new LayoutParams(width,height));
siv1.setAdjustViewBounds(true);
siv1.setScaleType(ScaleType.FIT_XY);
siv1.setImageUrl(Uri);
TextView tv1 = new TextView(getActivity());
RelativeLayout.LayoutParams relativeLayoutParams;
relativeLayoutParams = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
tv1.setLayoutParams(relativeLayoutParams);
relativeLayoutParams.setMargins(10, 0, 0, 0);
tv1.setGravity(Gravity.CENTER_VERTICAL);
tv1.setText("Sample Text");
rl1.addView(siv1);
rl1.addView(tv1);
ll.addView(rl1);
By executing the above code, i'm getting the image but the text is inside the image. But, i want to get the image on the left and the text on the right.
Thanks in advance

Add below code to your Activity:
rlParams.addRule(RelativeLayout.ALIGN_TOP, siv1);
rlParams.addRule(RelativeLayout.ALIGN_BOTTOM, siv1);
rlParams.addRule(RelativeLayout.RIGHT_OF, siv1);
tv1.setLayoutParams(rlParams);
and then do:
rl1.addView(siv1);
rl1.addView(tv1);
Hope this helps.

In your case it is better to use a horizontal LinearLayout:
LinearLayout ll = new LinearLayout(getActivity());
ll.setOrientation(LinearLayout.HORIZONTAL);
LinearLayout.LayoutParams param = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
ll.setLayoutParams(param);
TextView textview = new TextView(getActivity());
...
SmartImageView siv1 = new SmartImageView(getActivity());
...
ll.addView(textview);
ll.addView(siv1);

To align the views in RelativeLayout is much difficult. I will suggest you to use the TableRows or LinearLayouts. Both these give much easier way to align views side by side. Here is a source in which one TextView is aligned-left with 4 ImageViews aligned on its right. You can get idea from this
TextView taking/consuming too much space above and below the text

You can set the margin of your text like this
relativeLayoutParams.setMargins(200, 0, 0, 0);
but this is not the best practice so do one thing take linear layout set orientation to horizontal add both imageview and textview to it and then add this linearlayout to your relative layout.
Hope this helps.

The content of a LinearLayout isn't visible

I tried to add some GUI elements like an ImageView or a TextView to a LinearLayout programmatically. But the elements aren't displayed.
To see if a element is drawn or not, I set a different background color for each element. The result was that I can only see the background color of the LinearLayout. But why?
public class MyLinearLayout extends LinearLayout {
public MyLinearLayout(Context context) {
super(context);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
setLayoutParams(params);
setBackgroundColor(Color.RED);
imageView = new ImageView(context);
params = new LinearLayout.LayoutParams(100, 100);
imageView.setLayoutParams(params);
imageView.setBackgroundColor(Color.BLUE);
addView(imageView);
}
}
The strange thing is that I can see the red background color of the LinearLayout but in the size of the ImageView. If I add some other GUI elements like a TextView, I can see how the LinearLayout grows. But I can not see the TextView.
I'm really confused, because this not the first time I do something like this. Can u tell me what I'm doing wrong?
This is a snippet of the layout.xml file:
<LinearLayout android:layout_width="match_parent"
android:layout_height="45dp"
android:id="#+id/bottom_bar"
android:layout_alignParentBottom="true"
android:gravity="bottom">
<FrameLayout android:id="#+id/block_edit_delete_layout"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:background="#drawable/block_edit_delete_selector">
<ImageView android:layout_height="match_parent"
android:layout_width="wrap_content"
android:src="#drawable/block_edit_delete"
android:scaleType="fitXY"
android:contentDescription="#string/delete"/>
</FrameLayout>
<LinearLayout
android:id="#+id/block_edit_progress"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal"/>
<FrameLayout android:id="#+id/block_edit_random_layout"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:background="#drawable/block_edit_delete_selector">
<ImageView android:layout_height="match_parent"
android:layout_width="wrap_content"
android:src="#drawable/block_edit_random"
android:scaleType="fitXY"
android:contentDescription="#string/random_numbers"/>
</FrameLayout>
</LinearLayout>
The LinearLayout with the ID block_edit_progress is the container layout of multiple instances of the class MyLinearLayout. The instances are added in the code:
for(int i = 0; i < numberOfMyLinearLayouts; i++) {
MyLinearLayout v = new MyLinearLayout(getContext());
addView(v);
}
I hope this helps.

If i convert your code to xml, it would be something like:
<LinearLayout layout_width=wrap_content, layout_height = wrap_content>
<LinearLayout id= MyLinearLayout>//just an idea, syntax may be wrong
<LinearLayout layout_width= 100, layout_width=100>
<ImageView color=BLUE>
</ImageView>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Whenever you call setLayoutParams on a View, parameter params you give should be parent element.
Try something like if you want linearlayout to be the parent of your linearlayout, use MATCH_PARENT for width, height if you want your view to span the width, height of view's parent
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT);
setLayoutParams(lp);//lp is parent view
Also try this, just in case views are getting added to right of your views, and you are not able to see them on screen
yourview.setOrientation(LinearLayout.VERTICAL);

Change the width and height of linear layout to match_parent and see how it changes. wrap_content will only show the content of the linear layout, which seems to be your problem.

I solved the problem. (Or found a workaround)
I moved the complete initialization stuff out of the constructor of the MyLinearLayout. If I then adding a View after the layout has been completely generated, everything works.
Like this:
MyLinearLayout ll = new MyLinearLayout(getContext());
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(100, 100);
ll.setLayoutParams(params);
ll.setBackgroundColor(Color.RED);
ImageView v = new ImageView(getContext());
params = new LinearLayout.LayoutParams(50, 50);
v.setLayoutParams(params);
v.setBackgroundColor(Color.GREEN);
ll.addView(v);
addView(ll);
I don't know why the other way doesn't work. Thanks for the fast answers!