Develop Reference

(android) an scrollview that gets programmatically filled loses title

I have this layout:
<?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:layout_centerInParent="true"
android:layout_centerVertical="true"
android:background="#000"
android:gravity="center_horizontal|center_vertical"
android:orientation="vertical">
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal|center_vertical">
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/play"
android:gravity="center_horizontal"
android:scaleType="centerInside"
android:text="#string/highScores"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#fff" />
<View
android:layout_width="1dp"
android:layout_height="20dp"></View>
<TableLayout
android:id="#+id/container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal">
</TableLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
I fill the 'container' TableLayout with elements like this:
layout.addView(buildTitleRow());
for (int i = 0; i < users.length(); i++) {
JSONObject parent = (JSONObject) users.get(i);
layout.addView(buildRowFrom(parent, i + 1));
}
buildTitleRow:
private TableRow buildTitleRow(){
TableRow result = new TableRow(this);
int color = Color.parseColor("#ffff00");
View view = new View(this);
view.setMinimumWidth(10);
result.addView(view);
view = new View(this);
view.setMinimumWidth(10);
result.addView(view);
//the same for other views
return result;
}
buildRowFrom:
private TableRow buildRowFrom(final JSONObject element, int counter) throws JSONException {
TableRow result = new TableRow(this);
String rowName = element.getString("name");
int color = Color.parseColor("#00ff00");
if(rowName.equals(userName)){
color = Color.parseColor("#ffffff");
}
TextView textView = new TextView(this);
textView.setText(counter + ".");
textView.setTextColor(color);
result.addView(textView);
//some other views
return result;
}
this really works well just until the scrolling needs to take place...
Once there are more elements than the height of the screen the table remains scrollable (luckily) but the original 'title' Textview doesn't show up anymore (you can't scroll up towards it anymore)
Does anyone know how to tweak the layout to keep it visible once more elements are added than the size of the screen?
Thanks a lot,
S.

