Develop Reference

Android Layout: Center RadioButton in RadioGroup

I'm trying to center Radiobuttons in a Radiogroup. I had a solution with
<RadioGroup [...]>
<RelativeLayout [...]>
<RadioButton [...]/>
</RelativLaoyout>
<RelativeLayout [...]>
<RadioButton [...]/>
</RelativLaoyout>
<RelativeLayout [...]>
<RadioButton [...]/>
</RelativLaoyout>
</RadioGroup>
But if I do this, the RadioButtons can all be checked at same time, which I want to prevent with Radiogroup to get single selection.
To get the logic with single selection automatically, the RadioButtons have to be direct child of RadioGroup without being wrapped in a layout.
Here's my current code:
<RadioGroup
android:id="#+id/radioGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="4">
<androidx.appcompat.widget.AppCompatRadioButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center"
android:gravity="center" />
<androidx.appcompat.widget.AppCompatRadioButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center"
android:gravity="center" />
<androidx.appcompat.widget.AppCompatRadioButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center"
android:gravity="center" />
<androidx.appcompat.widget.AppCompatRadioButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center"
android:gravity="center" />
</RadioGroup>
And the result:
link to the image

Step 1: enable data binding
First of all, you have to enable data binding.
android {
...
buildFeatures.dataBinding = true
}
Two ways how you can get familiar with data binding:
codelab based on data binding in case you want an hour-long project to get into data binding;
just documentation with examples.
Step 2: define enum and click listener
I suggest you are using Java so the code will be in Java. It can be automatically converted to Kotlin in Android Studio IDE in case you need it.
We need to define an enum class with 4 values. Let it be:
public enum Value {
FIRST, SECOND, THIRD, FOURTH;
}
Click listener won't actually be of type View.OnClickListener. It will be called by the View.OnClickListener using data binding. Pretty simple and you will see it on step 3.
interface OnValueSelectListener {
public void onValueSelected(Value value);
}
Step 3: implement a layout using data binding
I guess at this step you are already familiar with data binding and how to work with it. In this layout, we will define.
<?xml version="1.0" encoding="utf-8"?>
<layout>
<!-- Data declaration -->
<data>
<import type="com.example.app.Value" />
<!-- Architecture component whose updates are rendered live as soon as it changed -->
<!-- Nothing to do special. All is done by the data binding library -->
<variable
name="observableSelectedValue"
type="androidx.databinding.ObservableField" />
<variable
name="onValueSelectListener"
type="com.example.app.OnValueSelectListener" />
</data>
<!-- Layout declaration -->
<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/radioGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:weightSum="4">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<androidx.appcompat.widget.AppCompatRadioButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:checked="#{observableSelectedValue == Value.FIRST}"
android:gravity="center"
android:onClick="#{() -> onValueSelectListener.onValueSelected(Value.FIRST)}" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<androidx.appcompat.widget.AppCompatRadioButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:checked="#{observableSelectedValue == Value.SECOND}"
android:gravity="center"
android:onClick="#{() -> onValueSelectListener.onValueSelected(Value.SECOND)}" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<androidx.appcompat.widget.AppCompatRadioButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:checked="#{observableSelectedValue == Value.THIRD}"
android:gravity="center"
android:onClick="#{() -> onValueSelectListener.onValueSelected(Value.THIRD)}" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<androidx.appcompat.widget.AppCompatRadioButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:checked="#{observableSelectedValue == Value.FOURTH}"
android:gravity="center"
android:onClick="#{() -> onValueSelectListener.onValueSelected(Value.FOURTH)}" />
</LinearLayout>
</RadioGroup>
</layout>
Step 4: update Activity/Fragment
With the layout updated rebuild the project and apply the next changes to the creation of layout in your Activity or Fragment:
Updates for Activity
private ObservableField<Value> observableSelectedValue = new ObservableField<>(Value.FIRST);
#Override
protected void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
YourLayoutNameBinding viewBinding = YourLayoutNameBinding.inflate(LayoutInflater.from(this), null, false);
setContentView(viewBinding.getRoot());
viewBinding.setObservableSelectedValue(observableSelectedValue);
viewBinding.setOnValueSelectListener(new OnValueSelectListener() {
#Override
public void onValueSelected(Value value) {
observableSelectedValue.set(value);
}
});
}
Updates for Fragment
private ObservableField<Value> observableSelectedValue = new ObservableField<>(Value.FIRST);
#Nullable
#Override
public View onCreateView(#NonNull LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
YourLayoutNameBinding viewBinding = YourLayoutNameBinding.inflate(inflater, container, false);
viewBinding.setObservableSelectedValue(observableSelectedValue);
viewBinding.setOnValueSelectListener(new OnValueSelectListener() {
#Override
public void onValueSelected(Value value) {
observableSelectedValue.set(value);
}
});
return viewBinding.getRoot();
}
Step 5: run & test
It must work now. To get the currently selected value you need to call observableSelectedValue.get().

