android layout elements going behind bottom navigation bar - android

I already searched but I didn't find anything useful for me.
Im developing a simple android app. The problem that I have is that contents in the layout go behind the default bottom navigation bar of a specific mobile phone.
So I have tried two smartphones, in the first the layout was as intended, and it is how it appears Image1
In the second smartphone the button is not visible and goes behind the bottom navigation bar (which is not in our code, is the default bar of the smartphone).
After changing the layout to make it fit into the second smartphone, it looks like that in the first one Image2
Which is not what I need.
How do I solve this problem so that I can see the app in every smartphone like the image.1?
This is the fragment.
<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/frameLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".profile.Profile_photo_frag">
<GridView
android:id="#+id/gridView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="#dimen/_45sdp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/add_photo"
android:layout_above="#id/add_photo"
android:columnWidth="90dp"
android:gravity="center"
android:horizontalSpacing="10dp"
android:numColumns="2"
android:stretchMode="columnWidth"
android:verticalSpacing="10dp">
</GridView>
<Button
android:id="#+id/add_photo"
android:layout_width="match_parent"
android:layout_height="#dimen/_40sdp"
app:layout_constraintTop_toBottomOf="#id/gridView"
android:layout_marginBottom="#dimen/_1sdp"
android:text="Upload image" />
</androidx.constraintlayout.widget.ConstraintLayout>
EDIT:
This is the root layout of the tab fragments
<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"
android:fitsSystemWindows="true">
<ImageView
android:id="#+id/profile_image"
android:layout_width="149dp"
android:layout_height="141dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/add_img" />
<TextView
android:id="#+id/user_country"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="68dp"
android:text="Altro"
app:layout_constraintStart_toStartOf="#+id/user_name"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/user_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="160dp"
android:layout_marginLeft="160dp"
android:layout_marginTop="17dp"
android:layout_marginBottom="695dp"
android:text="Nome"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/user_mail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="96dp"
android:text="Mail"
android:textStyle="italic"
app:layout_constraintStart_toStartOf="#+id/user_country"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/edit_profile"
android:layout_width="57dp"
android:layout_height="52dp"
android:layout_marginTop="36dp"
android:layout_marginBottom="643dp"
android:background="#00F3F3F3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#+id/user_country"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/ic_edit_black_24dp" />
<View
android:id="#+id/divider"
android:layout_width="409dp"
android:layout_height="1dp"
android:layout_marginTop="220dp"
android:background="#000000"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="149dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageButton
android:id="#+id/but_p_profile"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/left_border"
app:srcCompat="#drawable/ic_travel" />
<ImageButton
android:id="#+id/but_p_photo"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/left_border"
app:srcCompat="#drawable/ic_pictures" />
<ImageButton
android:id="#+id/but_p-posts"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/left_border"
app:srcCompat="#drawable/ic_ads" />
<ImageButton
android:id="#+id/imageButton16"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/left_border"
app:srcCompat="#drawable/ic_commerce" />
</LinearLayout>
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="61dp"
android:layout_marginTop="149dp"
app:layout_constraintTop_toTopOf="parent"
app:tabIndicatorColor="#9C27B0"
app:tabMode="fixed"
android:fitsSystemWindows="true">
<com.google.android.material.tabs.TabItem
android:id="#+id/first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="" />
<com.google.android.material.tabs.TabItem
android:id="#+id/second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="" />
<com.google.android.material.tabs.TabItem
android:id="#+id/third"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="" />
<com.google.android.material.tabs.TabItem
android:id="#+id/fourth"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="" />
</com.google.android.material.tabs.TabLayout>
<androidx.viewpager.widget.ViewPager
android:fitsSystemWindows="true"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="509dp"
android:layout_marginTop="220dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</androidx.viewpager.widget.ViewPager>
</androidx.constraintlayout.widget.ConstraintLayout>

Certainly its the issue with your view pager height and top margin. You should not set static margin and height rather align the top of your view pager to bottom of your last view in your top view hierarchy.

Inside your constraintLayout add LinearLayout then set your UI, but not used margin to put static value. You can use weight to manage your block. Need some help follow link and more examples available in stack overflow.
I hope it'll help you !

