Instead of a bitmap - can I set the background color for the splash screen
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:gravity="fill">
<item>
<bitmap android:gravity="fill" android:src="#drawable/background" />
</item>
<item>
<bitmap android:gravity="center" android:src="#drawable/logo" />
</item>
</layer-list>
Yes, you can do it just as you would in the native environment.
app/App_Resources/Android/drawable-nodpi/splash_screen.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:gravity="fill">
<item android:drawable="#color/my_color"/>
</layer-list>
and do not forget to 'register' your color
app/App_Resources/Android/values/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="my_color">#00ff00</color>
</resources>
Related
Does anyone know how to make a custom renderer for the Xamarin forms checkbox? I want the checkbox to be circular on android devices, like they are on iOS.
I'm using Xamarin Forms 4.3.
Here is First Solution use Library:
your Solution is Here.
in that you can change your shape as per your need.
here is a Gihub Link as Here
Here is Second Solution as per your need here is Check box Renderer in Ellipse Shape.
in Xaml,
<CheckBox/>
in Android Project, First create new file. i named it CheckboxRenderer.cs
set this before namespace:
[assembly: ExportRenderer(typeof(Xamarin.Forms.CheckBox), typeof(CheckboxRenderer))]
here is my class file,
public class CheckboxRenderer : ViewRenderer<Xamarin.Forms.CheckBox, Android.Widget.CheckBox>
{
private Android.Widget.CheckBox checkBox;
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.CheckBox> e)
{
base.OnElementChanged(e);
var model = e.NewElement;
checkBox = new Android.Widget.CheckBox(Context);
checkBox.SetButtonDrawable(Resource.Drawable.custom_checkbox);
checkBox.Tag = this;
SetNativeControl(checkBox);
}
}
Create these 3 xml file in Drawble folder,
1) custom_checkbox.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="true"
android:drawable="#drawable/checked" />
<item android:state_pressed="true"
android:drawable="#drawable/checked" />
<item android:state_pressed="false"
android:drawable="#drawable/unchecked" />
</selector>
2) checked.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<layer-list>
<item>
<shape android:shape="oval">
<corners android:radius="1dp" />
<stroke
android:width="1dp"
android:color="#777" />
<gradient
android:startColor="#990000"
android:centerColor="#990000"
android:endColor="#990000"
android:angle="270" />
<size
android:width="30dp"
android:height="30dp" />
</shape>
</item>
<item
android:width="8dp"
android:height="2dp"
android:top="20dp"
android:left="6dp">
<rotate
android:fromDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#fff"/>
</shape>
</rotate>
</item>
<item
android:width="19dp"
android:height="2dp"
android:top="16dp"
android:left="9dp">
<rotate
android:fromDegrees="-45">
<shape android:shape="rectangle">
<solid android:color="#fff"/>
</shape>
</rotate>
</item>
</layer-list>
</item>
</selector>
3) unchecked.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<corners android:radius="1dp" />
<stroke
android:width="1dp"
android:color="#777" />
<gradient
android:startColor="#990000"
android:centerColor="#990000"
android:endColor="#990000"
android:angle="270" />
<size
android:width="30dp"
android:height="30dp" />
</shape>
ohh its Done... you will get output like this,
Hope this hepls.
In your question, you say "I want the checkbox to be circular on android devices, like they are on iOS." If this is your main goal, you may want to try the Syncfusion free community license to add a SfCheckbox control. Then you can experiment with the CornerRadius property of the checkbox. Here is what worked for me:
<StackLayout>
<checkbox:SfCheckBox Text="Round Checkbox #1" CornerRadius="10" />
<checkbox:SfCheckBox Text="Round Checkbox #2" CornerRadius="10" IsChecked="True"/>
</StackLayout>
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 am trying to use Navigation View in Drawer Layout, but I keep getting errors when building the file.
Here's what my xml looks like:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- The main content view -->
<FrameLayout
android:id="#+id/contentFrame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- The navigation drawer -->
<android.support.design.widget.NavigationView
android:id="#+id/navigationView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/navigation_items"
/>
</android.support.v4.widget.DrawerLayout>
This leads to a build gradle error. My menu looks like this:
<?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/menu_bookmark"
android:title="Bookmark" />
<item android:id="#+id/menu_save"
android:title="Save" />
<item android:id="#+id/menu_search"
android:title="Search" />
<item android:id="#+id/menu_share"
android:title="Share" />
</group>
</menu>
When I remove app:menu from the navigationView,the error goes away. What could be wrong?
My fix was that I needed to add app:headerLayout="#layout/my_header_layout" as well.
I wanted to replace ActionBar title(just title not icons) by an image (for example image I want the icon to remain the same but replace the title with another image )
.So I created a custom layout with ImageView.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/transparent">
<ImageView
android:id="#+id/actionbar_img"
android:src="#drawable/ic_protect_go_white"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
</LinearLayout>
then on my Oncreate(), I wrote the code:-
RequestWindowFeature(WindowFeatures.ActionBarOverlay);
SetContentView(Resource.Layout.MainView);
Window.SetFeatureInt(WindowFeatures.ActionBarOverlay, Resource.Layout.CustomActionBar_Title);
Here is my theme
<style name="AppTheme" parent="#Theme.AppCompat.Light.NoActionBar">
<item name="android:windowContentTransitions">true</item>
<item name="android:windowAllowEnterTransitionOverlap">true</item>
<item name="android:windowAllowReturnTransitionOverlap">true</item>
<item name="android:windowSharedElementEnterTransition">#android:transition/move</item>
<item name="android:windowSharedElementExitTransition">#android:transition/move</item>
but nothing is working and there is no error. What am I missing?
Replacing ActionBar title by custom image not working
You could try using Toolbar to implement this feature :
The Toolbar is an action bar component that provides more flexibility than the default action bar.
Create a Custom Theme
Open the Resources/values/styles.xml, replace its contents with the following XML :
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<style name="MyTheme" parent="#android:style/Theme.Material.Light.DarkActionBar">
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:colorPrimary">#5A8622</item>
</style>
</resources>
Open the Resources/values-21/styles.xml, replace its contents with the following XML :
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<!--
Base application theme for API 21+. This theme replaces
MyTheme from res/values/styles.xml on API 21+ devices.
-->
<style name="MyTheme" parent="MyTheme.Base">
<item name="android:windowContentTransitions">true</item>
<item name="android:windowAllowEnterTransitionOverlap">true</item>
<item name="android:windowAllowReturnTransitionOverlap">true</item>
<item name="android:windowSharedElementEnterTransition">#android:transition/move</item>
<item name="android:windowSharedElementExitTransition">#android:transition/move</item>
</style>
</resources>
Define a Toolbar Layout
In the Resources/layout directory, create a new file called toolbar.xml. Replace its contents with the following XML:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
Include the Toolbar Layout
Edit the layout file Resources/layout/MainView.axml and replace its contents with the following 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">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
</LinearLayout>
4. Find and Activate the Toolbar
if you want "the icon to remain", you could find the NavigationIcon ic_action_menu in this site, you can find in Clipart part.
var toolbar = FindViewById<Toolbar> (Resource.Id.toolbar);
toolbar.SetNavigationIcon(Resource.Drawable.ic_action_menu); //the icon to remain
//"replace ActionBar title(just title not icons) by an image", I think this is what you want
toolbar.SetLogo(Resource.Drawable.Icon);
SupportActionBar.Title = "";
//Toolbar will now take on default actionbar characteristics
SetSupportActionBar(toolbar);
For more information, you could read the document or this example.
Effect :
Update:
In the Resources/menu subdirectory, create a new XML file called home.xml and replace the contents with the following XML:
<?xml version="1.0" encoding="utf-8" ?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/menu_logo"
android:icon="#drawable/logo" //assume this is your image, it will adjust its size according to your toolbar's size
local:showAsAction="ifRoom"
android:title="Logo" />
<item
android:id="#+id/menu_share"
android:icon="#drawable/ic_action_social_share"
local:showAsAction="ifRoom"
android:title="Share" />
<item
android:id="#+id/menu_settings"
local:showAsAction="never"
android:title="Settings" />
</menu>
Inflate the Menus in your Activity:
// The options menu in which you place your items.
// This is the menu for the Toolbar/ActionBar to use
public override bool OnCreateOptionsMenu (IMenu menu)
{
MenuInflater.Inflate (Resource.Menu.home, menu);
return base.OnCreateOptionsMenu (menu);
}
I have two radio buttons, which looks like a normal buttons. I would like to change their background color by using radio_button.xml with selector inside.
If I use little .png image to set background then it works fine.
But I tried similar code to use just colors (integers) and it doesn't work. What I'm doing wrong?
Code with background image:
<RadioGroup
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RadioButton
android:text="LEFT"
android:id="#+id/radioLeft"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:background="#drawable/radio_button"
android:checked="true" />
<RadioButton
android:text="RIGHT"
android:id="#+id/radioRight"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:background="#drawable/radio_button" />
</RadioGroup>
radio_button.xml
<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:drawable="#drawable/gray_dot" />
<item android:state_checked="false"
android:drawable="#drawable/blue_dot" />
</selector>
button_colors.xml
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<color name="button_black">#000000</color>
<color name="button_white">#ffffff</color>
<color name="button_blue">#00afdb</color>
<color name="button_gray">#dcdcdc</color>
</resources>
I tried to replace
android:drawable="#drawable/blue_dot"
with
android:background="#color/button_blue"
but it's not working. How to fix?
I used shape xml with color to avoid background images.
radio_button.xml
<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:drawable="#drawable/rb_checked" />
<item android:state_checked="false"
android:drawable="#drawable/rb_unchecked" />
</selector>
rb_checked.xml
<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#color/button_blue" />
</shape>
Main.axml
<RadioGroup
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RadioButton
android:checked="true"
android:text="LEFT"
android:id="#+id/radioLeft"
android:button="#android:color/transparent"
android:background="#drawable/radio_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center" />
<RadioButton
android:text="RIGHT"
android:id="#+id/radioRight"
android:button="#android:color/transparent"
android:background="#drawable/radio_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center" />
</RadioGroup>
The trick that worked for me was
radioLeft.ButtonDrawable.SetTint(GetColor(Resource.Color.button_blue));
Or whatever color you wish to set, depending on the checked state, eg
radioLeft.ButtonDrawable.SetTint(GetColor(radioLeft.Checked ? Resource.Color.button_blue : Resource.Color.button_gray));