Add ScrollView with Linear and Relative Layout - android

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>

Related

layout_below not working with layout_centerVertical

I have been trying to use RelativeLayout in ScrollView to positioning two LinearLayouts, one to top and one to center. I've used layout_alignParentTop and layout_centerVertical. To prevent overlapping I've tried to use layout_below on second LinearLayout but it breaks layout_centerVertical and the second LinearLayout goes to top. How to do it? Thanks.
<?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="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".activities.StartFragment">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="#+id/trial_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="25dp"
android:layout_alignParentTop="true"
android:background="#drawable/trial_border"
android:foreground="?android:attr/selectableItemBackground"
android:clickable="true"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_gravity="top"
android:layout_marginRight="10dp"
android:layout_marginTop="3dp"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_access_time_black_24dp" />
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:orientation="vertical">
<TextView
android:id="#+id/trial_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="left|center"
android:text="#string/trial_exp"
android:textColor="#color/darkGrey"
android:textSize="15sp" />
<TextView
android:id="#+id/trial_more"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="right|center"
android:text="#string/trial_exp_more"
android:textColor="#color/darkGreen"
android:layout_marginRight="10dp"
android:textSize="13sp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/main_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/trial_button"
android:layout_centerVertical="true"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="#+id/VImage"
android:layout_width="wrap_content"
android:layout_height="200sp"
android:src="#drawable/image_global" />
<TextView
android:id="#+id/VText"
android:layout_width="match_parent"
android:layout_height="40dp"
android:gravity="center"
android:text="#string/protection_disabled"
android:textColor="#color/darkRed"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:gravity="center"
android:orientation="vertical">
<com.google.android.material.button.MaterialButton
android:id="#+id/start_vpn_button"
style="#style/Widget.AppCompat.Button.Borderless.Colored"
android:layout_width="141dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="#string/protect_me"
android:textColor="#color/white"
android:textStyle="bold"
app:backgroundTint="#color/green" />
<com.google.android.material.button.MaterialButton
android:id="#+id/stop_vpn_button"
style="#style/Widget.AppCompat.Button.Borderless.Colored"
android:layout_width="141dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="#string/unprotect_me"
android:textColor="#color/white"
android:textStyle="bold"
android:visibility="gone"
app:backgroundTint="#color/red" />
</LinearLayout>
<LinearLayout
android:id="#+id/r_button"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="50sp"
android:layout_marginRight="20dp"
android:background="#drawable/single_border"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground"
android:orientation="horizontal">
<ImageView
android:id="#+id/r_image"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_gravity="center"
android:src="#drawable/image_r_50" />
<TextView
android:id="#+id/r_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="left|center"
android:text="#string/r_to"
android:textColor="#color/darkGrey"
android:textSize="15sp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</ScrollView>

How to adjust different height of cardview on tablet and android phone?

