How to add Floating Action Button from the support library for CardView so that when you scroll through the ScrollView, the button has gone up along with the card?
My app
before scrolling
after scrolling
The button should go along with the card
I want to fix this
Layout
<?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="true"
>
<ScrollView
android:id="#+id/nested_scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white_vk_background_color">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/spacing_8"
android:orientation="vertical"
android:padding="#dimen/spacing_16">
<android.support.v7.widget.CardView
android:id="#+id/behavior_card_view"
style="#style/RateCardView"
app:cardBackgroundColor="#color/white"
app:cardCornerRadius="#dimen/spacing_2"
app:cardElevation="#dimen/spacing_8">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="#dimen/spacing_16"
android:orientation="vertical"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingBottom="#dimen/spacing_8">
<TextView
android:id="#+id/description_rate_usd_text_view"
style="#style/AppTextView.RateTextView"
android:text="#string/description_currency_text_view_usd"/>
<TextView
android:id="#+id/rate_usd_text_view"
style="#style/AppTextView.RateTextView"
android:layout_centerHorizontal="true"
android:layout_toRightOf="#id/description_rate_usd_text_view"
tools:text="63.99"
/>
<TextView
android:id="#+id/rate_difference_usd_text_view"
style="#style/AppTextView.DifferenceTextView"
android:layout_toRightOf="#id/rate_usd_text_view"
tools:text="+0.44"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingBottom="#dimen/spacing_8">
<TextView
android:id="#+id/description_rate_eur_text_view"
style="#style/AppTextView.RateTextView"
android:text="#string/description_currency_text_view_eur"/>
<TextView
android:id="#+id/rate_eur_text_view"
style="#style/AppTextView.RateTextView"
android:layout_centerHorizontal="true"
android:layout_toRightOf="#id/description_rate_eur_text_view"
tools:text="71.99"
/>
<TextView
android:id="#+id/rate_difference_eur_text_view"
style="#style/AppTextView.DifferenceTextView"
android:layout_toRightOf="#id/rate_eur_text_view"
tools:text="+0.15"/>
</RelativeLayout>
<TextView
android:id="#+id/rate_update_time_text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|start"
android:layout_marginBottom="#dimen/spacing_8"
android:layout_marginLeft="#dimen/spacing_16"
android:layout_marginTop="#dimen/spacing_16"
android:gravity="center"
android:textSize="#dimen/density_font_size_text_date"
tools:text="Date: 15.07.2016"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/converter_card_view"
style="#style/RateCardView"
app:cardBackgroundColor="#color/white"
app:cardCornerRadius="#dimen/spacing_2"
app:cardElevation="#dimen/spacing_8">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="#dimen/spacing_16">
<com.rengwuxian.materialedittext.MaterialEditText
android:id="#+id/converter_ruble_edit_text"
style="#style/RateEditText"
android:hint="#string/description_currency_ruble"
app:met_baseColor="#android:color/black"
app:met_bottomTextSize="#dimen/density_font_size_text_converter"
app:met_errorColor="#color/red_light"
app:met_floatingLabel="normal"
app:met_floatingLabelAlwaysShown="true"
app:met_floatingLabelTextSize="#dimen/density_font_size_text_converter"
app:met_helperText=""
app:met_primaryColor="#color/red_light"
app:met_textColorHint="#android:color/transparent"/>
<com.rengwuxian.materialedittext.MaterialEditText
android:id="#+id/converter_dollar_edit_text"
style="#style/RateEditText"
android:hint="#string/description_currency_dollar"
app:met_baseColor="#android:color/black"
app:met_bottomTextSize="#dimen/density_font_size_text_converter"
app:met_errorColor="#color/red_light"
app:met_floatingLabel="normal"
app:met_floatingLabelAlwaysShown="true"
app:met_floatingLabelTextSize="#dimen/density_font_size_text_converter"
app:met_helperText=""
app:met_primaryColor="#color/red_light"
app:met_textColorHint="#android:color/transparent"/>
<com.rengwuxian.materialedittext.MaterialEditText
android:id="#+id/converter_euro_edit_text"
style="#style/RateEditText"
android:hint="#string/description_currency_euro"
app:met_baseColor="#android:color/black"
app:met_bottomTextSize="#dimen/density_font_size_text_converter"
app:met_errorColor="#color/red_light"
app:met_floatingLabel="normal"
app:met_floatingLabelAlwaysShown="true"
app:met_floatingLabelTextSize="#dimen/density_font_size_text_converter"
app:met_helperText=""
app:met_primaryColor="#color/red_light"
app:met_textColorHint="#android:color/transparent"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</ScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/update_floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/density_spacing_size_floating_action_button"
android:layout_marginRight="#dimen/float_action_button_spacing_8"
android:src="#drawable/ic_cached_white_24dp"
app:fabSize="mini"
app:layout_anchor="#id/behavior_card_view"
app:pressedTranslationZ="6dp"
app:layout_anchorGravity="end|right|center"
/>
</android.support.design.widget.CoordinatorLayout>
Instead of anchoring to behavior_card_view, try anchoring it to something inside behavior_card_view. Ideally, anchor to the bottom of the USD textview. This should prevent the FAB from sliding down.
I would actually create a invisible layout which I can use to anchor but it doesn't affect the UI otherwise.
I can't replicate the issue you are having but the following works as you want:
<RelativeLayout
android:id="#+id/rl1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="10dp"
android:paddingRight="10dp">
<TextView
android:id="#+id/tv1"
android:layout_width="match_parent"
android:layout_height="100dp"
android:paddingLeft="12dp"
android:text="Setting"
android:focusable="true"
android:focusableInTouchMode="true" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:src="#drawable/ic_add"
app:fabSize="mini"
app:pressedTranslationZ="6dp"
app:layout_anchorGravity="end|right|center"
app:layout_anchor="#id/tv1" />
... a lot of elements here ...
</RelativeLayout>
This RelativeLayout is the only element inside my ScrollView element.
Related
I need windowSoftInputMode= adjustRezise for my layout so that my buttons go up with the keyboard. BUT I don't want my BottomNagivationView to be affected by this.
How can I solve such?
My BottomNavigationView comes from MainActivity.xml which is:
<RelativeLayout
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"
tools:context=".MainActivity">
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_navigation"></FrameLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
app:menu="#menu/bottom_menu"/>
</RelativeLayout>
My manifest has android:windowSoftInputMode="adjustPan" but I adjust it by code when I open the fragment with:
getActivity().getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
Here are some pictures so you could understand what I mean: https://imgur.com/a/vjePxI6
So what I would like to know is how I could set the BottomNavigationView to do nothing on keyboard opening while I'd like my buttons to be affected by :
getActivity().getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
In my case problem solved by just adding following line in manifest file.
android:windowSoftInputMode="adjustResize|adjustPan"
add android:windowSoftInputMode="adjustPan" inside your activity tag into your manifest file.
then go to your activity and change the parent layout to RelativeLayout, then create your FrameLayout which holds your fragments inside your relative layout which is your parent layout. Then add your second layout which is LinearLayout that holds the bottomNavigationView and make its Height and width match_parent but below the FrameLayout.
Below is the example of the main activity layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:orientation="vertical"
tools:context=".MainActivity">
//FrameLayout which holds all your fragments
<FrameLayout
android:id="#+id/fragments_container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</FrameLayout>
//BottomNavigationView Container
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="bottom"
android:layout_below="#id/fragments_container">
//BottomMenus
<com.google.android.material.bottomnavigation.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="#+id/bottom_navigation"
android:background="#drawable/rectangle_4_dash"
android:layout_alignParentBottom="true">
//Container of Menus
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="5">
//BottomMenu One
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center_vertical">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center"
android:src="#drawable/home_icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Home" />
</LinearLayout>
//BottomMenu Two
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="vertical">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center"
android:src="#drawable/contact_icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Contact" />
</LinearLayout>
//BottomMenu Three
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center_vertical">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center"
android:src="#drawable/about_icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="About"
android:layout_gravity="center"/>
</LinearLayout>
//BottomMenu Four
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center_vertical">
<ImageView
android:layout_width="20dp"
android:layout_height="17dp"
android:layout_gravity="center"
android:src="#drawable/services_icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Services"
android:layout_gravity="center"/>
</LinearLayout>
</LinearLayout>
</com.google.android.material.bottomnavigation.BottomNavigationView>
</LinearLayout>
Then go to your fragment which you want to scroll and design it like below one.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="Title Of Your Form"
android:textAlignment="center"
android:textColor="#color/black"
android:textSize="18sp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="20dp">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/f_name"
android:inputType="textPersonName"
android:padding="10dp"
android:textSize="14sp" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:hint="#string/m_name"
android:inputType="textPersonName"
android:padding="10dp"
android:textSize="14sp" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:hint="#string/l_name"
android:inputType="textPersonName"
android:padding="10dp"
android:textSize="14sp" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:hint="Message"
android:inputType="text"
android:padding="10dp"
android:textSize="14sp" />
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:text="Send Messagge"
android:textAllCaps="false"
android:textColor="#color/white"
android:layout_marginBottom="40dp"/>
</LinearLayout>
</ScrollView>
That is how i solved it,
if you have any doubt please let me know but if its helps or looks like a correct answer please mark it as a correct answer thanks.
I'm making a fragment with a horizontal scroll on the previous screen.
the HorizontalScrollView is in a fragment
it worked fine when it was an activity but when you change it to a fragment the interface gets stuck
I have a HorizontalScrollView inside my ViewPager.
but when putting it in a fragment the interface does not work as it should, but at the moment of moving the view to the right or left it remains as the image
Like shown in Image below.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/FragmentoLayout_fonemasTar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<HorizontalScrollView
android:id="#+id/horizontalScrollView1Tar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/secondary_text_light"
android:fadeScrollbars="false"
android:scrollbarSize="2dp"
android:scrollbarThumbHorizontal="#drawable/border_scroll_listview">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="150dp"
android:layout_height="match_parent"
android:gravity="center">
<TextView
android:id="#+id/lblTarCampo1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/LayoutTar_lblTarCampo1" />
</LinearLayout>
<LinearLayout
android:layout_width="80dp"
android:layout_height="match_parent"
android:gravity="center">
<TextView
android:id="#+id/lblTarCampo2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/LayoutTar_lblTarCampo2" />
</LinearLayout>
<LinearLayout
android:layout_width="150dp"
android:layout_height="match_parent"
android:gravity="center">
<TextView
android:id="#+id/lblTarCampo3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/LayoutTar_lblTarCampo3" />
</LinearLayout>
<LinearLayout
android:layout_width="30dp"
android:layout_height="wrap_content">
<TextView
android:id="#+id/lblEspacio1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/LayoutTar_FormatoTar_txtTarSubCampo3" />
</LinearLayout>
<LinearLayout
android:layout_width="150dp"
android:layout_height="match_parent"
android:gravity="center">
<TextView
android:id="#+id/lblTarSubCampo3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/LayoutTar_lblTarSubCampo345" />
</LinearLayout>
<LinearLayout
android:layout_width="150dp"
android:layout_height="match_parent"
android:gravity="center">
<TextView
android:id="#+id/lblTarCampo4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/LayoutTar_lblTarCampo4" />
</LinearLayout>
<LinearLayout
android:layout_width="30dp"
android:layout_height="wrap_content">
<TextView
android:id="#+id/lblEspacio2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/LayoutTar_FormatoTar_txtTarSubCampo4" />
</LinearLayout>
<LinearLayout
android:layout_width="150dp"
android:layout_height="match_parent"
android:gravity="center">
<TextView
android:id="#+id/lblTarSubCampo4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/LayoutTar_lblTarSubCampo345" />
</LinearLayout>
<LinearLayout
android:layout_width="150dp"
android:layout_height="match_parent"
android:gravity="center">
<TextView
android:id="#+id/lblTarCampo5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/LayoutTar_lblTarCampo5" />
</LinearLayout>
<LinearLayout
android:layout_width="30dp"
android:layout_height="wrap_content">
<TextView
android:id="#+id/lblEspacio3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/LayoutTar_FormatoTar_txtTarSubCampo5" />
</LinearLayout>
<LinearLayout
android:layout_width="150dp"
android:layout_height="match_parent"
android:gravity="center">
<TextView
android:id="#+id/lblTarSubCampo5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/LayoutTar_lblTarSubCampo345" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ListView
android:id="#+id/lst_PuntoArtFon1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fadeScrollbars="false"
android:scrollbarThumbVertical="#drawable/border_scroll_listview"
tools:listitem="#layout/formato_tar_layout"></ListView>
</LinearLayout>
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>
make background color:white, and clickable = true. This will solve your problem
This is happening because the new view that you are loading(by swiping right/left) is above the HorizontalScrollView & its background colour is transparent. You must give a white background colour to the parent LinearLayout of all the fragments.
Also set android:clickable to true so that the touch events don't trigger the previous fragments.
Make background color: white, and click event as true. This may solve your issue
Dear Android Developers I am a creating cv Android app but there are empty after TextView inside CardView how can I get rid of that space
below my xml code where I have implemented CardView as parent child as LinearLayout.
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="match_parent"
card_view:cardCornerRadius="0dp"
card_view:cardPreventCornerOverlap="true"
card_view:cardUseCompatPadding="true">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="30dp"
android:scaleType="centerCrop" />
<Space
android:layout_width="50dp"
android:layout_height="20dp" />
<TextView
android:id="#+id/about"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginRight="250dp"
android:gravity="center"
android:text="#string/about_me"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/introduction"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="16dp"
android:gravity="start" />
</LinearLayout>
</android.support.v7.widget.CardView>
Change layout height of card view to match_parent
reduce marginTop of your text View remove the Space tag also and also reduce margin of your imageView
use this attributes in your cardview you can see the difference
your card do not have elevation and radius and that card view merge to the activity that's why it showing like a space after text use this in your card view:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="8dp">
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardCornerRadius="8dp"
card_view:cardElevation="6dp"
android:elevation="4dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:orientation = "vertical">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="30dp"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/about"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginRight="250dp"
android:gravity="center"
android:text="#string/about_me"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/introduction"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="16dp"
android:gravity="start" />
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
I have a cardview with radius 10dp
I simply don't want to show the edges of layout.
I'm trying to do this >
I tried card_view:cardPreventCornerOverlap="false" , didn't work............................................................
But I got this;
XML Code: (I fixed, here is the code)
<android.support.v7.widget.CardView
android:padding="6dp"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view_inner"
android:layout_width="match_parent"
android:layout_height="match_parent"
card_view:cardBackgroundColor="#color/green"
card_view:cardCornerRadius="8dp"
card_view:cardElevation="3dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.makeramen.roundedimageview.RoundedImageView
card_view:riv_corner_radius="8dp"
android:src="#drawable/picture"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:background="#color/orange"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="20dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="text"
android:textAlignment="center"
android:textColor="#color/white" />
</LinearLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
I want a RelativeLayout based android UI that looks like the below mock graphic:
Below is my layout xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayoutForPreview"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- surface view that contains camera preview , and seats above #+id/linearLayoutToolbar -->
<SurfaceView
android:id="#+id/surfaceViewBarcodeScanner"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<!-- LinearLayout that contains toolbar that is divided into 3 sections horizontally -->
<LinearLayout
android:id="#+id/linearLayoutToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/surfaceViewBarcodeScanner"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_left" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_center_toolbar" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_right_landscape_button" />
</LinearLayout>
</RelativeLayout>
I used Eclipse GUI palette and my own editing , however the output was not what I expected, the SurfaceView seems to covering all the screen, the LinearLayout at the bottom does not appear.
Snapshot of my current result on Galaxy S3 device:
Any help will be appreciated, Thanks.
Could you please try out to modify your layout as the follows:
Define your SurfaceView and set it's layout_above value to the ID of the linear layout made in the previous step. Set the layout_alignParentTop to true.
Define your bottom linear layout and set the layout_alignParentBottom to true.
Smart code snippet with only the important parts:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android">
<SurfaceView
android:id="#+id/surfaceViewBarcodeScanner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_above="#+id/linearLayoutToolbar" />
<LinearLayout
android:id="#+id/linearLayoutToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
</RelativeLayout>
I hope this will solve your problem.
you can use Linearlayout instead of Realtive Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<SurfaceView
android:id="#+id/surfaceViewBarcodeScanner"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" />
<LinearLayout
android:id="#+id/linearLayoutToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<!-- inside elements -->
</LinearLayout>
</LinearLayout>
else you should use android:layout_above="#+id/linearLayoutToolbar" to your surfaceview
and remove android:layout_below attribute and add android:layout_alignParentBottom="true" to your toolbar view.
// try this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayoutForPreview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
android:orientation="vertical">
<LinearLayout
android:layout_height="0dp"
android:layout_weight="1"
android:layout_width="match_parent">
<SurfaceView
android:id="#+id/surfaceViewBarcodeScanner"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayoutToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:gravity="center"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_left" />
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:gravity="center"
android:layout_weight="2">
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_center_toolbar" />
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:gravity="center"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_right_landscape_button" />
</LinearLayout>
</LinearLayout>
</LinearLayout>