Develop Reference

Is it possible to create a clickable Toast-like notification?

I have a need to show a minimally-intrusive non-blocking notification which is not tied to the activity it was shown in (like a Toast) and which is clickable. Anyone have any idea whether or not this is possible? Unfortunately, it appears that Toast notifications (custom or otherwise) are not clickable (i.e. setting an OnClickListener on its views has no effect). All the alternatives that I'm aware of (i.e. AlertDialog, PopupWindow and Crouton) seem to show a notification which is tied to the activity it was shown in (i.e. they won't continue showing when the activity finishes). Any suggestions?

You can use PopupWindow, add an onClickListener and add a handler to auto cancel it after n times (just like the behavior of a toast). Something like this:
public static void showToast(Activity a, String title, String message) {
// inflate your xml layout
LayoutInflater inflater = a.getLayoutInflater();
View layout = inflater.inflate(R.layout.custom_toast,
(ViewGroup) a.findViewById(R.id.toast_layout_root));
// set the custom display
((TextView) layout.findViewById(R.id.title)).setText(title);
((TextView) layout.findViewById(R.id.message)).setText(message);
// initialize your popupWindow and use your custom layout as the view
final PopupWindow pw = new PopupWindow(layout,
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT, true);
// set windowType to TYPE_TOAST (requires API 23 above)
// this will make popupWindow still appear even the activity was closed
pw.setWindowLayoutType(WindowManager.LayoutParams.TYPE_TOAST);
pw.showAtLocation(layout, Gravity.CENTER | Gravity.TOP, 0, 500);
// handle popupWindow click event
layout.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
// do anything when popupWindow was clicked
pw.dismiss(); // dismiss the window
}
});
// dismiss the popup window after 3sec
new Handler().postDelayed(new Runnable() {
public void run() {
pw.dismiss();
}
}, 3000);
}
xml layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toast_layout_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000"
android:orientation="vertical"
android:elevation="10dp"
android:padding="20dp">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#FFF"
android:textStyle="bold"/>
<TextView
android:id="#+id/message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#FFF"/>
</LinearLayout>

You are right, a Toast object has no way to be interacted with, but there are many libraries out there that will give you the same look and feel as a toast, but with some interactivity. The one I use is https://github.com/JohnPersano/SuperToasts

I think what you need is in fact a PopupWindowwhich can be seen here "http://developer.android.com/reference/android/widget/PopupWindow.html".
Toasts have a very specific task, which is to inform the user, without any input from them. So instead of trying to extend the purpose of the Toast, use the PopupWindow which can be interacted with by the user.

A 'Dialog' type of activity will probably be your best bet.
In manifest:
<activity android:name=".ToastLikeActivity"
android:theme="#android:style/Theme.Dialog"
android:label="#string/label"
></activity>
And timeout the activity within the onCreate():
class ToastLikeActivity extends Activity {
#Override
public void onCreate(Bundle state)
// auto-kill activity after X seconds <-------------------------
Handler handler = new Handler();
handler.postDelayed(new Runnable() {
#Override
public void run() {
ToastLikeActivity.this.finish(); // kill after X seconds
}
}
}, VisibleTimeSecs*1000);
}
To display the dialog start it as with any other activity:
Intent i = new Intent(this, ToastLikeActivity.class);
i.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
startActivity(i);
And it will show up and automatically go away after X seconds.
Such a popup will not be tied to the caller activity. In fact - it will not even require a caller activity. You
can activate it (bad idea, but possible) even from a service.
You can implement basically any kind of sensitive (i.e. accepting user's clicks) interface you want to
the ToastLikeActivity. Especially: you can make its exteriors transparent, giving it a dialog-likke looks.

Creating a Coach Mark on Android

I am trying to create a coach mark for Android.
I want it to be absolutely full screen, and my app has an ActionBar. So, the solution suggested by Commons, which is basically inflate a FrameLayout after setContentView(view); does not work, because the FrameLayout would be below the ActionBar. And I want it full screen.
So, I took a screenshot of my screen and drew some coach marks with photoshop and created a .png file of it. I then load this png file with the following code:
public void onCoachMark(){
final Dialog dialog = new Dialog(this);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
dialog.setContentView(R.layout.activity_main_coach_mark);
dialog.setCanceledOnTouchOutside(true);
//for dismissing anywhere you touch
View masterView = dialog.findViewById(R.id.parent);
masterView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
dialog.dismiss();
preferences.edit().putBoolean("COACH_MARK_MAIN_SHOWN", true).commit();
}
});
dialog.show();
}
This works perfectly on my phone, but as we all know, we have thousands of Android models. With another model, this is how it looks like:
I have tried using the ShowcaseView project but, apparently, it does not work with ActionBar buttons. And I need that.
Can anyone help me with this?

