Android app dynamically created buttons appearing all in the same place - android

I'm working on my first android app and have run into some trouble. I'm trying to start a new activity which takes in an ArrayList from the previous activity and creates a button for each item in the list. I've tried looking at many other stack overflow posts but none of them have helped solve my problem.
I have tried many different strategies, and my code is currently as below:
public class VideoMenu extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_video_menu);
Bundle b = getIntent().getExtras();
ArrayList<String> videos = b.getStringArrayList("videos");
setContentView(R.layout.activity_video_menu);
for(int i=0;i<videos.size();i++){
Button myButton = new Button(this);
myButton.setText(videos.get(i));
myButton.setId(i);
RelativeLayout ll = (RelativeLayout)findViewById(R.id.videos);
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
if (i != 0) {
lp.addRule(RelativeLayout.END_OF, i - 1);
}
myButton.setLayoutParams(lp);
ll.addView(myButton,lp);
}
}
}
and XML code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/videos"
android:layout_alignParentBottom="true"
android:layout_alignWithParentIfMissing="true"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:orientation="vertical">
This compiles just fine, but all of the buttons appear on top of one another. If you could include reasons for why any code suggestions might work I would appreciate it. I'd like to learn more about this :)
Edit: fixed typo

The reason is that you are adding the buttons to a RelativeLayout. RelativeLayout basically add all views to wherever you specify in the view. You're not really specifying, so they're all appearing on top of each other.
In order to fix this, change your RelativeLayout to a LinearLayout, with orientation of either horizontal or vertical. horizontal will add views side by side in a horizontal line, and vertical will add them in a vertical line.

Related

Adding a view dynamically to Layout

I'm having a hard time with Android as a pretty newbie in the platform, and as I learnt, many people too. I don't know how many hours I have lost so far - it's terrifying even to count them.
I want basically to add a new TextView (or any other View) to LinearLayout after clicking the button. Here's this part of the code:
public void btnClick(View view) {
final LinearLayout ll = (LinearLayout) findViewById(R.id.test_story_screen_layout);
//checking if child is being added - it is, this value is increase with every button click
android.util.Log.d("child: ", Integer.toString(ll.getChildCount()));
android.util.Log.d("height: ", Integer.toString(ll.getMeasuredHeight()));
ll.post(new Runnable() {
public void run() {
final TextView tv = new TextView(MainActivity.this);
tv.setText("new one " + (new Random()).nextInt());
tv.setTextColor(Color.YELLOW);
LayoutParams lp = new LayoutParams(200, 500);
tv.setLayoutParams(lp);
tv.setVisibility(View.VISIBLE);
ll.addView(tv, ll.getChildCount());
//checking if the run() is called - it is
ll.setBackgroundColor(Color.GREEN);
}
});
ll.requestLayout(); //invalidate() and postInvalidate() also not working
}
But the newly added View is not visible (but is added as a child to LinearLayout).
After hours of checking what's wrong, I only found out that when I replace this line:
ll.addView(tv, ll.getChildCount());
with this:
ll.addView(tv, ll.getChildCount() - 1);
Then new View is visible, but it replaces the previous one - which is not desired.
I already checked some solutions, like this: Refreshing a LinearLayout after adding a view
They didn't help me with the issue.
UPDATE:
Linear Layout looks just fine with predefined in XML two Views (as in the code below). Here's intersting part of the XML:
<LinearLayout
android:id="#+id/test_story_screen_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:layout_margin="16dp" >
<ImageView
android:id="#+id/imageView1"
android:src="#drawable/example"
android:layout_width="16dp"
android:layout_height="16dp" />
<TextView
android:id="#+id/textView1"
android:text="Hello World!"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
Nothing unusual I think. So these two Views (Image and Text) are visible of course. Then any new TextView I add to this LinearLayout dynamically (via the btnClick() as in the code above) is not visible, but it is indeed added to Layout, as the ll.getChildCount() is increased every time when the child view is added (= button clicked).
In order to test this further, I added these two lines at the end of the btnClick() method:
android.util.Log.d("tv.getMeasuredWidth: ", Integer.toString(tv.getMeasuredWidth()));
android.util.Log.d("tv.getMeasuredHeight: ", Integer.toString(tv.getMeasuredHeight()));
I'm guessing the problem is the tv (TextView) rather than ll (LinearLayout), as tv gets width and height both 0.
Issue is you are initializing your linearlayout ll with what defined in your xml every time on button click and due to this your linearlayout is getting renewed. Move
final LinearLayout ll = (LinearLayout) findViewById(R.id.test_story_screen_layout);
in your onCreate if using Activity, onCreateView if using Fragment.
Your layout horizontal by default, When you add new view it set it up out from right border of screen. Just set orientation vertical in layout for you linear layout
The linearLayout orientation is horizontal by default set orientation to vertical.
if you want to add View as last element in Layout you can just do this:
ll.addView(tv);
There were number of things related in this Android issue, some of this were:
ll.post() made sense and appared to be required in my case
UI in Android should be updated in a special, not any, way, and it refers to e.g. Async Tasks
visibility of an item (item should be visible)
proper margins (when a screen e.g. is rotated to landscape, margin appeared to be too big)
Damn it. I find Android to be one of least thought-through platforms I've seen.