Android, CustomView Layout not showing

I've done this before with no issue so i know my mistake is subtle.
picker_dialog_layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left|center_horizontal"
android:id="#+id/pickerDialog_title"
android:text="HELLO WORLD!!"/>
<NumberPicker
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/pickerDialog_title"
android:id="#+id/pickerDialog_selector"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/pickerDialog_selector"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="5"
android:id="#+id/pickerDialog_cancel"
android:gravity="center"
android:text="Cancel"/>
<Button
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="5"
android:id="#+id/pickerDialog_set"
android:gravity="center"
android:text="Set"/>
</LinearLayout>
</merge>
During the Custom Class constructor, PickerDialog(Context context, AttributeSet attrs, int defStyle) i call:
LayoutInflater.from(context).inflate(R.layout.picker_dialog_layout, this);
And in the parent XML:
<com.company.simonaddicott.controlpanel_1.PickerDialog
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/pickerDialog" />
The view itself does show, and from using layout bound tools in developer tools i can identify that the ui elements are present, or at least the boundaries are present (see below)
What am i missing from this to make there UI elements appear like they should??

My mistake was that I extended the custom view by LinearLayout, but was using RelativeLayout positioning on the picker_dialog_layout.xml.
The elements inside the layout were not showing as they had no relative parent element to be positioned against

Android - how to control visibility of nested views within a custom view?

I'm trying to create a custom view in android that I can use in the same way as a LinearLayout. The custom view should add two TextView on top of whatever I add inside the layout. How can I control the visibility of the contents of my custom view? I have to be able to add contents at design time and at run time visibility of that nested contents should be toggled, but not those two TextViews.
My question is somewhat similar to this one which didn't really get a satisfactory answer.
I've created a custom view that extends LinearLayout:
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal"
>
<TextView
android:id="#+id/txt_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="My title"
android:layout_marginLeft="10dp"
/>
<TextView
android:id="#+id/txt_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:layout_marginRight="10dp"
android:text="My button"
android:onClick="txtButton_onClick"
android:clickable="true"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/all_contents"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
android:layout_marginTop="10dp"
/>
<!-- This is where I _want_ to add all nested contents to make it easy to toggle its visibility -->
</merge>
All nested content I want to be contained in the LinearLayout at the bottom, so that when I click txt_button I can set visibility on all_contents to gone and make that disappear. I still want txt_title and txt_button to continue being visible, so I can toggle showing the content or not.
The custom view is supposed to be called like this:
<org.my.app.view.SlidingLayoutView
android:id="#+id/slv_date_time"
android:layout_width="match_parent"
android:layout_height="wrap_content"
custom:titleString="Date and time"
custom:buttonString="Change">
<!-- This is where all nested contents should go -->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Example nested content"
/>
</org.my.app.view.SlidingLayoutView>
What I don't get is how to decide that nested contents goes into the all_content LinearLayout. Or am I thinking about this all wrong? Does nested content end up at the very bottom of the custom view, and if so how do I toggle its visibility and not my two TextView?

