Fragment is not fully displayed when used in activity with actionbar - android

In my activity (ConstraintLayout) I have an actionbar and a container (for my viewpage adapater). In this container I am displaying various fragments.
My problem is that the fragments (also in ConstraintLayout) are not completely displayed, meaning they are cut off at the end. My assumption is that this happens because the fragment "doesnt know" about the action bar in the activity and thus thinks it has the full screen to use but instead this part which the action bar takes up is moved down and off from the screen. That's just an assumption maybe I am completely wrong. Anybody can help on how to make sure the fragment layout is somehow "fitted" right to the screen?
my activity xml with the actionbar:
<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="wrap_content"
tools:context=".TourActivity">
<include
android:id="#+id/app_bar"
layout="#layout/app_bar"
tools:layout_editor_absoluteY="8dp"></include>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/app_bar" />
</android.support.constraint.ConstraintLayout>
the fragment xml:
<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"
tools:context=".TourActivity">
<TextView
android:id="#+id/test"
android:layout_width="388dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="24dp"
android:gravity="center"
android:text="testtest testtest"
android:textSize="25dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.52"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView"
android:layout_width="365dp"
android:layout_height="185dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/question"
tools:src="#android:color/darker_gray" />
<Button
android:id="#+id/answerButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="156dp"
android:layout_marginEnd="8dp"
android:text="answerButton1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<Button
android:id="#+id/answerButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:text="answerButton2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/answerButton1" />
<Button
android:id="#+id/answerButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="8dp"
android:text="answerButton3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/answerButton2" />
</android.support.constraint.ConstraintLayout>


<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/app_bar"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
Pls give that a go.


Use Relative Layout in the main XML file
<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"
tools:context=".TourActivity">
<include
android:id="#+id/app_bar"
layout="#layout/app_bar"
tools:layout_editor_absoluteY="8dp"/>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/app_bar" />
</RelativeLayout>

Related

Why is my recyclerview showing a whitespace

I am practing recyclerView in a fragment in Android Studio, I made this Application;
As you can see there is a whitespace between the toolbar (appbar) and the contents (i.e the recyclerview in this case)
Please, how do I get rid of this whitespace..
Here's the .xml file of the fargment I put the recyclerview:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".ui.newscreen.NewScreenFragment">
<!-- TODO: Update blank fragment layout -->
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="0dp"
android:layout_height="0dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:listitem="#layout/new_screen_recyclerview_look" />
</androidx.constraintlayout.widget.ConstraintLayout>
Here's the sample layout listItem;
<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="wrap_content">
<androidx.cardview.widget.CardView
android:id="#+id/cardView"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:cardCornerRadius="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/card_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
app:srcCompat="#drawable/nav_header_image_nature"
android:contentDescription="#string/images_for_the_stories" />
</androidx.cardview.widget.CardView>
<TextView
android:id="#+id/card_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:text="#string/Leonardo_Del_Vecchio"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/cardView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/cardView"
app:layout_constraintTop_toTopOf="#+id/cardView"
app:layout_constraintVertical_bias="0.04000002" />
<TextView
android:id="#+id/card_tontent"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:maxLines="3"
android:text="#string/sample_story_content"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/cardView"
app:layout_constraintTop_toBottomOf="#+id/card_title" />
</androidx.constraintlayout.widget.ConstraintLayout>
Thanks in Advance for your Help!

I have been able to solve the issue.
There was a attribute in the main_activity.xml that cause this.
which was android:paddingTop="?attr/actionBarSize
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?attr/actionBarSize">

Is there a possibility to set the 0,0 coordinate on android beneath the toolbar or make the toolbar not overlappable?

