Develop Reference

Button alignment in xamarin android

I am having the view pager and page indicator as following. I am trying to keep buttons above the view pager on either sides of it. But i am not able to get those buttons on left and right sides. Can some one please help me to keep those buttons on at proper positions.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="25px"
android:minHeight="25px">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
>
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp" />
<android.support.design.widget.TabLayout
android:id="#+id/dots"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="10dp"
local:tabBackground="#drawable/dot_selector"
local:tabGravity="center"
local:tabIndicatorHeight="0dp"
local:tabPaddingStart="7dp"
local:tabPaddingEnd="7dp" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button
android:id="#+id/skipBtn"
android:text="Skip"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0" />
<Button
android:id="#+id/nextBtn"
android:text="Next"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
While running this codes the buttons are not appearing.

In your linear layout in both of your buttons use android:layout_weight="1"
This will basically specify the size ratio between the two buttons in the layout as equal.
see here for more layout weight styling details: https://blog.stylingandroid.com/layout-weights-part-2/

How to resize child of RelativeLayout when making another child visible?

When I call view.setVisibility(View.VISIBLE) on the RelativeLayout #+id/saveCancelBar below, it covers part of the FrameLayout. I would like the FrameLayout to shrink to fit the RelativeLayout. If I put everything in a LinearLayout rather than a RelativeLayout, showing the SaveCancelBar simply shifts everything upwards and moves part of the Toolbar off screen
<RelativeLayout
android:id="#+id/content_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center|bottom">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:elevation="4dp"
android:layout_alignParentTop="true"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<LinearLayout
android:id="#+id/content_view_panes"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar"
android:orientation="horizontal"
android:gravity="bottom">
<WebView
android:id="#+id/mainWebView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone" />
<FrameLayout
android:id="#+id/listContainer"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#color/colorPrimaryDark"
android:layout_below="#+id/content_view_panes"
android:visibility="gone"
android:id="#+id/saveCancelBar">
<Button
android:id="#+id/editorCancelButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="#string/editor_cancel"
android:textColor="#color/white"
android:layout_alignParentLeft="true"
android:background="#color/colorPrimaryDark"/>
<Button
android:id="#+id/editorSaveButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="#string/editor_save"
android:textColor="#color/white"
android:layout_alignParentRight="true"
android:background="#color/colorPrimaryDark"/>
</RelativeLayout>
</RelativeLayout>

You'll need to do two things.
Firstly, the FrameLayout with id listContainer will not shirk vertically because it's parent has layout_height set to match_parent. You should wrap the parent content_view_panes and the saveCancelBar in a LinearLayout with vertical orientation, and set the layout_height to 0dp, with layout_width set to 1. For a child of a LinearLayout, this tells it to fill up the remaining space. You don't need to alter the width or height of listContainer as it will resize based on it's parent.
Now when you change the visibility of saveCancelBar the content_view_panes, and thus listContainer, will have their height adjusted.
E.g.:
<RelativeLayout
android:id="#+id/content_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center|bottom">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:elevation="4dp"
android:layout_alignParentTop="true"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar"
android:orientation="vertical">
<LinearLayout
android:id="#+id/content_view_panes"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<WebView
android:id="#+id/mainWebView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone" />
<FrameLayout
android:id="#+id/listContainer"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#color/colorPrimaryDark"
android:layout_below="#+id/content_view_panes"
android:visibility="gone"
android:id="#+id/saveCancelBar">
<Button
android:id="#+id/editorCancelButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="#string/editor_cancel"
android:textColor="#color/white"
android:layout_alignParentLeft="true"
android:background="#color/colorPrimaryDark"/>
<Button
android:id="#+id/editorSaveButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="#string/editor_save"
android:textColor="#color/white"
android:layout_alignParentRight="true"
android:background="#color/colorPrimaryDark"/>
</RelativeLayout>
</LinearLayout>

How to do touch and drag slide animation

