Develop Reference

Semi transparent background in CardView Does not work properly

I have problem with CardView background opacity. I want to make my background semi transparent, but I have a weir bug that happens all the time. The best explanation will be a screenshot from my program.
Scr from displayed layout
I want this Layout to be all in the same semi transparent color. Instead what appears is this semi transparent color with more transparent rectangle inside. I don't know how to remove this rectangle from my layout. 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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="15dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
app:cardBackgroundColor="#66000000">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="15dp">
<ImageView
android:id="#+id/flagImageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:fontFamily="#font/changa_light"
android:scaleType="fitXY"
app:srcCompat="#mipmap/ic_launcher" />
</androidx.cardview.widget.CardView>
<TextView
android:id="#+id/flagTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TEST"
android:textColor="#ffffff"
android:gravity="center"
android:fontFamily="#font/changa_light"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
</RelativeLayout>

SOLVED! I had to add app:cardElevation="0dp to the first CardView

Is this what 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="312dp"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="4dp"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"
app:cardBackgroundColor="#color/sisman2"
app:cardCornerRadius="20dp"
app:cardElevation="2dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="8dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:ellipsize="end"
android:gravity="center"
android:singleLine="true"
android:text="HELLO"
android:textSize="24sp" />
</RelativeLayout>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="248dp"
android:elevation="0dp"
app:cardCornerRadius="20dp"
app:cardElevation="0dp">
</androidx.cardview.widget.CardView>
</RelativeLayout>
</androidx.cardview.widget.CardView>

enclose the first cardView object in a frame layout, then give it elevation and keep it at the top (remember! elevation> = API 21)
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/transparentColor"
android:elevation="3dp"
android:stateListAnimator="#null">
<!-- into-->
</FrameLayout>

Is there a way to pull out image view from its' container a little bit in Android?

I want to create a layout based on the following image,
as it is evidence I have a CardView that I show it with red lines and the card view is in a LinearLayout and I have an image in the card view in which I want to show a little bit of it in a linear layout.
I use the following code to create the 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:card_view="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="#color/grayBack"
android:orientation="vertical"
tools:context=".activities_v2.customer_steps.CustomerStepOne">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/md_white_1000"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="right"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginEnd="#dimen/_10sdp"
android:layout_marginRight="#dimen/_10sdp"
android:textColor="#color/editText"
android:textSize="#dimen/_14ssp"
/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_20sdp"
android:layout_marginLeft="#dimen/_20sdp"
android:layout_marginTop="#dimen/_100sdp"
android:layout_marginEnd="#dimen/_20sdp"
android:layout_marginRight="#dimen/_20sdp"
android:layout_marginBottom="#dimen/_10sdp"
android:minHeight="#dimen/_50sdp"
card_view:cardCornerRadius="#dimen/_10sdp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="236dp"
android:layout_height="#dimen/_150sdp"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:src="#drawable/ic_illustration_02" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="#dimen/_10sdp"
android:textColor="#color/editText"
android:textSize="#dimen/_14ssp" />
</LinearLayout>
</android.support.v7.widget.CardView>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/button_background_blue"
android:minWidth="#dimen/_150sdp"
android:textSize="#dimen/_14ssp" />
</LinearLayout>

How place overlay imageview on two layouts?

I want to build the following screen which contains app logo, success/failure icon image, information message and ok button.
Here this the code. I am using linear layout to achieve this.
<LinearLayout
android:id="#+id/statusLinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="#android:color/white"
android:weightSum="2"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:id="#+id/statusTopRelativeLayout"
android:background="#android:color/holo_blue_bright"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:id="#+id/client_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/no_image_description"
android:src="#drawable/client_logo"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/statusBottomRelativeLayout"
android:background="#android:color/holo_blue_light"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:id="#+id/statusText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:text="#string/statusText"
android:textSize="50sp"/>
<Button
android:id="#+id/btnOk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/statusText"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:clickable="true"
android:focusable="true"
android:onClick="goToHomeScreen"
android:paddingBottom="15dp"
android:paddingTop="15dp"
android:text="#string/ok"
android:textColor="#ffffff"
android:textSize="40sp"/>
</RelativeLayout>
How to place success/failure icon image on top of the two layouts?

You can use constraint to make it easy
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.constraint.Guideline
android:id="#+id/center"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/center"
android:background="#ffffff"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="#id/center"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#00ffff"/>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#ff8801"
app:layout_constraintTop_toTopOf="#id/center"
app:layout_constraintBottom_toBottomOf="#id/center"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>
Output:

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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/nilu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/colorPrimary"
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:layout_weight="1"
android:background="#color/colorAccent"
android:orientation="vertical">
<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>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#mipmap/ic_launcher_round" />
</RelativeLayout>
</RelativeLayout>
OUTPUT

Parent RelativeLayout
add child LinearLayout as fillParent and assign weightsum 2. add two
layouts with 1 weight each. (add individual implementation for each
layout according to your requirements.)
add second child in relative
layout as imageview/button for that good sign and set it center in
parent.
This will fix your problem

Custom row with circular ImageView and textview in android