I have the following problem:
On my android program I can create imageViews and buttons via a click on a button. These new buttons and imageViews get created at the top left corner at the 0,0 coordinate. The problem is now that I included a toolbar now instead of the standard ActionBar. When my buttons and imageViews are created now, they overlapped by the toolbar. I need a possibility to either change the coordinate system beneath the toolbar or simply make the toolbar not overlappable.
I already tried working with different layouts, like including the toolbar in a Linear Layout, the main layout beneath it etc. but I found nothing that works!
I ask for help, thank you very much!
MainActivity.xml
<?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:id="#+id/root_layout_id"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"/>
<Button
android:id="#+id/aaa"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:onClick="bbb"
android:text="#string/ccc"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/ddd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="eee"
android:text="#string/fff"
app:layout_constraintBottom_toTopOf="#+id/ggg"
app:layout_constraintEnd_toEndOf="parent" />
<Button
android:id="#+id/hhh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="iii"
android:text="#string/jjj"
app:layout_constraintBottom_toTopOf="#+id/kkk"
app:layout_constraintEnd_toEndOf="parent" />
<Button
android:id="#+id/lll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="mmm"
android:text="#string/ooo"
app:layout_constraintBottom_toTopOf="#+id/nnn"
app:layout_constraintEnd_toEndOf="parent" />
<Button
android:id="#+id/ppp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="validate"
android:text="#string/qqq"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<Button
android:id="#+id/rrr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sss"
android:text="#string/ttt"
app:layout_constraintBottom_toTopOf="#+id/uuu"
app:layout_constraintEnd_toEndOf="parent" />
<Button
android:id="#+id/vvv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="www"
android:text="#string/button_share"
app:layout_constraintBottom_toTopOf="#+id/xxx"
app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>
toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar 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"
android:background="#color/colorPrimary"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
MainActivity.java
Here I also added the toolbar in replacement for the ActionBar
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
#Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.main_menu, menu);
return true;
}
Edit:
MainActivity.xml with the ?android attribute which handels the problem visually but doesn't solve the problem at all.
MainActivity.xml
<?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:id="#+id/root_layout_id"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"/>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?android:attr/actionBarSize">
<Button
android:id="#+id/aaa"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:onClick="bbb"
android:text="#string/ccc"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/ddd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="eee"
android:text="#string/fff"
app:layout_constraintBottom_toTopOf="#+id/ggg"
app:layout_constraintEnd_toEndOf="parent" />
<Button
android:id="#+id/hhh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="iii"
android:text="#string/jjj"
app:layout_constraintBottom_toTopOf="#+id/kkk"
app:layout_constraintEnd_toEndOf="parent" />
<Button
android:id="#+id/lll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="mmm"
android:text="#string/ooo"
app:layout_constraintBottom_toTopOf="#+id/nnn"
app:layout_constraintEnd_toEndOf="parent" />
<Button
android:id="#+id/ppp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="validate"
android:text="#string/qqq"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<Button
android:id="#+id/rrr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sss"
android:text="#string/ttt"
app:layout_constraintBottom_toTopOf="#+id/uuu"
app:layout_constraintEnd_toEndOf="parent" />
<Button
android:id="#+id/vvv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="www"
android:text="#string/button_share"
app:layout_constraintBottom_toTopOf="#+id/xxx"
app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

Change the .xml of toolbar to 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="your path to the activity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
>
<android.support.v7.widget.Toolbar
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"
android:background="#color/colorPrimary"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/your_xml_for_activity_the_one_with_buttons" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
And in MainActivity.java use:
setContentView(R.layout.toolbar);
Like this you will create the toolbar, and will use the content of the buttons xml to be displayed under it.

Here is an example that can get you on your way as I dont know what the layout is you are trying to accomplish but this layout stacks the buttons starting below the toolbar.
<?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/root_layout_id"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"/>
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/aaa"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Button1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar"/>
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/ddd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2"
app:layout_constraintTop_toBottomOf="#+id/aaa"
app:layout_constraintStart_toStartOf="parent"/>
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/hhh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button3"
app:layout_constraintTop_toBottomOf="#+id/ddd"
app:layout_constraintStart_toStartOf="parent" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/lll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button4"
app:layout_constraintBottom_toTopOf="#+id/hhh"
app:layout_constraintStart_toStartOf="parent"/>
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/ppp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button5"
app:layout_constraintTop_toBottomOf="#+id/lll"
app:layout_constraintStart_toStartOf="parent"/>
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/rrr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button6"
app:layout_constraintTop_toBottomOf="#+id/ppp"
app:layout_constraintStart_toStartOf="parent"/>
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/vvv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button7"
app:layout_constraintTop_toBottomOf="#+id/rrr"
app:layout_constraintStart_toStartOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

RecyclerView in FrameLayout overlapping other elements

