How to fill an activity with either checkbox or radiogroup? - android

I'm trying to make an app that would ask the user questions and the user would select answer(s) and click the button to submit the answer(s). The answers can be in form of checkboxes or radiogroup to make it fun. However, I've got trouble figuring out how it will be possible to fill an activity with one of them based on how the answer is designed.
To pose the question, I can use a TextView; all good there. But how would I change the second view to checkboxes or radiogroup based on the type of answer I'm expecting? As a beginner, I've learnt how to make use of different views, but haven't come across such a case.
Any suggestions would be greatly appreciated.

You can use ViewSwitcher
layout xml
<?xml version="1.0" encoding="utf-8"?>
<ViewSwitcher xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ViewSwitcher"
android:layout_width="match_parent"
android:layout_height="match_parent">
<CheckBox
android:id="#+id/button_checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/chk_android"
android:checked="true" />
<RadioButton
android:id="#+id/button_radio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/radio_male"
android:checked="true" />
</ViewSwitcher>
Activity class
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewSwitcher switcher = (ViewSwitcher) findViewById(R.id.ViewSwitcher);
Button Next = (Button) findViewById(R.id.button_checkbox);
Button Previous = (Button) findViewById(R.id.button_radio);
To navigate through the views use showNext() or showPrevious() methods
switcher.showNext();
switcher.showPrevious();

Related

Android - RadioGroup's first button becomes unselectable after clearCheck() and rotate

I'm having problems with RadioGroups clearCheck method and rotating my app. I think it might be a Google issue?
I have a three button radio group that when launched has the first item selected by default in xml.
My problem is, I have a button that calls radio groups clearCheck(). If you rotate the app, and then try to press the first radio group item, it will not select it. It tries, it shows the animation, but it remains unselected.
I thought I was going crazy and it was something wrong in my code, but I've broken it down to the most simplistic app possible by just making a new app.
If I don't preselect Button A (via XML or code) then it works correctly, but I need this button pre-selected.
Any idea how I can work around this problem and have A selected by default?
Repo steps
Launch app
Select Radio Button B
Press Clear Check
Rotate App
Press Radio Button A
Result: Radio A won't select. If you then press B or C you can once again press A, but not until then.
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final RadioGroup radioGroup = (RadioGroup) findViewById(R.id.radioGroup);
Button clearButton = (Button) findViewById(R.id.clearButton);
clearButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
radioGroup.clearCheck();
}
});
}
}
<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:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity">
<RadioGroup
android:id="#+id/radioGroup"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:gravity="center"
android:checkedButton="#+id/radioButtonA"
android:orientation="horizontal">
<RadioButton
android:id="#+id/radioButtonA"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="A" />
<RadioButton
android:id="#+id/radioButtonB"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="B" />
<RadioButton
android:id="#+id/radioButtonC"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="C" />
</RadioGroup>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Clear"
android:id="#+id/clearButton"
android:layout_below="#+id/searchRadioGroup"
android:layout_centerHorizontal="true"
android:layout_marginTop="114dp" />
</RelativeLayout>
Upon rotation, the checked id is reset due to android:checkedButton="#+id/radioButtonA".
If there was a button checked, CompoundButton's onRestoreInstanceState resets the checked button again to the correct checked button.
Contrarily, if there was no button checked, buttonA's onRestoreInstanceState will reset it to unchecked. RadioGroup is not handling this scenario because it is not designed to handle unchecks.
So, we end up with RadioGroup tracking buttonA as checked and buttonA tracking itself as unchecked. When you click on buttonA, the check is processed, however the UI does not update due to shortcircuit logic in the check() method because it assumes that since the id already matches the mCheckedId it has on hand, the button should already be checked:
// don't even bother
if (id != -1 && (id == mCheckedId)) {
return;
}
I guess this could be considered a bug, but it ultimately comes down to some strange design choices on your part. You are setting it to default to buttonA, which means that the user cannot uncheck any button under normal circumstances and then you provide a clear button to get them to a non-default state that they could not reach under normal circumstances. So, there are two possible solutions that would bring your UI design choices in to focus:
1) If you want there to always be a checked button, have the reset button reset to default state.
clearButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
mRadioGroup.check(R.id.radioButtonA);
}
});
2) If you want there to possibly be no checked button, don't default to anything.
I had this problem in my App .
I cheated . I created a new radio buttom and I selected gone its visibility .
after that , I put setcheked=(true).

GridLayout or GridView better to reference static items?

I'm building a simple Whack a Mole clone and I'm having trouble figuring out how to do my layout. I haven't played with Android dev since Gingerbread was new, and I've never tried to write a game before, so forgive me if these are newb questions but I've been stuck and Googling for hours now and I'm not getting answers.
I've basically got a 3x4 GridLayout, with 12 invisible mole ImageView declared in a layout.xml file, and I'm having trouble figuring out how I can create object references in my code from what I've created in XML so I can make them randomly appear and disappear and handle user touch events.
I'm seeing a lot of info about GridViews and Adapter objects being used to create references from xml and handle touch events, but I'm not sure how to do this using GridLayout. Should I switch to using a GridView in a LinearLayout, or is there some incredibly simple thing that I'm missing?
Also, would it be better practice to implement the onItemClickedListener() in my Activity subclass or my View subclass? I'm a little confused about how my View subclass relates to the XML layout. Maybe I'm just over-complicating this?
Thanks for any help, guys. Here's my layout.xml if that helps.
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="3"
android:rowCount="4"
android:useDefaultMargins="true"
android:background="#drawable/grass_bg"
android:id="#+id/wam_view_layout">
<ImageView
android:id="#+id/mole1"
android:visibility="invisible"
android:layout_width="120dip"
android:layout_height="140dip"
android:contentDescription="#string/mole_description"
android:layout_gravity="center"
android:scaleType="fitCenter"
android:src="#drawable/mole" />
<ImageView
android:id="#+id/mole2"
android:visibility="invisible"
android:layout_width="120dip"
android:layout_height="140dip"
android:contentDescription="#string/mole_description"
android:layout_gravity="center"
android:scaleType="fitCenter"
android:src="#drawable/mole" />
<!--pattern continues until mole12-->
</GridLayout>
Do something like that in your activity:
private ImageView imageMole1;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout);
imageMole1 = (ImageView) findViewById(R.id.mole1);
imageMole1.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
// handle click here e.g. call a method
// void onMoleClicked(int moleId)
}
});
}
To change the displayed image use e.g.:
imageMole1.setImageResource(R.drawable.mole_gone);