I am making an android app that has a cardview inside a recyclerview. Cardview looks good on tablet and takes 40% size of screen. When i run it on a 5" android device, cardview covers 80% of screen size. Please check the code below and suggest some solutions to correct layout that automatically fits itself according to the screen sizes.
MainLayout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="false"
android:layout_alignParentEnd="true"
android:layout_below="#+id/empty_view"
android:orientation="vertical">
<SearchView
android:id="#+id/searchbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:scrollbars="vertical"
android:clipToPadding="false"
android:layout_height="0dp"
android:layout_weight="1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Load More"
android:id="#+id/btnLoad"
android:layout_gravity="center_horizontal"
android:layout_below="#+id/recyclerview"
android:background="#42a7f4" />
</LinearLayout>
</LinearLayout>
CardViewTemplate.xml
<?xml version="1.0" encoding="utf-8" ?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_gravity="start"
android:layout_width="match_parent"
card_view:cardUseCompatPadding="true"
android:layout_height="500dp"
android:layout_marginBottom="20dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="10dp"
card_view:contentPaddingLeft="5dp"
card_view:contentPaddingRight="5dp"
card_view:contentPaddingTop="5dp"
card_view:cardCornerRadius="0dp">
<RelativeLayout
android:layout_height="match_parent"
android:layout_width="match_parent">
<LinearLayout
android:id="#+id/greenBoxView"
android:background="#EBEFF2"
android:layout_height="50dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_alignParentTop="true"
>
<ImageView
android:layout_height="30dp"
android:layout_width="30dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="5dp"
android:src="#drawable/lab"
android:layout_gravity="center_vertical"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Yay! This is a Sample Title Text"
android:textColor="#002868"
android:textStyle="bold"
android:paddingRight="70dp"
android:paddingLeft="60dp"
android:textSize="25dp"
android:layout_gravity="center_vertical" />
<ImageView
android:layout_height="30dp"
android:layout_width="30dp"
android:layout_alignParentRight="true"
android:src="#drawable/lab"
android:layout_marginRight="8dp"
android:layout_gravity="center_vertical"
/>
</LinearLayout>
<LinearLayout
android:layout_below="#id/greenBoxView"
android:layout_above="#+id/footer"
android:id="#+id/centeralPart"
android:paddingTop="5dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#000"
android:textSize="20dp"
android:id="#+id/txtMaintitle" />
<TextView
android:textColor="#0080ff"
android:textSize="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/txtSecondTitle" />
<ListView
android:id="#+id/mainlist_view"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:divider="#null"
android:dividerHeight="0dp"/>
</LinearLayout>
<LinearLayout
android:id="#id/footer"
android:layout_height="80dp"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:orientation="horizontal">
<Button
android:id="#+id/btnOrder"
android:layout_gravity="center_vertical"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Order"
android:background="#00AF50"
android:textColor="#FFFFFF"
android:layout_marginRight="10dp" />
<Button
android:id="#+id/btnCompare"
android:layout_gravity="center_vertical"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Compare"
android:textColor="#FFFFFF"
android:background="#0071C1" />
</LinearLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
This is what CardViewTemplate.xml should look like:
<?xml version="1.0" encoding="utf-8" ?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="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:ignore="HardcodedText,ContentDescription" >
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layout_marginBottom="20dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="10dp"
card_view:cardCornerRadius="0dp"
card_view:cardUseCompatPadding="true"
card_view:contentPaddingLeft="5dp"
card_view:contentPaddingRight="5dp"
card_view:contentPaddingTop="5dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/greenBoxView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#EBEFF2"
android:orientation="horizontal">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="center_vertical"
android:layout_marginStart="5dp"
android:src="#drawable/lab"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:paddingEnd="70dp"
android:paddingStart="60dp"
android:text="Yay! This is a Sample Title Text"
android:textColor="#002868"
android:textSize="25sp"
android:textStyle="bold" />
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="center_vertical"
android:layout_marginEnd="8dp"
android:src="#drawable/lab" />
</LinearLayout>
<LinearLayout
android:id="#+id/centeralPart"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/footer"
android:layout_below="#id/greenBoxView"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="5dp">
<TextView
android:id="#+id/txtMaintitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#000"
android:textSize="20sp" />
<TextView
android:id="#+id/txtSecondTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#0080ff"
android:textSize="20sp" />
<ListView
android:id="#+id/mainlist_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#null"
android:dividerHeight="0dp" />
</LinearLayout>
<LinearLayout
android:id="#id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:orientation="horizontal">
<Button
android:id="#+id/btnOrder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginEnd="10dp"
android:background="#00AF50"
android:text="Order"
android:textColor="#FFFFFF" />
<Button
android:id="#+id/btnCompare"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:background="#0071C1"
android:text="Compare"
android:textColor="#FFFFFF" />
</LinearLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
In case this does not fit with your idea, please provide a screenshot of an inflated item view or a drawing of the layout.

Align 2 linear layouts and image view inside Relative layout

I am working on an android app where I want to align 2 linear layouts in a row with image view in between these 2 layouts.I am not able to use android studio layout editor to achieve this.
Code for the layout is:
<?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"
android:background="#android:color/white"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/nav_header_container"
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="#color/colorPrimary">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rounded_corner"
android:orientation="vertical"
android:layout_marginEnd="17dp"
android:layout_centerVertical="true"
android:layout_alignParentEnd="true">
<TextView
android:text="DEFG"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView8"
android:layout_gravity="center"
/>
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView16"
tools:text="1250"
android:textSize="30sp"
android:textColorLink="?attr/colorBackgroundFloating" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#drawable/rounded_corner"
android:layout_marginEnd="30dp"
android:layout_toStartOf="#+id/profile_image">
<TextView
android:text="ABCD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView3"
android:layout_gravity="center"
/>
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView13"
tools:text="1250"
android:textSize="30sp"
android:textColorLink="?attr/colorBackgroundFloating" />
</LinearLayout>
<ImageView
android:id="#+id/profile_image"
android:layout_width="60dp"
android:src="#drawable/face"
android:layout_height="60dp"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/drawerList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"/>
</LinearLayout>
Current Output:
Expected Output:
2 linear layouts in a row with Image view at the center of a relative layout (With Green background)
Am I doing something wrong with the arrangement of layout? How to implement such scenario?
Change the RelativeLayout to LinearLayout (Horizontal)
set width to 0dp and weight to 1 thus they will have the same width. And use gravity to put things in the center
<?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"
android:background="#android:color/white"
android:orientation="vertical">
<LinearLayout
android:orientation="horizontal"
android:id="#+id/nav_header_container"
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="#color/colorPrimary">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#drawable/rounded_corner"
android:orientation="vertical"
android:layout_marginEnd="17dp"
android:layout_weight="1"
android:gravity="center">
<TextView
android:text="DEFG"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView8"
android:layout_gravity="center"
/>
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView16"
tools:text="1250"
android:textSize="30sp"
android:textColorLink="?attr/colorBackgroundFloating" />
</LinearLayout>
<ImageView
android:id="#+id/profile_image"
android:layout_width="0dp"
android:src="#drawable/rounded_corner"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_weight="1"
android:layout_gravity="center" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/rounded_corner"
android:layout_marginEnd="30dp"
android:layout_weight="1"
android:gravity="center">
<TextView
android:text="ABCD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView3"
android:layout_gravity="center"
/>
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView13"
tools:text="1250"
android:textSize="30sp"
android:textColorLink="?attr/colorBackgroundFloating" />
</LinearLayout>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/drawerList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"/>
</LinearLayout>
By using weight to the LinearLayout you can achieve this.
Check this code, but before copy pasting learn the logic of weight in LinearLayout:
<?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"
android:background="#android:color/white"
android:orientation="vertical">
<LinearLayout
android:id="#+id/nav_header_container"
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="#ffffff"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="4"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/rounded_corner" />
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="DEFG" />
<TextView
android:id="#+id/textView16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textView8"
android:layout_centerHorizontal="true"
android:text="TextView"
android:textColorLink="?attr/colorBackgroundFloating"
android:textSize="30sp"
tools:text="1250" />
</RelativeLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="2"
android:gravity="center">
<ImageView
android:id="#+id/profile_image"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:src="#drawable/face" />
</LinearLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="4"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/rounded_corner" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="ABCD" />
<TextView
android:id="#+id/textView13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textView3"
android:layout_centerHorizontal="true"
android:text="TextView"
android:textColorLink="?attr/colorBackgroundFloating"
android:textSize="30sp"
tools:text="1250" />
</RelativeLayout>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/drawerList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp" />
</LinearLayout>

