CODEWITHSUNDEEP
javaandroidandroid-layout
Petros Mastrantonas
Petros Mastrantonas

Reputation: 1046

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>

Upvotes: 0

Views: 114

Answers (3)

A.S.
A.S.

Reputation: 4574

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

Upvotes: 3

Libin
Libin

Reputation: 17085

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")

Upvotes: 0

Lingviston
Lingviston

Reputation: 5671

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.

Upvotes: 0

Related Questions