Simply add this to your onCoachMark method:
dialog.getWindow().setLayout(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);

Just think simply
Step 1: Open your main_activity layout file
Step 2: In the main_activity layout check Root Layout, If the Root Layout not start with FrameLayout, change it to FrameLayout.
Step 3: Converting from other layout to FrameLayout it may cause layout problem, you have to fix it. Step 4: Create another FrameLayout that will overlay top of your existing view.
Example:
<FrameLayout ...>
.....
....
<FrameLayout
android:id="#+id/c_mark"
.../>
</FrameLayout>
Step 5: Position your new FrameLayout by layout gravity. Example: android:layout_gravity="top|right"
Step 6: Hide that view by default
Step 7: Now in your Main Activity use this Id and play with property. Just custom design your c_mark FrameLayout set id and use it. Let me Give you example.
Let me Give you example.
Example: MainActivity.class
FrameLayout coachMarkLayout = findViewById( R.id.c_mark);
coachMarkLayout.setVisibility( View.VISIBLE );
FrameLayout messageBoxLayout = (FrameLayout) rootFrameLayout.getChildAt( 0 );
LinearLayout linearLayout = (LinearLayout) messageBoxLayout.getChildAt( 1 );
Button skipButton = (Button) linearLayout.getChildAt( 0 );
skipButton.setOnClickListener( v -> {
rootFrameLayout.setVisibility( View.GONE );
} );
Button nextButton = (Button) linearLayout.getChildAt( 1 );
nextButton.setOnClickListener( v -> {
rootFrameLayout.setVisibility( View.GONE );
// you can add second coarch mark here
} );
main_activity.xml
<FrameLayout
android:id="#+id/c_mark"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:visibility="gone">
<FrameLayout
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_marginBottom="70dp">
<include layout="#layout/layout_message_box"/>
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal">
<include layout="#layout/layout_arrow"/>
</FrameLayout>
</FrameLayout>

How to Switch Views at Runtime?

I have the following code in my accounting application:
// switch View to the Customer layout, widget id's are the same on both layouts
private void hideExpenseView() {
setContentView(R.layout.customer_invoices);
}
// switch View to the Supplier layout
private void hideIncomeView() {
setContentView(R.layout.supplier_invoices);
}
The above does not work, as when you switch the ContentView, you lose all variable mappings. You have to map variables after you setContentView() unfortunately.
If this worked, this would be a beautifully simple solution for my app. See, I've named the widgets in both xml layouts the same ids. Instead of hiding elements of one xml layout based on different states, I switch the entire View to the appropriate layout - whether entering a Customer sales invoice, or a Supplier expense invoice.
By switching Views, I would have basically 6 lines of code taking care of the UI transition, very simple.
I hope this is still possible in another capacity, can someone please push me in the right direction?

Check out ViewSwitcher : see http://developer.android.com/reference/android/widget/ViewSwitcher.html
That, or base your activities layout in a framelayout that includes supplier_invoices.xml and customer_invoices.xml. Then your homegrown hide-n-show will be g2g. Tho, you might need to change the ids still.

