Develop Reference

How to switch xml layout from spinner selection

I'm developing a simple BMI calculator for android. I have input fields for lbs, feet, and inches. I want to give users the ability to switch from imperial units to metric, so I added a spinner widget with imperial and metric as options. If the user changes the spinner to metric, I want to be able to change the XML layout so that the input fields are kg and cm. What is the best way to change the XML layout when the user switches between metric and imperial?
I tried creating a new activity that loads the metric layout XML when the user switches to it, but it seems like a poor design to create a new activity just to switch units. I also tried simply using setContentLayout to set the layout to metric.xml if spinner has metric selected and imperial.xml if imperial is selected. This sort of works but the ads and spinner widgets are no longer configured after switching between the layouts. I am still new to android development so I am wondering what the best approach to this would be? I am simply trying to make a slight layout change when the user switches between the different unit options. Any tips appreciated.

Normally, I would put everything inside activity layout xml file and toggle based on the condition like this
<TextView
android:id="#+id/feet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:visibility="gone"/>
<TextView
android:id="#+id/inch"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:visibility="gone"/>
And in your spinner adapter selection listener, you can toggle the view you want to show:
feet.setVisibility(View.VISIBLE)

You can use FrameLayout. It allow you to make to different layouts on each other (different views can be located on another views). For example:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="#FFFFFF">
<RelativeLayout
android:id="#+id/digital_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginLeft="294dp"
android:layout_marginTop="64dp">
<Spinner
android:id="#+id/spinner101"
android:layout_width="135dp"
android:layout_height="wrap_content"
android:layout_below="#+id/checkBox100"
android:layout_toEndOf="#+id/textView100"
android:visibility="visible"/>
<TextView
android:id="#+id/textView102"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_below="#+id/spinner101"
android:text="Value pulse"
android:textSize="20dp"
android:visibility="visible"/>
<TextView
android:id="#+id/textView107"
android:layout_width="wrap_content"
android:layout_height="22dp"
android:layout_alignStart="#+id/textView106"
android:layout_below="#+id/textView103"
android:gravity="center"
android:text="11%"
android:visibility="visible"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/analog_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<EditText
android:id="#+id/editText3"
android:layout_width="136dp"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/spinner2"
android:layout_below="#+id/checkBox3"
android:ems="10"
android:hint="Constant"
android:inputType="textPersonName"
android:textSize="15dp"
android:visibility="invisible" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_alignParentStart="true"
android:layout_below="#+id/checkBox9"
android:layout_marginLeft="20dp"
android:onClick="onResetClick"
android:text="Reset" />
<View
android:id="#+id/delitel1"
android:layout_width="234dp"
android:layout_height="2dp"
android:layout_alignStart="#+id/textView7"
android:layout_below="#+id/button6"
android:layout_marginTop="10dp"
android:background="#004f9b" />
<TextView
android:id="#+id/textView14"
android:layout_width="135dp"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignTop="#+id/delitel1"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:text="Language:"
android:textSize="20dp"
android:visibility="invisible" />
</RelativeLayout>
So, you need to give different id to each RelativeLayouts. Here there are android:id="#+id/digital_layout" and android:id="#+id/analog_layout".
And in code need to write handler for your spinner:
#Override
public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
switch (position) {
case 0:
digital_layout.setVisibility(View.INVISIBLE);
analog_layout.setVisibility(View.VISIBLE);
break;
case 1:
digital_layout.setVisibility(View.VISIBLE);
analog_layout.setVisibility(View.INVISIBLE);
break;
etc.
}
}

Few includes in the same space

As you can see in the image, the profile_content Layout takes the whole space available and when I press the "Profile" button the information display correctly.
But when I press the "Messages" button it's not display anything. As you can se in the image, the "blue rectangle" does not fill the whole space like the profile_content Layout.
Both layouts have the same value (wrap_content) in android:layout_widt parameter.
I have some code like:
public void onClick(View v) {
switch(v.getId()){
case R.id.bProfile:
Log.d(TAG, "onClick, buttonProfile pressed");
//Hide previous layout
activeLayout = "bProfile";
profileContent.setVisibility(View.VISIBLE);
//Access for extras passed in from login activity
tUserName.setText(getIntent().getStringExtra("tProfileName"));
break;
case R.id.bMessages:
Log.d(TAG, "onClick, buttonMessages pressed");
profileContent.setVisibility(View.INVISIBLE);
messagesContent.setVisibility(View.VISIBLE);
activeLayout = "bMessages";
test.setText("Test");
break;
}
}
Maybe I should use FragmentLayout for this particular functionality?
Thanks in advance.