Related

ScrollView does not scroll up properly when inside BottomSheet

I created a ScrollView inside a BottomSheet and yes, it scrolls down properly but when it stops and I try to scroll up, the BottomSheet instead collapses. But when I scroll down first before scrolling up, it actually scrolls up properly. I don't want my users to feel the need to scroll down first before actually scrolling up because this can cause user frustration.
Here is my xml code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">
<androidx.drawerlayout.widget.DrawerLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/drawer_layout"
>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<androidx.fragment.app.FragmentContainerView
android:id="#+id/mapsRoute"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/menu_button"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginLeft="30dp"
android:layout_marginTop="40dp"
android:onClick="ClickMenu"
android:src="#drawable/ic_baseline_menu_24"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tint="#000000" />
<TextView
android:layout_width="150dp"
android:layout_height="wrap_content"
android:text="TIP: To scroll back up the route viewer, swipe up first then swipe down."
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="10dp"
android:layout_marginBottom="65dp"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
<RelativeLayout
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#FFFFFF"
>
<include layout="#layout/navigation_toolbar" />
</RelativeLayout>
</androidx.drawerlayout.widget.DrawerLayout>
<FrameLayout
android:id="#+id/routesContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
android:background="#drawable/bottomtoolbar"
>
<androidx.constraintlayout.widget.ConstraintLayout
android:paddingTop="5dp"
android:paddingBottom="20dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
>
<ImageView
android:id="#+id/baselineRouteViewer"
android:layout_width="60dp"
android:layout_height="8dp"
android:src="#drawable/ic_baseline"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="15dp"
/>
<TextView
android:id="#+id/routesText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="VIEW ROUTES & TERMINALS"
android:fontFamily="#font/assistantextrabold"
android:textColor="#color/secondary"
android:textSize="25sp"
android:layout_marginTop="20dp"
android:layout_marginBottom="10dp"
app:layout_constraintTop_toBottomOf="#+id/baselineRouteViewer"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
/>
<com.google.android.material.tabs.TabLayout
android:id="#+id/routeTabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/primary"
app:tabSelectedTextColor="#color/secondary"
app:tabTextColor="#color/custom3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#id/routesText"
app:layout_constraintRight_toRightOf="parent">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BUS ROUTES"/>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="JEEP ROUTES"/>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TERMINALS"/>
</com.google.android.material.tabs.TabLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/routeViewPager"
android:layout_width="match_parent"
android:layout_height="220dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/routeTabs"
/>
<Button
android:id="#+id/clearMap"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:text="Clear Map"
android:textSize="10sp"
android:fontFamily="#font/assistantextrabold"
app:layout_constraintTop_toBottomOf="#+id/routeViewPager"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginTop="10dp"
android:layout_marginLeft="20dp"
android:backgroundTint="#color/secondary"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

How to fix equal spacing in a horizontal ConstraintLayout?

