Develop Reference

Android Studio XML Widgets not rendering properly in designer

Recently, while working on some projects, I've had a rather annoying problem when coding the user interface of my application. The problem is, some controls (usually a floating action button or a regular button) render strangely. It's hard for me to explain exactly how it looks - but here's an example of how it shows the floating action button to look like in the designer:
Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:baselineAligned="false"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
tools:context=".MainActivity">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:src="#drawable/ic_baseline_add_24"
android:layout_height="wrap_content"/>
</LinearLayout>
Now, the thing is, I don't have any weird or special code added, the XML code is as pure as it gets, so I have no idea why I am having these strange rendering problems.
Here is how it rendered the following button:
Code:
<com.google.android.material.button.MaterialButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Submit"
android:layout_gravity="bottom"
android:textAllCaps="false"
android:layout_margin="30dp"
app:cornerRadius="30dp"
android:id="#+id/submitButton"
android:backgroundTint="#color/turquoise"
/>
Image:
A solution would be greatly appreciated!
Cheers,
Tom

Solution is simple u just need to restart your android rendering engine. I provided Image for your context . In android studio top right corner above layout display there is Toggle issue panel click on that and u will see one box in the bottom showing rendering issue restart rendering engine and that will restart your android studio. and u good to go. try this solution and let me know your issue is solved or not.
note: In my Image I already restarted so there is no option for restart rendering engine .but in yours's U may be find hope so.
Image

Android 4.0 Tabbed Activity Layout

I have 2-3 Activities in my app that all share data in a memory pool. I want to be able to easily switch between these activities while keeping them all simultaneously running. In addition, I am developing for Android 4.0. I would like to use TabActivity, but it has been deprecated and replaced with ActionBar, which I have tried but I don't think it's what I'm looking for. I want large tabs, similar to the classic "Artist/Playlist/All" tabs found in the stock Android Music Application, or like the Tab Bar seen at the bottom of the screenshot below. Does anyone know of a library to create these tabs or a way to make ActionBar more customizable? Or is using TabActivity a perfectly good solution, even on ICS devices?

ActionBar is what you're looking for, actually.
You should convert your Activites to Fragments. Assuming they're not too complex, this shouldn't be hard at all. There are tons of examples out there. You need one Activity, preferably a FragmentActivity, to hold all of them.
This should help:
http://arvid-g.de/12/android-4-actionbar-with-tabs-example

There are several subquestions to this, I'll try to address them all:
-In order to use the top tabs, you want to use an ActionBar.
-If you were to do it in the style of the music app, where you swipe sideways between views and the label of the current one is always front and center... For that, the class you'd want to use is called ViewPager
You can see all of these methods by creating a new Activity in eclipse, and going through the wizard. Under "Navigation Type" you can select "Tabs", "Tabs + Swipe", "Swipe Views + Title Strip". Create any one of those Activities to see how it looks, and then look at the code to see how it's implemented & how to customize it.
-Navigation along the bottom is discouraged- See the Android Design Guide, spec the section "Don't use Bottom Tab Bars"

You have probably found an answer by now, but I thought I'll share another way you could create something like that tab bar using images and xml:
<?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="fill_parent"
android:orientation="vertical"
android:id="#+id/main">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/tabackground"
android:layout_alignParentBottom="true"
android:id="#+id/llBottom">
<ImageButton
android:src="#drawable/icon2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
/>
<ImageButton
android:src="#drawable/icon3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
/>
<ImageButton
android:src="#drawable/icon4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
/>
<ImageButton
android:src="#drawable/icon5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
/>
</LinearLayout>
<ImageView
android:layout_height="24dp"
android:layout_width="fill_parent"
android:layout_alignTop="#+id/llBottom"
android:background="#10ffffff"/>
<ImageView
android:layout_height="1dp"
android:layout_width="fill_parent"
android:layout_alignTop="#+id/llBottom"
android:background="#30ffffff"/>
</RelativeLayout>
Is not perfect but with some creativity and changing some values it can look very good.
Hope it helps in some way.

Button order in Dialog

