Develop Reference

Aligning multiple checkboxes vertically

I try to align four checkboxes but one is not in the center of the other. If I shorten the text it fits but if its longer it looks like in the screenshot. The problem is it will be in different languages so the text size can be different. Also if I remove the scale it fits perfect but I need this bigger checkboxes
This is my code:
<CheckBox
android:id="#+id/cb1"
android:scaleX="1.3"
android:scaleY="1.3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="23dp"
android:text="#string/unmounted"
android:textColor="#color/textBlack"
android:layout_below="#+id/abc"
android:layout_toEndOf="#+id/imageView6"
android:focusable="false"/>
<CheckBox
android:id="#+id/cb2"
android:scaleX="1.3"
android:scaleY="1.3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/problem_not_working"
android:textColor="#color/textBlack"
android:layout_below="#+id/cb1"
android:layout_alignStart="#+id/cb1"
android:focusable="false"/>
<CheckBox
android:id="#+id/cb3"
android:scaleX="1.3"
android:scaleY="1.3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/problem_cable_defective"
android:textColor="#color/textBlack"
android:layout_below="#+id/cb2"
android:layout_alignStart="#+id/cb2"
android:focusable="false"/>
<CheckBox
android:id="#+id/cb4"
android:scaleX="1.3"
android:scaleY="1.3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/problem_cable_tie"
android:textColor="#color/textBlack"
android:layout_below="#+id/cb3"
android:layout_alignStart="#+id/cb3"
android:focusable="false"/>

Here is the exact solution for your problem, the thing which you are actually trying to achieve is the bigger checkbox view (corresponding to its text which is as big as the checkbox view, obviously) with proper alignment of all the views in the series, something like this:
Your desired UI.
But the thing you are doing wrong is that you are using the scaleX and scaleY attributes for achieving your desired UI that distorts your view as these two attributes scale the complete view i.e. the squared checkbox view with its text/label in the X and Y directions respectively (together with the text/label of the checkbox), so there is a dependency on the text as well (which is distorting your view).
So, the below code will solve your problem:
(In this I have taken the squared checkbox view as separate and beside it I have placed a textview in which I have written the text which corresponds to the text/label of that checkbox to complete the UI). Thereby using two views (i.e. the CheckBox and the TextView beside it) instead of using a single compound view (i.e. the CheckBox).
Note: In the solution given below, the CheckBox is a compound view but I haven't used it in the
same manner.
<?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">
<View
android:id="#+id/some_view"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="20dp"
android:layout_marginTop="23dp" />
<!--android:text="Unmounted"-->
<CheckBox
android:id="#+id/cb1"
android:scaleX="1.3"
android:scaleY="1.3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="23dp"
android:layout_below="#+id/some_view"
android:layout_alignStart="#+id/some_view"
android:focusable="false" />
<TextView
android:id="#+id/tv_for_cb1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#id/cb1"
android:layout_alignTop="#+id/cb1"
android:layout_alignBottom="#+id/cb1"
android:layout_marginStart="40dp"
android:text="Unmounted"
android:textColor="#android:color/black"
android:textSize="24sp" />
<!--android:text="Problem Not Working"-->
<CheckBox
android:id="#+id/cb2"
android:scaleX="1.3"
android:scaleY="1.3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="23dp"
android:layout_below="#+id/cb1"
android:layout_alignStart="#+id/cb1"
android:focusable="false"/>
<TextView
android:id="#+id/tv_for_cb2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#id/cb2"
android:layout_alignTop="#+id/cb2"
android:layout_alignBottom="#+id/cb2"
android:layout_marginStart="40dp"
android:text="Problem Not Working"
android:textColor="#android:color/black"
android:textSize="24sp" />
<!--android:text="Problem Cable Defective"-->
<CheckBox
android:id="#+id/cb3"
android:scaleX="1.3"
android:scaleY="1.3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="23dp"
android:layout_below="#+id/cb2"
android:layout_alignStart="#+id/cb2"
android:focusable="false"/>
<TextView
android:id="#+id/tv_for_cb3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#id/cb3"
android:layout_alignTop="#+id/cb3"
android:layout_alignBottom="#+id/cb3"
android:layout_marginStart="40dp"
android:text="Problem Cable Defective"
android:textColor="#android:color/black"
android:textSize="24sp" />
<!--android:text="Problem Cable Tie"-->
<CheckBox
android:id="#+id/cb4"
android:scaleX="1.3"
android:scaleY="1.3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="23dp"
android:layout_below="#+id/cb3"
android:layout_alignStart="#+id/cb3"
android:focusable="false"/>
<TextView
android:id="#+id/tv_for_cb4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#id/cb4"
android:layout_alignTop="#+id/cb4"
android:layout_alignBottom="#+id/cb4"
android:layout_marginStart="40dp"
android:text="Problem Cable Tie"
android:textColor="#android:color/black"
android:textSize="24sp" />
</RelativeLayout>
And the other way out to your mentioned problem would be to create custom drawables for the checkbox and then handle them using a state list drawable as for the checkbox to be shown differently in different states as when it is unchecked, checked etc.
This link would help you if you are interested in doing it in this manner or way and would be great if you want to customize your checkbox's view.
Creating custom checkbox using selectors and shapes.
For further help in this context refer:
Android: How to change CheckBox size?

