Develop Reference

Dynamically adding buttons next to each other - RelativeLayout

Ok, so here's the thing. I'm trying to make an app that resembles a piano for android, also I've never really had much experience with Java or programming for Android so all of this is pretty new to me. I've managed to do this in XML but I want to make it programmaticaly so I can easily add more white and black keys also dependant of screen size. In XML it looks like this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/white1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#fff" />
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#fff"
android:id="#+id/white2"
android:layout_toRightOf="#+id/white1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#fff"
android:id="#+id/white3"
android:layout_toRightOf="#+id/white2"/>
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#fff"
android:id="#+id/white4"
android:layout_toRightOf="#+id/white3"/>
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#fff"
android:id="#+id/white5"
android:layout_toRightOf="#+id/white4"/>
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#fff"
android:id="#+id/white6"
android:layout_toRightOf="#+id/white5"/>
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#fff"
android:id="#+id/white7"
android:layout_toRightOf="#+id/white6"/>
<Button
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_marginStart="-10dp"
android:layout_marginEnd="-6dp"
android:background="#000"
android:id="#+id/black1"
android:layout_toRightOf="#+id/white1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_marginLeft="-6dp"
android:layout_marginRight="-10dp"
android:background="#000"
android:id="#+id/black2"
android:layout_toRightOf="#+id/white2"/>
<Button
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_marginLeft="-10dp"
android:layout_marginRight="-6dp"
android:background="#000"
android:id="#+id/black3"
android:layout_toRightOf="#+id/white4"/>
<Button
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_marginLeft="-8dp"
android:layout_marginRight="-8dp"
android:background="#000"
android:id="#+id/black4"
android:layout_toRightOf="#+id/white5"/>
<Button
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_marginLeft="-6dp"
android:layout_marginRight="-10dp"
android:background="#000"
android:id="#+id/black5"
android:layout_toRightOf="#+id/white6"/>
And now I wanted to recreate it programmaticaly, at first I've tried linear approach but first of all I was unable to make more than 7 keys, and I didn't really knew how to make black keys on top of that. So now I've went with RelativeLayout and all is fine as long as I create two buttons, then it works fine, one is next to another. But when I try to create more than two buttons they kinda make a stack.
I was trying to make some sort of array of buttons so I could easily make a loop to create destined number of buttons. Also I wanted to change the width of buttons, so if I create 8 buttons the would have the width of screen_width/8 but I'm not quite sure if it makes any sense since it's actually not doing anything when uncommented.
I would be grateful for any tips :)
public class MainActivity extends AppCompatActivity {
final int[] whitelist = {R.id.whitebt1,R.id.whitebt2,R.id.whitebt3,R.id.whitebt4,R.id.whitebt5,
R.id.whitebt6,R.id.whitebt7,R.id.whitebt8};
Button[] whiteKeys = new Button[whitelist.length];
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x;
int height = size.y;
final RelativeLayout pianoLayout = new RelativeLayout(this);
RelativeLayout.LayoutParams whiteKeyParams1 = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
whiteKeys[0] = new Button(this);
whiteKeys[0].setId(View.generateViewId());
//whiteKeys[0].setHeight(height);
//whiteKeys[0].setWidth(width/8);
whiteKeys[0].setLayoutParams(whiteKeyParams1);
pianoLayout.addView(whiteKeys[0]);
whiteKeys[1] = new Button(this);
whiteKeys[1].setId(View.generateViewId());
//whiteKeys[i].setHeight(height);
RelativeLayout.LayoutParams whiteKeyParams2 = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
whiteKeyParams2.addRule(RelativeLayout.RIGHT_OF, whiteKeys[0].getId() );
whiteKeys[1].setLayoutParams(whiteKeyParams2);
pianoLayout.addView(whiteKeys[1]);
//HERE'S IS THE MOMENT WHERE I TRY TO ADD THIRD BUTTON AND THE BUTTONS START TO PILE UP
/*
whiteKeys[2] = new Button(this);
whiteKeys[2].setId(View.generateViewId());
//whiteKeys[i].setHeight(height);
//RelativeLayout.LayoutParams whiteKeyParams2 = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
whiteKeyParams2.addRule(RelativeLayout.END_OF, whiteKeys[1].getId());
whiteKeys[2].setLayoutParams(whiteKeyParams2);
pianoLayout.addView(whiteKeys[2]);*/
this.setContentView(pianoLayout);
}
}