You can wrap your views in two LinearLayouts, one for R.layout.customer_invoices and another for R.layout.supplier_invoices.
You need to implement your own findViewById.
private static final int LAYOUT_EXPENSE = 1;
private static final int LAYOUT_INCOME = 2;
private int currentLayout = LAYOUT_EXPENSE;
private LinearLayout expenseContainer, incomeContainer;
// switch View to the Customer layout, widget id's are the same on both layouts
private void hideExpenseView() {
switchLayout(LAYOUT_INCOME);
}
// switch View to the Supplier layout
private void hideIncomeView() {
switchLayout(LAYOUT_EXPENSE);
}
private void switchLayout(int layout) {
currentLayout = layout;
if (layout == LAYOUT_EXPENSE) {
expenseContainer.setVisibility(VISIBLE);
incomeContainer.setVisibility(GONE);
} else {
expenseContainer.setVisibility(GONE);
incomeContainer.setVisibility(VISIBLE);
}
}
public View findViewById(int id) {
if (layout == LAYOUT_EXPENSE) return expenseContainer.findViewById(id);
else return incomeContainer.findViewById(id);
}
I think you got my idea.

Do like this
main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/customer_invoices"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- put customer_invoices related tools like TextView, Button, ImageView here -->
</LinearLayout>
<LinearLayout
android:id="#+id/supplier_invoices"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- put supplier_invoices related tools like TextView, Button, ImageView here -->
</LinearLayout>
</LinearLayout>
Java code:
public class TestActivity extends Activity {
View supplier_invoices,customer_invoices;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
supplier_invoices = findViewById(R.id.supplier_invoices);
customer_invoices = findViewById(R.id.customer_invoices);
}
// switch View to the Customer layout, widget id's are the same on both layouts
private void hideExpenseView() {
setContentView(R.layout.customer_invoices);
customer_invoices.setVisibility(View.VISIBLE);
supplier_invoices.setVisibility(View.GONE);
}
// switch View to the Supplier layout
private void hideIncomeView() {
supplier_invoices.setVisibility(View.VISIBLE);
customer_invoices.setVisibility(View.GONE);
}
}

Android: swapping two overlapping views

Can anyone tell me what's wrong with this implementation? All I want to do here is have two overlapping views that swap places when you tap the screen. Unless I'm just using it wrong, View.bringToFront() does nothing?
Below is all the code in my app. Note that I added padding to the 'backView' just to make sure the two were actually overlapping. Indeed I could see both on the screen. While tapping the top view does indeed trigger the onClick method, nothing visibly changes in response to the calls to bringToFront.
public class MainActivity extends Activity implements OnClickListener {
private ImageView frontView;
private ImageView backView;
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
frontView = (ImageView) findViewById(com.example.R.id.FrontView);
backView = (ImageView) findViewById(com.example.R.id.BackView);
frontView.setOnClickListener(this);
backView.setOnClickListener(this);
backView.setPadding(10,0,0,0);
}
private boolean flag;
public void onClick(View v) {
if (!flag) {
backView.bringToFront();
}
else {
frontView.bringToFront();
}
flag = !flag;
}
}
and the corresponding layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/FrontView"
android:src="#drawable/front"
/>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/BackView"
android:src="#drawable/back"
/>
</RelativeLayout>
Maybe it's the layout I'm using? I'm not sure... I've tried FrameLayout and LinearLayout as well.

I would try swapping content views instead of ImageViews.
Put each imageView in a different layout and then it is easy:
public void onClick(View v) {
if (!flag) {
setContentView(R.layout.main_front);
frontView = (ImageView) findViewById(com.example.R.id.FrontView);
frontView.setOnClickListener(this);
}
else {
setContentView(R.layout.main_back);
backView = (ImageView) findViewById(com.example.R.id.BackView);
backView.setOnClickListener(this);
}
flag = !flag;
}

There are a couple of Components that you can use that do this for you.
ViewAnimator, ViewFlipper and ViewSwitcher. You can set the animations you require etc and they hand the rest.
here's one example.
http://www.androidpeople.com/android-viewflipper-example/
Given your example, do you have to call invalidate() on the parent after you've called bringToFront() ?

Android: KeyboardView doesn't appear above EditText

