Dynamically load xml control and share UI control - xamarin

I am new to xamarin. Is it possible to load a shared UI control in an xml file, if yes, how? I am open to better idea.
Below is a static loading via include, where parent.axml statically load child.xml.
<include
android:id="#+id/child"
layout="#layout/child"
android:layout_below="#id/toolbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
parent.axml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<include
android:id="#+id/child"
layout="#layout/child"
android:layout_below="#id/toolbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/parent_layout"
android:layout_below="#id/child">
<TextView
android:id="#+id/parent_text"
android:layout_margin="16dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Click to go to the moon!"
android:textAppearance="?android:attr/textAppearanceSmall"
android:singleLine="true" />
</LinearLayout>
</LinearLayout>
Child.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/child_text"
android:layout_margin="16dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="You made it!"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
The idea is that it can achieve share of UI controls. In this case, parent.axml loads child.xml into its place holder based on condition.

You can use LayoutInflater to inflate layouts and auto-attach them to the parent (or not):
var linearLayout = LayoutInflater.Inflate(Resource.Layout.Child, parent, true);
var textView = linearLayout.FindViewById<TextView>(Resource.Id.child_text);
textView.Text = "Inflated and attached to Parent";
Also depending upon your use-case, using a self-contained Fragment and adding that to your "parent" might be better a better solution.

Related

Show BottomNavigationView when stop scrolling

I use attribute app:layout_behavior="#string/hide_bottom_view_on_scroll_behavior" to hide BottomNavigationView when I'm scrolling down. It works. When I scroll up, BNV is showed again. Also works. But when I finished scrolling down (BNV is hidden) I want to see BNV without scrolling up. Is it possible?
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#2AB670"
tools:context=".presentation.MainActivity">
<androidx.fragment.app.FragmentContainerView
android:id="#+id/fragment_container"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:layout_constraintBottom_toTopOf="#id/bottom_navigation_view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="#navigation/app_navigation" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green_01"
app:itemBackground="#drawable/bottom_navigation_selector"
app:itemIconTint="#color/white"
app:itemTextAppearanceActive="#style/ItemTextAppearanceActive"
app:itemTextColor="#color/white"
app:labelVisibilityMode="labeled"
app:layout_behavior="#string/hide_bottom_view_on_scroll_behavior"
android:layout_gravity="bottom"
app:menu="#menu/bottom_navigation_menu" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Xamarin - How can i remove extra space at the top of dialogfragment

I have created a dialog fragment in Xamarin. My only issue is that this fragment shows a grey part on it. And i can't figure out what causes the grey part to appear. Do you guys perhaps know the possible cause ?
I'm using this code to display this dialog :
<?xml version="1.0" encoding="utf-8"?>
<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="#ffffff"
android:focusableInTouchMode="true">
<View
android:id="#+id/makedialogfullscreenChooseSoundTrack"
android:layout_width="wrap_content"
android:layout_height="1dp"
android:layout_gravity="fill_horizontal"
/>
<RelativeLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#e1effa" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Choose Sound Track"
android:textSize="20dp"
android:textColor="#673ab7"
android:padding="15dp"
android:layout_marginRight="25dp"
/>
<ImageView
android:id="#+id/imgCloseSoundDialog"
android:layout_width="33dp"
android:layout_height="33dp"
android:src="#drawable/close_icon"
android:layout_marginBottom="15.5dp"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:layout_centerVertical="true" />
</RelativeLayout>
<LinearLayout
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="wrap_content" >
<GridView
android:id="#+id/gvSoundFiles"
android:layout_width="fill_parent"
android:layout_height="400dp"
android:gravity="center"
android:verticalSpacing="5dp"
android:drawSelectorOnTop="true"
android:stretchMode="columnWidth" />
</LinearLayout>
</LinearLayout>
I solved the issue by adding this line in OnCreateView(..) method :
Dialog.Window.RequestFeature(WindowFeatures.NoTitle);
by default the DialogFragment comes with a theme with a title bar, to solve this put the code below in the constructor
SetStyle(DialogFragmentStyle.NoTitle, 0);

Toolbar doesn't hide completely on scroll

I try to hide the toolbar during scroll but then this happens! What do I have to do?
This is the layout code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/SimpleTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/SimpleTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin" />
</android.support.design.widget.CoordinatorLayout>
The view container has following behavior:
app:layout_behavior="#string/appbar_scrolling_view_behavior"
Screenshots:
Before scroll
After scroll
There is something with 'fitsSystemWindows'
Make it false in coordinatorLayout and true in AppBarLayout

Why my RadioButton (in one RadionGroup)can be selected at the same time?

Here is my layout xml file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="男" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="女" />
</RadioGroup>
</LinearLayout>
the result is that both radiobutton have been checked
how to fix it?
and if I change the LinearLayout to TableLayout,waht other questions should I notice?
I finally get it after many tests!!
The conclusion is: In a RadioGroup,if a RadioButton is set checked="true",you
must give the RadioButton an id (android:id="#+id/name"); If not, the status will not change to disselected with the "checked radiobutton" when you select other radiobutton.
So,don't forget add an id to the radiobutton!
but I don't know how the source code works?

Android L activity header image with transparent toolbar and collapse on-scroll

I have a new KitKat App and I'm trying to reproduce in my activity the layout that you can find in the new Play Store App Activity or Google+ Profile Activity.
What I am trying to achieve is to have a transparent toolbar and an "activity-header" image that will collapse on scroll:
Is there any new appcompat widget or a pattern to follow in order to achieve this result?
You can probably find https://github.com/ManuelPeinado/FadingActionBar useful.
Also consult https://plus.google.com/106514622630861903655/posts/Y5iBqpzP4T9 to use the newish Toolbar.
You would want to use CollapsingToolbarLayout.
Android Design Support Library has everything you need.
Just copy the following xml file
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="false"
tools:context="com.example.YourActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<!--android:theme="#style/AppTheme.AppBarOverlay"-->
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="250dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/my_image"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_favorite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/app_bar_layout"
app:layout_anchorGravity="bottom|right|end"
android:src="#drawable/ic_icon2"
android:layout_marginRight="16dp"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_icon" />
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="4dp"
android:layout_margin="4dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="8dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bea"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Abs"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/black87"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Add translucent style of the status bar
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>
<style name="AppTheme.NoStatusBar" parent="AppTheme.NoActionBar">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>
And modify your manifest
<activity
android:name=".YourActivity"
android:label="#string/title"
android:theme="#style/AppTheme.NoStatusBar">
</activity>
There is a example code written by roman nurik ,you can learn from there https://github.com/google/iosched
It helped me. Pay attention on ImageView:
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/movie_cover"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay"
/>
</android.support.design.widget.CollapsingToolbarLayout>

Resources