In my android app, I am having following framelayout
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".fragments.AppointmentFragment">
<!-- TODO: Update blank fragment layout -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
android:orientation="vertical">
<com.github.jhonnyx2012.horizontalpicker.HorizontalPicker
android:id="#+id/datePicker"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/datePicker" />
</RelativeLayout>
</FrameLayout>
My HorizontalPicker is rendered correctly, however, recycler_view (RecycleView) content is being overlapped in HorizontalPicker.
I have tried various suggestions offered in Stakeoverflow, however nothing works.
Can somebody help me reolving the issue. I have also tried setting the android:layout_height="0dp" as suggested in other such issue, however it stops displaying the content of Recyclerview.

Just try with the following. It may work.
<android.support.v7.widget.RecyclerView
android:layout_below="#+id/datePicker"
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/datePicker" />

How to put an <include> full screen in my layout

I want to have an that will include a layout that contains a progress bar. The problem is that the background does not fill in the bottom and in the top, and I want that the background goes in front of the bottom navigation bar and the bottom bar. Here is a image of the problem.
Here is my include
<include
android:id="#+id/loadingProductDetails"
layout="#layout/dialog_login"
android:layout_width="0dp"
android:layout_height="0dp"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Here is my full layout
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimaryDark"
android:minHeight="?attr/actionBarSize"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.AppCompatTextView
style="#style/RepsolText"
android:id="#+id/categoryText"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:textSize="20sp"
android:textColor="#android:color/white"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="14dp" />
</androidx.appcompat.widget.Toolbar>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerViewOffersByCategories"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginStart="21dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="21dp"
android:layout_marginBottom="80dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar"
app:layout_constraintVertical_bias="0.0" />
<include
android:id="#+id/loginLoadingProduct"
layout="#layout/dialog_login"
android:layout_width="0dp"
android:layout_height="0dp"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Android layouts: how to put logo over border of two elements?

I make my Android app. Client’s requirement is to put logo to the bottom toolbar. The problem is that logo should be placed half over the bottom toolbar and half over the content. The problem is that I can not to negative margins, so I cannot shift logo image neither down from content, nor up over the toolbar. It should look so:
I made two toolbars – transparent and filled. But the problem is that I cannot stretch bottom of the content to the top of the filled toolbar because it is inside the transparent toolbar. Here is the picture and code.
<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/toolbarTop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorBrandColor"
app:popupTheme="#style/Theme.AppCompat.Light.DarkActionBar"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
<ImageView
android:id="#+id/imageViewTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:src="#drawable/sponge_bob" />
</android.support.v7.widget.Toolbar>
<FrameLayout
android:id="#+id/content_frame_to_inflate"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf ="#+id/toolbarTop"
app:layout_constraintBottom_toTopOf="#+id/toolbarBottomTransparent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarBottomTransparent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/content_frame_to_inflate"
app:contentInsetStart="0dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent" >
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarBottomFilled"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorBrandColor"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="32dp"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="64dp"
android:src="#drawable/sponge_bob_logo"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.Toolbar>
</android.support.constraint.ConstraintLayout>
How can I do proper layout?

Try something like this.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarTop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#cdcdcd"
app:popupTheme="#style/Theme.AppCompat.Light.DarkActionBar"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
<ImageView
android:id="#+id/imageViewTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp" />
</android.support.v7.widget.Toolbar>
<FrameLayout
android:id="#+id/content_frame_to_inflate"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf ="#+id/toolbarTop"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#cdcdcd"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="8dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
</RelativeLayout>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#000000"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="10dp"/>
</RelativeLayout>
UPDATED LAYOUT
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarTop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#4984ad"
app:popupTheme="#style/Theme.AppCompat.Light.DarkActionBar"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
</android.support.v7.widget.Toolbar>
<FrameLayout
android:id="#+id/content_frame_to_inflate"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbarTop"
android:layout_above="#+id/bottomBar"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:src="#drawable/background"/>
</FrameLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#4984ad"
android:id="#+id/bottomBar"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="8dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
</RelativeLayout>
<ImageView
android:layout_width="200dp"
android:layout_height="70dp"
android:src="#drawable/SpongeBob_SquarePants_logo"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="25dp"/>
</RelativeLayout>

Categories

Resources