XML layout design and code are not matching - android

My xml layout design is not what it is supposed to be from my code. I am not changing anything dynamically.
Code:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/rollnoT"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="5"
android:textSize="200sp"/>
<TextView
android:id="#+id/nameT"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/rollnoT"
android:layout_centerHorizontal="true"
android:layout_marginTop="19dp"
android:text="abc"
android:textSize="30sp"/>
<TextView
android:id="#+id/cmtT"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:alpha="0"
android:background="#android:color/holo_red_light"
android:gravity="center_vertical|center_horizontal"
android:text="Ab"
android:textSize="200sp"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
My design:
Look at "abc" It should be below '5' not in mid.
I have set android:layout_below="#+id/rollnoT"
but still it is shown in mid.
Pls help me solve this issue.


Try this
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/rollnoT"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="5"
android:textSize="200sp"/>
<TextView
android:id="#+id/nameT"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/rollnoT"
android:layout_centerHorizontal="true"
android:layout_marginTop="19dp"
android:text="abc"
android:textSize="30sp"/>
<TextView
android:id="#+id/cmtT"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:alpha="0"
android:background="#android:color/holo_red_light"
android:gravity="center_vertical|center_horizontal"
android:text="Ab"
android:textSize="200sp"/>
</RelativeLayout>
</android.support.v7.widget.CardView>


Try this blow snippet,
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/rollnoT"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="5"
android:textSize="200sp" />
<TextView
android:id="#+id/nameT"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/rollnoT"
android:layout_marginTop="19dp"
android:text="abc"
android:textSize="30sp" />
</LinearLayout>
<TextView
android:id="#+id/cmtT"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:alpha="0"
android:background="#android:color/holo_red_light"
android:gravity="center_vertical|center_horizontal"
android:text="Ab"
android:textSize="200sp" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</FrameLayout>
It would be great if you have practice about LinearLayout. It solves lots of issues. If you are using RelativeLayout then it is dependable on other views.

Related

Add ScrollView with Linear and Relative Layout

Hello I am trying to add a ScrollView in my project.
The purpose is that I will be putting multiple CardViews in the middle of my project.
It is within a Relative Layout. With a Linear Layout on the top portion. But also having a BottomNavigation at the bottom. Which I would like for it to be fixed and not scrolling.
Here is the XML 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"
android:orientation="vertical"
tools:context=".Bottom_Nav"
android:fillViewport="true"
android:background="#drawable/bg7">
<LinearLayout
android:id="#+id/titlemenu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/pacifico_regular"
android:text="Menu"
android:textColor="#6E2C00"
android:textSize="50dp"
android:textStyle="bold"
android:layout_gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/carterone_regular"
android:text="View Our Seelction!"
android:textColor="#6E2C00"
android:textSize="20dp"
android:textStyle="bold"
android:layout_gravity="center"/>
</LinearLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/titlemenu"
android:layout_above="#id/bottom_navigation">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<androidx.cardview.widget.CardView
android:id="#+id/hot"
android:layout_width="320dp"
android:layout_height="match_parent"
app:cardCornerRadius="15dp"
android:layout_marginTop="10dp"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#EB984E"
android:padding="10dp">
<TextView
android:id="#+id/t1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:fontFamily="#font/carterone_regular"
android:text="Cold Drinks"
android:textColor="#6E2C00"
android:textSize="30dp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/t1"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:fontFamily="#font/carterone_regular"
android:text="Cool Off With Our Cold Bevs!"
android:textStyle="bold" />
<ImageView
android:layout_width="116dp"
android:layout_height="82dp"
android:layout_alignParentRight="true"
android:layout_marginRight="-31dp"
android:maxHeight="200dp"
android:src="#drawable/coldbev" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
<Button
android:id="#+id/coldbutton"
android:layout_width="320dp"
android:layout_height="wrap_content"
android:backgroundTint="#6E2C00"
android:textColor="#color/white"
android:text="View Cold Drinks"
android:layout_gravity="center"/>
</ScrollView>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#EB984E"
app:itemIconTint="#6E2C00"
app:itemTextColor="#6E2C00"
app:menu="#menu/menu_navigation" />
</RelativeLayout>
As of right now it looks like this :
https://ibb.co/4JP6cPP

