Develop Reference

How to properly draw layout with image and add text to it

I have created a grid view in Android. Now I want to use this custom layout to put text in the view. I can work on all views, but how can I create the view shown in picture and add text in the white space of image and inside blue rectangle too?

Try framelayout. I have tried one for you. Feel free to ask if you are not getting something.
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageViewCircle"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginBottom="3dp"
android:layout_marginTop="2dp"
android:src="#drawable/mypng" />
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="20dp"
android:gravity="center|center_horizontal"
android:text="50"
android:textSize="40sp" />
<TextView
android:id="#+id/textViewNumeric"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="5dp"
android:gravity="bottom|center_horizontal"
android:text="Text"
android:textColor="#ffffff"
android:textSize="20sp"
android:textStyle="bold" />
</FrameLayout>

How to add another ImageView over an existing ImageView dynamically?

I know similar questions have been asked before but I think my case is different.
So I'm trying to make a playlist using a RecyclerView and when a song is selected I want the circular image which holds the Image for the song to change to a tick sign while the original image can be seen faded in the background. I have my tick image ready.
How can I add this image over my existing ImageView dynamically? The putting one image in the background method is not a solution for me because the music image file is loaded dynamically from Realm and thus can't be the background.
The XML code for my RecyclerView items is below:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:paddingRight="10dp"
android:paddingLeft="30dp"
>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="start"
android:transitionName="albumArt"
android:id="#+id/album_art"
android:scaleType="centerCrop"
android:src="#color/colorPrimary"/>
<LinearLayout
android:layout_width="fill_parent"
android:gravity="right"
android:paddingLeft="20dp"
android:orientation="vertical"
android:layout_marginTop="20dp"
android:layout_height="wrap_content">
<TextView
android:id="#+id/data"
android:layout_width="match_parent"
android:fontFamily="sans-serif"
android:textColor="#ffffff"
android:text="Music Name"
android:textSize="17sp"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/data_album"
android:layout_width="match_parent"
android:fontFamily="sans-serif"
android:textColor="#bfe0e0e0"
android:textSize="14sp"
android:text="Music Artist"
android:layout_height="wrap_content"
/>
</LinearLayout>
How can I do this dynamically from java code? Can this be done using set visibility somehow? If yes, please explain new ways to do this are appreciated as well.

You can make use of FrameLayout here and place both ImageViews inside the FrameLayout and based on condition you can make one of them visible and other invisible
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:paddingRight="10dp"
android:paddingLeft="30dp"
>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="start"
android:transitionName="albumArt"
android:id="#+id/album_art"
android:scaleType="centerCrop"
android:src="#color/colorPrimary"/>
<ImageView
android:id="#+id/imageView"
android:layout_width="120dp"
android:layout_height="120dp">
</ImageView>
</FrameLayout>
<LinearLayout
android:layout_width="fill_parent"
android:gravity="right"
android:paddingLeft="20dp"
android:orientation="vertical"
android:layout_marginTop="20dp"
android:layout_height="wrap_content">
<TextView
android:id="#+id/data"
android:layout_width="match_parent"
android:fontFamily="sans-serif"
android:textColor="#ffffff"
android:text="Music Name"
android:textSize="17sp"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/data_album"
android:layout_width="match_parent"
android:fontFamily="sans-serif"
android:textColor="#bfe0e0e0"
android:textSize="14sp"
android:text="Music Artist"
android:layout_height="wrap_content"
/>
</LinearLayout>

Yes, it can be done by using set visibility. In your layout file, you will most likely need to use a Relative Layout so you can anchor both image views exactly the same. Then on the view you do not want to initially display, you make it invisible by adding the following:
android:visibility="invisible"
Then later on when you want to toggle the visibility on/off, you can use:
myImageView.setVisibility(View.VISIBLE);
myImageView.setVisibility(View.INVISIBLE);

Color overlay over button with image background in Android

I have a layout which contains a button and a text view. I want to apply a color (with some alpha) to that layout. I've already tried many solutions other suggested and I ended up with this:
<!-- Header -->
<RelativeLayout
android:id="#+id/header_container"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_marginLeft="1dp"
android:background="#color/app_dark_gray">
<Button
android:id="#+id/button"
android:layout_width="210dp"
android:layout_height="match_parent"
android:background="#drawable/button_background_image"
android:text=""
android:textAllCaps="false"
android:textColor="#color/white"
android:textSize="20sp" />
<TextView
android:id="#+id/textinfobar"
style="#style/InfoBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:gravity="center"
android:paddingBottom="3dp"
android:paddingTop="3dp"
android:text="" />
<View
android:id="#+id/overlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#DD000000"
android:clickable="true"
android:visibility="visible"/>
</RelativeLayout>
I appended a View to my relative layout and gave it the color I wanted.
The problem is that only the TextView gets that color. The button stays the same way. Is there any way I can solve this?
EDIT:
I need this to work on API 16 and higher