Cardview not at back position in RelativeLayout

I have problem with implement CardView in RelativeLayout. I set CardView at back position in RelativeLayout. But it's seem not which I want.
I want like this (edited by photosop):
Current Display (on live Device and on android studio)
this the 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"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="4dp">
<android.support.v7.widget.CardView
android:id="#+id/root_parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?android:attr/selectableItemBackground"
android:descendantFocusability="blocksDescendants"
card_view:cardCornerRadius="10dp"
android:layout_alignBottom="#+id/layout_isi"
android:layout_alignLeft="#+id/layout_isi"
android:layout_alignTop="#+id/layout_isi"
android:layout_alignParentTop="true"
android:layout_alignRight="#+id/layout_isi"/>
<android.support.percent.PercentRelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/layout_isi"
android:layout_marginLeft="8dp"
android:layout_below="#+id/layout_business_name_child">
<android.support.percent.PercentRelativeLayout
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_widthPercent="75%">
<LinearLayout
android:id="#+id/layout_thumbnail_business"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_widthPercent="50%">
<com.kamardagang.utils.ResizeImageView
android:id="#+id/thumbnail_business"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:src="#drawable/placeholder" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/layout_thumbnail_business"
android:orientation="vertical"
app:layout_widthPercent="50%">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<com.joanzapata.iconify.widget.IconTextView
android:id="#+id/icon_status_rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|center"
android:text="#string/fa_minus_circle" />
<RatingBar
android:id="#+id/business_rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|center" />
<com.kamardagang.utils.TimesNewRomansTextView
android:id="#+id/status_rating"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_gravity="left|center"
android:padding="10dp"
android:text="status_rating" />
</LinearLayout>
<com.kamardagang.utils.TimesNewRomansTextView
android:id="#+id/business_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="business_title"
android:textAppearance="?android:attr/textAppearanceMedium" />
<com.kamardagang.utils.TimesNewRomansTextView
android:id="#+id/business_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:paddingBottom="0dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp"
android:text="business_name"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textStyle="bold" />
<com.kamardagang.utils.TimesNewRomansTextView
android:id="#+id/business_status"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="0dp"
android:text="business_status"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</android.support.percent.PercentRelativeLayout>
<LinearLayout
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/left"
android:orientation="vertical"
app:layout_widthPercent="25%">
<com.joanzapata.iconify.widget.IconButton
android:id="#+id/count_rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#337ab7"
android:text="#string/star"
android:textColor="#color/white" />
<com.joanzapata.iconify.widget.IconButton
android:id="#+id/view_rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/lihat_rating" />
</LinearLayout>
</android.support.percent.PercentRelativeLayout>
<android.support.v7.widget.CardView
android:id="#+id/layout_business_name_child"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:descendantFocusability="blocksDescendants"
app:cardBackgroundColor="#337ab7"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp">
<com.kamardagang.utils.TimesNewRomansTextView
android:id="#+id/business_name_child"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="business_name"
android:textColor="#color/white"/>
</android.support.v7.widget.CardView>
</RelativeLayout>
I also implemnted View.bringToFront();, but it's not work, so how to fix it ? sory for my English
<?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:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="4dp">
<android.support.v7.widget.CardView
android:id="#+id/root_parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="false"
android:layout_below="#+id/layout_business_name_child"
android:background="?android:attr/selectableItemBackground"
android:descendantFocusability="blocksDescendants"
card_view:cardCornerRadius="10dp">
<android.support.percent.PercentRelativeLayout
android:id="#+id/layout_isi"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/layout_business_name_child"
android:layout_marginLeft="8dp">
<android.support.percent.PercentRelativeLayout
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_widthPercent="75%">
<LinearLayout
android:id="#+id/layout_thumbnail_business"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_widthPercent="50%">
<ImageView
android:id="#+id/thumbnail_business"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/layout_thumbnail_business"
android:orientation="vertical"
app:layout_widthPercent="50%">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/icon_status_rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|center"
android:text="Test" />
<RatingBar
android:id="#+id/business_rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|center" />
<TextView
android:id="#+id/status_rating"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_gravity="left|center"
android:padding="10dp"
android:text="status_rating" />
</LinearLayout>
<TextView
android:id="#+id/business_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="business_title"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/business_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:paddingBottom="0dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp"
android:text="business_name"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textStyle="bold" />
<TextView
android:id="#+id/business_status"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="0dp"
android:text="business_status"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</android.support.percent.PercentRelativeLayout>
<LinearLayout
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/left"
android:orientation="vertical"
app:layout_widthPercent="25%">
<Button
android:id="#+id/count_rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#337ab7"
android:text="Test"
android:textColor="#android:color/black" />
<Button
android:id="#+id/view_rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Test" />
</LinearLayout>
</android.support.percent.PercentRelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/layout_business_name_child"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:descendantFocusability="blocksDescendants"
app:cardBackgroundColor="#337ab7">
<TextView
android:id="#+id/business_name_child"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="business_name"
android:textColor="#android:color/black" />
</android.support.v7.widget.CardView>
</RelativeLayout>
I put the PercentRelativeLayout within the CardView and it worked.
Hope this helps :)

