This is Acitivity_main.xml of a PDF Reader on Android.
I am confused on how to add two floating Action Buttons(Page Up/Down Button) in the bottom right corner. The buttons need to display above PDF, and uses linear vertical layout.
Following XML separates PDF and Buttons into two parts which is wrong, any idea how to correct it?
<?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"
tools:context=".MainActivity">
<LinearLayout
android:id="#+id/pdfstructure"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/DownButton"
android:layout_width="100dp"
android:layout_height="200dp"
android:layout_gravity="end|bottom"
android:layout_marginTop="600dp"
android:layout_marginRight="30dp"
android:clickable="true"
android:contentDescription="#string/upButton"
android:stateListAnimator="#null"
android:text="Down"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/upButton"
android:layout_width="100dp"
android:layout_height="200dp"
android:layout_gravity="end|bottom"
android:layout_marginTop="800dp"
android:layout_marginRight="30dp"
android:clickable="true"
android:text="Up"
android:stateListAnimator="#null"
android:contentDescription="#string/upButton"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Add this line in your linearLayout
android:gravity="bottom"
and delete those lines in your FloatingActionButton
android:layout_marginTop="600dp"
android:layout_marginTop="800dp"
Related
I'm trying to center a mini fab button above a normal one using ConstraintLayout. However, it will be ultimately skewed one way. Here's the XML code:
<?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:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
tools:context=".MainActivity">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab_task"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginBottom="24dp"
app:backgroundTint="#color/fab_event"
app:fabSize="mini"
app:layout_constraintBottom_toTopOf="#+id/fab_plus"
app:layout_constraintEnd_toEndOf="#+id/fab_plus"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/fab_plus"
app:srcCompat="#drawable/ic_baseline_task_alt_24"
app:tint="#color/white" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab_plus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="#drawable/ic_baseline_add_24" />
</androidx.constraintlayout.widget.ConstraintLayout>
This is how it looks.
The selection squares around the buttons aren't also centered which I think is why the main issue is happening.
Can anything be done about this?
I'm using ConstraintLayout in order to create activity view
There is a code snippet:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
android:gravity="bottom"
android:orientation="vertical"
tools:context=".presentation.screens.registration.RegistrationActivity">
<LinearLayout>...</LinearLayout>
<Button
android:id="#+id/login_next_btn"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#drawable/button_green_disabled"
android:layout_width="match_parent"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="24dp"
android:text="#string/next"
android:textColor="#color/font_white"
android:textSize="16sp"
android:layout_height="48dp"
android:enabled="false"
android:onClick="onNextClick"/>
<ImageView
android:id="#+id/loader_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="#+id/login_next_btn"
android:src="#drawable/ic_loader"/>
</androidx.constraintlayout.widget.ConstraintLayout>
The question is: How can I set ImageView (android:id="#+id/loader_image") in the center of Button (#+id/login_next_btn)?
Try this:
<ImageView
android:id="#+id/loader_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="#id/login_next_btn"
app:layout_constraintRight_toRightOf="#id/login_next_btn"
app:layout_constraintBottom_toBottomOf="#id/login_next_btn"
app:layout_constraintTop_toTopOf="#id/login_next_btn"
android:src="#drawable/ic_loader"/>
If you have to set it in the center just change the constraints of the image with :
app:layout_constraintBottom_toBottomOf="#id/login_next_btn"
app:layout_constraintTop_toTopOf="#id/login_next_btn"
app:layout_constraintStart_toStartOf="#id/login_next_btn"
app:layout_constraintEnd_toEndOf="#id/login_next_btn"
Making an app. Last 2 button are visible in preview mode , but not in AVD(Google pixel 3a). Actually I'm new to Android. I just directly pasted the code if need more information let me know. Thank you
Snippet of code
<?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"
tools:context=".MainActivity">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/courses_offered"
android:layout_marginTop="470dp"
android:layout_marginBottom="140dp"
android:layout_marginRight="30dp"
android:layout_marginLeft="230dp"
android:textColor="#color/white"
android:backgroundTint="#color/orange"
/>
<Button
android:id="#+id/Fee_structure"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/fee_structure"
android:layout_marginTop="470dp"
android:layout_marginBottom="140dp"
android:layout_marginRight="230dp"
android:layout_marginLeft="30dp"
android:textColor="#color/white"
android:backgroundTint="#color/orange"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
You're using ConstraintLayout but your buttons doesn't have any constraint to initialize where they should be
For example:
adding app:layout_constraintBottom_toBottomOf="parent" will position the bottom of the button to the bottom of parent, in this case, your layout
See this for further details and examples: https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout?authuser=1
You have to use constraints in the Constraint layout just like
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
enter link description here
Try this code it will show you in AVD.
<?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"
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:backgroundTint="#color/teal_200"
android:text="asd"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.8"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.8" />
<Button
android:id="#+id/Fee_structure"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/teal_200"
android:text="asd"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintHorizontal_bias="0.2"
app:layout_constraintVertical_bias="0.8" />
</androidx.constraintlayout.widget.ConstraintLayout>
You have given height and width to match parent so your first button is taking all the space available in screen so you have to make them wrap content (height) and then constraint them accordingly
I made xml file for my bottom sheet, everything works nice it shows texts but it is not showing images although in my preview I have imageViews, however when I run the app the images disappear.
Here is part of my xml code of Bottom Sheet:
<?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:id="#+id/trip_details"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
<TextView
android:id="#+id/carModel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginTop="22dp"
android:fontFamily="#font/roboto_medium"
android:text="#string/white_cobalt_textView"
android:textColor="#2C2C2C"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/licensePlate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="55dp"
android:fontFamily="#font/roboto_medium"
android:lineSpacingMultiplier="1.20"
android:text="01 | A 717 CB"
android:textColor="#2C2C2C"
android:textSize="20sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/callingBtn"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="18dp"
android:contentDescription="#string/call_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/bnt_call" />
</androidx.constraintlayout.widget.ConstraintLayout>
I am using BottomSheet in google maps activity, here is xml code where bottom sheet is attached:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MapsActivity">
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<include layout="#layout/bottom_sheet_trip_details" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
You need to use AppCompatImageView to use srcCompat.
Try this:
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/callingBtn"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="18dp"
android:contentDescription="#string/call_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/bnt_call" />
I set image with android:background="#drawable/" property and it worked!
But I don't know why it was not showing image with property: app:srcCompat="#drawable/" or app:src=""
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>