How can add image on top of the bottom sheet in Android? See this image
I tried this but it doesn't work. I want the transparency as shown in the image attached.
<?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"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/myBottomLL"
app:layout_anchorGravity="top|center" />
<LinearLayout
android:id="#+id/myBottomLL"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/background" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
Follow these links.
How to make the background transparent:
https://medium.com/#manuaravindpta/transparent-background-for-bottomsheetdialog-396a1a646f1b
How to make the bottom sheet full screen:
https://medium.com/better-programming/bottom-sheet-android-340703e114d2
For the circular image view:
https://github.com/hdodenhof/CircleImageView
Just add a transparent View to the top like this.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/topImage"
android:layout_width="96dp"
android:layout_height="96dp"
android:layout_gravity="center_horizontal|top"
android:elevation="6dp"
android:src="#drawable/ic_account_circle"
app:civ_border_color="#color/colorAccent"
app:civ_border_width="2dp"
app:civ_circle_background_color="#android:color/white" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/transparentRegion"
android:layout_width="match_parent"
android:layout_height="56dp"
android:orientation="horizontal" />
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/white"
app:elevation="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="end"
android:orientation="horizontal">
<ImageButton
android:id="#+id/closeBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginEnd="16dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:src="#drawable/ic_close"
android:tint="#android:color/black" />
</LinearLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/bottomSheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:fillViewport="true">
<LinearLayout
android:id="#+id/other_content_goes_here"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="15dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Other Content"
android:textSize="24sp" />
<View
android:id="#+id/extraSpace"
android:layout_width="match_parent"
android:layout_height="800dp" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Set the theme of the BottomSheetDialogFragment.
You can also add a BottomSheetCallback and decrease the height of the transparent space at the top as you scroll up
Related
I have a recyclerview populated with a list from an API. I am using RxBinding to search and filter the list. The current problem is with my layout. I would like my search bar field at the top with the list beneath it. Below is an example of my list being filtered but as you can see the searchbar text and the List Items overlap
Now below is the layout file.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true">
<android.support.v7.widget.RecyclerView
android:id="#+id/listRecycler"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.AppCompatEditText
android:id="#+id/searchView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="start|center_vertical"
android:layout_weight="1"
android:background="#android:color/transparent"
android:inputType="text" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="end|center_vertical"
android:src="#android:drawable/ic_menu_search" />
</FrameLayout>
</LinearLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</FrameLayout>
</FrameLayout>
Eventually I want the searchbar to be scrollable as well, so that when the user scrolls down the list, the searchbar will be rotated out. However I think this will involve me created a list of some CommonInterface which my both my SearchBar and ListItems would have to implement.
Use RelativeLayout like this so that recyclerView is below the editText and add a scrollView so that the scrolling happens on the whole layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/listRecycler"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/edit"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/edit">
<android.support.v7.widget.AppCompatEditText
android:id="#+id/searchView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="start|center_vertical"
android:layout_weight="1"
android:background="#android:color/transparent"
android:inputType="text" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="end|center_vertical"
android:src="#android:drawable/ic_menu_search" />
</FrameLayout>
</LinearLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</FrameLayout>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
And add this in your RecyclerView in Java:
recyclerView.setNestedScrollingEnabled(false);
You can try this layout
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:background="#color/atehensGray"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/chrome_grey"
android:fitsSystemWindows="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<SearchView
android:id="#+id/searchView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:background="#drawable/rounded_corners"
android:gravity="top"
android:hapticFeedbackEnabled="true"
android:orientation="horizontal"
android:visibility="visible"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="1.0" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/white"
android:id="#+id/recyclerView_main"
android:layout_width="0dp"
android:layout_height="0dp"
app:layoutManager="android.support.v7.widget.LinearLayoutManager"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/appBarLayout" />
</android.support.constraint.ConstraintLayout>
I want to add RecyclerView at the bottom to my layout, but it is in wrong position.
Now I Have:
Now RecyclerView is too far down and cuts half of RecyclerView. I Only want RecyclerView at the bottom of my layout but I can't do it.
This is my layout code:
<android.support.constraint.ConstraintLayout 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/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="showresultactivity.SlideTabsActivity">
<com.google.android.gms.maps.MapView
android:id="#+id/mapView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ProgressBar
android:id="#+id/progress"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="#+id/mapView"
app:layout_constraintEnd_toEndOf="#+id/mapView"
app:layout_constraintStart_toStartOf="#+id/mapView"
app:layout_constraintTop_toTopOf="#+id/mapView" />
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" /><!--this line make too far down, without it my recyclerview will be at the top of my layout-->
</android.support.constraint.ConstraintLayout>
My RecyclerView layout:
<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:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context="showresultactivity.SlideTabsActivity">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerViewInfoWindowMarker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignWithParentIfMissing="true"
>
</android.support.v7.widget.RecyclerView>
My recyclerView row item xml :
<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="wrap_content">
<LinearLayout
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FCFCFC"
tools:context="showresultactivity.SlideTabsActivity">
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardCornerRadius="3dp"
app:cardElevation="1dp"
android:layout_margin="5dp"
app:cardPreventCornerOverlap="false">
<RelativeLayout
android:padding="8dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imagesSrcUrl"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/ic_launcher"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignStart="#+id/description"
android:text="some text"
android:textSize="20dp"
android:textStyle="bold" />
<TextView
android:id="#+id/third"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/first"
android:textSize="12dp"
android:text="some text"
android:layout_marginTop="5dp"
android:gravity="right"
android:textAlignment="gravity"
/>
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/imagesSrcUrl"
android:layout_below="#id/first"
android:textSize="12dp"
android:text="some text"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
<ImageButton
android:layout_centerVertical="true"
android:id="#+id/cardViewNext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/circle_shape"
android:src="#drawable/ic_next_black" />
<ImageButton
android:layout_centerVertical="true"
android:id="#+id/cardVievPrevious"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/circle_shape"
android:src="#drawable/ic_previous_black" />
EDIT
I forgot that I have also bottom navigation and the recycler should be at the bottom map but above the bottom navigation.
Layout with bottom nav:
<?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"
tools:context="SlideTabsActivity"
android:layout_height="match_parent"
android:layout_width="match_parent"
>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
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:paddingTop="#dimen/appbar_padding_top"
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:layout_weight="1"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:title="#string/app_name">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabItem
android:id="#+id/tabItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_1" />
<android.support.design.widget.TabItem
android:id="#+id/tabItem2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_2" />
<android.support.design.widget.TabItem
android:id="#+id/tabItem3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_3" />
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<include layout="#layout/bottom_navigation_view" android:id="#+id/bottom_nav_view" />
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
bottom_navigation_view:
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/bottomRelativeLayout">
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#drawable/white_grey_border_bottom"
app:menu="#menu/bottom_navigation_main" />
</RelativeLayout>
Adding this line to your framelayout would help you achieve that positioning:
app:layout_constraintBottom_toBottomOf="parent"
Also remember to set the height of your frame layout to: wrap content. The purpose of the line above is to fix/pin your frame layout to the bottom of your constraint layout; any eventual expansion would be upward. Therefore, the contents of your frame layout will never overlap. If there is need for extra space, your frame layout will project upwards while still being fixed to the bottom of the constraint layout.
You can check this for reference on more XML attributes on Constraint layouts: https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html
PS:
You can remove the android:layout_alignParentBottom="true" part of your frame layout; it's not necessary anymore
I have tried to accomplish something similar to the following layout.
There are a few things to note. The cardview that overlaps the appbar is not supposed to be a part of a nestedscrollview as I have a nestedscrollview in the xml layout. The cardview is positioned correctly but it comes just beneath the appbarlayout.
I just got the solution to this now. I did not give the CardView an elevation value before and that was wrong. I just assumed that making it come last in the CoordinatorLayout should place it on top. It works now. I have added an elevation value. Here is the code -
<xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="250dp"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbarlayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/quotes"
android:scaleType="centerCrop"/>
<android.support.v7.widget.Toolbar
android:id="#+id/tool"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="parallax"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorWhite"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginRight="32dp"
android:layout_marginLeft="32dp"
app:layout_anchor="#id/appBar"
app:layout_anchorGravity="bottom|center"
app:cardElevation="#dimen/small_padding"
/>
</android.support.design.widget.CoordinatorLayout>
Try with the following layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#color/colorAccent"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways"
app:layout_collapseMode="pin">
<ImageView
android:id="#+id/toolbar_logo"
android:src="#drawable/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"/>
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginLeft="45dp"
android:layout_marginRight="45dp"
app:cardCornerRadius="8dp"
app:cardElevation="7dp"
android:layout_marginTop="150dp"
android:id="#+id/cardView">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Photos" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="376" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Followers"
android:layout_gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1769"
android:layout_gravity="center"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Following"
android:layout_gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="127"
android:layout_gravity="center"/>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
Image
I have a Toolbar with an ImageView inside. My problem is that this image is not positioned at the center of my Toolbar on tablets(it works fine on mobile devices). What can I do? Gravity doesn't work and I can't use a relative layout. There is an image on top showing my problem.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:design="http://schemas.android.com/apk/res-auto"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="mfceo.project.matiasnagore.powerlist.MainActivity">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="45dp"
android:id="#+id/mainToolbar"
android:background="#fafafa"
android:titleTextColor="#ffffff"
android:layout_gravity="top">
<ImageView
android:id="#+id/imagePowerlist"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/powerlist"
android:scaleType="centerInside"
android:paddingRight="8dp"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:paddingLeft="55dp" />
</android.support.v7.widget.Toolbar>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#drawable/shadow_top"/>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#ffffff">
</FrameLayout>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#drawable/shadow"/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
design:menu="#menu/bottom_nav_items"
design:itemIconTint="#drawable/selector"
design:itemTextColor="#drawable/selector"
android:background="#FFFAFAFA" />
</LinearLayout>
You need to add android:layout_gravity="top|center_horizontal" into your ImageView and remove paddings:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:design="http://schemas.android.com/apk/res-auto"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="mfceo.project.matiasnagore.powerlist.MainActivity"><android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="45dp"
android:id="#+id/mainToolbar"
android:background="#fafafa"
android:titleTextColor="#ffffff"
android:layout_gravity="top">
<ImageView
android:id="#+id/imagePowerlist"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/powerlist"
android:scaleType="centerInside"
android:layout_gravity="top|center_horizontal"/>
</android.support.v7.widget.Toolbar>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#drawable/shadow_top"/>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#ffffff">
</FrameLayout>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#drawable/shadow"/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
design:menu="#menu/bottom_nav_items"
design:itemIconTint="#drawable/selector"
design:itemTextColor="#drawable/selector"
android:background="#FFFAFAFA" /></LinearLayout>
I have an image in a coordinator layout and i have a diagonal layout i got from here - https://github.com/florent37/DiagonalLayout.
In the coordinator layout i am setting the Diagonal Layout as the anchor for the image cos i want my layout to look like the example in the url above.
here is my layout file and the result i am having
<?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"
tools:context="com.dishesteam.dishes.activities.ProfileActivity">
<com.github.florent37.diagonallayout.DiagonalLayout
android:id="#+id/diagonal_layout"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="250dp"
android:elevation="5dp"
app:diagonal_angle="12"
app:diagonal_direction="left"
app:diagonal_position="bottom">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/profile_background">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:textColor="#color/textColorPrimary"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/Theme.AppCompat.Light"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="Joshua Majebi"
android:layout_gravity="top"
android:layout_marginTop="40dp"
android:layout_marginLeft="25dp"
android:textColor="#color/textColorPrimary"/>
</LinearLayout>
</com.github.florent37.diagonallayout.DiagonalLayout>
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="16dp"
app:srcCompat="#drawable/ic_account_circle_black_24dp"
app:layout_anchor="#id/diagonal_layout"
app:layout_anchorGravity="left|bottom"
android:layout_marginStart="16dp" />
</android.support.design.widget.CoordinatorLayout>
My Image is falling behind the DiagonalLayout not sure what i am doing wrong here.
Elevation of DiagonalLayout is more higher than ImageView. So, you have to set higher elevation to ImageView to show it over DiagonalLayout.
Set ImageView elevation as android:elevation="6dp"
Try this:
<?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">
<com.github.florent37.diagonallayout.DiagonalLayout
android:id="#+id/diagonal_layout"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="250dp"
android:elevation="5dp"
app:diagonal_angle="12"
app:diagonal_direction="left"
app:diagonal_position="bottom">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/profile_background">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:textColor="#color/textColorPrimary"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/Theme.AppCompat.Light"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="Joshua Majebi"
android:layout_gravity="top"
android:layout_marginTop="40dp"
android:layout_marginLeft="25dp"
android:textColor="#color/textColorPrimary"/>
</LinearLayout>
</com.github.florent37.diagonallayout.DiagonalLayout>
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="16dp"
android:elevation="6dp"
android:src="#mipmap/ic_launcher"
app:layout_anchor="#id/diagonal_layout"
app:layout_anchorGravity="left|bottom"
android:layout_marginStart="16dp" />
</android.support.design.widget.CoordinatorLayout>
OUTPUT:
Hope this will help~