Add a scrollbar to a dynamic view - android

I have a LinearLayout and I amdynamically creating a certain number of TextViews in it.
Sometimes there are more TextViews than fit on the screen.
How do I add a scrollbar to this view, so the user can scroll up and down and see all TextViews?
Here's part of my code:
LinearLayout layout = (LinearLayout) findViewById(R.id.layout);
for (int n = 0; n < (numberOfPlayers*(numberOfPlayers-1)/2); n++) {
TextView tv = new TextView(this);
tv.setText(gamelist[n][0] + " - " + gamelist[n][1]);
layout.addView(tv);
}

Include your linearLayout in a ScrollView
<ScrollView
android:id="#+id/scroll"
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<LinearLayout ... />
</ScrollView>
Note that a ScrollView can only have one view child

Wrap your LinearLayout into a ScrollView.
In this case you may consider using a ListView (tutorial here).

Related

LinearLayout using half screen

Hi I have a ScrollView and a vertical LinearLayout inside that. Inside each LinearLayout slot I have a horizonal LinearLayout that holds 2 things a word and a number. The problem is some of the words are hidden?? and it takes up half the screen. Thanks for any help.
Layout bounds
for (int i = 0; i < words.size(); i++) {
LinearLayout horizontal = new LinearLayout(context);
horizontal.setOrientation(LinearLayout.HORIZONTAL);
LinearLayout.LayoutParams LLParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.WRAP_CONTENT);
horizontal.setLayoutParams(LLParams);
btnWord.add(i, new Button(context));
btnWord.get(i).setHeight(60);
btnWord.get(i).setWidth(120);
btnWord.get(i).setTypeface(montFont);
btnWord.get(i).setBackgroundColor(Color.WHITE);
btnWord.get(i).setTag(i);
btnWord.get(i).setGravity(Gravity.CENTER);
btnWord.get(i).setText(" " + words.get(i));
btnWord.get(i).setOnClickListener(btnClicked);
horizontal.addView(btnWord.get(i));
wordWeight.add(i, new Button(context));
wordWeight.get(i).setHeight(60);
wordWeight.get(i).setWidth(40);
wordWeight.get(i).setTypeface(montFont);
wordWeight.get(i).setBackgroundColor(Color.WHITE);
wordWeight.get(i).setTag(i);
wordWeight.get(i).setGravity(Gravity.CENTER);
wordWeight.get(i).setText(" " + wordWeights.get(i));
wordWeight.get(i).setOnClickListener(btnClicked);
horizontal.addView(wordWeight.get(i));
linearLayout.addView(horizontal);
}
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white">
<ScrollView
android:layout_width="match_parent"
style="#android:style/Widget.ScrollView"
android:layout_marginTop="106dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/linearLayout" />
</ScrollView>
</RelativeLayout>
You could try to set the weight of each "item" to 1 so they will equally divide the space on the screen. Something like the snippet below:
LinearLayout ll;
LinearLayout.LayoutParams lp;
lp.weight = 1;
ll.setLayoutParams(lp);
You could also ditch that logic and use a ListView with a custom adapter like I did on this answer, or setup a RecyclerView as you can see on this blog post. It's way easier and more efficient to do either one of those.
More on ListView vs. RecyclerView here.

Add view horizontaly and verticaly in LinearLayout dynamically