You can add 8 same size buttons using weightsum and layoutweight with LienarLayout with horizontal orientations.
see below code it may help you to add same size buttons dynamically.
/* Add a new Linearlayout as a container for the buttons */
LinearLayout linearLayout = new LinearLayout(this);
linearLayout.setOrientation(LinearLayout.HORIZONTAL);
//Added Weight Sum 8 in LinearLayout
linearLayout.setWeightSum(8);
/* Create a new Buttons in this container, for the status bar */
//below LayoutParams define with weight 1 for buttons.
LinearLayout.LayoutParams param = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT, 1.0f);
Button button1 = new Button(linearLayout.getContext());
button1.setLayoutParams(param);
Button button2 = new Button(linearLayout.getContext());
button2.setLayoutParams(param);
Button button3 = new Button(linearLayout.getContext());
button3.setLayoutParams(param);
Button button4 = new Button(linearLayout.getContext());
button4.setLayoutParams(param);
Button button5 = new Button(linearLayout.getContext());
button5.setLayoutParams(param);
Button button6 = new Button(linearLayout.getContext());
button6.setLayoutParams(param);
Button button7 = new Button(linearLayout.getContext());
button7.setLayoutParams(param);
Button button8 = new Button(linearLayout.getContext());
button8.setLayoutParams(param);

With your approach before adding the view to parent layout you will have to add margins for every new key also which will prevent stacking one key over another.
params.setMargins(left, top, right, bottom);

How to create LinearLayout with ImageView and add it to another LinearLayout programatically

I'm having troubles trying to create a LinearLayout with an ImageView inside programatically (and add this LinearLayout to another LinearLayout). The XML code that I'm tryng to recreate is this:
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/linearLayout_morty_combinationsV"
android:gravity="center">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:background="#color/black"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/morty"
android:id="#+id/imageView1"/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:background="#color/black"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/morty"
android:id="#+id/imageView2"/>
</LinearLayout>
</LinearLayout>
This is my java code
LinearLayout ll_combinations = (LinearLayout) findViewById(R.id.linearLayout_morty_combinationsV);
Iterator<MortyObj> iterator = mortys.iterator();
while (iterator.hasNext()) {
final MortyObj mortyC = iterator.next();
LinearLayout ll_new = new LinearLayout(this);
ll_new.setOrientation(LinearLayout.VERTICAL);
ll_new.setGravity(Gravity.CENTER);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.MATCH_PARENT);
params.weight = 1f;
ll_new.setLayoutParams(params);
ll_new.setBackgroundColor(Color.WHITE);
ImageView morty_imageview = new ImageView(this);
try {
InputStream ims = getAssets().open("morty_images/" + mortyC.getId() + ".png");
Drawable d = Drawable.createFromStream(ims, null);
morty_imageview.setImageDrawable(d);
} catch (IOException e) {
e.printStackTrace();
}
FrameLayout.LayoutParams imgParams = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.WRAP_CONTENT, FrameLayout.LayoutParams.WRAP_CONTENT);
morty_imageview.setLayoutParams(imgParams);
ll_new.addView(morty_imageview);
ll_combinations.addView(ll_new);
}
This is how it should look:
XML
And this is how It looks:
JAVA
I've been stuck in this for the last 2 hours.

You can create a layout with something like
View view = (View) findViewById(R.layout.current_layout); //the layout you set in `setContentView()`
LinearLayout picLL = new LinearLayout(CurrentActivity.this);
picLL.layout(0, 0, 100, 0);
picLL.setLayoutParams(new LayoutParams(1000, 60));
picLL.setOrientation(LinearLayout.HORIZONTAL);
((ViewGroup) view).addView(picLL);
What parameters you pass in layout() are obviously going to depend on what you want. Then you can create separate Views to add to the Layout you just created. But I highly advise reading through the docs to understand what all can be done here.
Edit
ImageView myImage = new ImageView(this);
picLL.addView(myImage);
//set attributes for myImage;

Just found the problem. If i load an image from res/drawables I get the view I want, if I load it from assets it doesn't work

ImageView, How to set image seem at the front of another image?

I have a problem with images. How can I bring an image in front of another one.
The problem is I create the images in code. So I can not change order in Layout.

You can use ImageView.bringToFront();, maybe is the best solution.
Here's the Tutorial
Let me know if you have any issue.

You can use RelativeLayout:
RelativeLayout rv = (RelativeLayout) findViewById(R.id.my_ph);
RelativeLayout.LayoutParams params;
ImageButton im1 = new ImageButton(this);
im1.setBackgroundResource(R.drawable.lamp);
im1.setId(i);
im1.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
TextView tx = (TextView) findViewById(R.id.textView1);
tx.setText("lamp #" + v.getId());
}
});
params = new RelativeLayout.LayoutParams(40, 40);
params.leftMargin = x;
params.topMargin = y;
rv.addView(im1, params);
XML Layout:
<RelativeLayout
android:id="#+id/my_ph"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="bottom">
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#drawable/map" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_below="#+id/image"
android:layout_alignParentLeft="true">
</TextView>
</RelativeLayout>

