CODEWITHSUNDEEP
androidxamarinxamarin.formsxamarin.android
cjpartin
cjpartin

Reputation: 117

Xamarin Android Emulator Weird UI

I'm learning Xamarin and following a tutorial from Code with Mosh but I've run into a problem that may have to do with the age of the tutorial vs changes made to Xamarin/Android UI since its release.

On this part of the tutorial I'm simply having a stacklayout that is horizontally oriented inside of a regular stack layout, but the buttons in the horizontal one are extra large for some reason.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HelloWorld.StackExercise2Page">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness" iOS="0, 20, 0, 0">
        </OnPlatform>
    </ContentPage.Padding>
    <StackLayout>
        <StackLayout Padding="10">
            <Label Text="generic username" />
        </StackLayout>
        <Image Source="http://lorempixel.com/1920/1080/nature/3/" />
        <StackLayout Orientation="Horizontal" Spacing="20"  Padding="10, 0">
            <Button Text="Like" />
            <Button Text="Comment" />
            <Button Text="Share" />
        </StackLayout>
        <StackLayout Padding="10">
            <BoxView HeightRequest="1" Color="#f0f0f0" />
            <Label Text="700 likes" FontAttributes="Bold" />
            <Label TextColor="#444" Text="This is a shot." />
        </StackLayout>
    </StackLayout>
</ContentPage>

This is my code that I have, and it should produce this one (correct)

But instead it's producing this: enter image description here

And I have no idea why. Any guidance appreciated.

Upvotes: 0

Views: 139

Answers (1)

Lucas Zhang
Lucas Zhang

Reputation: 18861

If you do want the button in Android to look like they do in iOS. You can use Custom Renderer to set the property in android.

in Forms

create a button 

using System;
using Xamarin.Forms;
namespace app1
{
  public class MyButton:Button
  {
    public MyButton()
    {

    }
  }
}

in xaml

<ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness" iOS="0, 20, 0, 0">
    </OnPlatform>
</ContentPage.Padding>
<StackLayout>
    <StackLayout Padding="10">
        <Label Text="generic username" />
    </StackLayout>
    <Image Source="http://lorempixel.com/1920/1080/nature/3/" />
    <StackLayout Orientation="Horizontal" HorizontalOptions="Start" Spacing="20"  Padding="10, 0">

        <local:MyButton Text="Like" />
        <local:MyButton Text="Comment" />
        <local:MyButton Text="Share" />

    </StackLayout>
    <StackLayout Padding="10">
        <BoxView HeightRequest="1" Color="#f0f0f0" />
        <Label Text="700 likes" FontAttributes="Bold" />
        <Label TextColor="#444" Text="This is a shot." />
    </StackLayout>
</StackLayout>

in Android Project

create a new layout file in Resources->Layouts (for example ButtonRenderer.axml)

<?xml version="1.0" encoding="utf-8"?> 

<Button 
 xmlns:android="http://schemas.android.com/apk/res/android"  
 android:orientation="vertical"     
 android:layout_width="wrap_content"     
 android:layout_height="wrap_content"     
 android:minHeight="0dp"     
 android:minWidth="0dp"      
 android:background="@android:color/transparent"     >

</Button>

And in CustomRenderer 

using app1;
using app1.Droid;
using Android.Content;
using Android.Graphics;
using Android.Widget;
using Android.Views;

[assembly:ExportRenderer(typeof(MyButton),typeof(MyButtonRenderer))]
namespace app1.Droid
{
  public class MyButtonRenderer:ButtonRenderer
  {
    readonly Android.Widget.Button button;

    public MyButtonRenderer(Context context) : base(context) 
    {
      button = (Android.Widget.Button)LayoutInflater.From(context).Inflate(Resource.Layout.ButtonRenderer, null);
      button.SetTextColor(Android.Graphics.Color.Blue);
    }

    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e)
    {
        base.OnElementChanged(e);

        if (Control != null) { SetNativeControl(button); }
    }

  }
}

You can set the style of button in axml file as you want.

Upvotes: 1

Related Questions