I want to add dynamic view into a Horizontal LinearLayout. But my issue is if there is no space at Horizontal it should automatically placed on vertically.
My Image
My Expected Result
My Codes are
for (int j = 0; j < jobDet.getKeywords().length; j++) {
RelativeLayout tr_head = (RelativeLayout) getLayoutInflater().inflate(R.layout.tag_lay, null);
TextView label_date = (TextView) tr_head.findViewById(R.id.tag_name);
label_date.setText(jobDet.getKeywords()[j]);
keywordL.addView(tr_head, new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT));
}
My "tag_lay.xml"
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="30dp"
android:id="#+id/tag_name"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:background="#drawable/round_edit_box"
android:text=" PHP "
android:gravity="center"
android:lines="1"
android:layout_marginRight="5dp"/>
</RelativeLayout>
You can not do that with single LinearLayout because it has either VERTICAL or HORIZONTAL orientation. I would suggest you to take a look at google's FlexboxLayout. Its a library which provides a layout where you can achieve similar view. You can add this library by adding below line to your app level gradle file:
compile 'com.google.android:flexbox:0.1.3'
You can change the keywordL to FlexboxLayout from LinearLayout. A sample code for container layout can be something like below:
<com.google.android.flexbox.FlexboxLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/flexbox_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:alignContent="flex_start"
app:alignItems="flex_start"
app:flexWrap="wrap"/>
You can change the value of alignContent, alignItems and flexWrap according to your requirement. Although this should work because it is working for me. While adding the childs you can do something like below:
for (int j = 0; j < jobDet.getKeywords().length; j++) {
RelativeLayout tr_head = (RelativeLayout) getLayoutInflater().inflate(R.layout.tag_lay, keywordL, false );
TextView label_date = (TextView) tr_head.findViewById(R.id.tag_name);
label_date.setText(jobDet.getKeywords()[j]);
keywordL.addView(tr_head);
}
Please let me know if you have trouble implementing.

Programmatically create a textview with 0dp and layout weight 1

I am working on an Android project and I have an issue with the layout.
What I have is a JSONArray that I loop round inflating a new TableRow and within the loop round another array within the JSON array to populate it with fields. The fields are populated by inflating an XML file and adding this view to the table row. However, at the moment nothing shows up in the row.
Below is my TableRow XML file:
<?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"/>
Below is my TextView XML:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textColor="#color/black"
android:padding="5dp"/>
Below is how I am populating the TableRow and the TextView:
for (int i = 0; i < result.length(); i++) {
final TableRow tr = (TableRow) getLayoutInflater(getArguments()).inflate(R.layout.result_table_row_light_theme, resultTable, false);
if (i == 0) {
tr.setBackgroundColor(getResources().getColor(R.color.appPrimaryColour));
} else if (i % 2 == 0) {
if (settings.getInt(Defines.SharedPreferenceSettings.APPLICATION_THEME,
com.BoardiesITSolutions.Library.R.style.LibAppTheme) == com.BoardiesITSolutions.Library.R.style.LibAppTheme) {
tr.setBackgroundColor(getResources().getColor(R.color.resultRowLightThemeAlternateRow));
}
}
JSONArray array = result.getJSONArray(i);
for (int j = 0; j < array.length(); j++) {
final TextView textView;
textView = (TextView) getLayoutInflater(getArguments()).inflate(R.layout.result_textview, tr, false);
textView.setText(array.getString(j));
if (i == 0) {
textView.setTypeface(null, Typeface.BOLD);
textView.setGravity(Gravity.CENTER_HORIZONTAL);
}
getActivity().runOnUiThread(new Runnable() {
#Override
public void run() {
tr.addView(textView);
}
});
}
getActivity().runOnUiThread(new Runnable() {
#Override
public void run() {
resultTable.addView(tr);
}
});
}
If I change my TextView XML file so that the layout_width is wrap_parent instead of 0dp then everything is shown on the screen.
However, when the textview is 0dp and the layout_weight is 1 then nothing is displayed, however I would have expected each text view to be evenly distributed across the width of the screen to fill the space.
What I should probably mention, don't know if it makes a difference, is the TableView is within a HorizontalScrollView. The row should fit in the width of the screen, if the data is smaller than the screen, but if the row won't fit, then the view will be horizontally scrollable.
UPDATE 1
Below is the XML that hosts the TableLayout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="horizontal">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TableLayout android:id="#+id/resultTable"
android:stretchColumns="*"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</TableLayout>
</HorizontalScrollView>
</LinearLayout>
</ScrollView>
</RelativeLayout>
What I should probably mention, don't know if it makes a difference, is the TableView is within a HorizontalScrollView.
It is a logical error to tell a child view inside a scrolling container to match_parent or fill the available space in any way. A scrolling container, like ScrollView or HorizontalScrollView measures its one-and-only child view as UNSPECIFIED so that the child can grow beyond the parent bound in that one direction (and, thus, be scrollable).
The child of a scrolling container is not given what the "available space" would be for it to fill, and operations like layout weight have no effect if the parent's dimension is not well-defined.
The row should fit in the width of the screen, if the data is smaller than the screen, but if the row won't fit, then the view will be horizontally scrollable.
The functionality you are looking for is fillViewport (docs link), which tells the scrolling container to force the child to match it's size if the measured width (in the horizontal case) is less than the parent. Use this in place of applying a weight.
Try this :
public void createTextView(Context context, LinearLayout parent) {
final TextView v = new TextView(context);
parent.addView(v); // Mandatory!
v.post(new Runnable() { // In UI Thread. View Must be added to parent before getting layout params!
#Override
public void run() {
// Get params:
LinearLayout.LayoutParams lParams = (LinearLayout.LayoutParams) v.getLayoutParams();
// Set only target params:
lParams.width = 0;
lParams.weight = 1;
v.setLayoutParams(lParams);
}
});
}
Can you try to do your layout in XML (just to debug it, with dummy data)? Does it work as expected?
The docs mention that:
children of a TableRow do not need to specify the layout_width and layout_height attributes in the XML file. TableRow always enforces those values to be respectively MATCH_PARENT and WRAP_CONTENT.
Not sure if that means that it'll also mess stuff up if you try to set these values. As you've found, it's clearly not just ignoring them if they are set.
The other part says that the parent of the TableRow should be a TableLayout - is that the type of resultTable (you mentioned TableView) - otherwise it will behave as a LinearLayout with horizontal orientation.

