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>

Align Bitmap Image inside ImageView - CS50 Pokedex Android

I have been working on CS50 and now I am tracking android. I almost finished my PSet Pokedex, but small thing is bothering me.
I am trying to align bitmap image on top of ImageView, but I could not do it. Could you please help me? I tried "scaletype", "layout_gravitiy" etc. But it does not seem to work. I want image to be just below description stating that this should be changed by the java code.
Please see current view here
<?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=".PokemonActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/pokemon_name"
android:textAlignment="center"
android:textSize="18dp"
android:textStyle="bold"
android:paddingTop="10dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/pokemon_number"
android:textAlignment="center"
android:textSize="16dp"
android:paddingTop="5dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/pokemon_type1"
android:textAlignment="center"
android:textSize="16dp"
android:paddingTop="5dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/pokemon_type2"
android:textAlignment="center"
android:textSize="16dp"
android:paddingTop="5dp" />
<Button
android:id="#+id/pokemon_button_catch"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:paddingTop="5dp"
android:textSize="24dp"
android:onClick="toggleCatch"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/pokemon_description"
android:textAlignment="center"
android:textSize="16dp"
android:textStyle="bold|italic"
android:paddingTop="50dp"
android:text="This is testing something, this should changed by the java code."/>
<ImageView
android:id="#+id/pokemon_avatar"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>

Welcome to StackOverFlow !
If there is no special requirement than no need to use match_parent inside ImageView. You can do following adjustment-
<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=".PokemonActivity">
..............
<ImageView
android:id="#+id/pokemon_avatar"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
Happy coding !

sorry. I was roasting snow in a furnace. I found out that actually source image is one to blame. Image size does not wrap the content but it has extra space around content. This is the reason when it is enlarged, there is space between text and image.

Android UI using XML (Android and Xml)

I am tying to create a UI like the image below.
This is how it SHOULD look like: (Screen shot from my app using Nexsus 5):
And this is how it look like on a Nexsus S device (4 inch):
Someone have an idea why the diffrences happen? This is my XML code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#2e2e2e"
tools:context=".MainActivity"
android:id="#+id/viewew">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="9"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_marginBottom="0dp"
android:layout_weight="8"
android:gravity="center_vertical"
>
<View
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="15" />
<Button
android:id="#+id/www"
android:layout_weight="2"
android:layout_width="90dp"
android:layout_height="90dp"
android:background="#drawable/www"
android:paddingLeft="10dp"
android:paddingRight="10dp"
/>
<View
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="15" />
<Button
android:id="#+id/www"
android:layout_weight="2"
android:layout_width="90dp"
android:layout_height="90dp"
android:background="#drawable/www"
android:paddingLeft="10dp"
android:paddingRight="10dp"
/>
<View
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="15" />
<Button
android:id="#+id/www"
android:layout_weight="2"
android:layout_width="90dp"
android:layout_height="90dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:background="#drawable/www"
/>
<View
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="15" />
</LinearLayout>
<View
android:id="#+id/idd"
android:layout_width="match_parent"
android:layout_height="400dp"
android:layout_alignParentBottom="true"
android:layout_weight="2"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:layout_centerHorizontal="true"
android:text="Doesn't belong here?"
android:layout_alignParentBottom="true"
/>
</LinearLayout>
<include layout="#layout/buttons" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:layout_centerHorizontal="true"
android:text=" here?"
android:paddingBottom="15dp"
android:layout_alignParentBottom="true"
android:textColor="#f7f7f7"
android:id="#+id/tDoesntBelongHere"
/>
<com.lorentzos.flingswipe.SwipeFlingAdapterView
android:id="#+id/frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:rotation_degrees="15.5"
android:layout_above="#+id/eee"
tools:context=".MyActivity" />
</RelativeLayout>

On android studio you have to set the screen size for different devices.
your buttons have this:
android:layout_width="90dp"
android:layout_height="90dp"
So whichever screen you are using the size will always be 90dp.
In android studio you can create more xml pages for same page: one for portrait, for landscape, ecc ecc and also one for small-big-xxl ecc screen.
Have a look at this link from android developer site.
Hope it help :)
EDIT:
At the moment i don't have Android studio in the pc i'm working on, so i try to explain a possible solution.
Instead of setting height and width, set margins:
You can anchor all from botside, adding in your TextView android:layout_alignParentBottom="true" (and a margin-bottom if you want). Then keep your view with a static height of 400dp like now, then anchor it to the top of the TextView by android:layout_above="#id/TextViewId (it doesn't have id, add it)
Now you have to do the same with your LinearLayout: use android:layout_above="#id/idd and removing the the static size. At this point you can just let your buttons to set height equals to the LinearLayout's height (obiouvsly you can set margin top-bot in buttons).
Sorry if my english is not that good, i hope u got the solution

Unable to make all UI components appear in RelativeLayout

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>