Develop Reference

How to make Android xml Linerlayout at the bottom of the activity in Android Studio?

How do I make LinearLayout in Android Studio at the bottom of the page. The result from the code below
I want the highlighted darken layout to be at the bottom of the page.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainPage"
android:orientation="vertical"
android:background="#ffffff">
<Button
android:id="#+id/taptoscan"
android:layout_marginTop="40dp"
android:layout_marginBottom="10dp"
android:layout_width="120dp"
android:layout_height="120dp"
android:background="#drawable/barcode"
android:layout_gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tap to Scan"
android:fontFamily="#font/antic"
android:layout_gravity="center"
android:textSize="18sp"/>
<!--here is the layout i want to put at the bottom of the page-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#color/colorPrimaryDark"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:gravity="bottom">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</RelativeLayout>
</LinearLayout>
In the above code I tried the below and did not worked.
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:gravity="bottom"

You can use RelativeLayout at the outside. Something like this, and then ADD new one LinearLayout after that.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
android:background="#ffffff"
android:orientation="vertical"
tools:context=".MainPage">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:id="#+id/taptoscan"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="center"
android:layout_marginTop="40dp"
android:layout_marginBottom="10dp"
android:background="#drawable/barcode" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="#font/antic"
android:text="Tap to Scan"
android:textSize="18sp" />
</LinearLayout>
<!--here is the layout i want to put at the bottom of the page-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:background="#color/colorPrimaryDark"
android:gravity="bottom"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>

Use Frame Layout as base layout to do it in the best way, it's gonna work definitely
Just use layout_gravity="bottom" in the LinearLayout which you want at bottom and
Just like this :
<?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"
android:background="#ffffff"
android:orientation="vertical"
tools:context=".MainPage">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:id="#+id/taptoscan"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="center"
android:layout_marginTop="40dp"
android:layout_marginBottom="10dp"
android:background="#drawable/barcode" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="#font/antic"
android:text="Tap to Scan"
android:textSize="18sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_gravity="bottom"
android:background="#color/colorPrimaryDark"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</FrameLayout>

The approach below would help you achieve your design specifications with zero overlappings. Basically, there are four key steps:
Change your root layout to a RelativeLayout.
Inside the RelativeLayout, add a LinearLayout that would contain your Button and your TextView.
Inside the same RelativeLayout, add the LinearLayout that you intend to pin to the bottom of the screen.
Make sure yoU set the first LinearLayout on top of the second by using the android:layout_above="" attribute.
Now, here's the 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainPage">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#ffffff"
android:layout_above="#+id/bottomView">
<Button
android:id="#+id/taptoscan"
android:layout_marginTop="40dp"
android:layout_marginBottom="10dp"
android:layout_width="120dp"
android:layout_height="120dp"
android:background="#drawable/barcode"
android:layout_gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tap to Scan"
android:fontFamily="#font/antic"
android:layout_gravity="center"
android:textSize="18sp"/>
</LinearLayout>
<!--here is the layout i want to put at the bottom of the page-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:id="#+id/bottomView"
android:background="#color/colorPrimaryDark"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:gravity="bottom">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
I hope this helps.

Bottomsheet Error : The view is not a child of CoordinatorLayout