view sliding over layout

I have relative layout. Within which I have many views like edit text, text views and so on. I do lots of animations in that. Everything was perfectly fine. But at one point, I have a requirement.
It is the password page. Create and confirm password. Two edittexts one after another. If the password doesnt meet the requirement, a plain orange view should slide up with error message "Invalid password".
So I put create and confirm password in linear layout. The linear layout will slide up, letting user type in passwords. After validation, if there is an error, the linear layout should slide down and the plain view will slide up. I kept the view invisible and when required I made it visible and wrote the code to slide up. The same code works when I just use single edit text instead of linear layout. But it is not working when using linear layout. Am I doing something wrong?
Adding code to it. The code specific to this issue starts with till the end of coding
I declared linear layout as view and NOT VIEWGROUP.
EDIT: After doing analysis, I found that the view I am trying to slide up after sliding down the layout is hidden somewhere in the view hierarchy.
view.bringToFront() helps to bring the error view to the front and slides up.
But after that the problem is, after my linear layout slide down, the error view is not sliding up straight away. Because I am using bringToFront(), it displays the view first on the whole screen (with background color as orange) and then the sliding starts.
I am not sure whether it is correct but I fixed this issue like this.
no background color has been given to the view
I used errorView.bringToFront () and errorView.setVisibility(true) in the animationEnd() of a Layout slidingdown animation listener.
I defined sliding up animation for the errorView in the same animationEnd() of layout sliding down listener
In the animationStart() of errorView sliding up animation listener, I defined the background color of the errorView. Now its working as expected.
But let me know better way of doing this.
//Declaration
View greyView, orangeView, yellowView, blueView, orangeErrorView, letsGetStartedView, welcomeBckView, passwordMasterLayout, orangePwdErrorView;
TextView welcomeText,errorTextView, letsGetStartedTextView, welcomeBckTxtView, errorPwdMsg;
//Password Error Handling
orangePwdErrorView = v.findViewById(R.id.orangePasswordErrorView);
errorPwdMsg = (TextView) v.findViewById(R.id.errorPasswordMessage);
//Layout code
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/sample_main_layout">
<FrameLayout
android:id="#+id/sample_content_fragment"
android:layout_weight="76.4"
android:layout_width="match_parent"
android:layout_height="0px" />
<FrameLayout
android:id="#+id/bottomPanel"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="23.6">
</FrameLayout>
</LinearLayout>
sample_content_fragment framelayout takes the below code
<RelativeLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<View
android:id="#+id/grey"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#58595B" />
<View
android:id="#+id/orange"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F26724"
android:visibility="invisible" />
<View
android:id="#+id/yellow"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FDB518"
android:visibility="invisible" />
<View
android:id="#+id/blue"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#1893D2"
android:visibility="invisible" />
<TextView
android:layout_width="260dp"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="#string/welcome"
android:id="#+id/welcomeTextView"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="51dp"
android:textColor="#ffffff"
android:textSize="20dp"
android:textStyle="bold"
android:visibility="invisible"
/>
<ImageView
android:layout_height="60dp"
android:layout_width="60dp"
android:id="#+id/clinicloud_logo"
android:clickable="true"
android:src="#drawable/clinicloud_icon"
android:layout_marginRight="50dp"
android:layout_alignParentStart="true"
android:layout_marginStart="35dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="40dp" />
<View
android:id="#+id/orangeErrorView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F26724"
android:visibility="invisible" />
<EditText
android:layout_width="match_parent"
android:layout_height="90dp"
android:inputType="textEmailAddress"
android:ems="10"
android:id="#+id/emailEditText"
android:text="#string/enter_email"
android:layout_gravity="center"
android:background="#f4f4f4"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:visibility="invisible"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/errorMessage"
android:layout_alignTop="#+id/welcomeTextView"
android:layout_centerHorizontal="true"
android:textColor="#ffffff"
android:visibility="invisible"/>
<!--UI components for welcome back page-->
<View
android:id="#+id/welcomeBackView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#134F9F"
android:visibility="invisible" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/welcome_back"
android:id="#+id/welcomeBackTxtView"
android:textColor="#ffffff"
android:layout_alignTop="#+id/welcomeTextView"
android:layout_alignStart="#+id/clinicloud_logo"
android:textSize="20dp"
android:textStyle="bold"
android:visibility="invisible"/>
<EditText
android:layout_width="wrap_content"
android:layout_height="90dp"
android:ems="10"
android:id="#+id/password"
android:layout_alignTop="#+id/emailEditText"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:text="Password"
android:visibility="invisible"
android:background="#d2d1d1"
/>
<!--UI components for Let's get started page-->
<View
android:id="#+id/letsGetStartedView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#5C3A91"
android:visibility="invisible" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Let&apos;s get started"
android:id="#+id/letsGetStartedTxtView"
android:textColor="#ffffff"
android:layout_alignTop="#+id/welcomeTextView"
android:layout_alignStart="#+id/clinicloud_logo"
android:textSize="20dp"
android:textStyle="bold"
android:visibility="invisible"/>
<!--Linear layout to show the create and confirm password-->
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="180dp"
android:gravity="bottom"
android:layout_alignBottom="#+id/emailEditText"
android:layout_alignParentStart="true"
android:weightSum="1"
android:id="#+id/passwordMasterView"
android:visibility="invisible">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:id="#+id/createPwd"
android:layout_weight="0.50"
android:background="#F4F4F4"
android:text="#string/create_password"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:id="#+id/confirmPwd"
android:layout_weight="0.50"
android:background="#E3E3E3"
android:text="#string/confirm_password" />
</LinearLayout>
<!-- To show password errors-->
<LinearLayout
android:id="#+id/orangePasswordErrorView"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F26724"
android:visibility="invisible" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/errorPasswordMessage"
android:layout_alignTop="#+id/welcomeTextView"
android:layout_centerHorizontal="true"
android:textColor="#ffffff"
android:visibility="invisible"
/>
<!-- To show password errors-->
</RelativeLayout>
The java logic is in https://stackoverflow.com/questions/30523599/sliding-up-and-down-android
Please direct for any incorrect codings