Android: Heart Shaped small button to add item to favorite

I have found an answer to a question how to create heart shaped button using vector xml.
Answer is here:
https://stackoverflow.com/a/45618554/8523262
But I am not able to get it correctly implemented in my case.
I have two buttons side by side third would be this heart-Button. However, it does not fit correctly with other two buttons. I need it smaller than what original answer has it.
Here is my xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="7sp"
android:textSize="12sp"
>
<Button
android:id="#+id/buttonIA"
android:layout_width="0sp"
android:layout_weight=".3"
android:layout_height="25sp"
android:background="#drawable/buttondesign"
android:textColor="#color/white"
android:text="Hide Arabic Version"
/>
<Button
android:id="#+id/buttonIR"
android:layout_width="0sp"
android:layout_weight=".3"
android:layout_height="25sp"
android:background="#drawable/buttondesign"
android:textColor="#color/white"
android:layout_marginStart="7sp"
android:text="Hide Reference"
/>
<Button
android:id="#+id/buttonF"
android:layout_width="0sp"
android:layout_weight="0.3"
android:layout_height="25sp"
android:background="#drawable/buttondesign"
android:textColor="#color/white"
android:layout_marginStart="7sp"
android:text="Favorite it!"
/>
</LinearLayout>
Can anyone please tell me to resize it to look like a heart when placed inline with the two buttons I have already.
ButtonF is what I tried to set this vector as background of. Changed height/width too but didn't get it how i need it.
Thank you.

I use ImageButton Button instead of Button now. You could use ImageView too.
favoritebutton in below code is the vector xml that I shared link of in my questions, in case it helps anyone.
<ImageButton
android:id="#+id/buttonF"
android:layout_weight=".3"
android:layout_width="24dp"
android:layout_height="24dp"
android:src="#drawable/favoritebutton"
android:textColor="#color/white"
android:layout_marginStart="7dp"
android:background="#null"
/>

This tag and its children can be replaced by one <TextView/> and a compound drawable: picture and text

I have this codes
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical"
android:background="#drawable/tick"
android:contentDescription="img" />
<TextView
android:id="#+id/txt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="text1 "
android:textColor="#fff"
android:textSize="#dimen/sizeNormal" />
and i am having a warning This tag and its children can be replaced by one <TextView/> and a compound drawable
How i can merge them to one textview?
i have tried but in the same time i have tick image dimension problem.
here you can see the image

This is just a warning and the app should still compile and run. However, this doesn't mean that you just want to dismiss all warnings.
Now, there are different ways to do this. You could use drawableLeft in your xml. Something like
<TextView
android:id="#+id/txt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="text1 "
android:textColor="#fff"
android:textSize="#dimen/sizeNormal"
android:drawableLeft="#drawable/tick />
You can also see here in the docs of different ways of adjusting it in your Java code.
To set the padding between the image and the text, try using
yourTextView.setCompoundDrawablePadding(somePadding);
where somePadding is an int for the value of the padding you want.

USe the text Compound Drawables.
<TextView
android:id="#+id/txtTitle"
android:drawableLeft="#drawable/g_device_access_storage"
android:drawableRight="#drawable/g_navigation_refresh"
android:paddingRight="55dp"
android:text="hello" />

How do I make this button in XML?