I want to create a layout in which 80% of the Screen Contains separate layout and 20% contains the bottom sheet vertically. But when i try to do it, it gives me error "The view is not a child of CoordinatorLayout". I got the error, but i can't figure out some other way to do it. Can Someone please help me to achieve it. Help will be Appreciated.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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"
android:background="#efefef">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="5">
<include
layout="#layout/content_main_new"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4" />
<include
layout="#layout/content_bottom_sheet2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
content_bottom_sheet2.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/bottomSheetLayout"
android:layout_width="match_parent"
android:layout_height="230dp"
android:background="#color/colorPrimary"
android:orientation="vertical"
android:padding="#dimen/activity_vertical_margin"
app:behavior_peekHeight="90dp"
app:layout_behavior="#string/bottom_sheet_behavior">
<!--android:background="#android:color/holo_orange_light"-->
<android.support.v7.widget.CardView
android:id="#+id/cvBottomCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="#dimen/spIconsize"
android:visibility="visible"
app:cardBackgroundColor="#color/white"
app:cardCornerRadius="10dp"
app:cardElevation="5dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:paddingTop="10dp"
android:orientation="horizontal">
<Button
android:layout_marginBottom="5dp"
android:id="#+id/btnReview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="15dp"
android:layout_weight="1"
android:background="#drawable/rounded_button_darkgreen_bg"
android:text="Review"
android:textColor="#color/white" />
<Button
android:layout_marginBottom="5dp"
android:id="#+id/btnReschedule"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_weight="1"
android:background="#drawable/rounded_button_grey"
android:text="Reschedule"
android:textColor="#color/white" />
</LinearLayout>
<RelativeLayout
android:id="#+id/relLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/linearLayout"
android:layout_marginTop="5dp"
android:padding="10dp"
android:visibility="visible">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="80dp"
android:layout_height="90dp"
android:src="#drawable/user"
android:visibility="gone" />
<TextView
android:id="#+id/tvappointmentId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toEndOf="#+id/imageButton"
android:text="Appointment ID - 5727"
android:textColor="#color/black" />
<TextView
android:id="#+id/tvCustomerName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tvappointmentId"
android:layout_toEndOf="#+id/imageButton"
android:text="Name - Virat Sharma"
android:textColor="#color/black" />
<TextView
android:id="#+id/tvLoanType"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tvCustomerName"
android:layout_toEndOf="#+id/imageButton"
android:text="Loan Type - Home LOAN" />
<TextView
android:id="#+id/tvLoanAmount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tvLoanType"
android:layout_toEndOf="#+id/imageButton"
android:text="Loan Amount - 5727" />
<TextView
android:id="#+id/tvTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/tvappointmentId"
android:layout_alignBottom="#+id/tvappointmentId"
android:layout_alignParentEnd="true"
android:gravity="right"
android:text="01:22 Mins"
android:textColor="#color/red_error"
android:textStyle="bold"
android:visibility="gone" />
</RelativeLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>

Can you try this way, please?
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/bottomSheetLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:behavior_peekHeight="90dp"
app:layout_behavior="#string/bottom_sheet_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="230dp"
android:background="#color/colorPrimary"
android:orientation="vertical"
android:padding="#dimen/activity_vertical_margin">
...
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
All that I have done is to put the id that you will call later as your bottom sheet in the root element (Which by the way could be a ConstraintLayout if you want), as you can notice, the parent of this root element will be automatically a CoodinatorLayout.
The second thing is to put this element with a height wrap_content
The layout behaviour should be in the root element, too. app:layout_behavior="#string/bottom_sheet_behavior"

Android Material Design

I have a linear layout with a horizontal orientation. In the horizontal orientation I have 3 widgets ImageButton, Edittext and Fabbutton.
How can I align Imagebutton to the left and its padding to left,right,top and bottom should be same?
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"`enter code here`
android:layout_height="match_parent"
tools:context="com.example.ashwini.chatscreen.MainActivity">
<include layout="#layout/custom_toolbar"></include>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal">
<ImageButton
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_gravity="left|center_vertical"
android:layout_weight="1"
android:background="#drawable/ic_down_arrow"
android:id="#id/downButton"/>
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingLeft="30dp"
android:layout_weight="3"
>
<requestFocus></requestFocus>
</EditText>
<android.support.design.widget.FloatingActionButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right|center_vertical"
android:src="#drawable/ic_send_message_button"
android:layout_weight="0.86"/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>

Try this code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="bottom"
android:orientation="horizontal">
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3" />
<ImageButton
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_weight="1"
android:padding="16dp"
android:background="#drawable/down_arrow"/>
<android.support.design.widget.FloatingActionButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#drawable/com_facebook_send_button_icon"
android:layout_weight="0.86"/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>

Layout is behind Navigation bar (out of screen)

