Checkbox is over text, how to add padding? - java

I have a listview with checkboxes:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="wrap_content">
<CheckBox android:layout_width="fill_parent"
android:layout_height="wrap_content" android:id="#+id/nomeAPP" style="?listItem" />
</LinearLayout>
But the problem is: checkboxes is over text (text is to much for the left)
How can I correct that?

How about putting android:paddingLeft="xdp" where is x is the number of dp that you will need to put in order to you text?
Putting padding will only shift text but not your "Tick-Button".
You may consider android:gravity property too if putting a hard-coded dp doesn't suit your need.

If your text is in the same layout of the checkbox, do it like this:
<CheckBox
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/nomeAPP"
style="?listItem"
android:layout_marginLeft="10dp" />
But if its not, do it like this:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp">
<CheckBox
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/nomeAPP"
style="?listItem" />
</LinearLayout>
Obs: I've put margin and padding with left only for the example.
Let me know if you have more doubts. Thanks.

Here’s what I used for items in a list, each of which has text and a radio button. Note the layout_weight and layout_gravity settings:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:id="#+id/select_file_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:textSize="16sp"
android:layout_weight="100"
/>
<RadioButton
android:id="#+id/file_item_checked"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:textSize="16sp"
android:layout_gravity="right"
/>
</LinearLayout>