By on top of do you mean above in the linear layout? I think that your xml should work if you take out the all_contents LinearLayout, things will be added to the LinearLayout. Make your xml like this.
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal"
>
<TextView
android:id="#+id/txt_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="My title"
android:layout_marginLeft="10dp"
/>
<TextView
android:id="#+id/txt_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:layout_marginRight="10dp"
android:text="My button"
android:onClick="txtButton_onClick"
android:clickable="true"
/>
</LinearLayout>
<!-- This is where I _want_ to add all nested contents to make it easy to toggle its visibility -->
</merge>
I would add two methods in the class like this which you can use to toggle the visibility of your contents or the textViews at the top:
public void setTopTextViewVisibility(int visibility){
for(int i = 0; i < getChildCount(); i ++){
View view = getChildAt(i);
if(view.getId() == R.id.txt_title || view.getId() == R.id.txt_button){
view.setVisibility(visibility);
}
}
}
public void setContentVisibility(int visibility){
for(int i = 0; i < getChildCount(); i ++){
View view = getChildAt(i);
if(!(view.getId() == R.id.txt_title || view.getId() == R.id.txt_button)){
view.setVisibility(visibility);
}
}
}

I would use a FrameLayout, you can put a linear layout inside the frame and then put all your views inside that and make a new frame for each group of views.
Here's the basic structure of a menu screen I did where once you click a button it shows a new frame with more options.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/mayne" >
<FrameLayout
android:id="#+id/frameMain" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/textView1" />
<Button
android:id="#+id/button1" />
<Button
android:id="#+id/button2" />
</RelativeLayout>
</FrameLayout>
<FrameLayout
android:id="#+id/frameDiff" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="#+id/btnMed" />
<Button
android:id="#+id/btnHard" />
<Button
android:id="#+id/btnEasy" />
<TextView
android:id="#+id/textView2" />
<Button
android:id="#+id/btnCancel" />
</RelativeLayout>
</FrameLayout>

Composite control from LinearLayout get messed up when replaced with merge

I want to create a composite view from a bunch of controls, by extending a LinearLayout.
I'm using an XML file to specify the inner layout of my custom control. I'm inflating the custom control from the code via LayoutInflater.
The Problem is:
If i replace the root LinearLayout element to a merge element in the XML, my whole layout fall apart. If I don't, then I only encapsulated a LinearLayout with my custom one.
The question is:
What do i have to change in the merge layout, so my view looks like how a linear layout should?
How it looks like:
With LinearLayout (this is how i want it to look like):
http://oi45.tinypic.com/2pqwby1.jpg
With merge (this is the tag i want to use):
http://i45.tinypic.com/155j4o0.png
The code:
TowerLayout.java (no problems here, just in case):
public class TowerLayout extends LinearLayout implements OnClickListener {
public TowerLayout(Context context, AttributeSet attrs) {
super(context, attrs);
LayoutInflater.from(context).inflate(R.layout.tower_layout, this, true); //this is what i want to use.
//((LinearLayout)findViewById(R.id.root)).setOnClickListener(this); //this is the current ugly workaround.
this.setClickable(true);
setOnClickListener(this);
}
#Override
public void onClick(View v) {
Toast.makeText(getContext(), "Foo", Toast.LENGTH_SHORT).show();
}
}
What i have in Tower_Layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:duplicateParentState="true">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="TowerA"
android:textAppearance="?android:attr/textAppearanceLarge"
android:duplicateParentState="true"
android:textSize="32sp" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="0.28"
android:duplicateParentState="true"
android:src="#drawable/icon" />
</LinearLayout>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Basic information"
android:duplicateParentState="true"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_marginLeft="15dip"
android:layout_height="wrap_content"
android:duplicateParentState="true"
android:text="Lorem ipsum dolor sit amet, consectetuer adipiscing elit." />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:duplicateParentState="true"
android:text="16m"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="100sp" />
What i want in Tower_Layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:duplicateParentState="true">
...
</LinearLayout>
...
</merge>
One more thing:
I know, the screenshots are from the eclipse designer, but believe me: they look like this on android phone as well.

You should explicitly set the android:orientation tag for your layouts(and any LinearLayout, ever). Android supposedly uses horizontal by default, but in my experience it just messes it up if it's not set, and leads to some very strange-looking layouts.

How to programmatically add view in ViewFlipper