I am trying to code a audio player that streams audio from internet all is going well, but i want an animation look like this.
EDITED
This is my Activity:
My Activity Explained :P
My Layout XML:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
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="true"
tools:openDrawer="start">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
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.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="70dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<LinearLayout
android:id="#+id/newactivity"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#color/md_teal_500"
android:clickable="true"
android:elevation="5dp"
android:gravity="bottom|center"
android:orientation="vertical"
app:layout_anchor="#id/container"
app:layout_anchorGravity="bottom|right|end">
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_marginLeft="-20dp"
android:layout_marginRight="-20dp"
android:maxHeight="3dp"
android:minHeight="3dp"
android:padding="0dp"
android:progressDrawable="#drawable/seekbar"
android:thumb="#null"
/>
<RelativeLayout
android:layout_width="280dp"
android:layout_gravity="start"
android:layout_height="match_parent"
>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="false"
android:layout_alignParentTop="false"
android:layout_marginLeft="15dp"
android:layout_marginTop="10dp"
android:ellipsize="marquee"
android:fadingEdge="horizontal"
android:lines="1"
android:marqueeRepeatLimit="marquee_forever"
android:maxLines="1"
android:scrollHorizontally="true"
android:text="No Marasiya Selected"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/white"/>
<TextView
android:id="#+id/album"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/title"
android:layout_alignStart="#+id/title"
android:layout_below="#+id/title"
android:maxLines="1"
android:text="Album"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#80cbc4"/>
<TextView
android:id="#+id/duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/title"
android:layout_marginLeft="10dp"
android:layout_toEndOf="#+id/album"
android:layout_toRightOf="#+id/album"
android:text="00:00"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#80cbc4"/>
<TextView
android:id="#+id/totalSec"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/title"
android:layout_toEndOf="#+id/duration"
android:layout_toRightOf="#+id/duration"
android:text=" / 00:00"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#80cbc4"/>
</RelativeLayout>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="35dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="24dp"
android:layout_marginTop="16dp"
android:elevation="8dp"
android:src="#drawable/ic_play_button"
android:tint="#color/md_brown_700"
app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="#menu/drawer_menu"/>
</android.support.v4.widget.DrawerLayout>
I have using viewpager with fragments added to main activity. And the bottom bar is added in main xml layout itself

You can do this using AndroidSlidingUpPanel. You can get the demo code from here: https://github.com/umano/AndroidSlidingUpPanel. Simply add the following dependency to your build.gradle file to use this.
compile 'com.sothree.slidinguppanel:library:3.2.1'
After that edit the following xml for your specific use:
<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"
tools:context=".DemoActivity" >
<com.sothree.slidinguppanel.SlidingUpPanelLayout
xmlns:sothree="http://schemas.android.com/apk/res-auto"
android:id="#+id/sliding_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
sothree:umanoPanelHeight="68dp"
sothree:umanoShadowHeight="4dp"
sothree:umanoParallaxOffset="100dp"
sothree:umanoDragView="#+id/dragView"
sothree:umanoOverlay="true"
sothree:umanoScrollableView="#+id/list">
<!-- MAIN CONTENT -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
xmlns:sothree="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_toolbar"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
sothree:theme="#style/ActionBar"
android:layout_width="match_parent"/>
<TextView
android:id="#+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
android:gravity="center"
android:text="Main Content"
android:clickable="true"
android:focusable="false"
android:focusableInTouchMode="true"
android:textSize="16sp" />
</FrameLayout>
<!-- SLIDING LAYOUT -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="vertical"
android:clickable="true"
android:focusable="false"
android:id="#+id/dragView">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textSize="14sp"
android:gravity="center_vertical"
android:paddingLeft="10dp"/>
<Button
android:id="#+id/follow"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textSize="14sp"
android:gravity="center_vertical|right"
android:paddingRight="10dp"
android:paddingLeft="10dp"/>
</LinearLayout>
</LinearLayout>
</com.sothree.slidinguppanel.SlidingUpPanelLayout>
Below the main MAIN CONTENT add your viewpager. Below SLIDING LAYOUT add your linear layout
UPDATE: AppCompat v23.2 have introduced BottomSheetBehavior behavior in CoordinatorLayout.
By attaching a BottomSheetBehavior to a child View of a CoordinatorLayout (i.e., adding app:layout_behavior=”android.support.design.widget.BottomSheetBehavior”), you’ll automatically get the appropriate touch detection to transition between five state:
STATE_COLLAPSED: this collapsed state is the default and shows just a
portion of the layout along the bottom. The height can be controlled
with the app:behavior_peekHeight attribute (defaults to 0)
STATE_DRAGGING: the intermediate state while the user is directly
dragging the bottom sheet up or down
STATE_SETTLING: that brief time between when the View is released and
settling into its final position
STATE_EXPANDED: the fully expanded state of the bottom sheet, where
either the whole bottom sheet is visible (if its height is less than
the containing CoordinatorLayout) or the entire CoordinatorLayout is
filled
STATE_HIDDEN: disabled by default (and enabled with the
app:behavior_hideable attribute), enabling this allows users to swipe
down on the bottom sheet to completely hide the bottom sheet
You can get a sample app for implementing this from here: https://github.com/NikolaDespotoski/BottomSheetSample