How to add multiple TextViews programmatically to a RelativeLayout

How does one programmatically, via one button click at a time, add multiple TextViews to an existing RelativeLayout without the TextViews overlapping onto one another.
I am trying something like this -
The following code exists inside the onCreate() method:
TextView textViewToSeeFirst = (TextView) findViewById(R.id.textView1);
RelativeLayout rLayout1 = (RelativeLayout) findViewById(R.id.relativeLayout1);
Button button1 = (Button) findViewById(R.id.button1);
button1.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
RelativeLayout.LayoutParams lparams = new RelativeLayout.LayoutParams
(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
TextView newTextView = new TextView(TheActivityYouAreUsingActivity.this);
newTextView.setText("text you want");
rLayout1.addView(newTextView, lparams);
}
The TextViews are being added to the RelativeLayout, but they are all on top of one another, how does one fix this?
The goal is to programmatically, via one button click at a time, add multiple TextViews to an existing RelativeLayout, and without the TextViews overlapping onto one another.
Here is what I finally came to, this works but I am unsure if it is the best way to go (or even a good way).
The following code exists inside the onCreate() method:
// Creates a variable to keep track of the amount of TextViews, the
// first TextView, an array, and then stores the TextView in the Array
int numberOfTextViews = 1;
TextView[] textViewArray = new TextView[20];
TextView textViewToSeeFirst = (TextView) findViewById(R.id.textView1);
textViewArray[numberOfTextViews - 1] = textViewToSeeFirst;
// Also need to reference the RelativeLayout we are putting TextViews in
RelativeLayout rLayout1 = (RelativeLayout) findViewById(R.id.relativeLayout1);
Button button1 = (Button) findViewById(R.id.button1);
button1.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
RelativeLayout.LayoutParams lparams = new RelativeLayout.LayoutParams
(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
lparams.addRule(RelativeLayout.RIGHT_OF, textViewArray[numberOfTextViews - 1].getId());
lparams.addRule(RelativeLayout.ALIGN_TOP, textViewArray[numberOfTextViews - 1].getId());
TextView newTextView = new TextView(TheActivityYouAreUsingActivity.this);
newTextView.setText("text you want");
newTextView.setId(numberOfTextViews);
textViewArray[numberOfTextViews] = newTextView;
rLayout1.addView(textViewArray[numberOfTextViews], lparams);
numberOfTextViews = numberOfTextViews + 1;
}
Some things to keep in mind:
the parameters for RelativeLayout.LayoutParams are important, see developer material on these parameters. WRAP_CONTENT was chosen for my needs because it causes the TextViews to only take up the size of their text, rather than their entire parent... Overlapping was occurring before I changed this.
the id of each new TextView must be set if it is to be referenced later on for new layout parameters
the id must be a positive number, and zero is not positive
the RelativeLayout is holding the TextViews and handling them, the textViewArray is just so the ids of each TextView can be stored and referenced if need be
The corresponding XML has this going for it inside the main parent:
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight=".2" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/die_one" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/name_a_button" />
</RelativeLayout>
Notice that the first RelativeLayout, and the TextView both have an id, this is so the addRule() method in the activity can reference them.
This code allows a user to click a button and add new TextViews to a RelativeLayout without them overlapping.
Why dont you add all your text views in your xml file (as much as you want) before running you app. Just set the visibilities to the textviews which you dont want to show initially to "GONE" and then in button click listener just keep changing the visibility of textview to "View.Visible" .
If you want a new textview to appear each time you press a button then set a counter to a button and each time a counter increments you change the desire textview's visibility to View.Visible. If you understood what i am saying you will be able to make the code on your own.
You can use Linear Layout with orientation as vertical instead of Relative Layout. It will align all the textviews vertically one below the other.
I dont consider adding large number of textviews to the xml file a valid solution, as the number of times the user will click a button is unknown.

