Develop Reference

How do I make a button shadow adjacent to the edges of the card?

I made a card with rounded corners, but they cut shadows on the buttons when pressed.
Is there any method to handle this?
The buttons are located in the upper right and lower left corners.
But when I launch the app, I got this:
As you can see, the shadow is not adjacent to the edges of the card.
My code:
<?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/networks_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="#dimen/card_horizontal_margin"
android:layout_marginVertical="#dimen/card_vertical_margin"
app:cardBackgroundColor="#color/background_secondary"
app:cardCornerRadius="#dimen/card_corner_radius"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:id="#+id/networks_card_content_wrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/networks_card_content_permanent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart="#dimen/card_content_horizontal_margin">
<ImageButton
android:id="#+id/item_card_expand_or_loose_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/background_secondary"
android:contentDescription="#string/description_expand_or_loose_card_button"
android:src="#drawable/ic_button_expand"
android:padding="#dimen/card_horizontal_margin"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
...
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/networks_card_hidden_content"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
...
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_settings"
android:backgroundTint="#color/background_secondary"
app:icon="#drawable/ic_settings"
app:layout_constraintTop_toBottomOf="#id/item_card_description"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:paddingStart="#dimen/card_horizontal_margin"
android:paddingBottom="#dimen/card_vertical_margin"
style="?android:attr/borderlessButtonStyle" />
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
</RelativeLayout>

How to make View in a ConstraintLayout fill the available height?

I'm new to Android development. I created an activity/layout with two views. The first one is a custom button that I want to be 50dp high. The second is a list view that I want to take the rest of the screen below it.
My problem is that when I constrain them to each other, the ListView gets crushed to 0 and the "springs" around the 50dp button expand to take all the space. Here I've given the list a height of 200dp so you can see it. If I set it to "match constraint" it goes to 0. There is content in the list.
With iOS constraints I know how to do this. The constraints around the button are behaving like "greater than or equal" constraints in iOS. I want them to be "equal". How do you do this in Android?
Here's the 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="match_parent"
app:layout_constrainedHeight="false"
tools:context=".WorkoutActivity">
<mycompany.PlayPauseButton
android:id="#+id/play_pause_button"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/workout_list"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ListView
android:id="#+id/workout_list"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

You have to attach the top of listView to the bottom of playButton not other way around
<?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="match_parent"
app:layout_constrainedHeight="false"
tools:context=".WorkoutActivity">
<mycompany.PlayPauseButton
android:id="#+id/play_pause_button"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ListView
android:id="#+id/workout_list"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="8dp"
app:layout_constraintTop_toBottomOf="#id/play_pause_button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Cheers :)

Since you want the ListView to occupy all of the available space, it is a good idea to set the height to 0dp. This is sorta like a stretch-me-how-you-like scheme for ConstraintLayouts. The height would therefore entirely depend on the top and bottom constraints. So, nice step!
Your mistake, however, was the way you constrained your views. You were supposed to constrain the ListView to the bottom of play_pause_button (as shown below). This way, the position of the ListView is always dependent on (and below) playButton.
<?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="match_parent"
app:layout_constrainedHeight="false"
tools:context=".WorkoutActivity">
<mycompany.PlayPauseButton
android:id="#+id/play_pause_button"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ListView
android:id="#+id/workout_list"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="8dp"
app:layout_constraintTop_toBottomOf="#id/play_pause_button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I hope this helps. Merry coding!

Just set the constraints the right way. No constraint bottom in the button but a constraintTop in the listview.
<?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="match_parent"
app:layout_constrainedHeight="false"
tools:context=".ui.MainActivity">
<mycompany.PlayPauseButton
android:id="#+id/play_pause_button"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ListView
android:id="#+id/workout_list"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/play_pause_button"/>
</androidx.constraintlayout.widget.ConstraintLayout>

this is working for me :
<?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="match_parent"
app:layout_constrainedHeight="false">
<mycompany.PlayPauseButton
android:id="#+id/play_pause_button"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<ListView
android:id="#+id/workout_list"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/play_pause_button"/>
</androidx.constraintlayout.widget.ConstraintLayout>
With constraint layout, it's usually (at least in my experience) a lot easier to build either top-down or bottom-up, so get one component into a position where you're happy with it and then add then next one, maybe that helps

Can not find navigation drawer layout in android studio

When building my application I selected the template with the navigation drawer. Now however I can't access the drawer to edit from the design tab in android studio.
Image of Template I chose for refrence
Is their something in I need to do in the XML (below) to make it view able again?
<?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="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:layout_editor_absoluteY="56dp"
tools:showIn="#layout/app_bar_main"
tools:visibility="visible">
<ImageButton
android:id="#+id/inactiveButton"
android:layout_width="346dp"
android:layout_height="346dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:background="#android:color/transparent"
android:scaleType="fitXY"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.489"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.498"
app:srcCompat="#drawable/button_pressed" />
EDIT: squished view

View with button and list fragment under it

I'm trying to create view with button and fragemtn with list under this button. The problem is that the list starts from top of button not from bottom and it's look like this:
Layout code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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"
tools:context=".activities.BluetoothActivity">
<Button
android:text="#string/scan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/BluetoothScanButton"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="8dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="8dp"
android:layout_marginTop="40dp"
app:layout_constraintTop_toTopOf="parent"/>
<fragment
android:id="#+id/BluetoothDevicesFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="com.tatara.taffico.DeviceListFragment"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="8dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/BluetoothScanButton"/>
</android.support.constraint.ConstraintLayout>
Could anyone help me to fix it ?

You should add android:layout_height="0dp" fragment section.
<fragment
android:id="#+id/BluetoothDevicesFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
ConstraintLayout
You can also define one dimension of a widget as a ratio of the other
one. In order to do that, you need to have at least one constrained
dimension be set to 0dp (i.e., MATCH_CONSTRAINT).

I believe you're missing app:layout_constraintBottom_toTopOf="#id/BluetoothDevicesFragment" in the Button.

Place ImageView on top of button in ConstraintLayout

I'm facing issues with constraintlayout when placing ImageView or FrameLayout on top of a Button.
When i try to inflate a fragment on FrameLayout, Buttons that are part of activity are visible on top of fragment UI.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button"/>
<FrameLayout
android:background="#color/blue"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
</android.support.constraint.ConstraintLayout>

To place any view above another view you have to give proper constraint like below.
Give top and bottom constraint proper and also as I give all constraint(start,end,top,bottom) to FrameLayout it's height and width give to 0dp(you can't use height to match_parent otherwise it's cover whole screen and overlap button).
>
<?xml version="1.0" encoding="utf-8"?>
<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">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<FrameLayout
android:background="#color/colorPrimary"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/button"/>
</android.support.constraint.ConstraintLayout>

To set constraints of button and FrameLayout to,
Button:
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
FrameLayout :
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button"

Your code looks ok but if you want to tell 1 view to be above another view in ConstraintLayout you can go to the design tab and move the higher above the lower view:
Example:
In the image, you can see that the button is placed below the frameLayout so he will be lower than the frameLayout (the frameLayout will be above the button)
Also, you were missing some constraints on your button :
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/frameLayout2" />
<FrameLayout
android:id="#+id/frameLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
And if all that didn't help you check this thread, as #Xavier Rubio Jansana said, it may be because of elevation.

Try the code below
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:text="button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="638dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:background="#color/appGrey"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button">
</FrameLayout>
</android.support.constraint.ConstraintLayout>