If you are creating images via code , you could use LayoutParams to give the second image a negative leftMargin.
RelativeLayout.LayoutParams imageParams = new RelativeLayout.LayoutParams
(RelativeLayout.LayoutParams.WRAP_CONTENT,RelativeLayout.LayoutParams.WRAP_CONTENT);
imageParams.leftMargin = -20; // change this value
imageParams.addRule(RelativeLayout.RIGHT_OF,image1.getId());
image2.setLayoutParams(imageParams);
This would force the second image on top of the first image. By changing the left margin you could decide on how much you want the second image to move over the first.

Android - How to set the right on click event to a button that was made programmatically

I've made the next layout xml code which I call it layout_one -
<?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="match_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/layout_one"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="50dp"
android:layout_marginTop="50dp"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="100dp"
android:text="Testing 1"
android:textSize="20sp" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/info_layout"
android:visibility="gone">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
As you can see there are two layout in it - one with textview and button and one with textview.
The layout with the only textview - is gone, And i want by a click on the button, from the visible layout, it will be shown.
Now at the activity i wrote the next code -
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.test_layout);
ScrollView sv = new ScrollView(this);
LinearLayout ll = new LinearLayout(this);
ll.setOrientation(LinearLayout.VERTICAL);
sv.addView(ll);
LinearLayout newView0 = (LinearLayout)View.inflate(this, R.layout.layout_one, null);
LinearLayout newView1 = (LinearLayout)View.inflate(this, R.layout.layout_one, null);
LinearLayout newView2 = (LinearLayout)View.inflate(this, R.layout.layout_one, null);
LinearLayout newView3 = (LinearLayout)View.inflate(this, R.layout.layout_one, null);
ll.addView(newView0);
ll.addView(newView1);
ll.addView(newView2);
ll.addView(newView3);
setContentView(sv);
newView1.findViewById(R.id.layout_one).setBackgroundColor(0xff0000ff);
TextView tv3 = (TextView) newView3.findViewById(R.id.textView1);
tv3.setText("Suprise Suprise");
infoLay = (View) findViewById(R.id.info_layout);
ll.addView(newView3);
}
Now there is something I don't understad - How could I set an on click listener to the button that will know which layout to show?
Tanks for any kind of help

Actually, there are three linear layouts, which seems redundant.
You can set the onclick listener by checking if textview of each layout is empty or not.

First off, have a look at this http://developer.android.com/training/improving-layouts/reusing-layouts.html. Use that <include> tag instead of dynamically creating all these layouts in your Activity class. Define your ScrollView, and all your LinearLayouts in your test_layout.xml file.
Then, in your Activity, all you have to do is get a reference to those views that's you've defined using findViewById.
Once you've got that working we can address your question as follows:
setContentView(R.layout.test_layout);
LinearLayout layout1 = (LinearLayout)findViewById(R.id.layout1);
LinearLayout layout2 = (LinearLayout)findViewById(R.id.layout2);
LinearLayout layout3 = (LinearLayout)findViewById(R.id.layout3);
OnClickListener listener = new OnClickListener() {
#Override
public void onClick(View view) {
((View)view.getParent().getParent()).findViewById(R.id.textView2).setVisibility(View.VISIBLE);
}
});
layout1.findViewById(R.id.button1).setOnClickListener(listener);
layout2.findViewById(R.id.button1).setOnClickListener(listener);
layout3.findViewById(R.id.button1).setOnClickListener(listener);
I'd also add that it seems like you're trying to create a list here, in which case you should use a ListView instead of many LinearLayouts.

Android. Add controls programmatically

I have layout with controls:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/contact_phones_layout_row"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:id="#+id/contact_phone"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:inputType="phone" />
<Spinner
android:id="#+id/contact_phone_type"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
And I want to inflate it into another layout on the fragment. Quantity of these controls depends on values in a array. Array contains controls objects. So every time onCreateView rises I filled the layout from the array:
private void addLine(PhoneLine line) {
LinearLayout layout = (LinearLayout) mLayout.findViewById(R.id.contact_phones_layout);
View view = line.getParent();
((ViewGroup) view.getParent()).removeView(view);
layout.addView(view, layout.getChildCount() - 1);
setButtonVisible(false);
}
if line is null controls are created this way:
private void addLine() {
LinearLayout layout = (LinearLayout) mLayout.findViewById(R.id.contact_phones_layout);
View view = inflater.inflate(R.layout.contact_phone_line, layout, false);
EditText phoneEditText = (EditText) view.findViewById(R.id.contact_phone);
Spinner phoneType = (Spinner) view.findViewById(R.id.contact_phone_type);
phoneLines.add(new PhoneLine(phoneEditText, phoneType, view));
layout.addView(view, layout.getChildCount() - 1);
}
But after that I get same values in all EditText/Spinner controls, values equal to last element in the array. What can be wrong? May be there is more pure way to add controls dynamically?

I fixed it by adding controls when onResume rises, not onCreateView. But I still don't understand why onCreateView changes all values.