I'm inflating an AlertDialog to let the user send comments. Fairly simple. But I'm getting this Lint warning:
Layout uses the wrong button order for API >= 14: Create a layout-v14/chat_comment_dialog.xml file with
opposite order: Cancel button should be on the left (was "#string/send | Cancel", should be "Cancel | #string/
send")
So, yeah, this is the solution, create a specific layout for API >= 14 and invert the order. But....REALLY? Is this REALLY the official suggestion? To set one order in some devices and a different one in others? As a user, I would feel very confused. Should I ignore this Lint advice, or otherwise, follow this new pattern for a set of devices (which I think is rather confusing)
Anyway, here's the layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="8dp" >
<EditText
android:id="#+id/username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/username"
android:singleLine="true" />
<EditText
android:id="#+id/message"
android:layout_width="match_parent"
android:layout_height="180dp"
android:gravity="top|left"
android:hint="#string/review" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingRight="4dp"
android:text="#string/send"
android:textSize="18sp" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingLeft="4dp"
android:text="#android:string/cancel"
android:textSize="18sp" />
</LinearLayout>
</LinearLayout>
By the way, I have to inflate the Buttons in the XML and not in the AlertDialog.Builder (maybe this way the buttons will be automatically order themselves), because any onClickListener you set to the Builder's deafult button will dissmiss the dialog, and I have to avoid that behaviour to control the Dialog myself.

If you plan on targeting API level >14 then you should definitely follow the design specification. Changes were made to the layout of dialogs to increase usability.
As a user you would not be confused because you are only using a single device at a single API level. What is confusing is when a developer create non-standard UI's. Not following the standard will lead to frustration and confusion. For example if all the other apps on a user's phone (API level >14) create standard dialogs with the proper button order and your app has the button order wrong it lead to users hitting Cancel instead of Send and visa versa. Surely this will confuse and annoy the user.
It really isn't that much extra work to check the API level on the device and to provide the appropriate layout. If you design your app well it shouldn't require more than a few lines of code.

Regarding your last comment, you can still do all the AlertDialog stuff from code and be able to control things like when the dialog is dismissed, just use a View.onClickListener instead of DialogInterface.onClickListener:
AlertDialog d = new AlertDialog.Builder(context)
.setPositiveButton(R.string.button_text, null).show();
and then add the listener afterwards:
d.getButton(AlertDialog.BUTTON_POSITIVE)
.setOnClickListener(new View.onClickListener() {...});
Adding the alternative listener prevents the dialog from automatically being dismissed when the button is pressed.

Android GUI: what are the good UI patterns for entering an integer number?

There are two numbers constantly displayed in my UI. I need the user to be able to specify those numbers. In a desktop app I simply use 2 spinbuttons, and can beat it (I guess). However, there are problems with this in Android (I am targeting Android 3-based tablets).
First of all, I've tried NumberPicker widget, but it simply does not show itself properly (I've asked a question about it, but no response so far).
Then I've tried some 3rd-party numberpicker implementations one cand find on the Web, but for various reason didn't like neither of them. Some of them are too large to fit the side panel I'm squeezing controls into, some are just ugly (and too small, probably), and all of them automatically grab input focus causing the keyboard to show every time I open this side panel.
There is another option - only show the uneditable label with a number on the panel, and show popup window with some numberpickers in it. Apart from me not knowing how to implement such a popup (just learning), how do I decorate the label so that the user understands he can tap it to edit?
Perhaps, there are better solutions for this problem? I took a look at some apps from Google Market, and they all seem to either use huge NumberPickers at the center of the screen (and I need as much of the screen as possible clear), or a popup with the same huge Numberpickers I don't particularly like.
Can you suggest anything else? Thanks in advance!

There are two different issues in your question:
For the number picker for eaxmple in my case I have created a simple tool. You can just put a button with the text "-" then a textview and then a button with "+". You put it in a linear layout and t can be vertical or horizontal. If you want it you can make it very small. For example here is what I have wrote but you can try playing with the options to see which is better for you.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<LinearLayout android:orientation="vertical" android:id="#+id/linearLayout1"
android:layout_width="wrap_content" android:layout_weight="1"
android:layout_height="wrap_content">
<Button android:id="#+id/button22" android:layout_gravity="center"
android:layout_weight="1" android:text="+" android:gravity="center"
android:layout_width="30dip" android:layout_height="30dip"></Button>
<Button android:id="#+id/button11"
android:layout_gravity="center"
android:layout_weight="1" android:text="-"
android:gravity="center" android:textAppearance="?android:attr/textAppearanceSmall" android:layout_height="30dip" android:layout_width="30dip"></Button>
</LinearLayout>
<LinearLayout android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1" android:orientation="vertical">
<Button android:layout_weight="1"
android:layout_height="fill_parent"
android:layout_width="30dip"
android:text="0" android:id="#+id/quantidad"></Button>
</LinearLayout>
then you can add onClick listeners on the buttons and setup to increase or decrase the text displayed in the text view.
As for the keyboard well if you use that example you not need it but if you use an edittext then you can setup an option for the keyboard to be hidden in the manifest: you can see the option here http://developer.android.com/guide/topics/manifest/activity-element.html

Is there a view for a button bar? (Image link describing the view)

I am looking for a view or some sort of information regarding the bottom bar in default applications of Android such as Email, or Unlock pattern as shown in the picture below. I have not been able find anything about this on Androids site nor from Google searches.
Image: http://img11.imageshack.us/i/viewdn.jpg/

I believe that Christopher is correct; there is no special widget to create the bar in your image. However, if you want to emulate it, you can create a layout and use the style style="#android:style/ButtonBar". That will give you the light gray background and the correct margins.

I don't believe there's any standard view for the button bar used at the bottom of these apps; it's generally just two Button items placed together in a LinearLayout or RelativeLayout.
For example, looking at the Android Open Source Project, you can see the button bar for one of the email app setup screens is defined as two plain old Button objects.
However, it is surprising that Google didn't abstract more of the common stuff into an Android theme or sublayout, rather than having the same views and attributes in each layout XML.

From: http://code.google.com/p/k9mail/source/browse/k9mail/trunk/res/layout/account_setup_basics.xml?r=1314
<RelativeLayout
android:layout_marginTop="-45dip"
android:padding="0dip"
android:layout_alignParentBottom="true"
android:gravity="bottom|right"
android:background="#android:drawable/bottom_bar"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<Button
android:id="#+id/manual_setup"
android:text="#string/account_setup_basics_manual_setup_action"
android:minWidth="#dimen/button_minWidth"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_marginBottom="-4dip"
android:layout_alignParentLeft="true"
android:layout_centerVertical="false"
/>
<Button
android:id="#+id/next"
android:text="#string/next_action"
android:minWidth="#dimen/button_minWidth"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:drawableRight="#drawable/button_indicator_next"
android:layout_marginBottom="-4dip"
android:layout_alignParentRight="true"
android:layout_centerVertical="false"
/>
</RelativeLayout>