I need to set up my drawer menu to display two icons side by side per row, each icon being a different menu item as opposed to one item per row.
basically it looks like this:
| Home |
| Inventory |
| Work Orders |
I want it to look like this... but with icons instead of words
| Home | Inventory |
| W.O. | Time Clock |
I tried using linear layout, and horizontal alignment with weight, however this didn't work... Here is the current xml:
<?xml version="1.0" encoding="utf-8" ?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_home"
android:title="Home" />
<item
android:id="#+id/nav_inventory"
android:title="Inventory" />
<item
android:id="#+id/nav_item_inventory_worksheet"
android:title="Item Inventory Worksheet" />
<item
android:id="#+id/nav_purchase_order_receiving"
android:title="Purchase Order Receiving" />
<item
android:id="#+id/nav_picklist"
android:title="Picklist" />
<item
android:id="#+id/nav_packing_slip"
android:title="Packing Slips"/>
<item
android:id="#+id/nav_work_order"
android:title="Work Orders"/>
<item
android:id="#+id/nav_timeclock"
android:title="Time Clock"/>
<item
android:id="#+id/nav_settings"
android:title="Settings" />
<item
android:id="#+id/nav_change_division"
android:title="Change Division" />
<item
android:id="#+id/nav_logout"
android:title="Logout"
android:gravity="bottom" />
</group>
</menu>
The answer was to set up a Relative Layout within the NavigationView which can then be customized with axml objects. While the AppMenu page will be hidden behind the Relative Layout setting app:menu="#menu/empty_menu" then having Empty_menu as a blank xml document.
ALSO if you decide you can have a setting to have a text based or icon based menu in this fashion which could easily be setup by setting the relative layout as hidden if the user setting is set this way
Related
I have activity with button inside GridLayout that is defined like this:
<Button
android:id="#+id/btnOpion4"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_width="0dp"
android:layout_height="0dp"
android:drawableStart="#drawable/btnSend"/>
To be able to show icon on that button i had to create drawable xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_send"
android:state_pressed="true" />
<item android:drawable="#drawable/ic_send"
android:state_focused="true" />
<item android:drawable="#drawable/ic_send" />
</selector>
And all of this is working just fine...
Problem is, how can i change image from code behind?
For example if user click on some option, then change icon on this button?
EDIT:
Can I find that drawable by it's ID, and change icon?
Something like var btnsendDraw = FindViewById(Resource.Drawable.btnSend);
You can accomplish that by using the SetCompoundDrawablesWithIntrinsicBounds method found in the Button class.
In your case, I would create another drawable file with my other background:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_sent"
android:state_pressed="true" />
<item android:drawable="#drawable/ic_sent"
android:state_focused="true" />
<item android:drawable="#drawable/ic_sent" />
</selector>
and let's call it: btnSent.
Now in your code, when you want to change the image just do:
var drawable = GetDrawable(Resource.Drawable.btnSent);
btn1.SetCompoundDrawablesWithIntrinsicBounds(drawable, null, null, null);
This method gets the 4 different Drawables: left, top, end & bottom in this specific order. Since you only want to replace the start you will set the first parameter.
Note: left and start are "the same".
More about this method here
At the end you should have something like this:
Hope this helps.-
I want to make the following image to be the background for the entire Xamarin.Android application:
I reference the image in Base application theme in styles.xml :
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
.....
<item name="android:windowBackground">#drawable/ic_app_background_image</item>
.....
</style>
The background applies to all the application but the image has dark background:
Also the number 51 has some strange things around it.
When I set the android:background="#drawable/ic_app_background_image" to the most outer LinearLayout of an activity it works fine, it shows the screen like that:
How can I fix the android:windowBackground property setting the background to black issue so I don't have to put android:background="#drawable/ic_app_background_image" in the LinearLayout of every activity?
You can try following method:
1.Create new file name as bg.xml in drawable folder (bg.xml)
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<color android:color="#color/splash_background"/>
</item>
<item>
<bitmap
android:src="#drawable/splash_logo"
android:tileMode="disabled"
android:gravity="center"/>
</item>
</layer-list>
2.define background color in colors.xml
<color name="window_background">#F5F5F5</color>
<color name="splash_background">#FFFFFF</color>
3.define new style MyTheme.Splash in style.xml and use the bg in item android:windowBackground
<style name="MyTheme.Splash" parent ="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">#drawable/bg</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">false</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowActionBar">true</item>
</style>
4.Usage in Activity
[Activity(Theme = "#style/MyTheme.Splash", MainLauncher = true, NoHistory = true)]
public class SplashActivity : AppCompatActivity
{
// other code
}
Update:
If you want to apply this style to all activities, you can just add the following code to your Base application theme. And we don't need to set for each activity. For example:
<!-- Base application theme. parent="Theme.AppCompat.Light.DarkActionBar" -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowBackground">#drawable/bg</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">false</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowActionBar">true</item>
</style>
The result is:
For more details, you can check: https://learn.microsoft.com/en-us/xamarin/android/user-interface/splash-screen
I have 4 different activities on my app, in 2 of them it shows a white Title bar (with activity or package name) above my custom toolbar, but in other 2 this bar is hidden by the custom one.
I want to show only my custom toolbar and hide the default...
this is my "styles.xml" code:
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:colorPrimary">#color/primaryColor</item>
<item name="android:colorPrimaryDark">#color/primaryDarkColor</item>
<item name="android:colorAccent">#color/secondaryColor</item>
<item name ="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
</style>
<style name="MyActionBar" parent="#android:style/Theme.Holo.NoActionBar">
<item name="android:background">#color/primaryColor</item>
<item name="android:textColor">#color/primaryTextColor</item>
</style>
</resources>
[Solved]
I just change the class my Activities was inheriting from AppCompatActivity to FragmentActivity (until now I have no issues came from this change)
I'm looking for a better solution for my special menu case.
Here's the case:
Let's say we have 6 pages:
A
B
C
C1
C2
C3
Here's how the menu changed when we go from page:C to page:C1
The Design is that C1/2/3 are all submenus, when we access these pages, the menu should display C1/2/3 with a return button.
Here's the requirements:
the Menu component should be reusable
the Menu component should automatic determine to show submenus(C1/2/3) with a return button or just ordinary menus.
then I wrote a Menu component...
It's usage:
/* Routes */
<Route path="A" ... />
<Route path="B" ... />
<Route path="C" ... />
<Route path="C/:Id">
<Route path="C1" />
<Route path="C2" />
<Route path="C3" />
</Route>
/* Menus */
<Menu {...this.props}>
<Item path="A">A</Item>
<Item path="B">B</Item>
<Item path="C">C</Item>
<SubMenu path="C/:Id">
<Item path="C1">C1</Item>
<Item path="C2">C2</Item>
<Item path="C3">C3</Item>
</SubMenu>
<Menu>
I use the "path" to match and highlight Item, this can be done by using react-router's routes props. But it is not done yet, next I need to add links:
/* Menus */
<Menu {...this.props}>
<Item path="A">
<Link to="A">A</Link>
</Item>
<Item path="B">
<Link to="B">B</Link>
</Item>
<Item path="C">
<Link to="C">C</Link>
</Item>
<SubMenu path="C/:Id">
<Item path="C1">
<XLink to="C/:Id/C1">C1</XLink>
</Item>
<Item path="C2">
<XLink to="C/:Id/C2">C2</XLink>
</Item>
<Item path="C3">
<XLink to="C/:Id/C3">C3</XLink>
</Item>
</SubMenu>
<Menu>
Because path "C/:Id" need an id, I need to automatic generate the url.
What I did is creating a XLink component which take routeParams to generate the real url we need link to.
For example, when we access C/00001/C1，we can get the routeParams: {Id: "00001"}，and then we click <XLink to="C/:Id/C3">C3</XLink> it will replace :Id with "00001". Btw, XLink should support custom function to manually process the url.
Seems like problem solved but it's not good enough. Any good ideas ?
Since I came from an angular background, I think this case may be better solved by ui-router because it is based on "states", not url. The code may looks like this:
/* Menus */
<Menu {...this.props}>
...
<SubMenu state="C.detail">
<Item state="C.detail.C1">
<Link to="C.detail.C1">C1</Link>
</Item>
<Item state="C.detail.C2">
<Link to="C.detail.C2">C2</Link>
</Item>
<Item state="C.detail.C3">
<Link to="C.detail.C3">C3</Link>
</Item>
</SubMenu>
<Menu>
I don't have to process the route params，and I could use state for both highlight and linking.
I'm quite new to react-router, if I made terrible mistakes, pls tell me.
I have an activity which is with the theme Theme.Transparent which is:
<style name="Theme.Transparent" parent="android:Theme.Dialog">
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowNoTitle">false</item>
<item name="android:windowIsFloating">true</item>
<item name="android:backgroundDimEnabled">false</item>
<item name="android:gravity">top</item>
</style>
i'm trying to get rid of the border and the padding around it.. i want to make fill the horizontal of the screen. and no gray border.
please help :)
Be sure to create your Dialog referencing your custom theme:
Dialog dialog = new Dialog(this, R.style.MyDialogTheme);
Your custom theme needs to fill the screen and disable a couple of Android framework defaults:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyDialogTheme" parent="android:Theme.Dialog">
<!-- Fill the screen -->
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">fill_parent</item>
<!-- No backgrounds, titles or window float -->
<item name="android:windowBackground">#null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsFloating">false</item>
<!-- Just to prove it's working -->
<item name="android:background">#ff0000</item>
</style>
</resources>
Same as above but doing it in code rather than in xml worked for me.
getDialog().getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
Set width and height to match parent container.
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
WindowManager.LayoutParams wmlp = dialog.getWindow()
.getAttributes();
wmlp.width = android.view.WindowManager.LayoutParams.MATCH_PARENT;
wmlp.height = android.view.WindowManager.LayoutParams.WRAP_CONTENT;
The following works perfectly for me. It lets me have a full-width dialog (fills the screen's width with no padding) but with wrap_content for height, and it retains all my other stylings that I do in my builder:
<item name="windowMinWidthMajor">100%</item>
<item name="windowMinWidthMinor">100%</item>
<item name="android:windowBackground">#null</item>
<item name="android:windowIsFloating">true</item>
<item name="android:background">#ffffff</item>
Background is required or else it does a weird repeat thing, but just set this to the color you want your dialog background to be. WindowBackground and WindowIsFloating are required to make the size wrap correctly.
Add your theme to your builder like so:
builder = new AlertDialog.Builder(_context, R.style.DialogTheme);
and you're good to go!