Android TextView cannot setBackground Color or Drawable

wonder if anyone has came across this problem before. I have an app which detects faces and places touchable squares around the faces, all in a RelativeLayout. When touched I want to add some text into the View which is all working nicely, but when I go to simply add a background to the TextView it just does nothing. I've tried a standard background setBackgroundColor(Color.WHITE); instead of the background I really want to use (setBackgroundResource(R.drawable.nametag);) and still nothing.
TextView nameLabelView = new TextView(activity);
nameLabelView.setText(fullname);
nameLabelView.setTextColor(Color.BLACK);
nameLabelView.setBackgroundColor(Color.WHITE); //TODO <-- wth??
//nameLabelView.setBackgroundResource(R.drawable.nametag);
nameLabelView.setGravity(Gravity.CENTER_HORIZONTAL);
//duplicate layout params from active face View so label sits inside it
ViewGroup.LayoutParams lp = selectedFaceView.getLayoutParams();
nameLabelView.setLayoutParams(lp);
facePreviewLayout.addView(nameLabelView);
Strange one, hope it's obvious to someone out there, thanks in advance!
I have tested your code and it works ok for me. It is necessary to provide more information so I can help more with it. The code below works fine.
MainActivity.java
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TextView nameLabelView = new TextView(getApplicationContext());
nameLabelView.setText("Test");
nameLabelView.setTextColor(Color.WHITE);
nameLabelView.setBackgroundColor(Color.BLACK); //TODO <-- wth??
//nameLabelView.setBackgroundResource(R.drawable.nametag);
nameLabelView.setGravity(Gravity.CENTER_HORIZONTAL);
//duplicate layout params from active face View so label sits inside it
FrameLayout selectedFaceView = (FrameLayout)findViewById(R.id.frame_layout);
ViewGroup.LayoutParams lp = selectedFaceView.getLayoutParams();
nameLabelView.setLayoutParams(lp);
RelativeLayout facePreviewLayout = (RelativeLayout)findViewById(R.id.relative_layout);
facePreviewLayout.addView(nameLabelView);
}
}
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/relative_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<FrameLayout
android:id="#+id/frame_layout"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#00FF00" >
</FrameLayout>
</RelativeLayout>
Thank you janzoner for your test really appreciate it, good to know I wasn't going mad. I've found a way to work around it though, I have no idea why this method works and the setup I had before didn't, perhaps I'd been staring at it too long and missed something somewhere else.
Basically beforehand I was adding the name label TextView into the main RelativeLayout (whose children were the actual image and all the face Views etc).
Now I have moved the name label TextView into its own RelativeLayout which sits around the face, and that's magically done the trick. This is a cleaner way of doing things anyway as you can't iterate through child Views of Views but you can children of RelativeLayout's and I will need this later!
Phew!

dynamically created Buttons overlapping

I have created a layout with a database call where a button will be created for each item inside the database. The buttons are created like I need and I also found out, how to set up the layout_width and layout_height but all buttons are placed in the same position and overlap each other so that only the last created button can be accessed. My code for creating the buttons looks like this:
Button bt = new Button(this);
bt.setText("Button Title");
bt.setLayoutParams(new RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));
linerLayout.addView(bt);
The activity looks like that, after generating the buttons:
I looked at each method that can be used for the button but didn't find anything to define the position. I just thought about following method:
bt.layout(l, t, r, b);
but don't know exactly how to use it and thought there might be a simpler method to solve this problem. Anybody who knows a workaround?!
CHANGED CODE
I just tryied to set the layout parameters like explained from "Chen doron". I have a relative layout inside my xml file:
<RelativeLayout
android:id="#+id/llActOver"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="2" >
</RelativeLayout>
and formatted the generated buttons like this:
Button bt = new Button(context);
bt.setText(c.getString(iDef));
fontClass.setFont(bt);
//RelativeLayout placeholder = new RelativeLayout(context);
RelativeLayout.LayoutParams layoutParam =
new RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT,
LayoutParams.WRAP_CONTENT);
if(rowCount < 1){
layoutParam.addRule(RelativeLayout.ALIGN_PARENT_TOP);
rowCount++;
}else{
layoutParam.addRule(RelativeLayout.ALIGN_PARENT_TOP, lastButtonId);
}
lastButtonId = bt.getId();
//placeholder.addView(bt, layoutParam);
linearLayout.addView(bt, layoutParam);
I save the buttons id at the end of the loop so that the last buttons id can be accessed in the next round.
I also tryied to create a new relativ layout for each new button like the commented part of the code shows but even without the new layout nothing happens and i still just have all buttons overlapped.
I finally solved the problem, but just by trying each possible combination of layout types.
I found out, i have to define a LinearLayout inside the XML file and the attribute android:orientation="vertical" is affordable. all the other parameters that have been set before were unimportant.
So now i have a LinearLayout inside a ScrollView in my xml file:
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="2" >
<LinearLayout
android:id="#+id/llActOver"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
</LinearLayout>
</ScrollView>
and inside the java database i have following code to create a button for each row in the db, setting its Text and Font and add it to the loaded layout:
for (c.moveToFirst(); !c.isAfterLast(); c.moveToNext()) {
Button bt = new Button(context);
bt.setText(c.getString(iDef));
fontClass.setFont(bt);
linearLayout.addView(bt);
}
and here a screenshot of the result:
maybe somebody else who has the same problem won't need to worry as long as me with this description.
You could use a Relative Layout, and have the first Button align to the parent's top.
Then each button aligned to the previous button's bottom.
Use:
params.addRule(RelativeLayout.ALIGN_PARENT_TOP);
And then:
params.addRule(RelativeLayout.BELOW,ID-Of-Previous-Button);
Also check out:
http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html