How to split Linear Layout in to two columns?

I have to split a Single Linear layout into a Two Columns(Like newspaper Columns).The linear layout contain text-view and image-view
I have taken the screen width and have divided it to half and made the TextView and ImageView to come in a first column , ie, A B C blocks in the picture below.. now the remaining TextView and 'ImageView has to go to next column like in D E F like that it goes on.So it would be helpful if anyone gives me any code or ideas to implement this.. I tried with GridView which is not suitable for my issue. Since the TextView and ImageView sizes are not definite.
I don't know how to split Liner layout.
I tried with calculating the rootlayout height
like this
linearLayout.post(new Runnable() {
#Override
public void run() {
// TODO Auto-generated method stub
int linsize=linearLayout.getHeight();
int relsize=root.getHeight();
int textsize=txt1.getHeight();
mainheight=relsize;
subheight=linsize;
Toast.makeText(getApplicationContext(), "Linerlayout "+linsize, Toast.LENGTH_LONG).show();
Toast.makeText(getApplicationContext(), "Relative layout"+relsize, Toast.LENGTH_LONG).show();
Toast.makeText(getApplicationContext(), "text height "+textsize, Toast.LENGTH_LONG).show();
if(mainheight==subheight)
{
Toast.makeText(getApplicationContext(), "make a new linear layout", Toast.LENGTH_LONG).show();
createsubview();
}
}
});
Screenshot
You could easily do this with nested LinearLayouts:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/item" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
content here/>
<TextView
content here/>
</LinearLayout>
</LinearLayout>
Then all that you need to do is put A, B and C in the first vertical layout, and D, E and F in the second.
You can't do it with GridView. You would have to create a custom view to do this.
if you know how big your grid items are, you can cut some corners. GridView is complicated mostly because it deals with items of any size and loads them dynamically. An easier way for you might be:
1.Create a HorizontalScrollView with a horizontal LinearLayout inside.
2.Determining how many rows of your item will fit on the screen. Call this rows.
3.while you still have items you need to layout:
1.Create a vertical LinearLayout, adding rows or less items to it.
2.Add your new vertical LinearLayout to the horizontal one.
There are some downsides versus what a "horizontal GridView" would get you:
1.All the views are loaded up immediately, which is bad for huge lists of items.
2.You need to know how big your items are, and they need to be the same size.
Upsides:
1.It's very easy to implement.
for more inf plz see this link
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ScrollView scrollView = new ScrollView(this);//ScrollView
LinearLayout ll = new LinearLayout(this); //root LinearLayout
ll.setOrientation(LinearLayout.HORIZONTAL);//with horizontal orientation
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT,1f);
LinearLayout l2 = new LinearLayout(this); //sub linearlayout
l2.setOrientation(LinearLayout.VERTICAL);//with vertical orientation
l2.setLayoutParams(layoutParams);
LinearLayout l3 = new LinearLayout(this); //sub linearlayout
l3.setOrientation(LinearLayout.VERTICAL);//with vertical orientation
l3.setLayoutParams(layoutParams);
int totalvalues=41; //i take count as 41
for(int i=0;i<totalvalues;i++){ // add the buttons in the layout based on condition
Button okButton=new Button(this);
okButton.setText("Button"+i);
if(i<=totalvalues/2){
l2.addView(okButton);
}
else{
l3.addView(okButton);
}
}
ll.addView(l2); //add sub linearlayout to root linearlayout
ll.addView(l3); //add sub linearlayout to root linearlayout
scrollView.addView(ll); //add the root linearlayout to scrollview
setContentView(scrollView);
}
Have you tried:
DisplayMetrics metrics = getResources().getDisplayMetrics();
float dpW = 0f;
int pixelsW = (int) (metrics.density * dpW + 0.5f);
TableLayout.LayoutParams lp = new TableLayout.LayoutParams(pixelsW, LayoutParams.WRAP_CONTENT, 1f);
TextView txt = new TextView(MainActivity.this);
ImageView img = new ImageView(MainActivity.this);
txt.setLayoutParams(lp);
img.setLayoutParams(lp);
Using TableLayout's LayoutParams, you can set the weight of the view, which, as you know, must be 1. We also use DisplayMetrics to convert a float into the "dp" format used in xml.
EDIT:
You can also set this LayoutParams to a LinearLayout.