I am trying to create a custom row for my RecyclerView. Here is my custom row layout:
<?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="180dp"
android:layout_margin="5dp"
android:background="#00000000">
<FrameLayout
android:id="#+id/customLevelLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/levelImage"
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_above="#+id/gameText"
android:layout_centerInParent="true"
android:scaleType="fitXY"
android:src="#drawable/circular_background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="1"
android:textColor="#fff"
android:textSize="45sp" />
<TextView
android:id="#+id/gameText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:gravity="center"
android:textColor="#000"
tools:text="Tracing" />
</RelativeLayout>
<ProgressBar
android:id="#+id/gameProgressBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:indeterminate="true"
android:padding="45dp"
android:visibility="gone" />
</FrameLayout>
<ImageView
android:id="#+id/lockImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/lock_background"
android:padding="45dp"
android:src="#drawable/lock"
android:visibility="gone" />
</RelativeLayout>
This is how it looks like:
The problem is, I have to define a predefined height of the custom row i.e 170dp currently. I am facing 2 problems because of this:
1) If I open the application in a small screen or a tablet device. The custom row is looking ugly i.e I loose the circular shape of the ImageView.
2) The text doesn't remain at the centre if there is a slight change in the layout.

Try this in your 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="wrap_content"
android:layout_margin="5dp"
android:background="#00000000">
<FrameLayout
android:id="#+id/customLevelLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/levelImage"
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_centerInParent="true"
android:scaleType="fitXY"
android:src="#drawable/circular_background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:text="1"
android:textColor="#fff"
android:textSize="45sp"/>
</RelativeLayout>
<TextView
android:id="#+id/gameText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:gravity="center"
android:textColor="#000"
tools:text="Tracing"/>
</LinearLayout>
<ProgressBar
android:id="#+id/gameProgressBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:indeterminate="true"
android:padding="45dp"
android:visibility="gone"/>
</FrameLayout>
<ImageView
android:id="#+id/lockImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/lock_background"
android:padding="45dp"
android:src="#drawable/lock"
android:visibility="gone" />
</RelativeLayout>

Try This. You can use Linearlayout as root than for image and text use RelativeLayout
<?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:layout_margin="5dp"
android:background="#00000000"
android:orientation="vertical">
<FrameLayout
android:id="#+id/customLevelLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/levelImage"
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_centerInParent="true"
android:scaleType="fitXY"
android:src="#drawable/circular_background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="1"
android:textColor="#fff"
android:textSize="45sp" />
</RelativeLayout>
<TextView
android:id="#+id/gameText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_margin="10dp"
android:gravity="center"
android:textColor="#000"
tools:text="Tracing" />
</LinearLayout>
<ProgressBar
android:id="#+id/gameProgressBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:indeterminate="true"
android:padding="45dp"
android:visibility="gone" />
</FrameLayout>
<ImageView
android:id="#+id/lockImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/lock_background"
android:padding="45dp"
android:src="#drawable/lock"
android:visibility="gone" />
</LinearLayout>

Use constrain layout which helps you to set image like you want just by drag and drop and add constrain

For supporting multiple screen. First you have to go through this link
enter link description here
Once you fix first issue, second issue also will get fix

Setting alpha of background also effects text within children

I am developing an Android app, but when I change the alpha value of the background, its children are also effected and every text within the element is faded out.
How can I remove the fade from the text in the layout?
Here is my XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:background="#color/whitesmoke"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="90dp">
<ImageView
android:alpha="0.5"
android:scaleType="centerCrop"
android:id="#+id/iv_user_background"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:padding="10dp"
android:gravity="center_vertical"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<de.hdodenhof.circleimageview.CircleImageView
app:civ_border_width="5dp"
app:civ_border_color="#color/white"
android:id="#+id/civ_user_profile"
android:layout_width="70dp"
android:layout_height="70dp" />
<LinearLayout
android:alpha="0.5"
android:background="#color/colorAccent"
android:paddingLeft="10dp"
android:layout_weight="1"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:textSize="18dp"
android:layout_marginTop="5dp"
android:id="#+id/tv_user_name"
android:textStyle="bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="3dp"
android:paddingBottom="3dp"
android:alpha="30"
android:layout_marginTop="5dp"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/iv_user_like"
android:layout_width="15dp"
android:layout_height="15dp" />
<TextView
android:textSize="10dp"
android:layout_marginLeft="5dp"
android:id="#+id/tv_user_like_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabLayout
android:id="#+id/tl_user_nav_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:elevation="6dp"
android:minHeight="?attr/actionBarSize" />
</LinearLayout>
<FrameLayout
android:background="#color/whitesmoke"
android:id="#+id/user_main_content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
And here is a screenshot of the result:

If your background is just a color you can remove the alpha from your layout.
Instead of using #color/colorAccent you can use a hex color like #BBFF80AB
Hex colors are have a structure like: #AARRGGBB where AA-alpha, RR-red, GG-green, BB-blue. By changing the alpha of that color, you change the alpha of only the background, and not all of the views'. So, in your case, make the layout be like this:
<LinearLayout
android:background="#80FF80AB"
android:paddingLeft="10dp"
android:layout_weight="1"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">