I have following main layout:
<LinearLayout android:id="#+id/LinearLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical">
<ViewFlipper android:id="#+id/viewstack"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!-- Here I want to add my views which are located in separated xml files. -->
</ViewFlipper>
</LinearLayout>
Here is example of my view:
view_url.xml
<LinearLayout android:id="#+id/LinearLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:gravity="center">
<EditText android:text="#+id/EditText01"
android:id="#+id/EditText01"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/btnGenerate"
android:text="Generate"/>
</LinearLayout>
view_text.xml
<LinearLayout android:id="#+id/LinearLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical">
<EditText android:text="#+id/EditText01"
android:id="#+id/EditText01"
android:layout_height="wrap_content"
android:contentDescription="Enter your text here"
android:layout_width="fill_parent"
android:height="200dp"/>
</LinearLayout>
I am trying to add views:
viewstack = (ViewFlipper) findViewById(R.id.viewstack);));
View viewText = (View) findViewById(R.layout.view_text);
viewstack.addView(viewText); < -- Emulator is crashing at this line
View viewUrl = (View) findViewById(R.layout.view_url);
viewstack.addView(viewUrl);
I dont have any idea what is wrong with my code. I decided to put all my views in one file, but I still want to know how to fix my initial code.

Yout View viewUrl = (View) findViewById(R.layout.view_url); is very wrong. findViewById is kinda like the get(String key) method the the directory where your directory is your current view/activity. It only looks up the element with that Id under it's children.
To create Java objects out of XML files you need use you need to use the LayoutInflater. Which is pretty straight forward, out of that you get the object you can pass to viewstack.addView(..) method.
Another way to achieve this would be to just include the other XML files into the first one by using either the include, merge tags, or the ViewStub. Depending on your requirements these might not be an option though, but what you are describing they should be, and you should use these instead of doing it programatically because it's just cleaner this way.

maybe this help:
this.flipper=(ViewFlipper)findViewById(R.id.flipper);
LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
this.viewLoader=(View)inflater.inflate(R.layout.search_result_grid, null);
flipper.addView(viewLoader);
this.viewResultGrid=(View)inflater.inflate(R.layout.search_result_grid, null);
gvSearchResult=(GridView)viewResultGrid.findViewById(R.id.gridViewSearchResult);
flipper.addView(viewResultGrid);

It's name suggests that It will find by id not by layout.You should understand difference between layout and id.use like this one View v=(View)findViewById(R.id.your_view_id);

Easiest way to add by inflating View. Here some small snippet where you can find reference.
private View viewText;
private TextView txtPost;
private void setViewFlipperPost(String postData, String postType) {
if (postType.toLowerCase().toString().equals("text")) {
viewText = LayoutInflater.from(mContext).inflate(R.layout.activity_full_screen_textpost, null, false);
viewText.setTag(TAG_TEXT);
txtPost = (TextView) viewText.findViewById(R.id.txtTextPostFullScreenText);
txtPost.setText(postData);
viewFlipper.addView(viewText);
}
}

use viewflipper
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/white"
android:orientation="vertical" >
<ViewFlipper
android:id="#+id/view_flipper"
android:layout_width="match_parent"
android:layout_height="410dp" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="first layout"
android:textColor="#845965"
android:textSize="25dp"
android:textStyle="bold" >
</TextView>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="second layout"
android:textColor="#654123"
android:textSize="25dp"
android:textStyle="bold" >
</TextView>
</LinearLayout>
//you can add many layout here
</viewFlipper>
<Button
android:id="#+id/flipbyclickNext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bn1"
android:onClick="flipByClickNext" />
<Button
android:id="#+id/flipbyclickprevious"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="flipByClickPrevious"
android:background="#drawable/bp1" />
</LinearLayout>
MainActivity.java
public class MainActivity extends Activity {
private ViewFlipper viewFlipper;
//Button next,prev;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewFlipper = (ViewFlipper) findViewById(R.id.view_flipper);
}
public void flipByClickNext(View v)
{
if(viewFlipper.isFlipping())//Checking flipper is flipping or not.
{
viewFlipper.stopFlipping(); //stops the flipping .
}
viewFlipper.showNext();//shows the next view element of ViewFlipper
}
public void flipByClickPrevious(View v)
{
if(viewFlipper.isFlipping())//Checking flipper is flipping or not.
{
viewFlipper.stopFlipping(); //stops the flipping .
}
viewFlipper.showPrevious();
}
}