layout XML issues in Android

I am trying out a very simple rectangle box with two icons in the center. Strangely they are not coming up properly even after I add gravity etc. Please take a look at the screen shot.
I am trying center them so that they look perfectly in the center.
Here is the code I am trying out:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_footer"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#color/panelcolor"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/accountsNameandImage1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:gravity="center">
<ImageView
android:id="#+id/homeImage"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginBottom="1dp"
android:src="#drawable/ic_action_home" />
<TextView
android:id="#+id/homeName"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="Home"
android:textColor="#android:color/white"
android:textSize="12sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/accountsNameandImage2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toRightOf="#+id/accountsNameandImage1"
android:orientation="horizontal"
android:layout_marginLeft="10dp"
android:layout_centerInParent="true"
android:gravity="center">
<ImageView
android:id="#+id/viewImage"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginBottom="1dp"
android:src="#drawable/ic_visibility" />
<TextView
android:id="#+id/viewName"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="Viewed"
android:textColor="#android:color/white"
android:textSize="12sp" />
</LinearLayout>
</RelativeLayout>
What could be wrong here?
You can add the two LinearLayouts on a RelativeLayout with android:layout_width="wrap_content", android:layout_height="wrap_content" and android:layout_centerHorizontal="true" and delete the android:layout_centerInParent="true" from the LinearLayout with id accountsNameandImage1.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_footer"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#color/panelcolor" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true">
<LinearLayout
android:id="#+id/accountsNameandImage1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center">
<ImageView
android:id="#+id/homeImage"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginBottom="1dp"
android:src="#drawable/ic_action_home" />
<TextView
android:id="#+id/homeName"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="Home"
android:textColor="#android:color/white"
android:textSize="12sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/accountsNameandImage2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#+id/accountsNameandImage1"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:id="#+id/viewImage"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginBottom="1dp"
android:src="#drawable/ic_visibility" />
<TextView
android:id="#+id/viewName"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="Viewed"
android:textColor="#android:color/white"
android:textSize="12sp" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
Try Something like this ::
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_footer"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#color/panelcolor"
android:gravity="center_horizontal"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/accountsNameandImage1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="#+id/homeImage"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginBottom="1dp"
android:src="#drawable/ic_action_home" />
<TextView
android:id="#+id/homeName"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="Home"
android:textColor="#android:color/white"
android:textSize="12sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/accountsNameandImage2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/viewImage"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginBottom="1dp"
android:src="#drawable/ic_visibility" />
<TextView
android:id="#+id/viewName"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="Viewed"
android:textColor="#android:color/white"
android:textSize="12sp" />
</LinearLayout>

Categories

Resources