Develop Reference

Remove the space between Cards

I'm using a RecyclerView to store these cards it works but I want to reduce the space between cards. After adding cardPreventCornerOverlap="false" this line it reduced a bit but still it's too much. Is there a way to do this?
Card Layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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"
app:cardCornerRadius="10sp"
app:cardBackgroundColor="#color/lightest_black"
app:cardElevation="16dp"
app:cardUseCompatPadding="true"
app:cardPreventCornerOverlap="false"
android:foreground="#drawable/ripple">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/sick_linear_layout"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/sick_topic"
android:text=""
android:textSize="22sp"
android:padding="16dp"
android:fontFamily="#font/productsansbold"
android:textColor="#color/white"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/sick_expandable_layout">
<TextView
android:id="#+id/sick_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/productsansregular"
android:padding="16dp"
android:text=""
android:textColor="#color/gray"
android:textSize="18sp" />
</RelativeLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
RecyclerView layout:
<?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="wrap_content"
android:orientation="vertical"
android:background="#color/light_black"
android:paddingTop="8dp"
android:paddingRight="8dp"
android:paddingLeft="8dp"
tools:context=".IfYoureFeelingSick">
<androidx.recyclerview.widget.RecyclerView
android:layout_marginTop="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/sick_recyclerView"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"/>
</LinearLayout>
This is how it looks now

try add android:layout_margin="-10dp" to your CardView to control unwanted spaces created by CompatPadding and no need to say you can replace -10 with any negative number you want :
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
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"
app:cardCornerRadius="10sp"
android:layout_margin="-10dp"
.....
>

How to center a progressbar in screen

The progress bar is appearing on the left of the screen. I would want it centered, like in the example.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:gravity="center"
android:background="#drawable/semi_circle"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_marginTop="50dp"
android:layout_gravity="center_horizontal"
android:id="#+id/relative">
<ProgressBar
android:id="#+id/progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="visible" />
<LinearLayout android:layout_width="match_parent"
android:id="#+id/lilPolicy"
android:layout_height="match_parent"
android:layout_marginBottom="20dp">
</LinearLayout>

You should get the ProgressBar outside the ScrollView, because logically you can know the height of the ScrollView at Runtime, so you can't figure out where the ProgressBar will place until running your app.
So, get out the ProgressBar from the ScrollView, create another root layout, wrap both ProgressBar & ScrollView in it; I picked RelativeLayout as the root, you can decide another layout manager if you wish.
layout_centerInParent attribute is used to center a view within a RelativeLayout
<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:background="#drawable/semi_circle"
android:gravity="center">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/relative"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="50dp">
<LinearLayout
android:id="#+id/lilPolicy"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="20dp">
</LinearLayout>
</RelativeLayout>
</ScrollView>
<ProgressBar
android:id="#+id/progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:visibility="visible" />
</RelativeLayout>
Note: I don't know what you're going to accomplish, so I left android:background="#drawable/semi_circle in the root layout

Inside your scrollView
Using RelativeLayout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>
Using ConstraintLayout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Add ConstraintLayout to your project, Build a Responsive UI with ConstraintLayout
You can easily implement it.
The way I would have done it is:
<?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="match_parent">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ScrollView
android:layout_width="0dp"
android:layout_height="0dp"
android:fillViewport="true"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/item_1"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_above="#id/item_2"
android:background="#0000FF"
android:layout_marginTop="10dp"
android:orientation="horizontal"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:id="#+id/item_2"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_below="#id/item_1"
android:background="#FF0000"
android:orientation="horizontal"
app:layout_constraintTop_toBottomOf="#id/item_1" />
<LinearLayout
android:id="#+id/item_3"
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_below="#id/item_2"
android:background="#FFFF00"
android:orientation="horizontal"
app:layout_constraintTop_toBottomOf="#id/item_2" />
</android.support.constraint.ConstraintLayout>
>
</ScrollView>
</android.support.constraint.ConstraintLayout>

If you have used relative layout as a parent layout . so we need to add this attribute android:layout_centerInParent="true" to align view in parent center. and scroll view by default remove extra spacing in view . add android:fillViewport="true" to make scroll view match parent
Try this code
<?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"
android:gravity="center"
android:background="#000"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_marginTop="50dp"
android:layout_gravity="center_horizontal"
android:id="#+id/relative">
<ProgressBar
android:id="#+id/progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:visibility="visible" />
<LinearLayout android:layout_width="match_parent"
android:id="#+id/lilPolicy"
android:layout_height="match_parent"
android:layout_marginBottom="20dp"
android:orientation="horizontal">
</LinearLayout>
</RelativeLayout>
</ScrollView>

use android:layout_centerInParent="true" as you are using RelativeLayout.

Creating an overlay in Android studio

I'm currently making an Android app and I'm seeking inspiration in the picture as seen below. I'm trying to create the overlay in the top right corner of the first device in the picture and I have no idea how it is done.