I wanted to make an ImageButton to put in my app, but I need a very specific one.
I wanted to make an ImageButton similar to that of the one in QuickPic. Notice on the left screenshot, the Camera. See how there's an image, with a translucent gray bar at the bottom with text in it? I wanted to make something very similar to that, but with one large textview in the gray bar instead of two small ones. I am completely lost on how to do this in XML so if someone could help me, It'd be greatly appreciated. Thanks!

You mean something like this? :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageButton1"
android:layout_alignLeft="#+id/imageButton1"
android:layout_alignRight="#+id/imageButton1"
android:background="#33000000"
android:text="Image Text" />
</RelativeLayout>
Additionally, you can specify the TextView's gravity and textSize to further match your needs:
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageButton1"
android:layout_alignLeft="#+id/imageButton1"
android:layout_alignRight="#+id/imageButton1"
android:background="#33000000"
android:gravity="center_horizontal"
android:text="Image Text"
android:textSize="8sp" />

Android RelativeLayout Design issues

I designed one layout which have total 4 RelativeLayout one is outer cover and 3 are child of it. When I put White color in the outer layout than no spaces are left but when I put 9patch image as drawable image than little default padding/margin are left. Is there any properly which solve the padding/margin issue? I have tried margin negative but it will hide bit layout I think it is not proper solution, here is my layout
when I put white color as background than my layout look like
Here is the following code of my layout
<RelativeLayout
android:id="#+id/DetailSection1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/HeaderLayout"
android:layout_toLeftOf="#+id/DetailSection2"
>
<TextView
android:id="#+id/lblRestaurantName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/DetailSection1"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:textColor="#color/heding_font"
android:textSize="#dimen/headingFont"
android:text="Restaurant Name" />
<ImageView
android:id="#+id/imgpin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/lblRestaurantName"
android:layout_margin="5dp"
android:src="#drawable/pin" />
<TextView
android:id="#+id/lblAddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/lblRestaurantName"
android:layout_marginTop="5dp"
android:layout_toRightOf="#+id/imgpin"
android:text="Address"
android:textColor="#color/restaurant_list_font"
android:textSize="#dimen/lableNormalFont"
/>
<ImageView
android:id="#+id/imgphone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/lblAddress"
android:layout_margin="5dp"
android:src="#drawable/phn" />
<TextView
android:id="#+id/lblMobile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/lblAddress"
android:layout_marginTop="5dp"
android:layout_toRightOf="#+id/imgphone"
android:text="Mobile"
android:textColor="#color/restaurant_list_font"
android:textSize="#dimen/lableNormalFont"
/>
<ImageView
android:id="#+id/imgstar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/lblMobile"
android:layout_margin="5dp"
android:src="#drawable/star" />
<TextView
android:id="#+id/lblStar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/lblMobile"
android:layout_marginTop="5dp"
android:layout_toRightOf="#+id/imgstar"
android:text="Star"
android:textColor="#color/restaurant_list_font"
android:textSize="#dimen/lableNormalFont"
/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/DetailSection2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignBottom="#+id/DetailSection1"
android:layout_toLeftOf="#+id/DetailSection3"
android:layout_toRightOf="#+id/lblStar" >
<ImageView
android:id="#+id/imgmore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:src="#drawable/read_more" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/DetailSection3"
android:layout_width="95dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/HeaderLayout"
android:layout_gravity="center"
android:layout_centerInParent="true"
android:background="#drawable/photo_cover" >
<ImageView
android:id="#+id/imgRestaurant"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/lblMobile"
android:layout_margin="5dp"
android:src="#drawable/rihanna" />
</RelativeLayout>
</RelativeLayout>

From the 9-patch drawable image you posted:
The bottom line which indicates the horizontal data population on the view wasn't drawn from the starting point of left.
I am not sure about it. And I know I wasn't clear in explaining the above line.
Just check this:
Consider the below 9-patch is used as a background for a TextView. If you put some text in it, it will start from the area where the bottom line is drawn. Which mean it will start from the left and go all the way to right.
If you use the following 9-patch as a background and try the same thing which you did above. Will result in Text not written from the left. It leaves a bit padding.
That is the reason why you get such result. Of course I am 100% sure about it.
So, just to find out if this works. Try changing the bottom line to fill complete image.

I think you better apply the background color for which layout you want exactly.And one more keep the code so that we can understand easily what is your issue.