just put scrollView in root view
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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:orientation="vertical"
tools:context=".Bottom_Nav"
android:fillViewport="true"
android:background="#drawable/bg7">
<LinearLayout
android:id="#+id/titlemenu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/pacifico_regular"
android:text="Menu"
android:textColor="#6E2C00"
android:textSize="50dp"
android:textStyle="bold"
android:layout_gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/carterone_regular"
android:text="View Our Seelction!"
android:textColor="#6E2C00"
android:textSize="20dp"
android:textStyle="bold"
android:layout_gravity="center"/>
</LinearLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/titlemenu"
android:layout_above="#id/bottom_navigation">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<androidx.cardview.widget.CardView
android:id="#+id/hot"
android:layout_width="320dp"
android:layout_height="match_parent"
app:cardCornerRadius="15dp"
android:layout_marginTop="10dp"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#EB984E"
android:padding="10dp">
<TextView
android:id="#+id/t1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:fontFamily="#font/carterone_regular"
android:text="Cold Drinks"
android:textColor="#6E2C00"
android:textSize="30dp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/t1"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:fontFamily="#font/carterone_regular"
android:text="Cool Off With Our Cold Bevs!"
android:textStyle="bold" />
<ImageView
android:layout_width="116dp"
android:layout_height="82dp"
android:layout_alignParentRight="true"
android:layout_marginRight="-31dp"
android:maxHeight="200dp"
android:src="#drawable/coldbev" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
<Button
android:id="#+id/coldbutton"
android:layout_width="320dp"
android:layout_height="wrap_content"
android:backgroundTint="#6E2C00"
android:textColor="#color/white"
android:text="View Cold Drinks"
android:layout_gravity="center"/>
</ScrollView>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#EB984E"
app:itemIconTint="#6E2C00"
app:itemTextColor="#6E2C00"
app:menu="#menu/menu_navigation" />
</ScrollView>

My buttons and texts are showing in the wrong places on Android Studio 4.0

Hi I'm practicing clickable button, for that, I need to reproduce the design here:
https://www.figma.com/file/pAx28mFg68qvYulJQcyMHE/Score-Tracker?node-id=0%3A1
But for some reason, although I believe I wrote all the dimensions right, I can't get to position the buttons and zeros in the exact place they should be in and I don't know why!
Here is my xml code. Can you help me find out what's wrong with the dimensions I have set?
<?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"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/background">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/background"/>
<TextView
android:id="#+id/numberOfGoals"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="163dp"
android:layout_marginTop="124dp"
android:text="0"
android:textColor="#FFFFFF"
android:textSize="72sp"/>
<TextView
android:id="#+id/numberOfGoals2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="163dp"
android:layout_alignTop="#id/Button2"
android:layout_marginBottom="124dp"
android:text="0"
android:textColor="#FFFFFF"
android:textSize="72sp"/>
<Button
android:id="#+id/Button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Goal"
android:textColor="#FFFFFF"
android:textSize="14sp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="14dp"
android:backgroundTint="#EB5757"
android:layout_alignParentTop="true"/>
<Button
android:id="#+id/Button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Goal"
android:backgroundTint="#EB5757"
android:textColor="#FFFFFF"
android:textSize="14sp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="14dp"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
</LinearLayout>
</RelativeLayout>

May be this will be helpful.
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/background">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/background"/>
<TextView
android:id="#+id/numberOfGoals"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/Button1"
android:layout_centerHorizontal="true"
android:text="0"
android:textColor="#FFFFFF"
android:textSize="72sp"/>
<TextView
android:id="#+id/numberOfGoals2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/Button2"
android:layout_centerHorizontal="true"
android:text="0"
android:textColor="#FFFFFF"
android:textSize="72sp"/>
<Button
android:id="#+id/Button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Goal"
android:textColor="#FFFFFF"
android:textSize="14sp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="14dp"
android:backgroundTint="#EB5757"
android:layout_alignParentTop="true"/>
<Button
android:id="#+id/Button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Goal"
android:backgroundTint="#EB5757"
android:textColor="#FFFFFF"
android:textSize="14sp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="14dp"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
</LinearLayout>
</RelativeLayout>

how to use scrollview in layout with toolbar and bottomnavigationview?