I'm trying to have an EditText and the possibility to display a keyboard at the bottom of the screen when the user taps the EditText. I'm aware of the InputMethodService and the SoftKeyboard example, but I can't use it in that fashion as my keyboard should only be available to this very EditText.
Furthermore, there should be a context menu, but that's not part of this question (I think).
I've read plenty of code fragments, but in many cases they contain methods that aren't available anymore (i.e., getViewInflate()) or are written in a context that I don't understand or can't translate into my code (mind that I'm a newbie regarding Android).
In most attempts I fail with this exception when I tap the EditText:
java.lang.IllegalArgumentException: width and height must be > 0
followed by a stack-trace that doesn't contain any of my classes. As you can see in the code below all sizes are set.
What you see below is the current status of the code (I removed some of the code and I hope it still makes sense). I also tried to use what's inside of handler.post() in the main thread, use the commented stuff instead of the handler.post() ...
What's not below is an attempt to use a RelativeLayout with the EditText and the KeyboardView in one layout-XML. There was a different exception, something like "invalid type 0x12" or something when creating the layout.
It just doesn't work or I just don't know how to do it. Can anyone please guide me through this? Please let me know if something is missing.
main.xml:
<?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"
>
<EditText
android:id="#+id/field_input"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:inputType="textMultiLine|textImeMultiLine"
android:typeface="monospace"
android:gravity="top|left"
android:maxLength="255"
/>
</LinearLayout>
keyboard.xml:
<?xml version="1.0" encoding="utf-8"?>
<com.messenger.keyboard.LatinKeyboardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/keyboard"
android:layout_alignParentBottom="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
LatinKeyboardView.java:
import android.inputmethodservice.KeyboardView;
public class LatinKeyboardView extends KeyboardView {
:
}
EditorActivity.java
import android.app.Activity;
public class EditorActivity extends Activity {
private View keyboardLayout;
#Override
public void onCreate(Bundle savedInstanceState) {
final EditText inputField;
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
keyboardLayout = (View)getLayoutInflater().inflate(R.layout.keyboard, null, false);
inputField = (EditText)findViewById(R.id.field_input);
registerForContextMenu(inputField);
inputField.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Handler handler = new Handler(Looper.getMainLooper());
handler.post(new Runnable() {
#Override
public void run() {
LayoutInflater inflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
//PopupWindow pw = new PopupWindow(inflater.inflate(R.layout.input, null, false), 100, 100, true);
PopupWindow pw = new PopupWindow(keyboardLayout, 100, 100, true);
pw.showAtLocation(findViewById(R.id.field_input), Gravity.CENTER, 0, 0);
}
});
/*
if (keyboardLayout.getVisibility() == View.GONE) {
// Show Media Player
TranslateAnimation mAnimUp =
new TranslateAnimation(
Animation.RELATIVE_TO_SELF, 0,
Animation.RELATIVE_TO_SELF, 0,
Animation.RELATIVE_TO_SELF, -keyboardLayout.getHeight(),
Animation.RELATIVE_TO_SELF, 0);
mAnimUp.setStartOffset(500);
mAnimUp.setDuration(500);
keyboardLayout.setVisibility(View.VISIBLE);
keyboardLayout.setAnimation(mAnimUp);
}
*/
}
});
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
:
}
#Override
public boolean onPrepareOptionsMenu(Menu menu) {
:
}
#Override
public boolean onOptionsItemSelected(final MenuItem item) {
:
}
#Override
public void onCreateContextMenu(ContextMenu menu, View view, ContextMenuInfo menuInfo) {
:
}
}

After hours of "research and trying" stuff, I finally understood my mistake, which seems to be "sjngm"'s one. In order for a virtual keyboard to render, you must
declare the view either by inflating a layout xml file, or by declaring in row your KeyboardView (just as you would do it for an other View).
And what was forgotten here: retrieve your KeyboardView with findViewById() and call on it:
keyboardViewInstance.setKeyboard(new Keyboard(...) );
That's it. You will be able to see your keyboardView on the screen! Of course, you need to either create your own Keyboard class, or to use the existing one with an xml resource file defining your keyboard keys (res/xml/keyboard.xml).

I'm currently reinventing my approach as I think that I didn't break the InputMethodService enough to have it work without itself. In other words I threw away the sample and started from scratch to get the layout working (it's now one layout instead of two) and then added the code from the sample to handle the inputs properly.
After further research I found a really helpful question about an App-specific soft-keyboard. If you run into my situation, look there.