need android layout advise

i want to create layout as attached below.
As you see i have added fixed buttons to bottom on the layout.
and now i have problem when content part has more than 9 elements.
While it is going to scroll, last elements are hiding back of the bottom buttons and not scrolling fully as below:
Please give me advise how to do it? Please notice i am not professional android developer.
I am now going to attach my xml layout files. Here you are:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="0dp"
android:popupTheme="#style/AppTheme.PopupOverlay"
android:theme="#style/ToolbarColoredBackArrow" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
style="#style/MyCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
app:tabGravity="fill" />
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</ScrollView>
<LinearLayout
android:id="#+id/ButtonsLinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#F5F5F5"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#808080" />
<LinearLayout
android:id="#+id/footer_button_icons_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#F5F5F5"
android:orientation="horizontal">
<android.support.v7.widget.AppCompatButton
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#F5F5F5"
android:drawablePadding="3dp"
android:drawableTop="#drawable/ic_xxx"
android:gravity="center|center"
android:text="#string/footer_xxx"
android:textAllCaps="false"
android:textColor="#color/xxx_gray_darker"
android:textSize="12sp" />
<android.support.v7.widget.AppCompatButton
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_margin="2dp"
android:layout_weight="1"
android:background="#drawable/borderless_button"
android:drawablePadding="3dp"
android:drawableTop="#drawable/ic_xxx"
android:gravity="center|center"
android:text="#string/footer_xxx"
android:textAllCaps="false"
android:textColor="#FFFFFF"
android:textSize="12sp" />
<android.support.v7.widget.AppCompatButton
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#F5F5F5"
android:drawablePadding="3dp"
android:drawableTop="#drawable/ic_xxx"
android:gravity="center|center"
android:text="#string/footer_xxx"
android:textAllCaps="false"
android:textColor="#color/xxx_gray_darker"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Here is a First Fragment layout xml of ViewPager
<RelativeLayout 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="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="40dp"
android:showDividers="middle"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<GridView
android:id="#+id/gridView"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:numColumns="3"
android:stretchMode="columnWidth"
android:verticalSpacing="20dp"></GridView>
</LinearLayout>

set android:layout_above in your scrollView
<ScrollView android:layout_above="#id/ButtonsLinearLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
your ScrollView should be above LinearLayout which consist Buttons.

There is no need to use ScrollView in view pager. Remove ScrollView for the ViewPager whose id is pager.

paddingBottom is what you want. Add paddingBottom to your ScrollView or any other layout which is the container of the items. The padding should be slightly greater than the height of the bottom strip.
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="48dp">

Android Toolbar width constrained by menu items

Please help! I'm completely stuck and can't find a solution. The useable width of my Toolbar is constrained by the menu items in it. Here's a screenshot. I need to have it not constrained by the menu items so my EditText can span the width of the toolbar. Here is my layout file:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:focusableInTouchMode="true"
android:orientation="vertical"
tools:context=".MainActivity"
tools:ignore="MergeRootFrame">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="250sp"
android:background="#color/primary"
android:gravity="bottom"
android:minHeight="?attr/actionBarSize">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/button_id"
android:layout_width="40sp"
android:layout_height="40sp"
android:layout_gravity="center" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/url"
android:textColor="#color/accent"
android:textSize="16sp" />
<EditText
android:id="#+id/url_text_field_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textNoSuggestions"
android:maxLines="1" />
<TextView
android:id="#+id/output_text_view_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/initial_output_text_id"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.Toolbar>
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>

Looks like content padding. Here's an existing answered question on the subject: Android API 21 Toolbar Padding
Solution seems to be app:contentStart xml attribute on the Toolbar view. I assume contentEnd exists too.