I have a screen in which there is a toolbar, a bottomNavigationView and some data between them including a textView and an imageView. I want to scroll the inner data that is between the toolbar and bottomNavigationView.
I want to scroll the design.xml inside of main.xml. Please suggest a way I can achieve this.
main.xml
<?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">
<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/toolbar1"
android:layout_width="match_parent"
app:layout_scrollFlags="scroll|enterAlways"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fillViewport="true"
xmlns:app="http://schemas.android.com/apk/res-auto">
<include
layout="#layout/design"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</ScrollView>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="#color/colorPrimary"
app:itemIconTint="#FFFFFF"
app:itemTextColor="#FFFFFF"
app:menu="#menu/bottom_navigation_main" />
design.xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fillViewport="true"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginTop="?android:attr/actionBarSize"
tools:context="com.example.chaitanya.pg.Pgdata">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/relative">
<Button
android:id="#+id/btt1"
android:background="#drawable/tprevoius"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="100dp" />
<Button
android:background="#drawable/tnext"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignTop="#+id/btt1"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:id="#+id/btt2" />
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="250dp"
android:id="#+id/viewPager"/>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/tools"
android:id="#+id/cardview1"
android:layout_width="match_parent"
android:layout_height="100dp"
card_view:cardElevation="5dp"
android:layout_below="#id/viewPager"
android:layout_margin="6dp"
card_view:cardBackgroundColor="#FFF"
card_view:cardCornerRadius="7dp"
card_view:cardMaxElevation="5dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Facilities"
android:textColor="#color/colorPrimary"
android:textAllCaps="true"
android:id="#+id/facilities"
android:textSize="20dp"
android:gravity="center"
android:layout_below="#+id/viewPager"
android:textColorHighlight="#color/colorPrimary"
android:textStyle="bold|italic" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:orientation="horizontal"
>
<TextView
android:layout_width="120dp"
android:layout_height="wrap_content"
android:textStyle="bold"
android:paddingLeft="10dp"
android:textSize="15dp"
android:id="#+id/wifi"
/>
<TextView
android:layout_width="120dp"
android:layout_height="wrap_content"
android:textStyle="bold"
android:layout_gravity="center"
android:gravity="center"
android:foregroundGravity="center"
android:textSize="15dp"
android:id="#+id/ac"
/>
<TextView
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:foregroundGravity="right"
android:paddingLeft="20dp"
android:id="#+id/food"
android:textStyle="bold"
android:textSize="15dp"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/tools"
android:id="#+id/cardview12"
android:layout_width="match_parent"
android:layout_height="60dp"
card_view:cardElevation="5dp"
android:layout_below="#id/cardview1"
android:layout_margin="6dp"
card_view:cardBackgroundColor="#FFF"
card_view:cardCornerRadius="7dp"
card_view:cardMaxElevation="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Accomodation"
android:textColor="#color/colorPrimary"
android:textAllCaps="true"
android:textSize="20dp"
android:gravity="center"
android:textColorHighlight="#color/colorPrimary"
android:textStyle="bold|italic" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:layout_marginTop="2dp"
android:layout_gravity="center"
android:gravity="center"
android:foregroundGravity="center"
android:textSize="20dp"
android:id="#+id/accomodation"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/tools"
android:id="#+id/cardview123"
android:layout_width="match_parent"
android:layout_height="60dp"
card_view:cardElevation="5dp"
android:layout_below="#id/cardview12"
android:layout_margin="6dp"
card_view:cardBackgroundColor="#FFF"
card_view:cardCornerRadius="7dp"
card_view:cardMaxElevation="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Price"
android:textColor="#color/colorPrimary"
android:textAllCaps="true"
android:textSize="20dp"
android:gravity="center"
android:textColorHighlight="#color/colorPrimary"
android:textStyle="bold|italic" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:layout_marginTop="2dp"
android:layout_gravity="center"
android:gravity="center"
android:foregroundGravity="center"
android:textSize="20dp"
android:id="#+id/pricee"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="200dp"
android:id="#+id/name"
android:textColor="#FFFFFF"
android:textStyle="italic"
android:textSize="20dp"
android:layout_marginLeft="10dp"
android:paddingLeft="20dp"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/name"
android:id="#+id/addr"
android:textColor="#FFFFFF"
android:textStyle="italic"
android:layout_marginLeft="10dp"
android:textSize="20dp"
/>
</RelativeLayout>
</LinearLayout>

There needs to be only one layout inside ScrollView.
You do not need to put ScrollView inside ScrollView.
You have added the include tag inside the ScrollView and your
design.xml also has ScrollView.
I would not use android:fillViewport tag inside ScrollView, instead
use properties related to relative layout.
Rest of the things don't seem too difficult to figure out.

from design.xml remove parent <ScrollView> because outsie you already define the scrollview so there is no use of scrollview inside the design.xml
design.xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fillViewport="true"
xmlns:app="http://schemas.android.com/apk/res-auto">

What is the best way to achieve following design (attached image)?

All,
I know this is not difficult one, But I just want to know that which is the best way to achieve . You can see two icons exactly between two layouts (blackish and white). I know we can achieve this using margin but is there any other better way ?
P.S To clarify the confusion this is what my entire screen should look like
Thanks in advance.
Answer will be appreciated.

