Using the new appcompat-v21 I try to build a navigation drawer.. The first time I didn't write any background color or drawable and the navigation drawer started with a transparent background!! So strange! But, when I clicked in the items of it I could see the ripple effect of Android lollipop. (Amazing). So I tried to put a white background like this:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".HomeActivity"
android:id="#+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"/>
</RelativeLayout>
<ListView
android:id="#+id/navdrawer"
android:layout_width="315dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:fitsSystemWindows="true"
android:clipToPadding="false"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#ffff"/>
</android.support.v4.widget.DrawerLayout>
The navigation drawer now is white and so it's correct. But with this background I lost the ripple effect in the item click. My item XML is this one:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:background="?android:selectableItemBackground"
android:layout_height="fill_parent" >
<LinearLayout
android:id="#+id/spinnerLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="13dp"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/sfondomappa"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_weight="0"
android:adjustViewBounds="true"
android:scaleType="center"
android:src="#drawable/banner_nav" />
<TextView
android:id="#+id/drawerWelcome"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/sfondomappa"
android:layout_centerHorizontal="true"
android:background="#40000000"
android:fontFamily="sans-serif-medium"
android:gravity="center_horizontal"
android:padding="10dp"
android:text="Hola"
android:textColor="#color/ldrawer_color"
android:textSize="14sp" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/headerLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical" >
<TextView
android:id="#+id/drawerTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="center_horizontal"
android:layout_margin="12dp"
android:fontFamily="sans-serif-regular"
android:gravity="center_horizontal"
android:textColor="#color/main_orange"
android:textSize="15sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/itemLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:background="?android:attr/activatedBackgroundIndicator"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true" >
<ImageView
android:id="#+id/drawer_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:padding="3dp" />
<TextView
android:id="#+id/drawer_itemName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="32dp"
android:fontFamily="sans-serif-medium"
android:gravity="center_vertical"
android:textColor="#E4000000"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
I even wrote this android:background="?android:selectableItemBackground" in my root layout but nothing change.. How can I solve?
EDIT:
I wrote again the listview of my drawer in this way
<ListView
android:id="#+id/navdrawer"
android:layout_width="315dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:layout_marginRight="72dp"
android:background="#android:color/white"
android:choiceMode="singleChoice"
android:divider="#00000000"
android:dividerHeight="1.00dp"
android:elevation="2dp"
android:longClickable="false"
android:orientation="vertical"
android:overScrollMode="never"
android:scrollbars="none" />
and the ripple works. But now i lost the current position i clicked.
I've faced the same problem ... the solution is not documented good enough, but here it is.
Create a selector drawable in your drawable-v21 folder:
v21/activated_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/primary_dark" android:state_activated="true" />
<item android:drawable="#color/primary" android:state_checked="true" />
<item android:state_pressed="true">
<ripple android:color="#color/primary" />
</item>
<item android:drawable="#color/background_light" />
</selector>
As you can see in the code above, the magic is done by adding the <ripple ... /> element above. It's available in v21+ only, so that's why you have to declare separate selectors for -v21 and normal.
Lastly, just put this selector drawable as background of the desired element, in your case the ListView item.
Related
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 this recyclerview, and the background is made with imageviews. I have these two situations in portrait and landscape. How do I fill the white space there with a new imageview or something with the same color?
And this is my xml:
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/home_imageview_superbackground"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true" />
<ImageView
android:id="#+id/home_imageview_background"
android:contentDescription="Background image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_alignParentEnd="true" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true">
<TextView
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="casual"
android:paddingBottom="10dp"
android:paddingStart="5dp"
android:paddingTop="10dp"
android:textAppearance="?attr/textAppearanceListItem"
android:textColor="#android:color/white"
android:textSize="40sp" />
</RelativeLayout>
Tried several ways, but I'm just not able to make this work. #+id/home_imageview_superbackground this is the imageview I want to put on the left of each background imageview to fill that space in the landscape. Thank you for the help.
Please try this one
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/home_imageview_superbackground"
android:layout_width="match_parent"
android:src="#mipmap/ic_launcher"
android:scaleType="fitXY"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/home_imageview_background"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
android:scaleType="fitXY"
android:contentDescription="Background image" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true">
<TextView
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="casual"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:textAppearance="?attr/textAppearanceListItem"
android:textColor="#android:color/white"
android:textSize="40sp" />
</RelativeLayout>
</RelativeLayout>
You can also use android:scaleType="centerCrop".
Hope this will help you..If still you face problem please inform me...
<ImageView
android:layout_width="match_parent"
.... />
Also you can use scaleTypeattribute
First, the fill_parent is deprecated times ago, you should use match_parent instead. Then, you have also to use scaleType when you're working with ImagesView to define how the image looks on the screen. In your case, working with scaleType = "fitXY" solve your problem.
How your code should be :
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/home_imageview_superbackground"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:layout_alignParentStart="true" />
<ImageView
android:id="#+id/home_imageview_background"
android:contentDescription="Background image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:layout_alignParentEnd="true" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true">
<TextView
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="casual"
android:paddingBottom="10dp"
android:paddingStart="5dp"
android:paddingTop="10dp"
android:textAppearance="?attr/textAppearanceListItem"
android:textColor="#android:color/white"
android:textSize="40sp" />
</RelativeLayout>
Try this code
<?xml version="1.0" encoding="utf-8"?><?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
android:orientation="horizontal">
<ImageView
android:id="#+id/your_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
android:scaleType="fitEnd"
android:layout_alignParentStart="true"
android:background="#drawable/green_gradiant"
android:padding="10dp" />
<TextView
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="casual"
android:paddingBottom="10dp"
android:paddingStart="5dp"
android:paddingTop="10dp"
android:text="Hello Three"
android:textAppearance="?attr/textAppearanceListItem"
android:textColor="#android:color/white"
android:textSize="40sp" />
</FrameLayout>
And create this drawable file
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<gradient android:angle="0"
android:startColor="#64FFDA"
android:centerColor="#4464FFDA"
android:endColor="#0064FFDA"/>
</shape>
</item>
</selector>
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.
I want to replicate the Navigation Drawer similar to that of the LinkedIn App below:
Note that the message, notification, and the settings buttons at the top are persistent and are not part of the scrollable list.
I've followed the official Android tutorial for Navigation Drawer as well as numerous other tutorials that simply do not provide additional light into how I can achieve this.
The best I could think of was to add 3 ImageButtons to the header layout of the Navigation Drawer template in Android Studio 2.1.1.
EDIT: As per Prat's and a few others advice, I've included an additional header layout just before the drawer that contains the 3 buttons, but no matter the z-ordering of the layouts within the xml, it seems to hide behind the drawer. See image illustration below:
Below are the layout files:
header.xml (contains the 3 buttons)
<?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:gravity="right"
android:background="#111">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_menu_manage" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_menu_manage" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_menu_manage" />
</LinearLayout>
nav_header_main.xml (default generated header)
<?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:gravity="right"
android:background="#111">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_menu_manage" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_menu_manage" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_menu_manage" />
</LinearLayout>
activity_main.xml
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#fff">
<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="false"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
<include
android:id="#+id/header"
layout="#layout/header"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_alignParentTop="true" />
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
Try to do like this :
header.xml(top most layout where you have 3 images)
<?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">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_menu_manage" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_menu_manage" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_menu_manage" />
</LinearLayout>
</LinearLayout>
nav_header_main( default android header)
<?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="#dimen/nav_header_height"
android:background="#drawable/side_nav_bar"
android:gravity="bottom"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="#dimen/nav_header_vertical_spacing"
android:src="#android:drawable/sym_def_app_icon" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/nav_header_vertical_spacing"
android:text="Android Studio"
android:textAppearance="#style/TextAppearance.AppCompat.Body1" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="android.studio#android.com" />
</LinearLayout>
then finally the main layout showing
header(top)
nav_main_header
listview
<!-- The main content view -->
<FrameLayout
android:id="#+id/flFragmentContainer"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- The navigation drawer -->
<RelativeLayout
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#111">
<include android:id="#+id/header"
layout="#layout/header"
android:layout_width="fill_parent"
android:layout_alignParentTop="true"
android:layout_height="100dp"/>
<include android:id="#+id/header2"
layout="#layout/nav_header_main"
android:layout_width="fill_parent"
android:layout_below="#id/header"
android:layout_height="100dp"/>
<ListView
android:id="#+id/lvDrawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:choiceMode="singleChoice"
android:layout_below="#id/header2"
android:divider="#android:color/transparent"
android:dividerHeight="0dp" />
</RelativeLayout>
Use recyclerview with adapter for this. You can implement any structure of custom views for items.
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>