I am trying to create a custom title bar strictly for Android 2.1 that somewhat emulates the ActionBar found in Android 3.0 and up.
So far I've had fairly decent luck, but I cannot find an easy way to make the drop-down lists that can appear below the icon / buttons in the ActionBar.
I would like these drop-down lists to be able to cross the boundary between the title layout and the content layout without being clipped / cut off. I would also like the drop-down lists to be positioned relatively below the icons / buttons in the ActionBar. I've seen advice to use FrameLayouts and RelativeLayouts already but these did not seem to solve my particular problem (unless I'm looking at it wrong). I keep thinking it must be possible since I believe the newer versions of Android have support for exactly this type of behavior.
Here is a screenshot of what I am trying to accomplish with some notes.
http://img217.imageshack.us/img217/3279/67343249.png
Please help. Thanks!!!
I think best way to do that is to create a linear layout and add your drop-down list item into that linear layout. Then add linear layout on button click and display it just below to the button by using relative layout layoutparams.
You need to hold your content with a FrameLayout. A FrameLayout can hold more than one child, and it will allow them to overlap on each other.
A possible layout xml could look like:
<FrameLayout>
<LinearLayout android:margin_top="30dip">...</LinearLayout>
<CustomActionBar />
</FrameLayout>
The 30dip is just the height of your ActionBar, you might want to define it in values. And the LienarLayout you can replace with anything which is just for holding the other content in your application.
PS. I am not sure if FrameLayout renders first child first or last. In case you found the linearlayout stuff overlaps the customactionbar, swap their position.
=== Edit ===
To make the code much cleaner, one can do in this way:
<CustomActionBar>
<LinearLayout/>
</CustomActionBar>
Which replaced the custom action bar to be the "root" element of any xml layout that utilized the action bar. When doing the custom action bar, you need to extend it from FrameLayout, and assign the child's margin accordingly. Which the idea is much the same as the one I presented above.
After a few days of research I found the best way to implement this is to use a custom dialog box with a custom theme that contains a listView. When the user clicks on the button the dialog should be displayed directly below the button. This provides a good user experience and also means you don't have to completely change your basic layout structure to accomodate this functionality. (This is basically the same approach that ActionBar Sherlocke uses for their backwards compatibility menus)
Here is a code snippet of what I'm describing (this is written in C# using Mono for Android but it should be easy to translate to Java):
Dialog dlgHome = new Dialog(this, Resource.Style.ActionBarMenu);
dlgHome.SetCanceledOnTouchOutside(true);
dlgHome.SetContentView(Resource.Layout.ActionBarMenu);
ListView lsvHome = (ListView)dlgHome.FindViewById(Resource.Id.lsvHome);
lsvHome.Adapter = new ArrayAdapter<string>(this, Resource.Layout.ActionBarMenuItem, new string[] { "Add Activity", "Edit Log", "Program Details" });
Rect r = new Rect();
btnHome.GetLocalVisibleRect(r);
int x = r.Left + (int)TypedValue.ApplyDimension(ComplexUnitType.Dip, 5, Resources.DisplayMetrics);
int y = r.Bottom;
WindowManagerLayoutParams param = dlgHome.Window.Attributes;
param.Gravity = (int)(GravityFlags.Top | GravityFlags.Left);
param.X = x;
param.Y = y;
dlgHome.Window.Attributes = param;
Also, here is the style xml (goes in style.xml)
<style name="ActionBarMenu" parent="android:Theme.Dialog">
<item name="android:windowBackground">#color/actionbar_menu_bg</item>
<item name="android:windowNoTitle">true</item>
<item name="android:backgroundDimEnabled">false</item>
</style>
Related
I want my menu items on the BottomNavigationBar to have text-only labels with no icon. Unfortunately, it looks like design_bottom_navigation_item.xml always has a 24x24dp space reserved for the icon, with no publicly-exposed way to set it to gone. And even after getting past that, the label layout is set to a layout_gravity of bottom|center_horizontal, and it doesn't look like there's a way to programatically set layout_gravity to centered.
What is the fastest, easiest way to achieve the goal of a text-only menu item on the bottom nav bar? I'm thinking I can do this by creating a custom version of the item layout, then subclassing BottomNavigationItemView, BottomNavigationMenuView, and BottomNavigationView to specify that custom layout... but that seems like an awful lot of work for one little change. Am I missing something simpler?
dont put iandroid:icon property to your item
Just use the code below. I tried hard to do this easy way but failed.Then I made an alternative. Just use transparent color instead of icon drawble
<item
android:icon="#android:color/transparent"
android:id="#+id/navigation_id"
android:title="title" />
Add this in your dimens file. Then you can add padding according to your navigation view size.
<dimen name="design_bottom_navigation_height"tools:override="true">30dp</dimen>
I have this fragment layout where some content needs to be animated (like showing/hiding input field).
Now I found out I could manage this by using a fancy animation (by using <item name="android:animateLayoutChanges">true</item> on a linear layout).
The problem I have here is that I need to add al content programmatically..
For example
LinearLayout timesheetsWrapper = (LinearLayout)inflatedView.findViewById(R.id.new_timesheet_wrapper);
EditText timeSheetName = new EditText(getContext());
timeSheetName.setHint("Name");
timesheetsWrapper.addView(timeSheetName);
Now image I need to add like 10 GUI components and style each one of them programmatically, which is a bit of a hassle to me.
Is there a way that I could add a partial layout .xml file into the 'wrapper'?
For instance:
LinearLayout partialLayout = ...??
timesheetsWrapper.addView(partialLayout);
Where the partialLayout.xml contains all the GUI components.
Already searched around but it all got a bit confusing to me!
I hope my question is a bit clear, if not (or additional info is needed) I'am happy to edit/provide.
Thanks in advance, regards an android noob
My current method to customize my UI is using the usual android DatePicker then use DatePicketDialog.getDatePicker() to get the inside component out, and customize it.
Now the result is in the image at https://dl.dropboxusercontent.com/u/3286004/Screen%20Shot%202557-08-29%20at%202.52.21%20AM.png
The Question is ... I want to customize the black line above the DONE button to another color.
Could you suggest how I can get that line component out, so I can change it.
Thank you in advance :D
This is absolutely possible, actually you could do whatever you want with it. Really, one of options is to use style and theme which however would not work in 4.x. The more, lets say, proper or easy way is to use views itself like following:
// we need this listener since only here all views are really drawn and accessible
yourDialog.setOnShowListener(new DialogInterface.OnShowListener() {
private boolean areButtonsFixed;
#Override
public void onShow(DialogInterface dialog) {
if (areButtonsFixed)
return;
// both buttons - you could search for only positive button or whatever button your dialog has
final Button btnPositive = getButton(DatePickerDialog.BUTTON_POSITIVE);
final Button btnNegative = getButton(DatePickerDialog.BUTTON_NEGATIVE);
final Button btnNeutral = getButton(DatePickerDialog.BUTTON_NEUTRAL);
// buttons layout parameters, change it into material style (gravity right)
final LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) btnPositive.getLayoutParams();
lp.weight = 0; // was 1 to fill 50% horizontally
// positive button, set your own label
btnPositive.setText(R.string.dialog_ok_label);
// set text color and size
btnPositive.setTextColor(ResHelper.getColor(R.color.blue_bright));
btnPositive.setTextSize(TypedValue.COMPLEX_UNIT_PX, ResHelper.getDimensPx(R.dimen.text_size_14));
btnPositive.setLayoutParams(lp);
// divider above buttons
((LinearLayout) btnPositive.getParent().getParent()).setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);
areButtonsFixed = true;
}
This (prelast line) will remove divider above buttons at all. If you wish to customize it instead do it like following:
((LinearLayout) btnPositive.getParent().getParent()).setDividerDrawable(R.drawable.yer_drawable);
One way would be to use another theme. This theme is Holo i think, so you can't change colors.
I think you can create your dialog with a custom layout.
If you used a custom layout, you can change colors.
Or, you should use another theme, or create your own theme.
EDIT
Yep, at run-time too.
Many things using on your layout are locked, like colors, especially on widgets (searchView for example)
In default dialog it is impossible, this line has system color. You should convert this dialog to activity, then you can change color there.
I am wanting to create help overlays like the ones you see when ICS loads for the first time or in apps like ES File Explorer or Apex Launcher (there are more, but I can't think of them right now). Is this just a relative layout with one view sitting on top of the other? I haven't been able to find any sample code for doing such a thing. Anyone know how this is done or have any ideas?
Let's assume you ordinarily would call setContentView(R.layout.main), but on first run, you want to have this overlay.
Step #1: Create a FrameLayout in Java code and pass that to setContentView().
Step #2: Use LayoutInflater to inflate R.layout.main into the FrameLayout.
Step #3: Use LayoutInflater to inflate the overlay into the FrameLayout.
Step #4: When the user taps the button (or whatever) to dismiss the overlay, call removeView() to remove the overlay from the FrameLayout.
Since the overlay is a later child of the FrameLayout, it will float over top of the contents of R.layout.main.
"Coach mark" is "Help overlay" in UX talk :-)
coach_mark.xml is your coach mark layout
coach_mark_master_view is the id of the top most view (root) in coach_mark.xml
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.coach_mark);
dialog.setCanceledOnTouchOutside(true);
//for dismissing anywhere you touch
View masterView = dialog.findViewById(R.id.coach_mark_master_view);
masterView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
dialog.dismiss();
}
});
dialog.show();
}
Adding sample of coach_mark.xml (to this excellent solution given by Oded Breiner), so its easy for ppl to copy & paste to see working example quickly.
Sample of coach_mark.xml here, change the -> drawable/coach_marks to your image:
coach_mark.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:orientation="vertical"
android:id="#+id/coach_mark_master_view">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/coach_marks_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:layout_gravity="center_horizontal"
android:src="#drawable/coach_marks" />
</RelativeLayout>
</LinearLayout>
And optionally use this theme to remove padding:
<style name="WalkthroughTheme" parent="Theme.AppCompat">
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:backgroundDimEnabled">false</item>
</style>
You can do that pretty quickly. You add, for exemple a LinearLayout where you put a picture with alpha which correspond to your help information and what do you want to draw like an overlay. In you xml of your activity you put this layout in a RelativeLayout after the layout of your activity with the Gone visibility. When you want to draw the help information, you just neeed to set this visibility to visible.
I hope, I'm clear, if you have any question,I'm be please to answer them.
See my another answer how programmatically show an overlay layout on top of the current activity. Activity's layout.xml does not need to know anything about the overlay skin. You can put overlay semi-transparent, cover only part of the screen, one or more textview and buttons on it...
How to overlay a button programmically?
create res/layout/paused.xml RelativeLayout template or use any layout toplevel
create a function to show overlay skin
key is to get handle to layout.xml, use LayoutInflater class to parse xml to view object, add overlay view to current layout structure
My example uses a timer to destroy overlay object by completely removing it from the view structure. This is probably what you want as well to get rid of it without a trace.
My goal was that main activities are not aware of any overlay skin, overlays come and go, many different overlays, still able to use overlay1.xml text files as a template, and content should programmatically be updated. I do pretty much what CommonsWare told us my post shows the actual program code to get started.
disclaimer: OPs "Thanks for your input. This is how I pictured it being done. I have to give credit to the answer below" comment does not mean my answer but CommonsWare answer. Stackoverflow have changed post orderings.
I've got a custom drawable resource to display my items in a ListView, actually two because I wanted my results to have alternating background colors but both to respond to clicks by changing their color. The problem is even when assigning even one of these drawables to my LinearLayout container via the layout XML, it works fine, but via Java code it doesn't. So to be exact, this works:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/result_white"
android:id="#+id/result"
>
but this (in my ResultAdapter which extends ArrayAdapter) doesn't:
LinearLayout result = (LinearLayout) v.findViewById(R.id.result);
result.setBackgroundColor(R.drawable.result_white);
My final objective is of course to have alternating 'result_white' and 'result_ltgray' drawables for results so the first XML solution does not really satisfy my needs. What am I missing in the Java code please?
Well, assuming you are only using one-color backgrounds, you should use Colors instead since drawables can be shapes, gradients and more. Now, to actually use color, your code will look something like:
result.setBackgroundColor(mContext.getResources.getColor(R.color.result_white));
where mContext is the context, and you have a color (such as 0xFFFFFFFF) in your res/values/colors.xml file.
Also take a look at Color State Lists for changing colors when pressed / selected / etc
Thanks for your help guys, but what I needed to do is this:
result.setBackgroundResource(R.drawable.result_white);
This way I could easily implement this into my ResultAdapter for alternating results reacting to clicks with changing backgrounds:
LinearLayout result = (LinearLayout) v.findViewById(R.id.result);
if (position % 2 == 0)
result.setBackgroundResource(R.drawable.result_white);
else
result.setBackgroundResource(R.drawable.result_ltgray);
Make sure you imported the right reference for R (android.R for android drawables, your_app_path.R for your own).