You can Achieve that Design using RelativeLayout
Try 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/nilu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccentJob"
android:orientation="vertical"
android:paddingBottom="30dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="NILU" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="NILU" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="NILU" />
</LinearLayout>
<LinearLayout
android:id="#+id/nilu2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/nilu"
android:background="#color/colorAccentAdhoc"
android:orientation="vertical"
android:paddingTop="30dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="NILU" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="NILU" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="NILU" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/nilu"
android:layout_marginTop="-15dp"
android:orientation="horizontal">
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginEnd="16dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_toStartOf="#+id/floatingActionButton"
android:src="#mipmap/ic_launcher_round"
app:elevation="2dp" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="139dp"
android:layout_marginRight="30dp"
android:src="#mipmap/ic_launcher" />
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>

Try This
Output:
<?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="wrap_content"
tools:context="com.nct.dhruv.demotest.LogCatActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/colorPrimary" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/colorAccent" />
</LinearLayout>
<LinearLayout
android:id="#+id/linear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:layout_centerVertical="true"
android:layout_alignParentStart="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_marginRight="10dp"
android:orientation="vertical"
android:layout_height="wrap_content">
<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
app:backgroundTint="#fff" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_marginRight="10dp"
android:layout_height="wrap_content">
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
app:backgroundTint="#fff"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>

If you like to Use ConstraintLayout try:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--UpperLayer-->
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="0dp"
android:layout_height="200dp"
android:background="#android:color/black"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</LinearLayout>
<!--LowerLayer-->
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="0dp"
android:layout_height="200dp"
android:background="#android:color/darker_gray"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="#+id/linearLayout"
app:layout_constraintStart_toStartOf="#+id/linearLayout"
app:layout_constraintTop_toBottomOf="#+id/linearLayout">
</LinearLayout>
<!--MiddleLayer-->
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
app:layout_constraintBottom_toTopOf="#+id/linearLayout2"
app:layout_constraintEnd_toEndOf="#+id/linearLayout2"
app:layout_constraintStart_toStartOf="#+id/linearLayout2"
app:layout_constraintTop_toTopOf="#+id/linearLayout2">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:src="#android:drawable/ic_menu_add" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#android:drawable/ic_menu_add" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
It Outputs:
Note:
Your UpperLayer and LowerLayer can be any Layout View, not fixed to LinearLayout

Place buttons between two layouts in android frame layout

I am trying to place a RelativeLayout having two ImageButtons inside a FrameLayout which already has a ImageView and a LinearLayout. I have to place the Relative Layout in such a way that vertically upper half of the ImageButton should be overlapping ImageView and lower half overlapping LinearLayout.
My current layout is like this:
My current xml is:
<?xml version="1.0" encoding="utf-8"?>
<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:background="#f2f2f2"
android:elevation="8dp"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#fff"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="180dp"
android:src="#drawable/fire_icon" />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/colorblue"
android:orientation="vertical"
android:padding="10dp"
android:layout_margin="10dp">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:text="Need Help"
android:textColor="#color/colortitletext"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Hello, I am trying to create a android layout."
android:textColor="#color/colorheadtext"
android:textSize="18sp" />
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|right"
android:layout_marginRight="15dp">
<ImageView
android:id="#+id/imageView4"
android:layout_width="60dp"
android:layout_height="50dp"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/imageView3"
android:layout_toStartOf="#+id/imageView3"
android:src="#drawable/ic_menu_camera" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="60dp"
android:layout_height="50dp"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:src="#drawable/ic_menu_gallery" />
</RelativeLayout>
</FrameLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
Expected Layout is:

Have look i edit your layout ......
i think that is what you want ..........
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#f2f2f2"
android:elevation="8dp"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#fff"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="180dp"
android:src="#drawable/fire_icon"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#AACCAA"
android:orientation="vertical"
android:padding="10dp"
android:layout_margin="10dp">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:text="Need Help"
android:textColor="#color/colortitletext"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Hello, I am trying to create a android layout."
android:textColor="#color/colorheadtext"
android:textSize="18sp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#f2f2f2"
android:layout_marginTop="160dp"
android:layout_marginLeft="200dp">
<ImageView
android:id="#+id/imageView4"
android:layout_width="60dp"
android:layout_height="50dp"
android:src="#drawable/ic_menu_gallery"/>
<ImageView
android:id="#+id/imageView3"
android:layout_width="60dp"
android:layout_height="50dp"
android:src="#drawable/ic_menu_camera"/>
</LinearLayout>
</FrameLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
enjoy coding...........

Categories

Resources