how to set width, heigh icon on toolbar on xamarin android - xamarin

Main.axml
?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!-- your content layout -->
<RelativeLayout android:layout_width="match_parent"
android:layout_height="match_parent">
<Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:titleTextColor="#android:color/background_light" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" />
</RelativeLayout>
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:id="#+id/nav_view"
app:headerLayout="#layout/drawer_header"
app:menu="#menu/navmenu" />
</android.support.v4.widget.DrawerLayout>
<item
android:id="#+id/menu_share"
android:icon="#drawable/ic_search_white_48dp"
android:showAsAction="ifRoom"
android:title="Search"
/>
</menu>
public override bool OnCreateOptionsMenu(Android.Views.IMenu menu)
{
MenuInflater.Inflate (Resource.Menu.Action_menu, menu);
return base.OnCreateOptionsMenu (menu);
}
I saw that icon's very big. if I set a icon smaller then it don't show clearly icon. So I want to set a big icon but it be set width and heigh smaller.
About width=20dp and heigh too.

The standard icon size for Toolbar items on android is 24dp as described in the Material Icons Guide and in the Icons style guidelines from Google (see clearance section).
So make sure to scale your icon to that size outside of the app or find an icon which has the correct size. Google's own Material Design Icons are a good place to find such icons scaled to the sizes you need.
Alternatively, with Vector Drawables being supported in Android M and in the AppCompat libraries, then you could look into converting your icons into Vector images instead. This will save a lot of space in the app and make them nicely scalable.

Related

Xamarin.Android add toolbar items in left and right corner

I want to add toolbar in my app as below image,
Left bar button, center located app name and right bar button.
I tried google, but not getting solution. Do any one have idea how to do it in Xamarin.Android?
Try like this
activity_mail.axml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/darker_gray">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:background="#1286d9"
android:layout_height="?attr/actionBarSize"
android:contentInsetLeft="0dp"
android:gravity="top|start"
android:contentInsetStart="0dp"
android:contentInsetRight="0dp"
android:contentInsetEnd="0dp"
android:layout_width="match_parent">
<TextView
android:layout_width="wrap_content"
android:text="Payment"
android:layout_gravity="center"
android:id="#+id/tvActionBarTitle"
android:layout_height="wrap_content" />
<ImageButton
android:id="#+id/ibNofication"
android:layout_gravity="right"
android:background="#mipmap/ic_myIcon"
android:layout_width="30dp"
android:padding="9dp"
android:layout_marginRight="6dp"
android:layout_height="30dp" />
</android.support.v7.widget.Toolbar>
</LinearLayout>
MainActivity.cs
[Activity(Label = "#string/app_name", Theme = "#style/AppTheme", MainLauncher = true)]
public class MainActivity : AppCompatActivity
{
Android.Support.V7.Widget.Toolbar _toolbar;
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
SetContentView(Resource.Layout.activity_main);
_toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
SetSupportActionBar(_toolbar);
SupportActionBar.SetDisplayHomeAsUpEnabled(true);
SupportActionBar.SetDisplayShowTitleEnabled(false);
SupportActionBar.SetHomeButtonEnabled(true);
//Below you can set you preferred icon
SupportActionBar.SetHomeAsUpIndicator(Resource.Drawable.ic_myIcon);
_toolbar.SetPadding(0, 0, 0, 0);
_toolbar.SetPadding(0, 0, 0, 0);
_toolbar.SetContentInsetsAbsolute(0, 0);
}
}
style.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat">
<!-- Customize your theme here. -->
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
</resources>
Icons, margins, styles all you need to set according your requirements. If facing issues update your nugets packages.
output screenshot
Hope it help you.
First of all, for the Hamburger menu, you will have to check this
Once your Hamburger Menu is ready to check your main page and in your main page you will have a support toolbar in that support toolbar which pretty much works like your ViewGroup do something like :
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#33B86C"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways" >
<ImageView
android:layout_width="wrap_content"
android:contentDescription="#string/logo"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/ic_launcher"/>
</android.support.v7.widget.Toolbar>
Also check here to see how to work with a toolbar in xamarin android which includes adding toolbar items which you see on the top right of your image.
Goodluck!
Revert in case of queries.

Android Studio,ImageView,shows different size image in different size's mobile

created an android app which loads pics in ImageView randomly from drawable folder by .setImageResource,but the main problem is image it loads shows correct size image but in different size mobile shows different size image,also in some mobile it covers the screen which hides the buttons etc,
its works fine in my Redmi 2 Prime which is 4.7nch,resolution:720*1280,
but in Samsung Galaxy Grand Neo its hides the entire screen with that image i.e screen size: 5.01 inch
resolution: 480*800
Samsung grand neo screenshot  
Redmi 2 screenshot
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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:background="#4e2f22"
tools:context="com.wordpress.dragontelnetsite.mindreader.SecondActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#drawable/backg">
<Button
android:layout_width="140dp"
android:layout_height="wrap_content"
android:text="Next"
android:id="#+id/button2"
android:onClick="clickedOnPlay2"
android:background="#4cb076"
android:layout_marginBottom="60dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
<ImageView
android:layout_width="310dp"
android:layout_height="350dp"
android:id="#+id/chart"
android:scaleType="fitXY"
android:src="#drawable/c1"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<com.google.android.gms.ads.AdView
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
ads:adSize="BANNER"
ads:adUnitId="ca-app-pub-3940256099942544/6300978111">
</com.google.android.gms.ads.AdView>

Xamarin Bottom Bar Gets Lost

