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>
Related
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);
Im trying to create this layout (sorry for the quality, it's all what I have):
So far I have built this
<?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="wrap_content"
android:padding="12dp">
<ImageView xmlns:tools="http://schemas.android.com/tools"
android:layout_width="48dp"
android:layout_height="48dp"
android:id="#+id/UserPhotoImageView"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_marginRight="16dp" />
<TextView
android:text="UserName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="normal"
android:typeface="normal"
android:textSize="16dp"
android:layout_toRightOf="#+id/UserPhotoImageView"
android:layout_alignTop="#+id/CalendarImageView"
android:id="#+id/UserNameTextView"
android:textColor="#333333" />
<TextView
android:text="Date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:typeface="normal"
android:textSize="12dp"
android:id="#+id/DateTextView"
android:gravity="top"
android:layout_toLeftOf="#+id/CalendarImageView"
android:layout_alignTop="#+id/CalendarImageView" />
<ImageView
android:layout_width="16dp"
android:layout_height="16dp"
android:gravity="top"
android:id="#+id/CalendarImageView"
android:layout_alignParentRight="true"
android:layout_marginLeft="6dp"
android:src="#drawable/ic_calendar_icon"
android:backgroundTint="#ffffffff" />
<TextView
android:text="Comment"
android:layout_below="#+id/UserNameTextView"
android:layout_alignLeft="#+id/UserNameTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:typeface="normal"
android:textSize="14dp"
android:id="#+id/UserCommentTextView" />
</RelativeLayout>
Which give me the first part as I want to achive this:
Now for the last row, I know how to make a rounded image but how can i place the image and the text behind a colored bar?
I would create a RelativeLayout for this part (circle image with color bar and text)
you can add a View (could be an ImageView) in this relative layout, to show behind your image. and give it background with color of your choice.
Example:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"> <!--change here to what you need-->
<!--your colored bar-->
<View
android:layout_width="match_parent"
android:layout_height="30dp" <!--control the thickness of your bar-->
android:layout_centerVertical="true"
android:background="#3333aa" />
<!--face image-->
<ImageView
android:id="#+id/imageFace"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="15dp"
android:background="#color/#2323ea" />
<!--text view-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginRight="15dp"
android:layout_toLeftOf="#id/imageFace"
android:text="name" />
</RelativeLayout>
add your own customizations but this is a general example
Wrap both in a FrameLayout.
I guessed at the dimensions, but this should get you in the ballpark.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/UserCommentTextView">
<TextView
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:paddingRight="96dp"
android:gravity="right|end"
android:background="#color/purple"
tools:text="Name"/>
<!-- replace with whatever component you are using for circle image view -->
<CircleImageView
android:id="#+id/circle_image_view"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_gravity="right|end"
android:layout_marginRight="16dp"
android:background="#color/purple"
tools:src="#drawable/gwynneth"/>
</FrameLayout>
EDIT
Alternatively, if you wanted to eliminate the FrameLayout, you could integrate those two views right into your RelativeLayout with these changes:
For the positioning, I would go with android:layout_alignParentTop="true" and then a top margin to push the views down beneath your other views. You have a slight issue in that you want these to be below both the user image and the comment text, but since the comment text could expand so the bottom is lower than the image, it's hard to say which view you should anchor on. You might want to set a maxHeight on the comment to keep it from getting too big.
Since you don't have the FrameLayout to center on anymore, you would have to give the TextView an absolute size in order to line it up with the circle image view. If you're okay with that, you can just put these right in your RelativeLayout then set their top margins so that they align correctly:
<TextView
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="32dp"
android:layout_alignParentTop="true"
android:layout_marginTop="80dp"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:paddingRight="96dp"
android:paddingEnd="96dp"
android:gravity="right|end"
android:background="#color/purple"
tools:text="Name"/>
<!-- replace with whatever component you are using for circle image view -->
<CircleImageView
android:id="#+id/circle_image_view"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="64dp"
android:layout_marginRight="16dp"
android:layout_marginEnd="16dp"
android:background="#color/purple"
tools:src="#drawable/gwynneth"/>
So I understand that you want to draw that purple thick line and put on top of it a Imageview.
The easiest way, the whay i usually do to overlapp two or more layouts/ views is this: lets say we have 3 views( View 1, View 2 and View 3). If you put them in this order(1,2,3)in a Relative layout, and set them the same position in the Layout, the result will be that the View 3 will be on top of other 2.
So as a conclusion, if you want to overlapp two or more Views just put the View you want to be on top( the picture in your case) before the view you want to be overlapped( the purple line)
I want to align two pictures and text. When the first picture is commented out, the text and the second picture are aligned in the middle of a card. But the first picture is always aligned to bottom of the card. I tried all layout properties so far without luck.
See the screenshot for example. I do not understand why the circle is bigger than OK button because when I open these files they have the same dimensions. Where is the issue? I want to use LinearLayout as the simplest layout manager available.
<android.support.v7.widget.CardView
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginRight="8dp"
android:layout_marginLeft="8dp"
android:layout_marginBottom="4dp"
android:layout_marginTop="4dp"
app:cardCornerRadius="4dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="16dp"
android:layout_marginTop="14dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/badge_type"
android:src="#drawable/ic_gold_circle"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/badge_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginLeft="10dp"
android:text="#string/badge_title_KNIGHT"
style="#style/PlayRecordHeader"
/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<ImageView
android:id="#+id/badge_status"
android:src="#drawable/ic_correct"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="8dp"/>
</LinearLayout>
</android.support.v7.widget.CardView>
Update with layout_gravity="center_vertical"
I think you have to keep
android:layout_gravity="center_vertical"
and remove
android:layout_marginLeft="16dp"
android:layout_marginTop="14dp"
in the LinearLayout
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'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
I have a layout with one row:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingRight="#dimen/total_sales_page_summary_text_distance"
android:text="test2"
android:textSize="#dimen/total_sales_page_info_font_size" />
<TextView
android:id="#+id/year_on_year"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/total_sales_info_text_color"
android:textSize="#dimen/total_sales_page_info_font_size" />
<ImageView
android:id="#+id/tradeGreen"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_gravity="center_vertical"
android:contentDescription=""/>
</LinearLayout>
In source code I just set different number and visibility (GONE/VISIBLE) of imageview (clicking on different buttons).
as result:
image is not visible (button1 was clicked)
2.image and some long number are vivible (button2 was clicked)
3.image and other little shorter number are visible (button3)
You can compare how it looks like. Text becomes visible but image is on the previous place. Why? Why image is not moved to left.
By the way. When screen is rotated - image becomes visible on correct place.
Try to use weight.. it will align based on screen
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:orientation="horizontal" xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingRight="#dimen/total_sales_page_summary_text_distance"
android:text="test2"
android:textSize="#dimen/total_sales_page_info_font_size" />
<TextView
android:id="#+id/year_on_year"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textColor="#color/total_sales_info_text_color"
android:textSize="#dimen/total_sales_page_info_font_size" />
<ImageView
android:id="#+id/tradeGreen"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_gravity="center_vertical"
android:contentDescription=""/>
As Deepchand rightly said, add that Image as a drawable to the TextView directly. This will take care of the Image position and will remove an extra ImageView from the layout.
So to your TextView add this,
<TextView
android:id="#+id/year_on_year"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/total_sales_info_text_color"
android:drawableRight="your image" //this will add an image to its right
android:drawablePadding="5dp" // you can also add padding as per you need
android:textSize="#dimen/total_sales_page_info_font_size" />
Hope this works the way you want. :)
This will be solved by using Weight.
Here your UI is horizontally so you need to change in your xml file. Like,
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:orientation="horizontal" xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingRight="#dimen/total_sales_page_summary_text_distance"
android:text="test2"
android:textSize="#dimen/total_sales_page_info_font_size" />
<TextView
android:id="#+id/year_on_year"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textColor="#color/total_sales_info_text_color"
android:textSize="#dimen/total_sales_page_info_font_size" />
<ImageView
android:id="#+id/tradeGreen"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_gravity="center_vertical"
android:contentDescription=""/>
</LinearLayout>