How do I add elements dynamically to a view created with XML

I'm trying to add dynamic content to a view that has been created with XML.
I have a view "profile_list" that has a ScrollView that I like to add some elements to.
Here is some code of what I'm trying to do.
// Find the ScrollView
ScrollView sv = (ScrollView) this.findViewById(R.id.scrollView1);
// Create a LinearLayout element
LinearLayout ll = new LinearLayout(this);
ll.setOrientation(LinearLayout.VERTICAL);
// Add text
tv = new TextView(this);
tv.setText("my text");
ll.addView(tv);
// Add the LinearLayout element to the ScrollView
sv.addView(ll);
// Display the view
setContentView(R.layout.profile_list);
The plan is to add a TableLayout and fill it dynamically and not just a dummy text but first I must get this to work.
Any help is welcome.
Kind Regards
Olle
I found the solution!
Stupid me I had left a element in my ScrollView in my XML-file!
Anyway her is a working example:
LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View v = inflater.inflate(R.layout.profile_list, null);
// Find the ScrollView
ScrollView sv = (ScrollView) v.findViewById(R.id.scrollView1);
// Create a LinearLayout element
LinearLayout ll = new LinearLayout(this);
ll.setOrientation(LinearLayout.VERTICAL);
// Add text
TextView tv = new TextView(this);
tv.setText("my text");
ll.addView(tv);
// Add the LinearLayout element to the ScrollView
sv.addView(ll);
// Display the view
setContentView(v);
And the XML-file to match
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ScrollView
android:id="#+id/scrollView1"
android:clickable="true"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_marginBottom="50px"
android:layout_height="fill_parent">
</ScrollView>
</LinearLayout>
Hope this will help someone. Thanks for all help!
The way that you are adding things to the view is basically right - you just get the container object by its ID and then add them.
It looks like you are setting the content view to be the wrong view though. You should inflate the view, add the children and set it as the content view, or set the content view from a resource ID then do the manipulation. What you are doing is manipulating a view and then adding a different one. Try moving your setContentView(...) to the start of the block.

Categories

Resources