There are two ways to resolve this issue_
1 Building your own custom CheckBox Class by extending android.widget.CheckBox class. The Complete Custom code is as below_
public class CustomCheckBox extends CheckBox {
public CustomCheckBox(Context context) {
super(context);
}
public CustomCheckBox(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public CustomCheckBox(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
public int getCompoundPaddingLeft() {
final float scale = this.getResources().getDisplayMetrics().density;
/*add padding you needed so the text is not on top of the
* CheckBox.
*/
return (super.getCompoundPaddingLeft() + (int) (10.0f * scale + 0.5f));
}
}
2 Set Padding in Your Activity_
final float scale =this.getResources().getDisplayMetrics().density;
checkBox.setPadding(checkBox.getPaddingLeft() + (int)(10.0f * scale + 0.5f),
checkBox.getPaddingTop(),
checkBox.getPaddingRight(),
checkBox.getPaddingBottom());
I hope this will help all who have this issue... :)

Related

Aligning the view to center

I want to place the two text horizontally at the center. It is very easy to put it directly in a layout.
But what i am trying to achieve is :
Testapplayout.xml: This is set as content view of the activity.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<com.example.testapp.Customlayout
android:id="#+id/custom"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="2dp"
android:layout_marginTop="2dp">
</com.example.testapp.Customlayout>
</LinearLayout>
class Customlayout
public class Customlayout extends LinearLayout {
public Customlayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public Customlayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public Customlayout(Context context) {
this(context, null, 0);
}
}
Now on the Testapplayout, customlayout, I am trying to inflate the layout to show the texts at the center:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center|bottom"
android:orientation="horizontal" >
<TextView
android:id="#+id/status_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text1"
android:layout_gravity="center"
/>
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/status_text"
/>
</LinearLayout>
This still comes at the
try
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relative_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.example.testapp.Customlayout
android:id="#+id/custom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
</com.example.testapp.Customlayout>
</RelativeLayout>

How can I bypass parent's attributeset to child in android

I am creating compond view with imageView + TextView as ImageTextView as follow in xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="match_parent"
>
<Button android:id="#+id/btnView" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<TextView android:id="#+id/txtView" android:layout_width="wrap_content" android:layout_height="wrap_content" />
</LinearLayout>
in usage, I want to use ImageTextView as follow:
<com.mypkg.MyClass.ImageTextView
android:layout_width="wrap_content"
android:layout_height="50dp"
android:text="text for textView" //used for textview
android:background="#drawable/background.png" //used for image view
/>
in imageTextViewConstructor, I want to bypass textSize, text, textColor and all textView's attributes to child txtView without layoutParams as following logic, how can I filter AttributeSet in java code.
public ImageTextView(Context context, AttributeSet attrs) {
super(context, attrs);
//------------------------------
// AttributeSet filteredAttrs= filterAttributeSet(attrs);
//I want to remove layoutparams and background from parent attributeset
//------------------------------
TextView mtxtView=(TextView)findViewByid(R.id.txtView);
mtxtView=new TextView(this,filteredAttrs);
}
TextView by itself can contain a Drawable on top, bottom, left (start) and/or right (end).
<TextView
...
android:drawablePadding="4dp"
android:drawableLeft="#drawable/my_drawable"/>
More on this topic here: http://antonioleiva.com/textview_power_drawables/

Custom Views, to insert them dynamically to Layout in Java

I can't stress that often enough, I am new to Android and Java in general :-)
And these xml layouts are giving me headaches.
The code what you see consist of two ImageViews and two TextViews inside a RelativeLayout, together they form a layout which for me works as a "custom button". When I copy and paste it inside my layout it works almost the way I want.
How can I use this part of xml-layout dynamically in my code whenever I need a button like that and still be able to change certain properties, like the text inside the textviews?
I hope you understand what I mean, my first language is not english.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/myImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginLeft="10dp"
android:src="#drawable/box" />
<TextView
android:id="#+id/myImageViewText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/myImageView"
android:layout_alignLeft="#+id/myImageView"
android:layout_alignRight="#+id/myImageView"
android:layout_alignTop="#+id/myImageView"
android:layout_margin="1dp"
android:gravity="center"
android:text="S-"
android:textColor="#000000"
android:textStyle="bold" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/myImageViewText"
android:layout_centerHorizontal="true"
android:layout_marginBottom="25dp"
android:text="your turn!"
android:textAppearance="?android:attr/textAppearanceSmall" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/textView1"
android:layout_alignParentTop="true"
android:layout_marginBottom="15dp"
android:layout_marginTop="-10dp"
android:cropToPadding="false"
android:src="#drawable/icon" />
</RelativeLayout>
Ok to start extend your own view like this one:
I do have a Button made with an ImageView and a TextView in a LinearLayout designed in xml:
XML
<merge xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/ivImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:adjustViewBounds="true"
android:padding="3dp"
android:scaleType="fitStart" />
<TextView
android:id="#+id/tvText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:layout_marginLeft="10dp"
android:ellipsize="end"
android:singleLine="true"
android:textColor="#android:color/white" />
</merge>
ViewObject called
ViewMenuButton
public class ViewMenuButton extends View{
private TextView tvText;
private ImageView ivImage;
public ViewMenuButton(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
public ViewMenuButton(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public ViewMenuButton(Context context) {
super(context);
init();
}
private void init() {
LayoutInflater inflater = (LayoutInflater)getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
//here you can inflate a own XML for that View
inflater.inflate(R.layout.view_menubutton, this, true);
this.tvText= (TextView)this.findViewById(R.id.tvText);
this.ivImage = (ImageView)this.findViewById(R.id.ivImage);
}
public void setText(String text){
if(this.tvText != null){
tvText.setText(text);
}
}
//... and so on
}
Whenever you want to use it in your xml make sure to give the View the complete package like this:
Usage XML
<com.your.package.views.ViewMenuButton
android:id="#+id/menu_bt_local"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginTop="15dp"
android:layout_weight="1"
android:background="#drawable/action_button"
android:textSize="#dimen/text_cell" >
If you want to use it in a code just make it like this:
Usage JAVA
LinearLayout rootView =
(LinearLayout) findViewById(R.id.mainLayout); //Or sth like this
ViewMenuButton vmb = new ViewMenuButton(this);
rootView.add(vmb);
//or if you already have it in XML
ViewMenuButton vmb = (ViewMenuButton) findViewById(R.id.myVmbtID);
You can even go more in detail defining your own attributes to use in XML, like setting source of the Image, changing Text, changing TextColor etc pp Tutoiral
Create your custom View subclass. Inflate your layout in it's constructor, find necessary views there and create setters/getters of necessary properties. Then each time you need this custom button you'll be able to create it through code or xml using this subclass. If you need to be able to change some properties from xml too you may want to declare styleable attributes for your custom view. I think you can find lots of tutorials about how to create custom views.
Here's the common tutorial. Here you can read about custom attributes. And finally here is the best example of what I mentioned above.
You can inflate your layout and add it to another layout
RelativeLayout layout = new RelativeLayout(this);
View childButton = getLayoutInflater().inflate(R.layout.child_button, null);
layout.addView(childButton);
Now you can find the child views in the button layout as
TextView textViewInnerChild = (TextView)childButton.findViewById(R.Id. textInnerView):
Then you can change the value or properties of the inner child views
textViewInnerChild.set text("your text")

Two listviews in a scrollview, ignores wrap_content for some reason

I've got a scenario where I have two listviews, one above the other, I'm trying to make it so that it scrolls the top list till it gets to the bottom of that list, then goes on to the second list.
Heres the XML I have, as you can see they're both set to wrap content. It does scroll, but only shows 1 option from each listview instead of everything.
<ScrollView
android:id="#+id/scrllArea"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/bottombar" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/topbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/tvTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="{0} Issues"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ListView
android:id="#+id/lvIssues"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawSelectorOnTop="false" >
</ListView>
</LinearLayout>
<LinearLayout
android:id="#+id/topbar2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/tvTitle2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="{0} Issues"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ListView
android:id="#+id/lvNewIssues"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:drawSelectorOnTop="false" >
</ListView>
</LinearLayout>
</LinearLayout>
</ScrollView>
It is advisable that you do not put one scrolling component in another. There is, however, a work around if you need the ListViews in this layout. They will not scroll. They will be expanded to full height such that all the items are visible.
Create a new class inside a new package called UI (or any other name of your choice) and paste the following:
import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.widget.ListView;
public class ExpandedListView extends ListView
{
private android.view.ViewGroup.LayoutParams params;
private int oldCount = 0;
public ExpandedListView(Context context, AttributeSet attrs)
{
super(context, attrs);
}
#Override
protected void onDraw(Canvas canvas)
{
if (getCount() != oldCount)
{
int height = getChildAt(0).getHeight() + 1 ;
oldCount = getCount();
params = getLayoutParams();
params.height = getCount() * height;
setLayoutParams(params);
}
super.onDraw(canvas);
}
}
Now define your ListViews as follows:
<com.example.UI.ExpandedListView <!--or whatever your package path name is -->
android:id="#+id/lvIssues"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:drawSelectorOnTop="false" >
</ListView>
<com.example.UI.ExpandedListView
android:id="#+id/lvNewIssues"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:drawSelectorOnTop="false" >
</ListView>
Note that the height attribute is set to fill_parent. It will not visually fill it's parent component due to the limitation we enforced in the onDraw() method of the ExpandedListView.
I repeat again, however; if you can re-factor to some other layouts, please do so because the layout you provided is not advisable.
Good luck.

make a custom view from xml

I want to do a custom view coming from an XML.
Here's my XML :
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/movieTitle"
android:text="#string/movietitle"
android:textSize="35dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
/>
<com.galite.headliner.views.LoaderImageView
android:id="#+id/moviePoster"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/movieTitle"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:contentDescription="#string/poster"
/>
<TextView
android:id="#+id/movieDescription"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/description"
android:layout_below="#id/moviePoster"
android:gravity="center"
/>
</RelativeLayout>
And i want to inflate to a custom view because i need to use methods like onClick and everything.
Here's my constructor :
public MyView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
this.context = context;
initializeView();
}
public void initializeView(){
inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
v = inflater.inflate(R.layout.movie, null);
}
How can i make MyView equal to v ?
You'll have to attach the inflated view v to MyView like this:
v = inflater.inflate(R.layout.movie, this, true);
If you want that exact layout then make MyView to extend RelativeLayout and modify the xml layout like this:
<merge xmlns:android="http://schemas.android.com/apk/res/android" >
<TextView
android:id="#+id/movieTitle"
android:text="#string/movietitle"
android:textSize="35dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
/>
<com.galite.headliner.views.LoaderImageView
android:id="#+id/moviePoster"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/movieTitle"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:contentDescription="#string/poster"
/>
<TextView
android:id="#+id/movieDescription"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/description"
android:layout_below="#id/moviePoster"
android:gravity="center"
/>
</merge>

Categories