Develop Reference

RelativeLayout with overlapping views

I need to create a UI design like image below. I have used RelativeLayout, but the top view is hiding behind the CardView. I have tried so many ways, couldn't get it done.
here is my code:
<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="150dp"
tools:context=".activity.LoginActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="150dp"
android:elevation="4dp"
android:layout_margin="10dp"
>
</android.support.v7.widget.CardView>
<FrameLayout
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginStart="20dp"
android:layout_marginLeft="20dp"
android:background="#drawable/square_items">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_aboutus"/>
</FrameLayout>
</RelativeLayout>

You need to put ImageView in Cardview so that elevation becomes equal for both. 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="10dp"
android:elevation="4dp"
android:padding="10dp"
app:cardCornerRadius="6dp">
</android.support.v7.widget.CardView>
</RelativeLayout>
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#color/red" />
</android.support.v7.widget.CardView>
</RelativeLayout>
</RelativeLayout>

Placing Textview on ImageView Compatible on each screensize

I have 2 images and 4 textviews and I want to place textviews on images my current work is like that.
I have to place 4 textview like 2. Image. Is there any way to make it without using DP because if i use DP when resolution changed looks terrible.
My current work is:
I want it to look like this:
My Activity Codet
<?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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/grey"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="300dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:src="#drawable/solayak"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Deneme"
android:gravity= "center"
/>
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="#drawable/sagayak"
/>
</android.support.constraint.ConstraintLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_alignParentBottom="true"
android:layout_gravity="center"
android:gravity="center_vertical|center_horizontal"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="70dp"
app:srcCompat="#drawable/arti_buton_yeni" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="match_parent"
android:layout_height="70dp"
app:srcCompat="#drawable/eksibutton_yeni" />
</LinearLayout>
<include
layout="#layout/bottomnavigation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true" />
</RelativeLayout>

Add small button on the upper right of imageview

Currently i have this layout:
https://imgur.com/a/Y2a67
this is the code for this layout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:src="#drawable/img_docu_placeholder"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:src="#drawable/img_docu_placeholder"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:src="#drawable/img_docu_placeholder"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:src="#drawable/img_docu_placeholder"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:src="#drawable/img_docu_placeholder"/>
</LinearLayout>
</FrameLayout>
</HorizontalScrollView>
What i'm trying to achieve is:
https://imgur.com/a/MYxkh
where i need to add additional 'X' button on the upper left side of the imageview

You can use FrameLayout. Your icon must have android:layout_gravity attribute.
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/myImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dip"
android:src="#mipmap/ic_launcher"/>
<ImageView
android:id="#+id/imgX"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="top|left" //This line
android:src="#mipmap/ic_launcher_round" />
</FrameLayout>
Hope it helps.

Try this:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="80dp"
android:layout_height="108dp"
android:background="#ffffff">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="8dp"
android:background="#e6e6e6" />
<ImageView
android:layout_width="16dp"
android:layout_height="16dp"
android:src="#drawable/ic_cancel_black" />
Output:
Support multiple resolution:
Using this library: https://github.com/intuit/sdp
Create multiple layouts for each screen and using dp

How to show the toolbar layout only when a song is played (ListView item is clicked)

activity_main2.xml
I want to show the toolbar in the following code only when a listView item is clicked. Otherwise, remain hidden. If I use (View.Invisible) in the Java Code then the layout disappears, yet white space remains in its area. I want the listview to occupy that area.
<?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:orientation="vertical"
tools:context="com.example.ashutosh.music_player.Main2Activity">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/catv" />
<ListView
android:id="#+id/track_list_view"
android:layout_width="match_parent"
android:layout_weight="100"
android:layout_height="0dp"
android:overScrollHeader="#drawable/catv1"/>
<android.support.v7.widget.Toolbar
android:id="#+id/bar_player"
android:background="#333333"
android:theme="#style/Theme.AppCompat.Dark.DarkActionBar"
android:layout_width="match_parent"
android:layout_height="50dp"
app:contentInsetStart="0dp">
<ImageView
android:id="#+id/selected_track_image"
android:layout_width="50dp"
android:layout_height="55dp" />
<TextView
android:id="#+id/selected_track_title"
android:paddingLeft="8dp"
android:layout_width="220dp"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/forward"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginLeft="30dp"/>
<ImageView
android:id="#+id/player_control"
android:layout_gravity="right"
android:layout_width="#dimen/image_size"
android:layout_height="#dimen/image_size" />
</android.support.v7.widget.Toolbar>
</LinearLayout>

Try this,This is what #shijil Said
<?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:orientation="vertical"
tools:context="com.example.ashutosh.music_player.Main2Activity">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/catv" />
<ListView
android:id="#+id/track_list_view"
android:layout_width="match_parent"
android:layout_weight="100"
android:layout_height="0dp"
android:overScrollHeader="#drawable/catv1"/>
<android.support.v7.widget.Toolbar
android:id="#+id/bar_player"
android:background="#333333"
android:theme="#style/Theme.AppCompat.Dark.DarkActionBar"
android:layout_width="match_parent"
android:visibility="gone"
android:layout_height="50dp"
app:contentInsetStart="0dp">
<ImageView
android:id="#+id/selected_track_image"
android:layout_width="50dp"
android:layout_height="55dp" />
<TextView
android:id="#+id/selected_track_title"
android:paddingLeft="8dp"
android:layout_width="220dp"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/forward"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginLeft="30dp"/>
<ImageView
android:id="#+id/player_control"
android:layout_gravity="right"
android:layout_width="#dimen/image_size"
android:layout_height="#dimen/image_size" />
</android.support.v7.widget.Toolbar>
</LinearLayout>
and set programatically
.setVisibility(View.GONE);
.setVisibility(View.VISIBLE);
as needed

Simply use Relative Layout to do so. In this way, if you set the toolbar as invisible, the list view will occupy its position.

Android - selectableItemBackground doesn't showed when click on item

I have a Recycler view and their items should be clickable. I want that all line do apply the ?selectableItemBackground effect but this does not occurs. The imageview is occupying all the item layout as an background. Why the selectable effect doesn't working as well?
this is my xml file
<?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="?listPreferredItemHeightLarge"
android:background="?selectableItemBackground"
android:descendantFocusability="blocksDescendants">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true">
<ImageView
android:id="#+id/background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:src="#drawable/holder"
android:scaleType="centerCrop"
android:focusableInTouchMode="false"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black"
android:alpha="0.3" />
</FrameLayout>
<br.com.lexsis.pizzahut.presentation.widgets.CustomFontTextView
android:id="#+id/group_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="#android:color/transparent"
style="#style/TextView.EMenu" />
</RelativeLayout>

You can add another RelativeLayout and add android:background="?attr/selectableItemBackground" to it:
<?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="?listPreferredItemHeightLarge"
android:background="?selectableItemBackground"
android:descendantFocusability="blocksDescendants">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/selectableItemBackground">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true">
<ImageView
android:id="#+id/background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:src="#drawable/holder"
android:scaleType="centerCrop"
android:focusableInTouchMode="false"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black"
android:alpha="0.3" />
</FrameLayout>
<br.com.lexsis.pizzahut.presentation.widgets.CustomFontTextView
android:id="#+id/group_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="#android:color/transparent"
style="#style/TextView.EMenu" />
</RelativeLayout>
</RelativeLayout>
Setting it to the root layout never worked for me.