Develop Reference

How can I place two views depending on their width?

In our project we have such a case: we have two textviews (let's say, #id/text_view_1 and #id/text_view_2). We should place them horizontally (#id/text_view_1 and then #id/text_view_2) if their width combined is less than the width of their parent or vertically (text_view_2 above text_view_1) if they are too wide.
Right now the best solution I've come up with looks something like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/text_view_above_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true" />
<TextView
android:id="#+id/text_view_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/text_view_2_right"
android:layout_alignBottom="#+id/text_view_2_right"
android:layout_alignParentStart="true" />
<TextView
android:id="#+id/text_view_right_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/text_view_2_above"
android:layout_toEndOf="#+id/text_view_1" />
</RelativeLayout>
Here is the logic of toggling visibility of text_views
private void toggleVisibility() {
TextView textView1 = (TextView) findViewById(R.id.text_view_1);
TextView textViewAbove2 = (TextView) findViewById(R.id.text_view_above_2);
TextView textViewRight2 = (TextView) findViewById(R.id.text_view_right_2);
textView1.measure(0, 0);
textViewAbove2.measure(0, 0);
textViewRight2.measure(0, 0);
View parent = findViewById(R.id.parent);
parent.measure(0, 0);
if (textView1.getMeasuredWidth() + textViewRight2.getMeasuredWidth() < parent.getMeasuredWidth()) {
textViewAbove2.setVisibility(View.GONE);
textViewRight2.setVisibility(View.VISIBLE);
} else {
textViewRight2.setVisibility(View.GONE);
textViewAbove2.setVisibility(View.VISIBLE);
}
}
Is there a solution more "beautiful" and shorter than the one I've described? I guess there is a way to do it with ConstraintLayout instead of RelativeLayout but I'm not sure.
EDIT 1: probably I have to provide the result I want to see. Here is what an activity supposed to look like if both views are short:
And here is what it should look like if views are too long:

Take a look at FlexboxLayout.
Here is a solution using FlexboxLayout:
<com.google.android.flexbox.FlexboxLayout
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:flexWrap="wrap">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="This is a short string." />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="This is another short string." />
</com.google.android.flexbox.FlexboxLayout>
Using the same XML with a longer string for the first text view yields the following:

Solution:If you want to set TextView as per their width requirements then you will simply use LinearLayout as parent with width wrap_content and for both child TextViews also give width 'wrap_content'

try using wrap_content and put these child text views inside a parent LinearLayout , give wrap_content as width for both of the child textviews. It will place according to the content in those textviews.
If You want to put Views Horizontally --
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parent"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/text_view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/text_view2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
If You want to put Views Vertically --
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/text_view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/text_view2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>

Try using percentagelayout . This might help. For more details provide desired output.

when adding views they go one below another even if width is wrap content

I have a Linear layout then programatically I'm adding some spinners and buttons and so on, but I have xml button Wrap content (width) and then on java I add spinner (or anything else) and it goes below this view even if both views are wrap content:
progBar = new ProgressBar(this);
pBarToca = new ProgressBar(this);
pBarToca.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
linToca = (LinearLayout) findViewById(R.id.tetoca);
linToca.addView(pBarToca);
and it's placed under the button of xml:
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_marginTop="6dp"
android:id="#+id/tetoca">
<TextView style="#style/StylePartida"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/te_toca_jugar" />
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#A7E9A9" android:onClick="callJugar"
android:text="#string/jugar" />
</LinearLayout>
edit!!!!!!
I want textview on first line then on next line button + progressbar (for example)

You have android:orientation=vertical so the Views will be laid out starting at the top and going down.
If you want them to all be next to each other, remove that from your xml since the default orientation for a LinearLayout is horizontal. If you do this, you will obviously need to change the android:width to wrap_content for your TextView or else it will take up the entire screen.
After your comment, a RelativeLayout would work best here.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<TextView
style="#style/StylePartida"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/te_toca_jugar"
android:id="#+id/tvID" /> // give it an id
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:id="#+id/tetoca"
android:layout_below="#/id=tvID"> // place it below the TV
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#A7E9A9" android:onClick="callJugar"
android:text="#string/jugar" />
</LinearLayout>
</RelativeLayout>
Note the changes in the comments. Now when you add your progressbar to the LL, it should be next to the Button. You may need some changes but this should give you approximately what you want.

<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:id="#+id/tetoca">
<TextView style="#style/StylePartida"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/te_toca_jugar"
android:text="#string/te_toca_jugar" />
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#A7E9A9" android:onClick="callJugar"
android:text="#string/jugar" />
</LinearLayout>

In your textView you are matching the parent
android:layout_width="match_parent"
This will cause the textview to take up the entire width of the parent view.
android:layout_width="wrap_content"
and
android:orientation="horizontal"
android:orientation="vertical" will cause the elements to be stacked.
If you are using "horizontal" it's important not to have a child element with width matching parent.
EDIT:
After OPs change to question:
I have used a textview, two buttons and listview to give you an idea of how you can format it. There are many ways to achieve the same thing, this is one suggestion.
The internal linearlayout has a horizontal orientation (by default).
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="te_toca_jugar"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#A7E9A9"
android:text="jugar"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#A7E9A9"
android:text="jugar2"/>
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/lv">
</ListView>
</LinearLayout>
</LinearLayout>

Android - Custom Keyboard on manually inflated listview row not showing

Good day.
I have an android application. In my application, I have a custom listView with 5 columns that are textViews. The user can click the rows, once he does, the row layout will change, changing the last 2 textViews to EditTexts. I then register the new EditTexts onto my custom keyboard taken from this example - kindly note that I did a functional copy-paste of his example with regards to the custom keyboard class and how to make it work in the main layout. However, when I click the EditText in the row, my custom keyboard does not show up at all.
I have a global variable as such:
CustomKeyboard mCustomKeyboard;
And in my onCreate() method in the activity, I do:
mCustomKeyboard= new CustomKeyboard(this, R.id.keyboardview, R.xml.custom_keyboard);
This is my layout, I have the KeyboardView at the bottom of the Layout:
<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:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context=".SearchResult" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- A lot of views go here, enclosed in my linear layout -->
</LinearLayout>
<android.inputmethodservice.KeyboardView
android:id="#+id/keyboardview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:visibility="gone" />
</RelativeLayout>
Here is the code that changes the layout. What I do is that I take the row values from the old layout, get the new layout search_result_inflate, then set the texts of the new layout using the values I got. Kindly note the mCustomKeyboard.registerEditText(R.id.qtyInputSearchResult); line after inflating the layout:
private void changeLayout(final View view){
//get views from old layout
TextView textViewQuantity = (TextView)view.findViewById(R.id.qtyInput);
TextView textViewDiscountReq = (TextView)view.findViewById(R.id.discInput);
TextView textViewName = (TextView)view.findViewById(R.id.dialogItemName);
TextView textViewPrice = (TextView)view.findViewById(R.id.price);
TextView textViewDiscount = (TextView)view.findViewById(R.id.discount);
//store values in strings
String itemName = textViewName.getText().toString();
String itemPrice = textViewPrice.getText().toString();
String itemDiscount = textViewDiscount.getText().toString();
String itemQty = textViewQuantity.getText().toString();
String itemDisc = textViewDiscountReq.getText().toString();
//set the view to gone
textViewQuantity.setVisibility(View.GONE);
textViewDiscountReq.setVisibility(View.GONE);
textViewName.setVisibility(View.GONE);
textViewPrice.setVisibility(View.GONE);
textViewDiscount.setVisibility(View.GONE);
//get the old layout
LinearLayout ll_inflate = (LinearLayout)view.findViewById(R.id.search_result_layout);
//get the inflate/new view
View child = getLayoutInflater().inflate(R.layout.search_result_inflate, null);
//get the views in the new view, populate them
TextView newName = (TextView)child.findViewById(R.id.dialogItemName);
newName.setText(itemName);
TextView newDiscount = (TextView)child.findViewById(R.id.discount);
newDiscount.setText(itemDiscount);
TextView newPrice = (TextView)child.findViewById(R.id.price);
newPrice.setText(itemPrice);
EditText qtyInput = (EditText)child.findViewById(R.id.qtyInputSearchResult);
qtyInput.setText(itemQty);
EditText discInput = (EditText)child.findViewById(R.id.discInputSearchResult);
discInput.setText(itemDisc);
//show new layout
ll_inflate.removeAllViews();
ll_inflate.removeAllViewsInLayout();
ll_inflate.addView(child);
mCustomKeyboard.registerEditText(R.id.qtyInputSearchResult);
}
Here is my search_result_inflate.xml file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/search_result_inflate"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:focusableInTouchMode="true"
android:minHeight="50dp"
android:orientation="horizontal"
android:padding="1dip"
android:weightSum="1" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:focusableInTouchMode="true"
android:orientation="horizontal"
android:padding="1dip" >
<TextView
android:id="#+id/dialogItemName"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="2dp"
android:layout_weight="0.54"
android:gravity="center"
android:text="Item Name"
android:textSize="23sp" />
<TextView
android:id="#+id/price"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="2dp"
android:layout_weight="0.14"
android:gravity="center"
android:text="Price"
android:textSize="23sp" />
<TextView
android:id="#+id/discount"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="2dp"
android:layout_weight="0.10"
android:gravity="center"
android:text="Discount"
android:textSize="23sp" />
<EditText
android:id="#+id/qtyInputSearchResult"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="2dp"
android:layout_weight="0.14"
android:background="#layout/edittext_selector"
android:gravity="center"
android:hint="qtyInput"
android:textColorHighlight="#color/white_opaque"
android:textSize="23sp" >
</EditText>
<EditText
android:id="#+id/discInputSearchResult"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.11"
android:background="#layout/edittext_selector"
android:focusable="true"
android:focusableInTouchMode="true"
android:gravity="center"
android:hint="discInput"
android:textColorHighlight="#color/white_opaque"
android:textSize="23sp" />
</LinearLayout>
</LinearLayout>
As you can see, I have 2 editTexts and I registered qtyInputSearchResult to the custom keyboard class. However, the custom keyboard does not show up.
I also tried to use the custom keyboard class on an editText in another activity and it works just fine. Am I missing something here? I'm confused as to why the custom keyboard does not show up properly.
Any help is very much appreciated, thank you.

Got it, I placed the keyboard layout in the search_result_inflate.xml like so:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/search_result_inflate"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:focusableInTouchMode="true"
android:minHeight="50dp"
android:orientation="horizontal"
android:padding="1dip"
android:weightSum="1" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:focusableInTouchMode="true"
android:orientation="horizontal"
android:padding="1dip" >
<!-- a lot of components here -->
</LinearLayout>
<android.inputmethodservice.KeyboardView
android:id="#+id/keyboardview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:visibility="gone" />
</RelativeLayout>

Adding a button

I want to create a new button. This code is in my MainActivity.
public void method1 (View view)
{
Button myButton = new Button(this);
myButton.setText("Press Me");
LinearLayout layout = (LinearLayout) findViewById(R.id.layout1);
layout.addView(myButton);
}
I get an error on R.id.layout, saying layoutcan´t be resolved or is not a field. How can I fix it? I am a newbie on Android.
//Edit
my acitvity_main.xml looks like this
<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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginTop="20dp"
android:onClick="neuerTrainingsplan"
android:text="#string/neuerPlan" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button2"
android:layout_alignBottom="#+id/button2"
android:layout_toLeftOf="#+id/button2"
android:onClick="TrainingsplanAbrufen"
android:text="#string/TrainingsplanAbrufen" />

The error means that you haven't declared a layout with id layout1. If you have check the import from your class in order to import the correct R class. Should be yourpackage.R not android.R

Make sure you made the linear layout in your xml file. And its android:id is layout1.
<LinearLayout android:id="#+id/layout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
Add this is in your layout file.

How to wordwrap checkbox text?

I have a layout where I put i rows dynamically in a tablelayout that is inside a scrollview. Everything is working smoothly except that I don't can get the checkbox text to wordwrap (See xml below). The text is also set at runtime. I have searched the internet and has made a lot of trying to set different properties with no luck so far.
Is this task possible to achieve?
<?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:layout_marginBottom="15dip">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<CheckBox
android:id="#+id/bes_checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="" />
<EditText
android:id="#+id/bes_kommentar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/bes_checkbox" />
</RelativeLayout>
</TableRow>

CheckBox extends TextView, so I assume you can wrap its text like they solve the issue in this post :
Android TextView Text not getting wrapped
If you cannot get it to work like that, you can maybe also try, using match_parent in the checkbox.
<CheckBox
android:id="#+id/bes_checkbox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="" />
hope it helps.

use table row inside the Linear layout instead of table layout..
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15dip" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<CheckBox
android:id="#+id/bes_checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<EditText
android:id="#+id/bes_kommentar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/bes_checkbox" />
</RelativeLayout>
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15dip" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<CheckBox
android:id="#+id/bes_checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<EditText
android:id="#+id/bes_kommentar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/bes_checkbox" />
</RelativeLayout>
</TableRow>
</LinearLayout>

I have made dynamic layouts with checkboxes in the past and used this approach:
// Create new view to add layout to
sv = new ScrollView(this);
// Create new layout to add check boxes to
ll = new LinearLayout(this);
ll.setOrientation(LinearLayout.VERTICAL);
// Add layout to view
sv.addView(ll);
// Create 6 check boxes
int itemSize = 6;
for(int j=0; j<itemSize; j++){
CheckBox cb = new CheckBox(this);
cb.setText("number " + j);
ll.addView(cb);
}
// Finalize view
this.setContentView(sv);
Is this what you are looking for?