Develop Reference

Add an element outside a ConstraintLayout for my adapter

I'm trying to display cool dot when I want to notify new items. When i set negative margin or translation, the dot is cut, theses littles ilustration will make things a lot clearer:
What i want :
What I get :
Here's my layout xml :
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:layout_width="match_parent"
android:layout_height="240dp"
android:layout_margin="10dp"
android:layout_marginBottom="20dp"
android:layout_gravity="center_horizontal"
android:elevation="1dp"
android:background="#drawable/bg_element_list"
android:foreground="#drawable/effect_ripple"
android:clickable="true"
android:focusable="true">
<ImageView
android:id="#+id/file_img"
android:layout_width="fill_parent"
android:layout_height="210dp"
android:paddingTop="10dp"
android:paddingBottom="5dp"
android:src="#drawable/ic_pdf"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/file_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingStart="20sp"
android:paddingEnd="20sp"
android:scrollHorizontally="true"
android:singleLine="true"
android:text="teeeeeeeeeeeeeeeeeeeeeeeeeeeeeest"
android:textAlignment="center"
android:textColor="#color/dark_grey"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/file_img" />
<ImageView
android:id="#+id/file_new"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/ic_newfile"
android:translationY="-22dp"
android:translationX="22dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Someone have an idea?
Thanks

Try this with your parameter's
<?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">
<androidx.cardview.widget.CardView
android:id="#+id/profileCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="10dp"
app:cardCornerRadius="4dp"
app:cardElevation="4dp"
app:cardUseCompatPadding="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="match_parent"
android:layout_height="210dp"
android:scaleType="fitXY"
android:src="#mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="teeeeeeeeeeeeeeeeeeeeeeeeeeeeeest"
android:textColor="#727272"
android:textSize="20sp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/userImageProfile"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignEnd="#+id/profileCard"
android:layout_marginEnd="-15dp"
android:elevation="8dp"
android:src="#mipmap/ic_launcher"
app:tint="#color/black" />
</RelativeLayout>

On the ConstraintLayout, set
android:clipChildren="false"
This will allow the ImageView to draw outside the ConstraintLayout. See the documentation.

If you use padding on the layout instead of layout_margin, and set clipToPadding as false, things will be able to draw within the padding area. Margin is really for required space outside of the View, padding is space inside it (where it draws its contents)

Bottom Navigation Bar not working when I implement a toolbar

So I have a bottom navigation working with 3 buttons, and they worked perfectly fine, but ever since I added a toolbar in the top right the bottom navigation won't display its buttons any more (the bar for the bottom navigation is still there, but the three buttons are gone and no longer pressable).
Anyone knows how to fix this? I tried switching the Layout type but wasn't able to fix it
This is my code for the XML file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".Search"
android:background="#00AFAF">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<RelativeLayout
android:gravity="center_vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:text="#string/app_name"
android:textSize="25sp"
android:gravity="center"
android:textStyle="bold"
android:textColor="#color/purple_700"
android:layout_alignParentStart="true"
android:layout_marginStart="10dp"
android:layout_width="wrap_content"
android:layout_height="match_parent"/>
<Spinner
android:id="#+id/spinnerTags"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:entries="#array/types"
android:gravity="center" />
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/random_recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toTopOf="#+id/bottom_navigator"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:scrollbars="vertical"
android:layout_marginBottom="?attr/actionBarSize"/>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigator"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/purple_700"
app:itemTextColor="#drawable/selector"
app:itemIconTint="#drawable/selector"
app:layout_behavior="#string/hide_bottom_view_on_scroll_behavior"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/menu" />
</LinearLayout>

SwipeRefreshLayout not obeying constraints