I am having trouble using a ConstraintLayout within a ConstraintLayout to equally space out 5 buttons at the bottom of my app. Currently, I am able to space all buttons equally except for the leftmost button:
shown here. I understand a LinearLayout would also function for this purpose, but I would like to use a ConstraintLayout if possible. My activity XML is shown below:
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layout2"
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_alignParentBottom="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/linear1">
<ImageButton
android:id="#+id/back_arrow"
style="#style/Base.Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/back_arrow"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toStartOf="#id/forward_arrow"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintVertical_chainStyle="spread" />
<ImageButton
android:id="#+id/forward_arrow"
style="#style/Base.Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/forward_arrow"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toStartOf="#id/refresh"
app:layout_constraintStart_toEndOf="#id/back_arrow"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintVertical_chainStyle="spread" />
<ImageButton
android:id="#+id/refresh"
style="#style/Base.Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/refresh_icon"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toStartOf="#id/stop"
app:layout_constraintStart_toEndOf="#id/forward_arrow"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintVertical_chainStyle="spread" />
<ImageButton
android:id="#+id/stop"
style="#style/Base.Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/stop_icon"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toStartOf="#id/home"
app:layout_constraintStart_toEndOf="#id/refresh"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintVertical_chainStyle="spread" />
<ImageButton
android:id="#+id/home"
style="#style/Base.Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/home_icon"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/stop"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintVertical_chainStyle="spread" />
</androidx.constraintlayout.widget.ConstraintLayout>
<LinearLayout
android:id="#+id/linear1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:orientation="vertical"
android:weightSum="2"
app:layout_constraintBottom_toTopOf="#+id/layout2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme">
<RelativeLayout
android:id="#+id/url_go_progressbar_relLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/web_address_edit_text"
android:layout_width="200dp"
android:layout_height="48dp"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:layout_toLeftOf="#+id/go_button"
android:focusable="true"
android:focusableInTouchMode="true"
android:hint="Enter URL"
android:importantForAutofill="noExcludeDescendants"
android:inputType="textWebEditText"
android:textSize="13sp" />
<Button
android:id="#+id/go_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/web_address_edit_text"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginTop="4dp"
android:text="#string/go_button" />
<ProgressBar
android:id="#+id/progress_bar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/web_address_edit_text" />
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="#+id/swipe"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.4">
<WebView
android:id="#+id/web_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
</WebView>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I am new to Android Development so I don't have much experience, if there are any other bad practices you notice while looking at my XML, please let me know.
(Also if possible, I am interested in knowing if there is a way to make the navbar use a specific percent of the screen rather than a static dp as I have assigned it.)
Thank you!
I notice you're already using chains.
Hence, all you need to do is to change all your ImageButton's width to 0dp. This seems counter-intuitive but it will cause all buttons to match the constraints set, hence all buttons would have equal width.
e.g.
android:layout_width="wrap_content"
must be changed to
android:layout_width="0dp"
Thanks!
Here is your answer with more clarification using a ConstraintLayout
https://constraintlayout.com/basics/create_chains.html
use guidelines at equal distance and constraint your button to it you will need to add 3 vertical guidelines for equal spacing of your button
know more about it
https://developer.android.com/reference/androidx/constraintlayout/widget/Guideline
<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">
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline"
app:layout_constraintGuide_begin="100dp"
android:orientation="vertical"/>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button"
app:layout_constraintLeft_toLeftOf="#+id/guideline"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Constraintlayout(in RelativeLayout) layout_alignParentBottom cuts from bottom(in default mode of app)

I have added ConstraintLayout in RelativeLayout and I want that at the bottom of my RelativeLayout.So, it's proper when the app opens in full-screen mode but in default mode constraint layout cuts from the bottom.
I have checked this thing in the different scenario like if I put it on top it comes proper even in the default mode but when I align it to bottom it gets cut.
<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"
tools:context="org.cocos2dx.cpp.AppActivity"
android:id="#+id/cameraView">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/control"
android:layout_width="match_parent"
android:layout_height="112dp"
android:paddingBottom="0dp"
android:layout_alignParentBottom="true"
android:background="#color/control_background">
<ImageButton
android:id="#+id/cancelBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="30dp"
android:layout_marginLeft="30dp"
android:background="#android:color/transparent"
android:src="#drawable/close"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/imageCaptureBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#android:color/transparent"
android:scaleX="1.20"
android:scaleY="1.20"
android:src="#drawable/capture"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.5" />
<ImageButton
android:id="#+id/reverseCameraBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|right"
android:layout_marginEnd="30dp"
android:layout_marginRight="30dp"
android:background="#android:color/transparent"
android:src="#drawable/reverse_cam"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.508" />
</androidx.constraintlayout.widget.ConstraintLayout>
</RelativeLayout>
So, here in ConstraintLayout when I keep
android:layout_alignParentTop="true"
It doesn't get cut from top like in the image
but when I give it to android:layout_alignParentBottom="true" it gets cut only in default mode of the app and I want this constraintLayout at bottom of the RelativeLayout
You can also use Constraint layout as Rootview like below.
<?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"
android:id="#+id/cameraView">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/control"
android:layout_width="match_parent"
android:layout_height="112dp"
android:layout_alignParentBottom="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#color/colorPrimary">
<ImageButton
android:id="#+id/cancelBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="30dp"
android:layout_marginLeft="30dp"
android:background="#android:color/transparent"
android:src="#drawable/ic_attach"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/imageCaptureBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#android:color/transparent"
android:scaleX="1.20"
android:scaleY="1.20"
android:src="#drawable/ic_attach"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<ImageButton
android:id="#+id/reverseCameraBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|right"
android:layout_marginEnd="30dp"
android:layout_marginRight="30dp"
android:background="#android:color/transparent"
android:src="#drawable/ic_attach"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="RtlHardcoded" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Why doesn't Linear Layout maxHeight work?