I kept the view invisible and when required I made it visible and wrote the code to slide up.
I think you must do it in DialogFragment or custom AlertDialog that will be shown above your layout, if dont want to do this try envelop your RelativeLayout in FrameLayout and adding in it LinearLayout for example but visout your code difficult to say in what problem it is

You should consider using a library for the sliding panel, one that I've had excellent experiences with (and supports the functionality that your after) is umano's AndroidSlidingUpPanel. https://github.com/umano/AndroidSlidingUpPanel

Make a text view overlay another text view

I am trying to make a text view to overlay the above text view, I have tried the text align with no success; I can accomplish this by adding a large amount of padding but I do not want to use padding because I ran into other issues in android variety in screen sizes. I will post an image of what I'm trying to do and also post then XML code. Looking forward to some help here, thanks in advance.
Image(I am trying to make that black bar with the text android /Design overlay the above area that says busybusy Development as of right now the black text view is just pushing the above text view up were I would like it to just overlay but stays at the same position) http://imgur.com/ebgNTNk
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/org_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:gravity="center_horizontal"
android:paddingTop="42dp"
android:paddingBottom="42dp"
android:background="#drawable/dashboard_business_image"
android:textColor="#color/busy_black"
android:textStyle="bold"
android:textAppearance="?android:attr/textAppearanceMedium">
</TextView>
<TextView
android:id="#+id/project_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_below="#id/org_name"
android:layout_marginRight="4dp"
android:gravity="center_horizontal"
android:layout_gravity="bottom"
android:paddingTop="2dp"
android:paddingBottom="2dp"
android:background="#color/busy_translucent_black"
android:textColor="#color/busy_white"
android:textStyle="normal"
android:textAppearance="?android:attr/textAppearanceSmall"
android:visibility="gone">
</TextView>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<include layout="#layout/dashboard_clock_in_button" />
<include layout="#layout/dashboard_clock_out_button" />
<include layout="#layout/dashboard_paused_button" />
<ListView
android:id="#+id/action_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:divider="#color/busy_divider_color"
android:dividerHeight="0dp">
</ListView>
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:layout_weight="0"
android:gravity="center_horizontal"
android:paddingTop="32dp"
android:paddingBottom="32dp"
android:background="#color/busy_white"
android:textColor="#color/busy_black"
android:textStyle="bold"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>

Reading this, it appears you want the project_name view to overlay the org_name view. You can do this by aligning the bottom of the views.
Change this line:
android:layout_below="#id/org_name"
To this:
android:layout_alignBottom="#id/org_name"
That will align the bottom of the two views, effectively placing project_name on top of the org_name view.

The reason they aren't overlapping is the android:layout_below="#id/org_name" in the second TextView. If you remove that, I think it should work as you want it to. If not, you might want to try a FrameLayout instead of a RelativeLayout.