Reusuing UI for each quest in Quizz app?

I've a scenario where users take a quiz that has 40+ question. Creating 40+ activities is tedious task & i want to know is there anything exists to reuse?
activity_main.xml
<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:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Who founded Apple?"
android:id="#+id/textView"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="49dp" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editText"
android:text="Fill answers here"
android:layout_below="#+id/textView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="37dp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Next"
android:id="#+id/button"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/editText"
android:layout_toEndOf="#+id/editText"
android:clickable="true" />
</RelativeLayout>
In my MainActivity.class, im normally doing like
Button bt = (Button) findViewById(R.id.button);
bt.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
// ....Go to next activity through Intent...
}
});
Look inside onClick, I need to have each activity for each question that is not good.
Any other solution?
You probably want to create a data structure for your quizes if you haven't. Once you have a datastructure you can think about what kind of adapter you want to use: that is, the mechanism that will link your set of quizes to the UI. For instance, when needing to display a list of something, listview is used with an ArrayAdapter (or BaseAdapter for more custom styled listview).
In the support libraries there is something called a viewpager, which is a set of pages you can swipe horizontally between. You might consider using this.
Or you can create your own view class that has all the views you need to display the quiz, add a method like switchQuiz(Quiz q) which changes the ui with the new quiz information, and use this view in a single activity. Specifically you can take your activity_main.xml layout file, and instead of using it as the layout of an activity, make a custom view (public class QuizView extends RelativeLayout { }) that has a a way to update the ui for the switch quiz functionality. Read here for more information of how to do this: http://trickyandroid.com/protip-inflating-layout-for-your-custom-view/
Create two buttons, prev and next..
prev take you to prev question and next take you next question
Create a class question containing following variable
int number_of_option;
String[] options;
String question;
String answer;
Create a class quiz containing ArrayList<question> list;
add required method to add question, get question , update answer..etc..etc
Create variable current_position_in_UI in quiz class to display that question in activity.
On next/prev button click call a method of quiz to get question fields. something like list.get(position) and update your views with those values on that call. Also update your current_position_in_UI. Hope it helps :)

Text over button on Android like in the Apollo Music Player

I'm a novice on the Android platform when it cames to development. However I'm going further from basic Views and I'd like to create something like the following buttons:
This is what I want to achieve. I first tought that a Button with a custom background would have sufficed. However I don't know any way to make that small darker line with the text inside. All of the image reacts like a button and gets highlighted when you touch it.
Can you help me?
If you look at the source code for Apollo you can see ArtistsFragment is not made up of Buttons but rather an inflated RelativeLayout created by a subclass of the SimpleCursorAdapter class.
Since any view can have an OnClickListener you can make any create a layout to look however you want and still have it act like a button:
// Or load it as an item from an existing layout.
View myView = this.getLayoutInflater().inflate(R.layout.anything);
myView.setOnClickListener(new OnClickListener(){
public void onClick(View arg0) {
// Do stuff.
}
});
Every segment with an image could be a Layout with the background set to the appropriate image. Then, you just put the button inside of the layout.
You have to use Framelayout or RelativeLayout. For example:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="center"
android:src="#drawable/your_drawabele" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dip"
android:layout_gravity="center_horizontal|bottom"
android:padding="12dip"
android:background="#AA000000"
android:textColor="#ffffffff"
android:text="your_text" />
</FrameLayout>

EditText with cross(x) button at end of it

Is there any way to add the x-graphics in the android Editbox like the of iPhone
So that by clicking on that x graphic it can clear all the values in the Editbox
Is there any way to listen weather i touch a specific part of an edit text
Thank you
Yes there is a way to achieve this.
Define a RelativeLayout like this one.
<?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="wrap_content">
<EditText android:id="#+id/edittext"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/hello"/>
<ImageButton android:id="#+id/clear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"
android:layout_alignRight="#id/edittext"/>
</RelativeLayout>
Now what happens. The ImageButton gets drawn on top of the EditText. We set its right edge to be equal to the right edge of the EditTexts in order to get it appear on the right side.
Now you have to assign your ImageButton an OnCLickListener with if overridden method to just set the EditTexts text to a empty string like that.
EditText editText = null;
ImageButton clear = null;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.clear);
editText = (EditText) findViewById(R.id.edittext);
clear = (ImageButton) findViewById(R.id.clear);
clear.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
editText.setText("");
}
});
}
Now here we simply tell our ImageViews OnClickListener to reset our EditTexts text upon a click. Simple as that. ;)
Of course my example uses not very aesthetic images but you can fine tune the images yourself. The principle works.
You can download it, it works like iPhone
https://github.com/GhOsTTT/editTextXbutton

Categories

Resources