This is my layout.
I set max and min height on the linear layout but max height seems not to be working. In fact if TextView R.id.testo has a lot of text this won't be trimmed. This doesn't happen if I set fixed height. But I didn't want to set a fixed height in order to make it correctly resizable when for instance spilt screen mode is selected.
<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=".WidgetSettingsActivity">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
android:elevation="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:popupTheme="?attr/popupThemeToolbar"
app:title=""
app:titleTextAppearance="#style/ToolbarTitle" />
<LinearLayout
android:id="#+id/card"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="55dp"
android:layout_marginTop="#dimen/margin_16"
android:layout_marginEnd="55dp"
android:background="#drawable/widget_background"
android:clickable="false"
android:maxHeight="400dp"
android:minHeight="400dp"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/titolo"
style="#style/Base.TextAppearance.AppCompat.Title"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_weight="1"
android:drawableEnd="#drawable/ic_if_settings_1540178"
android:ellipsize="end"
android:fontFamily="#font/encodesanscondensed_medium"
android:hint="#string/no_title"
android:maxLines="1"
android:padding="8dp"
android:textSize="18sp"
tools:text="Title" />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingStart="#dimen/fab_margin"
android:paddingTop="4dp"
android:paddingEnd="#dimen/fab_margin"
android:paddingBottom="4dp">
<TextView
android:id="#+id/testo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/encodesanscondensed_regular"
android:hint="#string/no_text"
android:textColor="?android:attr/editTextColor"
android:textSize="18sp"
tools:text="Text multiple rows" />
<TextView
android:id="#+id/last_modified"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_marginTop="24dp"
android:fontFamily="#font/encodesanscondensed_regular"
android:gravity="end|bottom"
android:textSize="12sp"
tools:text="#string/last_modified_s" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="35dp"
android:layout_marginEnd="35dp"
android:layout_marginBottom="8dp"
android:gravity="bottom"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/card"
app:layout_constraintVertical_bias="0.905">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="13dp"
android:layout_marginBottom="#dimen/margin_16"
android:fontFamily="#font/encodesanscondensed_medium"
android:text="#string/background_transparency"
android:textAllCaps="true"
android:textColor="#color/colorPrimary"
android:textSize="13sp" />
<androidx.appcompat.widget.AppCompatSeekBar
android:id="#+id/seekbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="255"
android:min="0"
android:progressBackgroundTint="#color/white_opacity" />
</LinearLayout>
As your parent view is ConstraintLayout.
I have also implemented the max and min and for me
Replace these lines
android:maxHeight="400dp"
android:minHeight="400dp"
with
app:layout_constraintHeight_max="400dp"
app:layout_constraintHeight_min="400dp"
app:layout_constrainedHeight="true"
This code working fine. I hope it also works for you.
You have used for your LinearLayout within Constraint layout
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
End_toEndOf set to parent
Start_toStartOf is set to parent
And thats the reason maxHeight is not working.

Round corners of MapFragment and ConstraintLayout in CardView