LinearLayout isn't gonna help you in this situation. Try using RelativeLayout, something like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/buttonsMenu"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="QWERTY" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="QWERTY" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ASDFG" />
</LinearLayout>
<RelativeLayout
android:layout_toRightOf="#id/buttonsMenu"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/profile_content"
layout="#layout/profile_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone" />
<include
android:id="#+id/profile_content"
layout="#layout/messages_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone" />
</RelativeLayout>
</RelativeLayout>

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>

Event passing to sibling on clicking a view

I have a simple LinearLayout(horizontal) with 3 TextViews. The background of these TextViews are set to a drawable that has two states, state_pressed and default. I simply change the background of each TextView to red on state_pressed.
But when i click one TextView, its click listener is invoked but background of all 3 changes to red. This is happening on Android 2.x and working fine on Android 4.0+.
<LinearLayout
android:id="#+id/back"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:paddingLeft="#dimen/swipe_list_leftoffest"
android:descendantFocusability="blocksDescendants"
android:background="#color/list_swipe_back"
android:clickable="false"
android:focusable="false"
android:focusableInTouchMode="false"
android:weightSum="3"
android:tag="back">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp"
android:clickable="true"
android:layout_weight="1"
android:gravity="center"
android:id="#+id/amenities_view"
android:padding="#dimen/padding_large"
android:background="#drawable/swipe_view_background"
android:drawablePadding="#dimen/padding_large"
android:textColor="#color/white"
android:text="#string/amenities_text"
android:drawableTop="#drawable/ic_amenities"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp"
android:layout_weight="1"
android:clickable="true"
android:gravity="center"
android:ellipsize="end"
android:singleLine="true"
android:id="#+id/cancpolicy_view"
android:padding="#dimen/padding_large"
android:background="#drawable/swipe_view_background"
android:drawablePadding="#dimen/padding_large"
android:textColor="#color/white"
android:text="#string/canc_policy_text"
android:drawableTop="#drawable/ic_cancellation_policy"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp"
android:layout_weight="1"
android:gravity="center"
android:clickable="true"
android:padding="#dimen/padding_large"
android:id="#+id/reviews_view"
android:background="#drawable/swipe_view_background"
android:drawablePadding="#dimen/padding_large"
android:textColor="#color/white"
android:text="#string/reviews_text"
android:drawableTop="#drawable/ic_reviews"
/>
</LinearLayout>
Tried putting focusable and focusableInTouchMode false for each of the TextViews, but that didnt help.

Do you have 3 separate onClickListeners for the TextViews? If you have only one, this may be the problem and you could solve it by doing something like this in the listener:
public void onClick(View v){
switch(v.getId()){
case R.id.amenities_view:
//Click first
break;
case R.id.cancpolicy_view:
//Click second
break;
case R.id.reviews_view:
//Click third
break;
}
}
If you do not create this switch, all the views associated with the listener will react to the click.

applying setLayoutParams on a button programmatically causes the whole layout to get mixed and abnormal

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" >
<Button
android:id="#+id/insertButtonVIEW"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="insert" />
<Button
android:id="#+id/removeButtonVIEW"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="remove" />
</LinearLayout>
</RelativeLayout>
Sometimes, depending on a situaiton, I am hiding removeButtonVIEW using the method setVisibility(View.INVISIBLE);
When that happens, I want to my insertButtonVIEW to take the whole width of the screen (when the two are present, each one takes 50% of the screen).
Since this might or might not happen, I am doing these changes programmatically.
I tried the following methd which worked, however, it is causing for all the interface to go jumbo mumbo, as everything's location on the screen is getting mixed.
modifyButton.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
Any hints ?
UPDATE 1 after applying the answer :
I am using the following code to set the button to invisible.
Bundle extras;
extras = getIntent().getExtras();
String answer = extras.getString("answer");
if(answer.equalsIgnoreCase("yes")
{
insertButton.setEnabled(true);
insertButton.setText("INSERT");
removeButton.setVisibility(View.INVISIBLE);
}
else
{
//whatever
}

// I Have modify your code now try this one and you don't required set LayoutParams ().
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" >
<Button
android:id="#+id/insertButtonVIEW"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="insert" />
<Button
android:id="#+id/removeButtonVIEW"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="remove" />
</LinearLayout>
</RelativeLayout>
if(answer.equalsIgnoreCase("yes")
{
insertButton.setEnabled(true);
insertButton.setText("INSERT");
removeButton.setVisibility(View.GONE);
}
else
{
//whatever
}

Use
setVisibility(View.GONE);
*Remove this *
modifyButton.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
And set
android:layout_width="0dp"
in both button