Quickly switching and animating views in a FrameLayout messes up the views

I have a very strange problem with Android animations, I tried many different approaches and components, and still couldn't find any explanation.
I have a FrameLayout which is a container for views, and a Button.
This FrameLayout should display only one view at a time, and when I click on the Button, I want the FrameLayout to display another view, and start an animation on the view that is removed from the FrameLayout.
The specificity here is that I only use two views, and I want to switch between these two views.
The problem:
When I click the button multiple times really fast, and then stop clicking, the two views are shown at the same time one on top off the other, and won't disappear. The container still contains only one view though... definitely strange!
error screenshot http://i.minus.com/jDXyvUsE1LCOx.png
I was able to reproduce this with a simple example:
public class TestAnimActivity extends Activity implements OnClickListener {
private FrameLayout container;
private TextView current;
private TextView next;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
current = new TextView(this);
current.setText("View 1 YEAH");
next = new TextView(this);
next.setText(" View 2 DOH");
container = (FrameLayout) findViewById(R.id.container);
container.addView(current);
findViewById(R.id.button).setOnClickListener(this);
}
public void onClick(View v) {
Animation outAnimation = AnimationUtils.loadAnimation(this, android.R.anim.fade_out);
current.startAnimation(outAnimation);
container.addView(next);
container.removeView(current);
TextView temp = current;
current = next;
next = temp;
}
}
As you can see the animations are being started on the views while previous ones are still running, and the way I do that may somehow be the source of the problem.
If I comment the animation related code, it works perfectly:
// Animation outAnimation = AnimationUtils.loadAnimation(this, android.R.anim.fade_out);
// current.startAnimation(outAnimation);
If I stop reusing views and create new views instead, it also works perfectly:
// next = temp;
next = new TextView(this);
next.setText("View: " + new Random().nextInt());
But I don't want to create new views :-) .
It seems that the problem is related to starting animations several times on a view while adding / removing this view from its parent.
I first tried with a ViewFlipper, then a ViewAnimator, then looked up the Android source code and ended up doing this manually to reproduce the problem.
If you want the layout to be able to test by yourself, here is my main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:id="#+id/container"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<Button
android:id="#+id/button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Click me fast" />
</LinearLayout>
Thank you for your time!
I finally found a way to fix the issue.
When we remove a view from a ViewGroup, if there is an animation running on this view, it is automatically added to the "disappearing children" list of the ViewGroup.
The issue seemed to appear when we tried to add to the ViewGroup a view that has been removed from it but was still in its disappearing children.
There's an easy way to fix that : viewGroup.clearDisappearingChildren();
Here would be the new implementation of the onClick() method :
public void onClick(View v) {
next.clearAnimation();
container.clearDisappearingChildren();
Animation outAnimation = AnimationUtils.loadAnimation(this, android.R.anim.fade_out);
current.startAnimation(outAnimation);
container.addView(next);
container.removeView(current);
TextView temp = current;
current = next;
next = temp;
}
If it works without quickly pressing the button, and works without the animation then you may be seeing how animations actually work. From my understanding what is displayed in the animation is separate from the View objects they are animating. You can try animating from the parent view instead of the ones that keep being added and removed. Or make sure to clean up the animation before removing the view, as it sounds like the view isn't able to get the onAnimationEnd method where it can remove the phantom image being displayed (setFillAfter(false) which is the default behavior of an Animation).

Categories

Resources