I am trying to build a CardView based layout which contains both a MapFragment and a ConstraintLayout. The problem is that the cardview has rounded edges but this is not getting applied to the MapFragment and the ConstraintView inside the Card.
I have tried using Drawables with rounded corners as described here but it doesn't seem to work, and the Card's rounded corners either get drawn over by pointy edges or leave a border (depending on whether I use the drawable or leave it out).
What am I doing wrong, or missing?
The Layout XML is as follows:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 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"
android:layout_margin="8dp"
android:background="?android:attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
app:cardCornerRadius="20dp">
<android.support.constraint.ConstraintLayout
android:id="#+id/view_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintGuide_end="167dp"
app:layout_constraintStart_toStartOf="parent" />
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.MapFragment"
android:layout_width="0dp"
android:layout_height="0dp"
app:cameraZoom="13"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:liteMode="true"
app:mapType="normal" />
<android.support.constraint.ConstraintLayout
android:id="#+id/linearLayout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#drawable/drawable_rounded_right"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/map"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:id="#+id/view_foreground"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/drawable_rounded_right_upper"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:layout_conversion_absoluteHeight="105dp"
tools:layout_conversion_absoluteWidth="162dp"
tools:layout_editor_absoluteY="5dp">
<TextView
android:id="#+id/txtFname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Name"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout_conversion_absoluteHeight="30dp"
tools:layout_conversion_absoluteWidth="59dp" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hours"
android:textAppearance="#style/TextAppearance.AppCompat.Small"
app:layout_constraintEnd_toEndOf="#+id/txtHours"
app:layout_constraintStart_toStartOf="#+id/txtHours"
app:layout_constraintTop_toBottomOf="#+id/txtHours"
tools:layout_conversion_absoluteHeight="19dp"
tools:layout_conversion_absoluteWidth="38dp"
tools:layout_editor_absoluteX="293dp"
tools:layout_editor_absoluteY="80dp" />
<TextView
android:id="#+id/txtHours"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="10"
android:textAppearance="#style/TextAppearance.AppCompat.Display1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout_conversion_absoluteHeight="46dp"
tools:layout_conversion_absoluteWidth="38dp" />
<TextView
android:id="#+id/txtGender"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Male"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
app:layout_constraintStart_toStartOf="#+id/txtFname"
app:layout_constraintTop_toBottomOf="#+id/txtFname"
tools:layout_conversion_absoluteHeight="19dp"
tools:layout_conversion_absoluteWidth="31dp"
tools:layout_editor_absoluteX="185dp"
tools:layout_editor_absoluteY="64dp" />
<TextView
android:id="#+id/textView24"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Age"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/txtGender"
app:layout_constraintTop_toBottomOf="#+id/txtGender"
tools:layout_conversion_absoluteHeight="19dp"
tools:layout_conversion_absoluteWidth="24dp"
tools:layout_editor_absoluteX="185dp"
tools:layout_editor_absoluteY="83dp" />
<TextView
android:id="#+id/txtAge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
app:layout_constraintBaseline_toBaselineOf="#+id/textView24"
app:layout_constraintStart_toEndOf="#+id/textView24"
tools:layout_conversion_absoluteHeight="19dp"
tools:layout_conversion_absoluteWidth="8dp"
tools:layout_editor_absoluteX="217dp"
tools:layout_editor_absoluteY="83dp" />
</android.support.constraint.ConstraintLayout>
<Button
android:id="#+id/btnAction1"
style="#style/Widget.AppCompat.Button.Borderless.Colored"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/drawable_rounded_right_lower"
android:text="Action"
android:textColor="#color/brightblue"
android:textColorLink="#color/brightblue"
android:textSize="12dp"
android:textStyle="italic"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/view_foreground"
tools:layout_conversion_absoluteHeight="30dp"
tools:layout_conversion_absoluteWidth="88dp" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
Enclosing the mapview in a cardview and changing the radius of the cardview can be a nice shot.
<android.support.v7.widget.CardView
android:layout_width="300dp"
android:layout_height="350dp"
app:cardCornerRadius="12dp">
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.MapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cameraZoom="13"
app:liteMode="true"
app:mapType="normal" />
</android.support.v7.widget.CardView>
I really think your view hierarchy is quite nested and will amount to redundancy...(Good use of one Constraint layout can yield same interface, you have about 3). I guess you have to work on that.
Besides, you can add some margin to the map..., shift it from the edges. ( I hope that is what you want to achieve )

Categories

Resources