I've tried your code and found find something wrong in your xml layout.
The attribute android:layout_gravity will change the layout's own gravity. So if set this attribute to a LinearLayout with center and its android:layout_height is wrap_content(means that the real height of the 'LinearLayout' will exceed the screen's height) and fill ScrollView(its height is the screen's height) with it, the LinearLayout will align to center of its parent ScrollView.
If you want to keep the content of 'LinearLayout' centered, you can set android:fillViewport="true" to ScrollView and then the LinearLayout will fill the parent and you can use android:gravity="center" on the LinearLayout. Reference
But there is still some thing need to be changed. In your java code, View view = new View(this) this line will new a View and then you add it into TableLayout. But this TableLayout will be full of View because of the description of View below.
* The base class implementation of measure defaults to the background size,
* unless a larger size is allowed by the MeasureSpec. Subclasses should
* override {#link #onMeasure(int, int)} to provide better measurements of
* their content.
You can use a concrete view like TextView instead of it.
I don't know if I have clarified it. I think if you remove the attribute android:layout_gravity of LinearLayout, it will work.
I'm glad if it would help.

I did the adaptations Paul suggested + change android:layout_height of the ScrollView to "wrap_content" to keep the inner LinearLayout centered when the android:layout_gravity="center" was removed from it (see complete layout below).
I wouldn't have found it without Paul's suggestion and explanation so I'll accept his answer as answer, this answer is just for the sake of completeness...
I'm not expecting this question to get that much of attention anyways ;-)
Thanks Paul :-D
<?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:layout_centerInParent="true"
android:layout_centerVertical="true"
android:background="#000"
android:gravity="center_horizontal|center_vertical"
android:orientation="vertical">
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical">
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/play"
android:gravity="center_horizontal"
android:scaleType="centerInside"
android:text="#string/highScores"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#fff" />
<View
android:layout_width="1dp"
android:layout_height="20dp"></View>
<TableLayout
android:id="#+id/container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal">
</TableLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>

Programmatically add Linear Layout

I am trying to add a new LinearLayout with a EditText element in it whenever a button on my app gets pushed. The xml I have is
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="#+id/app"
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:orientation="vertical"
android:weightSum="1">
<EditText android:id="#+id/dish_name"
android:layout_width="match_parent"
android:layout_height="58dp"
android:hint="#string/dish_name"
android:background="#drawable/my_border"
android:paddingLeft="10dip"/>
<LinearLayout android:id="#+id/ingredient_list"
android:layout_width="match_parent"
android:layout_height="58dp"
android:weightSum="1"
android:layout_marginTop="20dp">
<EditText android:id="#+id/edit_message"
android:layout_width="0dp"
android:layout_height="42dp"
android:hint="#string/edit_message"
android:background="#drawable/my_border"
android:layout_weight="1"
android:paddingLeft="10dip"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_send"
android:onClick="sendMessage" />
</LinearLayout>
</LinearLayout>
I am trying to duplicate the second LinearLayout along with the EditText inside of it. The java code I have so far is:
public void sendMessage(View view) {
LinearLayout layout = new LinearLayout(this);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
layout.setOrientation(LinearLayout.HORIZONTAL);
layout.setWeightSum(1f);
params.weight = 1.0f;
params.setMargins(0,20,0,0);
EditText editText = new EditText(this);
editText.setBackgroundResource(R.drawable.my_border);
editText.setHint(R.string.edit_message);
editText.setLayoutParams(params);
LinearLayout container = (LinearLayout)findViewById(R.id.app);
container.addView(editText);
}
The problem I am running into is that when I click the button I get the following:
AppImage
I want the EditText box to be the same height as the one I have defined in the xml but it takes up the entire screen.
Any ideas?

No need to re-define the layout entirely within Java. You should define it as its own XML file. Call it ingredient_input.xml
For example, feel free to modify. This is one "row" for the EditText and button, so a horizontal layout. Could also be a RelativeLayout.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="58dp"
android:weightSum="1"
android:orientation="horizontal"
android:layout_marginTop="20dp">
<EditText android:id="#+id/edit_message"
android:layout_width="0dp"
android:layout_height="42dp"
android:hint="#string/edit_message"
android:background="#drawable/my_border"
android:layout_weight="1"
android:paddingLeft="10dip"/>
<Button
android:id="#+id/btnAddMore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_send"/>
</LinearLayout>
First, you need to get the parent linear layout
LinearLayout ll = (LinearLayout) findViewById(R.id.ingredient_list);
Then, you can inflate the XML file for the "input row"
LayoutInflater inflater = LayoutInflater.from(MainActivity.this); // some context
View row = inflater.inflate(R.layout.ingredient_input, null);
You can also find the button, then set its click listener
row.findViewById(R.id.btnAddMore).setOnClickListener(...); // TODO
Then, just add that view onto the parent linear layout
ll.addView(row);
Realistically, you really could be using a ListView with an Adapter instead.

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
In the code above, you have the height set to match_parent and widht set to wrap_content. Instead, try setting the height and the width to match your xml. The height should be 58dp and the width should be match parent.
Hope this helps!

I haven't the time to test this but you can try:
// assuming you have variables for ingredient_list and edit_message
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams)ingredientList.getLayoutParams();
LinearLayout.LayoutParams editTextParams = (LinearLayout.LayoutParams)editMessage.getLayoutParams();
You can then use these instead of creating the parameters.
P.S. you don't have a specified orientation in your ingredient_list in the xml.

How to add a button programmatically?

I try to add a Button to my RelativLayout.
It works, but the Buttons are overlapping each other.
I guess I'm overriding the LayoutParams, or I'm using the wrong methods, but I don't know.
This is only a test. In the final version, I want to add an undefined number of Buttons to a scrollView with a relativLayout in it.
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button button = (Button) findViewById(R.id.button);
button.setOnClickListener(
new View.OnClickListener() {
#Override
public void onClick(View v) {
Button myButton = new Button(MainActivity.this);
myButton.setText("Push Me");
RelativeLayout ll = (RelativeLayout)findViewById(R.id.relative_main);
FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.WRAP_CONTENT, FrameLayout.LayoutParams.WRAP_CONTENT);
lp.topMargin = R.id.button;
myButton.setLayoutParams(lp);
ll.addView(myButton);
}
}
);
}
}
The XML-File:
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context="com.example.freddy.test.MainActivity"
android:id="#+id/relative_main">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add new Button"
android:id="#+id/button"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true" />
</RelativeLayout>

The buttons are overlapping each other because you are using a RelativeLayout without telling at which place is the button supposed to go relative to the Layout.
Something that may help you would be to use a LinearLayout instead of the RelativeLayout and add the Buttons to it.

Try to use this instead of FrameLayout.LayoutParams
This gives you more control over relative layout children (since your parent layout is a RelativeLayout)
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
You can align to another view by this:
params.addRule(RelativeLayout.BELOW, R.id.putyourviewhere);
This is if you stick to RelativeLayout. But the solution of LinearLayout is ok also. But RelativeLayout has more control

As you are using a RelativeLayout you have to use toRightOF if you want the buttons to be lined horizontally or below if you want the buttons to be lined vertically, so to add any of them programmatically, just add it as a rule to your layoutParams:
lp.addRule(RelativeLayout.RIGHT_OF, R.id.button);
OR
lp.addRule(RelativeLayout.BELOW, R.id.button);

But this is only a test, in the Final version i want to add an
undefined number of buttons to a scrollview with a relativLayout in
it.
If your problem is that
the Buttons are overlapping each other
It is relatively simple to solve. Use <LinearLayout> instead
In your root Tag just add a attribute called android:orientation="vertical" or android:orientation="horizontal".
There are also attributes to solve this for a RelativeLayout but it is a little more complex.
If these are problems u have often, I suggest you take this course.
example:
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</ScrollView>

OK, now try to ADD another parameters to control the layout like centering CENTER_HORIZONTAL
params.addRule(RelativeLayout.CENTER_HORIZONTAL, -1); // -1 means that CENTER_HORIZONTAL doesn't take a view as a parameter

FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.WRAP_CONTENT, FrameLayout.LayoutParams.WRAP_CONTENT);
lp.topMargin = R.id.button;
// use some meaningful margin, R.id.button can return any integer value.
// you have issue with alignment of button
ll.addView(myButton);
// with this call your button should be in view hierarchy now you have to align your button. best is use RelativeLayout.LayoutParams and make your button relative(top/bottom/left/right) to some other component in viewgroup(RelativeLayout).

How to change top position of linearLayout in ReletiveLayout progammaticlly

I want to change linearlayout that inside of ReletiveLayout.
But when I use settop it doesn't work!!!
and I can't find good tutorial
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff"
android:padding="5dp" >
<LinearLayout
android:id="#+id/remotebox"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/remote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="WWWWWWWWWWW"
android:textSize="30dp"
android:layout_gravity="left"
/>
<TextView
android:id="#+id/ver"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TTTTTT"
android:layout_gravity="right"
/>
</LinearLayout>
i want change "#+id/remotebox" layout position and width and hight.
any suggestion about this problem or link of good tutorial?
sorry for poor english

try this
LinearLayout linearLayout= (LinearLayout)findViewById(R.id.remotebox);
linearLayout.getLayoutParams().width=50;//dimensions
linearLayout.requestLayout();
linearLayout.setTranslationY(800);//position
hope this will help you .

in my case, the following code works :
// step1. get the target view
LinearLayout thisView = (LinearLayout)rootView.findViewById(R.id.tab3_bind_device_page);
// step2. get the LayoutPrams instance.
// notice: in this case, the LinearLayout is wrapped by this RelativeLayout,
// so here we have to use the RelativeLayout.LayourParams
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);
// change the margins
// in fact you should convert -25f from "px" to "dp", if possible.
lp.setMargins(0, -25f, 0, 0);
thisView.setLayoutParams(lp);

Adding a View to RelativeLayout changes its size

I have a RelativeLayout called "Dress" with LayoutParams of WRAP_CONTENT. All that is inside it is an ImageView, so it is the same size as the ImageView. When I add one more view to the RelativeLayout in OnCreate, like this:
photoSorter = new MultitouchImagesView(this.getApplicationContext());
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
((ViewGroup) findViewById(id.Dress)).addView(photoSorter, params);
The RelativeLayout called Dress changes size, to take up the whole RootView, basically the whole activity, minus the actionbar.
I take a screenshot of the Dress Layout. So when photoSorter is in the RootLayout (NOT the Dress Layout) like this:
photoSorter = new MultitouchImagesView(this.getApplicationContext());
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
addContentView(photoSorter, params);
Layout Dress is correct size and I get this screenshot which is what I want:
But I need PhotoSorter in the Dress Layout so that I can include it in my screenshot and not have the black strips. When I add the photoSortr to the Dress Layout like this:
photoSorter = new MultitouchImagesView(this.getApplicationContext());
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
((ViewGroup) findViewById(id.Dress)).addView(photoSorter, params);
It makes the Dress Layout take up the whole screen so the screenshot of the Dress Layout looks like this:
Here is my code to take a screenshot:
public Bitmap takeScreenshot() {
View v = findViewById(R.id.Dress);
v.setDrawingCacheEnabled(true);
return v.getDrawingCache();
}
Here is my XML for the activity:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:longClickable="true"
android:onClick="deleteImage"
android:background="#android:color/transparent"
tools:context=".MainActivity" >
<RelativeLayout
android:id="#+id/Dress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent" >
<ImageView
android:id="#+id/imageViewDress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:background="#00CED1"
android:padding="10dp"
android:scaleType="centerInside" />
</RelativeLayout>
<com.edmodo.cropper.CropImageView
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:id="#+id/CropImageView"
android:background="#android:color/transparent"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
Also When I added com.edmodo.cropper.CropImageView to the DressLayout, it made the Dress Layout take up the whole activity as well. So adding anything to the Dress Layout is making it bigger.
How can I add photoSorter to the Dress Layout without making Dress Layout take up the whole activity size?
Thanks.

I managed by trying things out in XML. The key is to align Dress with imageViewDress, I could align the other sides to be more thorough, not just bottom.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:longClickable="true"
android:background="#android:color/transparent"
tools:context=".DressingRoomActivity" >
<RelativeLayout
android:id="#+id/DressBig"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
<ImageView
android:id="#+id/imageViewDress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:scaleType="centerInside" />
<RelativeLayout
android:id="#+id/Dress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:layout_alignBottom="#+id/imageViewDress"
android:layout_centerInParent="true" >
</RelativeLayout>
</RelativeLayout>
<com.edmodo.cropper.CropImageView
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:id="#+id/CropImageView"
android:background="#android:color/transparent"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
This XML, then add photoSorter to Dress programmatically, then take a screenshot of DressBig.

The following should work
<RelativeLayout android:id="#+id/Dress"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="...">
<ImageView
android:id="#+id/imageViewDress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
...
android:scaleType="fitXY" />
EDIT:
You can add the below rule to your params so it's laid out over the other content if that's what you want. This is my third attempt at trying to figure out what you're asking for so if it's not what you need, you'll have to figure it out yourself seeing as you are being lazy and won't do a sketch to try and explain clearly how you want it laid out
params.addRule(RelativeLayout.CENTER_IN_PARENT);