I have a listview, a toolbar and a bottom nav bar. Toolbar is aligned to top while nav bar is aligned to bottom. Its working well unless i add items to listview. After adding 5 items, the bottom bar disappears. Cant i align the bot bar like the toolbar so it just stays still ?
Activity's axml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<ListView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/listv_sepet" />
<include
android:id="#+id/toolbar_bottom"
layout="#layout/toolbar_bot"
android:layout_alignParentBottom="true"/>
</LinearLayout>
</RelativeLayout>
Bottom Toolbar axml
<?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_bottom"
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"
/>
Thanks in the advance.
The problem is that you wrap the height of the ListView and don't tell it to be above the bottom Toolbar.
This can easily be fixed by:
un-nesting your layout as it is not really necessary in this case to do any nesting.
tell the ListView to be below the top Toolbar and above the bottom Toolbar
So something like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar"
android:layout_alignParentTop="true"
layout="#layout/toolbar" />
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar"
android:layout_above="#+id/toolbar_bottom"
android:id="#+id/listv_sepet" />
<include
android:id="#+id/toolbar_bottom"
layout="#layout/toolbar_bot"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
That should fix it.
Rather than using an include in your layout you can set the footer (and header) in code when binding to the listview by using the AddHeaderView and AddFooterView methods
For example:
listView = view.FindViewById<ListView>(Resource.Id.mylistView);
View headerView = View.Inflate(Activity, Resource.Layout.ListHeader, null);
listView.AddHeaderView(headerView);

How to make a nice Main Menu Page

I want to make a nice Main Menu Page like the home page of Android Device in which the button images are layout in rows; each row in a page say contain 4 imageButtons.
I used the below layout, but the imageViews in each rows are not evenly size. I have these questions:
I want to have 3 imageView in a row.
How to detect What is the Width and Height of a screen, so divide it for 3 imageView? say, base on galaxy note.
How to do spacing among the 3 imageViews? Below each ImageView there is a textView to indicate the name or function of the ImageView.
Should I allow rotate? if rotate , how to enable scrolling when rotate to horizontal?
Thanks
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/myLinearLayout"
android:minWidth="25px"
android:minHeight="25px">
<LinearLayout
android:orientation="horizontal"
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/poiImageView"
android:id="#+id/linearLayout1"
android:layout_centerVertical="true">
<ImageView
android:id="#+id/Thumbnail1"
android:layout_width="70dp"
android:layout_height="70dp"
android:paddingLeft="10dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:src="#drawable/Icon" />
<ImageView
android:id="#+id/Thumbnail1a"
android:layout_width="70dp"
android:layout_height="70dp"
android:paddingLeft="10dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:src="#drawable/Icon" />
<ImageView
android:id="#+id/Thumbnail1b"
android:layout_width="70dp"
android:layout_height="70dp"
android:paddingLeft="10dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:src="#drawable/Icon" />
</LinearLayout>
<LinearLayout>
2nd row
</LinearLayout>
<LinearLayout>
3rd row
</LinearLayout>
</LinearLayout>
I believe you're looking for GridView. GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid. It handles scrolling by itself when content grows. Additionally you will get additional features packed such as memory handling, inbuilt MVC using adapter pattern etc.
A simple GridView looks as follows;
<GridView
android:id="#+id/gridView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:columnWidth="100dp"
android:drawSelectorOnTop="true"
android:gravity="center"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:verticalSpacing="5dp"
android:focusable="true"
android:clickable="true"/>
You can checkout some complete GridView implementation from the following links.
Android GridView Example- Building Image Gallery in android
Download and Display Image in Android GridView

How to add text scrim in android

Objective :
Overlay a text header, on top of an image. Something like this:
Current Implementation : I have a CardView, which consists of an ImageView and a TextView. I can put the text on top of the image, but I can't get that background scrim.
Problem : I need that background scrim, because without it the text is illegible on top of the image.
Stack : Android L
Layout XML :
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/event_cardView"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_margin="3dp"
card_view:cardCornerRadius="10dp"
card_view:cardElevation="5dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<ImageView
android:id="#+id/eventImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="eventImage"
android:src="#drawable/sample"
android:layout_alignParentTop="true" />
<TextView
android:id="#+id/eventName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="2dip"
android:textColor="#000000"
android:textSize="15sp"
android:maxLines="5"
android:gravity="center"
android:layout_alignParentBottom="true"
android:text="Event Name" />
</RelativeLayout>
</android.support.v7.widget.CardView>
Would appreciate any pointers on some help with this.
Create a shape drawable resource that only include the XML namespace as an attribute for the shape. Depending on whether you want a solid or gradient scrim, will change the content of the shape element.
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<!-- The content of the shape will go here. -->
</shape>
If you want a solid scrim, add a solid element to your shape element with the attribute android:color set to some color with alpha.
<solid
android:color="#88000000"/>
If you want a gradient scrim, add a gradient element with the following attributes from the android namespace: angle, centerY, startColor, centerColor, endColor, and type. If you want to follow the Material Design guidelines, like in the image you provided, the gradient element should have the following values:
<gradient
android:angle="90"
android:centerY="0.3"
android:startColor="#CC000000"
android:centerColor="#66000000"
android:endColor="#00000000"
android:type="linear"/>
It is a good idea to have these values extracted and placed in the relevant resource files, like dimens.xml and colors.xml, so that the scrim can change depending on the configuration of the device.
Once you have the scrim saved as a shape drawable resource, you can add it to the background of your TextView using the android:background attribute. Using the TextView that you provided and assuming that you named the scrim file scrim.xml, the modification would be the following:
<TextView
android:id="#+id/eventName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="2dip"
android:textColor="#000000"
android:textSize="15sp"
android:maxLines="5"
android:gravity="center"
android:layout_alignParentBottom="true"
android:text="Event Name"
android:background="#drawable/scrim"/>

Resources