I want to put a LinearLayout inside a View (which represents a rectangle), to put more elements inside this Layout. Unfortunately, this doesn't work somehow, it just doesn't recognize the LinearLayout nor other elements when I put them inside the View.
I use Xamarin.Android (only Android, not iOS) in Visual Studio Community 2019.
Here is the XML Code. The #drawable/rounded is just an .xml file which makes the view a rectangle with round corners.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff74a8a7"
android:orientation="vertical">
<!--Header-->
<TextView
android:text="MyTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="40sp"
android:gravity="center"
android:id="#+id/txtTitle"
android:textColor="#ff2f5858"
android:textStyle="bold" />
<!--View-->
<View
android:layout_width="300dp"
android:layout_height="450dp"
android:layout_marginTop="50dp"
android:layout_gravity="center"
android:background="#drawable/rounded"
android:backgroundTint="#ff38817a" >
<!--Here should the next LinearLayout go, e.g.: (does not work!-->
<LinearLayout>
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--Elements inside this LinearLayout, e.g. a text and a button-->
</LinearLayout>
</View>
</LinearLayout>
Help would be appreciated on how to solve this problem!
This part of your layout won't work:
<View
android:layout_width="300dp"
android:layout_height="450dp"
android:layout_marginTop="50dp"
android:layout_gravity="center"
android:background="#drawable/rounded"
android:backgroundTint="#ff38817a" >
<!--Here should the next LinearLayout go, e.g.: (does not work!-->
<LinearLayout>
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--Elements inside this LinearLayout, e.g. a text and a button-->
</LinearLayout>
</View>
A View is not a ViewGroup and can per design not have any children. You could use FrameLayout, LinearLayout, RelativeLayout, ConstraintLayout or any other layout to host multiple children.
You could just remove the outer view and you should be able to see your LinearLayout.
Related
I am trying to replace the action bar in a Xamarin android project with a custom toolbar. I want my toolbar to display a logo on the left, and then my menu icons on the right.
I followed this tutorial from Microsoft closely Replacing the Action Bar
But my menu icons no longer display (when I was using ActionBar, my menu icons displayed just fine). There is however a 3 dot overflow icon, but when clicking it nothing happens. Here is a screenshot of the built app with my custom toolbar:
I have tried:
I thought my image view was blocking the menu icons, so I removed it
but my menu icons do not show.
Changing what MainActivty extends, I have tried Activity, and AppCompactActivity
I thought my OnCreateOptionsMenu may not be getting called, So I tried: toolbar.InflateMenu(Resource.Menu.actionbar);
I am stuck and not sure what is wrong here, I would appreciate any help!
Here is my Code:
Toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<Toolbar xmlns:android ="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?android:attr/actionBarSize"
android:background="#4F703A"
android:theme="#android:style/ThemeOverlay.Material.Dark.ActionBar">
<RelativeLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="?android:attr/actionBarSize"
android:src="#drawable/logo_app"/>
</RelativeLayout>
</Toolbar>
MainActivity.cs (omitted some irrelevant code)
public class MainActivity : Activity
{
[System.Obsolete]
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
Xamarin.Essentials.Platform.Init(this, savedInstanceState);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.activity_main);
//Activate customer toolbar
var toolbar = FindViewById<Toolbar>(Resource.Id.toolbar);
SetActionBar(toolbar);
ActionBar.Title = "";
}
My menu items (actionbar.xml)
<?xml version="1.0" encoding="utf-8" ?>
<!--For all properties see: https://aka.ms/android-menu-resource-->
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="#+id/action_search"
app:showAsAction="always"
android:text="Search"
android:icon="#android:drawable/ic_menu_search"/>
<item android:id="#+id/action_addnew"
app:showAsAction="always"
android:text="Search"
android:icon="#android:drawable/ic_menu_add"/>
</menu>
style.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>
activity_main.xml
<FrameLayout 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/frameLayoutParent"
android:background="#4F703A">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"/>
<android.support.v4.widget.SwipeRefreshLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:fillViewport="true"
android:id="#+id/swipeLayout"
android:paddingTop="?android:attr/actionBarSize">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/headerLinearLayout">
<TextView
android:text="Thumbnail"
android:id="#+id/headerThumb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".01"
android:gravity="center_horizontal"
android:textSize="16sp"/>
<TextView
android:text="Address Line"
android:id="#+id/headerAddressLine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".01"
android:gravity="center_horizontal"
android:textSize="16sp"/>
<TextView
android:text="City"
android:id="#+id/headerCity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".01"
android:gravity="center_horizontal"
android:textSize="16sp"/>
<TextView
android:text="State"
android:id="#+id/headerState"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".01"
android:gravity="center_horizontal"
android:textSize="16sp"/>
<TextView
android:text="Zip Code"
android:id="#+id/headerZipCode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".01"
android:gravity="center_horizontal"
android:textSize="16sp"/>
</LinearLayout>
<ListView
android:paddingTop="5dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/myListView"/>
</LinearLayout>
</android.support.v4.widget.SwipeRefreshLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/editSearch"
android:hint="Search"
android:textColor="#000"
android:editable="true"
android:paddingTop="?android:attr/actionBarSize"/>
</FrameLayout>
A TitleView Sounds like the best option for what you're trying to do. Instead of those long processes you could just do this
<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal">
<Image Source="Logo.png"/>
<label Text="Company Name"/>
</StackLayout>
</NavigationPage.TitleView>
My Issue was in my menu xml file, xmlns:app for the showAsAction attributes
app:showAsAction="always"
is needed for the v7 support toolbar, but is not used for the new lollipop toolbar. So it should look like this:
android:showAsAction="ifRoom"
After I fixed this, I couldn't click my menu items. I figured out my layout was displaying over top, so I needed to add
android:layout_marginTop="?android:attr/actionBarSize"
To the layout below my custom toolbar!
I made a Layout File and added different kinds of views and adjusted them using Layout - ViewGroup and Layout - RelativeLayout properties. The images and icons that I'm using were made for mdpi by a graphic designer. The runtime display doesn't match the one in the desinger mode. Since I am positioning the UI elements based on the element above it, the resulting elements shift downwards and some aren't even visible on the screen.
I tried aligning using Layout - RelativeLayout both with the element above and below the current element and then adjust margin using Layout - ViewGroup properties but I couldn't do the later because the element got stretched even though I set Layout Height and Layout Width to wrap_content.
Here's the code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="25px"
android:minHeight="25px"
android:id="#+id/imageViewLoginBG"
android:src="#drawable/loginbg"
android:scaleType="fitXY" />
<ImageView
android:src="#drawable/loginlogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageViewLoginLogo"
android:adjustViewBounds="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="75dp" />
<EditText
android:inputType="textEmailAddress"
android:layout_height="wrap_content"
android:id="#+id/editTextLoginEmail"
android:hint="Email"
android:layout_below="#+id/imageViewLoginLogo"
android:layout_centerHorizontal="true"
android:layout_marginTop="80dp"
android:layout_marginRight="0.0dp"
android:layout_width="300.0dp"
android:textSize="15sp" />
<EditText
android:inputType="textPassword"
android:layout_width="300.0dp"
android:layout_height="wrap_content"
android:id="#+id/editTextLoginPass"
android:hint="Password"
android:textSize="15sp"
android:layout_centerHorizontal="true"
android:layout_below="#+id/editTextLoginEmail"
android:layout_marginTop="15.0dp" />
<ImageButton
android:src="#drawable/loginbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageButtonLogin"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:layout_centerHorizontal="true"
android:layout_below="#+id/editTextLoginPass"
android:layout_marginTop="45.0dp" />
<TextView
android:text="Don't have an account? Register Now"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textViewLoginReg"
android:layout_centerHorizontal="true"
android:layout_alignBottom="#+id/imageViewLoginBG"
android:layout_marginBottom="10.0dp"
android:textColor="#fffafafa"
android:textSize="12sp"/>
<TextView
android:text="Forgot Password?"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textViewLoginFrgPass"
android:layout_centerHorizontal="true"
android:layout_marginBottom="0.0dp"
android:textColor="#fffafafa"
android:textSize="12sp"
android:layout_below="#+id/imageButtonLogin"
android:layout_marginTop="10.0dp" />
</RelativeLayout>
This is how the layout looks in the designer:
https://ibb.co/YLn3X4g
This is what it looks like in an emulator:
https://ibb.co/4wyDB9D
Note: Even the action bar gets displayed!?
I am working whit Xamarin pcl. Now has the Android project an auto rendered layout for Toolbar and Tabbar. I am customizing the toolbar.axml to have a icon in the center of it. Everything is going wel untill a page got a back button (navigation page attribute I guess) end the icon shifts to the right because its not anymore the only one in the toolbar. Is there an easy fix to give the icon a fixed position? The back-button, I think, is not declared in an axml but generated through the function of Xamarin.Forms new NavigationPage().
My axml looks now like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#72B1A2"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
>
<ImageView
android:id="#id/image"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:layout_gravity="center"
android:baselineAlignBottom="true"
android:scaleType="fitCenter"
android:src="#drawable/ictzaak_FC"
/>
</android.support.v7.widget.Toolbar>
I already look into the use of android:layout_gravity="center" and android:layout_gravity="center_horizontal" and android:center_horizontal or something but it didn't fix it
How it looks:
Startup screen without the return button
With return button and out of center
You can try to nest the Image in a RelativeLayout. And in this you can center your Image. Like this:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#72B1A2"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#id/image"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:layout_centerInParent="true"
android:baselineAlignBottom="true"
android:scaleType="fitCenter"
android:src="#drawable/ictzaak_FC"
/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
Image set in center using LinearLayout.
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:gravity="center"
android:layout_height="match_parent">
<ImageView
android:id="#id/image"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:padding="5dp"
android:scaleType="fitCenter"
android:src="#drawable/ic_img"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
I'm trying to have one ImageView overlap another, but I want the background ImageView to take up all the space available in its container.
This is what I have for the ImageView area:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/linearLayout1"
android:gravity="center">
<RelativeLayout
android:id="#+id/imagelayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight=".75"
android:layout_gravity="center">
<ImageView
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:layout_centerInParent="true"
android:id="#+id/imageView1" />
<ImageView
android:id="#+id/imageView2"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/img"
android:background="#android:color/transparent" />
<VideoView
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight=".75"
android:id="#+id/videoView1"
android:adjustViewBounds="true"
android:visibility="gone" />
</RelativeLayout>
And this is the output:
I want the camera preview (checkered area) to fill up the entire available space behind the person icon.
What do I need to change?
Thanks
layout_weight inside RelativeLayout doesn't work so the VideoView
android:layout_weight=".75"
doesn't have effect.
fill_parent is deprecated, and it's the same as match_parent.
If you want ImageView takes all space you must use on the ImageView
android:scaleType="fitXY"
I'm using a RelativeLayout to display my UI.
I want to have a title on the top left and I want an image on the top right.
Both items need to have a small spacing above and to the side (either left or right).
For my title, this works great, but I can't seem to be able to both align my image to the right and also set a right margin.
This is the axml code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/dialogContainer"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFF"
android:paddingBottom="25dip">
<TextView
android:id="#+id/dialogTitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:layout_marginTop="10dip"
android:textColor="#158849"
android:textSize="25dip" />
<ImageView
android:id="#+id/dialogLoading"
android:layout_width="26dip"
android:layout_height="26dip"
android:background="#drawable/LoadingAnimation"
android:layout_marginTop="10dip"
android:layout_alignParentRight="true"
android:layout_marginRight="25dip" /> <!--this doesn't work, there is no spacing-->
<TextView
android:id="#+id/dialogMessage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000"
android:textSize="18dip"
android:layout_marginTop="15dp"
android:layout_marginLeft="12dip"
android:layout_marginRight="15dip"
android:layout_below="#+id/dialogTitle" />
</RelativeLayout>
Other things that might be of help:
this project should be buildable against Android 2.3
I'm not directly assigning this layout to an activity.
Instead, this is used as a view for a custom dialog.
use the relative layout's layout_toLeftOf propperty:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/dialogContainer"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFF"
android:paddingBottom="25dip">
<TextView
android:id="#+id/dialogTitle"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:layout_marginTop="10dip"
android:textColor="#158849"
android:textSize="25dip"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/dialogTitle"
android:layout_width="wrap_content" />
<ImageView
android:id="#+id/dialogTitle"
android:layout_width="26dip"
android:layout_height="26dip"
android:background="#drawable/LoadingAnimation"
android:layout_alignParentRight="true"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:layout_alignParentTop="true" />
<!--this doesn't work, there is no spacing-->
</RelativeLayout>
updated my answer