Use alpha property
<?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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:background="#FFFF33"
android:layout_width="match_parent"
android:layout_height="200dp">
<TextView
android:textAlignment="textEnd"
android:text="Sample Text View Sample Text View Sample Text View"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<RelativeLayout
android:alpha="0.5"
android:background="#color/colorPrimary"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_width="100dp"
android:layout_height="200dp">
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
The output will be like
*********** EDITED AS PER OP'S REQUIREMENT ***********
<?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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:background="#FFFF33"
android:layout_width="match_parent"
android:layout_height="200dp">
</LinearLayout>
<RelativeLayout
android:alpha="0.5"
android:background="#color/colorPrimary"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_width="100dp"
android:layout_height="200dp">
</RelativeLayout>
<TextView
android:textAlignment="textEnd"
android:text="Sample Text View Sample Text View Sample Text View"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
</RelativeLayout>

add two layout one for background and another for top of it.
then add top layout background color white transparent.
example XML layout given below
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#c11316">
<TextView
android:text="25"
android:textColor="#ffffff"
android:layout_centerVertical="true"
android:layout_alignParentEnd="true"
android:layout_marginEnd="30dp"
android:textSize="30dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginEnd="150dp"
android:background="#33e4e4e4">
<TextView
android:text="Your Things"
android:textColor="#ffffff"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:textSize="30dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>

set background color as white of recyclerview and divider line's color as same as background image

I am new in android app development.I am making a project in android-studio. I want to set color of listview as white and divider line's color as same as background image.My code is below
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
tools:context="com.example.litifer.litiferdemo.MainActivity">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/imageView"
android:src="#drawable/images1"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"></android.support.v7.widget.RecyclerView</android.support.constraint.ConstraintLayout>
list_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_margin="#dimen/cardview_default_radius"
android:layout_width="match_parent"
android:background="#FFFFFF"
android:layout_height="wrap_content"></android.support.v7.widget.CardView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/textViewHead"
android:text="Heading"
android:textSize="20dp"
android:layout_marginTop="10dp"
android:layout_marginLeft="60dp"
android:layout_marginRight="40dp"
android:textAppearance="#android:style/TextAppearance.Large"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/textViewDesc"
android:layout_marginTop="10dp"
android:layout_marginLeft="60dp"
android:layout_marginRight="40dp"
android:text="Description"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginLeft="60dp"
android:layout_marginRight="40dp"
android:id="#+id/textViewDate"
android:text="Date"/>
</LinearLayout></LinearLayout>

you can do using itemdecoration like as link attached link
or
you can add view at last to your layout
<View
android:layout_width="match_parent"
android:layout_height="#dimen/normal_margin1"
android:layout_marginTop="#dimen/normal_margin8"
android:background="#color/black12" />

How do I include layout attribute before parent layout?

I am using One Activity and others are fragments. My parent layout is cardview and I want to add another layout at the top the using include layout tag. Below I posted output images and code:.
This is my card Layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/cardview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="8dp"
app:cardUseCompatPadding="true"
app:cardBackgroundColor="#android:color/transparent"
android:elevation="0dp">
<include layout="#layout/edit_text"/>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="25sp"
android:paddingLeft="10dp"
android:textColor="#4928ef"
android:textStyle="italic"/>
</android.support.v7.widget.CardView>
And this is my common layout, which I have to include in above card layout
edit_text.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="GO"
android:id="#+id/go"
android:layout_alignParentRight="true"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Quick Search"
android:layout_alignParentLeft="true"/>
</RelativeLayout>
Output
Click here to display output of above code
I tried to change cardview parent to LinearLayout and cardview as child but I don't know why list item (textview) the first one only displays and others are ignored. I am trying to make layout like below:
Click here to see what I expected

Use only 1 child in cardView
Try this
main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/cardview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
app:cardBackgroundColor="#android:color/transparent"
app:cardCornerRadius="8dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include layout="#layout/edit_text" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:text="Textview"
android:textColor="#4928ef"
android:textSize="25sp"
android:textStyle="italic" />
</LinearLayout>
</android.support.v7.widget.CardView>
and edit_text.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="GO"
android:id="#+id/go"
android:layout_alignParentRight="true"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Quick Search"
android:layout_alignParentLeft="true"/>
</RelativeLayout>
Adjust background using android:background="#drawable/background"

remove
<include layout="#layout/edit_text"/>
from your cardView layout, because cardView should have only one ChildView.
so as i understand, you want to use search bar on top.
so here is my implementation:
<?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="match_parent"
android:orientation="vertical"
tools:context="com.tiikr.OverlayActivity">
<include layout="#layout/edit_text"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/my_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:scrollbars="vertical"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
so here i use LinearLayout as a parent of the view, and on top is your search bar layout, and down is the listView wich you need to populate in the code with your cardview layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/cardview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="8dp"
app:cardUseCompatPadding="true"
app:cardBackgroundColor="#android:color/transparent"
android:elevation="0dp">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="25sp"
android:paddingLeft="10dp"
android:textColor="#4928ef"
android:textStyle="italic"/>
</android.support.v7.widget.CardView>
See above code with RecyclerView