I have a SwipeRefreshLayout containing a RecyclerView for a chat activity. I have its bottom constrained to the top of a linear layout at the bottom of the screen:
<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:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/colorPrimaryDark"
android:paddingLeft="0dp"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingRight="0dp"
android:paddingBottom="0dp"
tools:context="org.andrewedgar.theo.ChatRoomActivity">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swiperefresh"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/listFooter"
app:layout_constraintBottom_toTopOf="#+id/listFooter"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/chatRecyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
app:layout_constraintBottom_toTopOf="#+id/listFooter"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
</android.support.v4.widget.SwipeRefreshLayout>
<LinearLayout
android:id="#+id/listFooter"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:background="#drawable/custom_border"
android:gravity="bottom"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<EditText
android:id="#+id/messageInput"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/transparent"
android:ellipsize="start"
android:gravity="center"
android:hint="#string/prompt_msg"
android:imeActionLabel="#string/action_send"
android:imeOptions="actionUnspecified"
android:inputType="textCapSentences|textAutoCorrect"
android:maxLines="2"
android:textColor="#color/white"
android:textColorHint="#color/hintColor"
android:importantForAutofill="no" tools:targetApi="o"/>
<ImageButton
android:id="#+id/sendButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:contentDescription="#string/action_send"
android:padding="10dp"
android:src="#android:drawable/ic_menu_send" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
..but the SwipeRefreshLayout still takes up the whole screen and the messages appear behind the message input:
Is there a special type of constraint required for this to work?

Change the height of SwipeRefreshLayout to 0dp
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swiperefresh"
android:layout_width="match_parent"
android:layout_height="0dp"
Why?
As per the documentation:
You can set the view size to a ratio such as 16:9 if at least one of
the view dimensions is set to "match constraints" (0dp).
Also
Note: You cannot use match_parent for any view in a ConstraintLayout. Instead use "match constraints" (0dp).

Bottom Navigation Bar being pushed out of view by a Scrollview Layout

cutting straight to the chase. I want to have a bottom navigation bar for my application, and then at the top there is a toolbar, in the middle will be a scrollview where the contents will be placed.
The problem now here is that the ScrollView layout pushes the navigation bar out of view, and now the navigation bar won't show.
As you can see, the navigation bar isn't showing because the ScrollView takes up the bottom of the screen too.
Another solution I've tried but it turned out the navigation bar pops up on top of the ScrollView
That blue bar below the Home toolbar is the navigation bar.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="polytechnic.temasek.bluebeatsmusicapplication.HomePageActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#drawable/bluebeatsbackground2">
<TextView
android:id="#+id/toolbartitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Home"
android:textColor="#android:color/white"
android:textSize="32sp"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
<ScrollView
android:layout_width="match_parent"
android:layout_height="539dp"
>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="0dp">
[Content inside]
</android.support.constraint.ConstraintLayout>
</ScrollView>
<android.support.design.widget.BottomNavigationView
android:id="#+id/the_bottom_navigation"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:background="#color/colorPrimary"
app:itemBackground="#color/colorPrimary">
</android.support.design.widget.BottomNavigationView>
</LinearLayout>
So far, I've only been able to bruteforce the Scrollview's height to a certain dp to make room for the navigation bar, but there must be another way which I'm supposedly missing?

You could better use Relative Layout or Constraint Layout (I recommend to use Constraint Layout) to handle such situations.
I have modified your layout to Constraint Layout.
I've tricked the scrollbar's marginBottom value to height of the bottomNavigationBar [Else, some of the contents of scrollView remain behind the bottomNavBar].
<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:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#000"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/toolbartitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Home"
android:textColor="#android:color/white"
android:textSize="32sp"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
<ScrollView
android:id="#+id/scrollView2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="50dp"
android:layout_marginTop="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/long_text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
<android.support.design.widget.BottomNavigationView
android:id="#+id/the_bottom_navigation"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:background="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
</android.support.design.widget.BottomNavigationView>
</android.support.constraint.ConstraintLayout>

Android add image on top of another imageView as image below in Layout XML

How to create a android Layout where you add a smaller imageView on Top of another Image View. but only half way as the image below.
Thank.
this is the sample I try but it does not work:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageCover"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/big_cover_img" />
<ImageView
android:id="#+id/imageProfile"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignBottom="#+id/imageCover"
android:layout_centerHorizontal="true"
android:src="#drawable/profile_pic" />
<!-- android:layout_alignBottom="#+id/imageCover" -->
</RelativeLayout>

Use FrameLayout as parent and LinearLayout as child with weight property :
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:id="#+id/imageCover"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/big_cover_img" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</LinearLayout>
</LinearLayout>
<ImageView
android:id="#+id/imageProfile"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:src="#drawable/ic_launcher" />
</FrameLayout>

Set the second view to be below the first then set top margin of the bottom view to -50 dp or whatever value you want it to overlap