I created a Basic-Activity and have the activity_main which includes the content_main. But at the Design-Screen I can see, that the included content_main starts below the toolbar and ends behind the navigationbar. I think that the Included layout is as high as the full screen and not as high as the space between toolbar and the end of screen. What can I do?
Screenshot of Designscreen
Activity_Main
<android.support.design.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="com.htlhl.kellergassen_app.MainActivity"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/KG_orange">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/HomeActivity"
style="#style/Toolbartitle_KG" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
Content_Main
<?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:background="#drawable/background2"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.htlhl.kellergassen_app.MainActivity"
tools:showIn="#layout/activity_main"
android:id="#+id/rl_main">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentEnd="false"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:orientation="vertical"
android:onClick="here">
<ImageView
android:id="#+id/Kellergassenlogo"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="0dp"
android:contentDescription="#string/ButtonKellergasse"
android:onClick="toKellerkatze"
android:src="#drawable/kk_logo" />
<Button
android:id="#+id/btnToKellergasse"
android:layout_width="180dp"
android:layout_height="36dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="12dp"
android:background="#drawable/roundbutton"
android:onClick="toKellerkatze"
android:text="#string/ButtonKellergasse"
android:textColor="#color/white"
android:textSize="15sp" />
<ImageView
android:id="#+id/Routenlogo"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_gravity="top|bottom|center_horizontal"
android:layout_marginTop="15dp"
android:contentDescription="#string/ButtonRoute"
android:onClick="toRouten"
android:src="#drawable/routenlogo" />
<Button
android:id="#+id/btnToRouten"
android:layout_width="180dp"
android:layout_height="36dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="12dp"
android:background="#drawable/roundbutton"
android:onClick="toRouten"
android:text="#string/ButtonRoute"
android:textColor="#color/white"
android:textSize="15sp" />
</LinearLayout>
<Button
android:id="#+id/btnParse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="parse"
android:textColor="#color/black"
android:background="#color/KG_green"
android:onClick="startParsing"/>
<LinearLayout
android:id="#+id/layout_bottom_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:weightSum="3">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginStart="10dp"
android:layout_weight="2"
android:gravity="center"
android:orientation="vertical">
<fragment
android:id="#+id/fragmentChooseLang"
android:name="com.htlhl.kellergassen_app.FragmentLanguage"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/tvChooseLang"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:drawableTop="#drawable/german_flag"
android:text="#string/chooseLanguage"
android:textSize="12sp"
android:textStyle="bold" />
</LinearLayout>
<Button
android:id="#+id/btnToImpressum"
style="?android:attr/borderlessButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/ButtonImpressum"
android:textSize="15sp"
android:textStyle="bold"
android:layout_gravity="bottom"/>
</LinearLayout>
</RelativeLayout>
The Layout named "layout_bootom_main" is not shown, because it is layout_alignParentBottom and the parents end is out of screen.

You can add scroll view in content_main as parent view for both linear layouts.
<RelativeLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- Add your linear layouts here -->
</LinearLayout>
</ScrollView>
</RelativeLaout>
And while designing in android studio try to preview the design with device having more hight

You could wrap everything inside a scrollview like this:
<RelativeLayout
......>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<-! All the layout children in here-->
</ScrollView>
</RelativeLaout>

How to best fit a customview of Floating Action Button together with Listview

I have a XML layout with edittext listview and a fab included in a linearlayout which it takes a large part on screen and if I remove weight or play with it I get a very small button or cropped.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:ems="10"
android:id="#+id/inputSearch"
android:hint="Αναζητηση" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="4dp">
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/listCustomers"
android:layout_margin="5dp"
android:dividerHeight="2dp" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="2"
android:layout_gravity="bottom|center"
android:gravity="right"
android:layout_margin="4dp">
<android.support.design.widget.FloatingActionButton
android:layout_width="56dp"
android:layout_height="56dp"
android:id="#+id/fab"
app:backgroundTint="#android:color/holo_orange_light"
android:layout_gravity="bottom|center"
android:layout_margin="10dp"
android:src="#drawable/ic_action_cross" />
</LinearLayout>
How I can have a best fit of these three elements here?

Replace your complete layout with below:
<?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="match_parent">
<EditText
android:id="#+id/inputSearch"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Αναζητηση"
android:inputType="textPersonName" />
<ListView
android:id="#+id/listCustomers"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/inputSearch"
android:layout_margin="9dp"
android:dividerHeight="2dp" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_margin="14dp"
android:src="#drawable/ic_action_cross"
app:backgroundTint="#android:color/holo_orange_light" />
</RelativeLayout>