Develop Reference

Custom expandable card with child views

I am new to Android development and feel like this is a really trivial problem, but I cannot word it well enough to find a solution online, so I might as well ask the question here.
My goal is to create a reusable component that is essentially an expandable card like the one described here: https://material.io/design/components/cards.html#behavior.
To do it, I created a custom view that extends a CardView:
public class ExpandableCardView extends CardView {
public ExpandableCardView(Context context) {
super(context);
}
public ExpandableCardView(Context context, AttributeSet attrs) {
super(context, attrs);
// get custom attributes
TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.ExpandableCardView, 0, 0);
String heading = array.getString(R.styleable.ExpandableCardView_heading);
array.recycle();
// inflate the layout
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
inflater.inflate(R.layout.expandable_card_view, this, true);
// set values
TextView headingTextView = findViewById(R.id.card_heading);
headingTextView.setText(heading.toUpperCase());
// set collapse/expand click listener
ImageView collapseExpandButton = findViewById(R.id.collapse_expand_card_button);
collapseExpandButton.setOnClickListener((View v) -> toggleCardBodyVisibility());
}
private void toggleCardBodyVisibility() {
LinearLayout description = findViewById(R.id.card_body);
ImageView imageButton = findViewById(R.id.collapse_expand_card_button);
if (description.getVisibility() == View.GONE) {
description.setVisibility(View.VISIBLE);
imageButton.setImageResource(R.drawable.ic_arrow_up);
} else {
description.setVisibility(View.GONE);
imageButton.setImageResource(R.drawable.ic_arrow_down);
}
}
}
And the layout:
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/expandable_card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="16dp"
android:animateLayoutChanges="true"
app:cardCornerRadius="4dp">
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/card_header"
android:padding="12dp"
android:layout_width="match_parent"
android:layout_height="48dp"
android:orientation="horizontal" >
<TextView
android:id="#+id/card_heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textColor="#color/colorPrimary"
android:layout_alignParentLeft="true"
android:text="HEADING"/>
<ImageView
android:id="#+id/collapse_expand_card_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
app:srcCompat="#drawable/ic_arrow_down"/>
</RelativeLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/card_body"
android:padding="12dp"
android:layout_marginTop="28dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:visibility="gone" >
</LinearLayout>
</androidx.cardview.widget.CardView>
Ultimately I want to be able to use it like so in my activities, usually multiple instances per activity:
<xx.xyz.yy.customviews.ExpandableCardView
android:id="#+id/card_xyz"
android:layout_width="match_parent"
android:layout_height="match_parent"
custom_xxx:heading="SOME HEADING" >
<SomeView></SomeView>
</xx.xyz.yy.customviews.ExpandableCardView>
Where SomeView is any text, image, layout or another custom view altogether, typically with data bound from the activity.
How do I get it to render SomeView inside the card body? I want to take whatever child structure is defined within the custom view and show it in the card body when it is expanded. Hope I made it easy to understand.

I think that a better approach would be to define the layout that will be inserted into the CardView ("SomeView") in a separate file and reference it with a custom attribute like this:
<xx.xyz.yy.customviews.ExpandableCardView
android:id="#+id/card_xyz"
android:layout_width="match_parent"
android:layout_height="match_parent"
custom_xxx:heading="SOME HEADING"
custom_xxx:expandedView="#layout/some_view"/>
I'll explain my rationale at the end, but let's look at an answer to your question as stated.
What you are probably seeing with your code is SomeView and expandable_card_view appearing all at once in the layout. This is because SomeView is implicitly inflated with the CardView and then expandable_card_view is added through an explicit inflation. Since working with layout XML files directly is difficult, we will let the implicit inflation occur such that the custom CardView just contains SomeView.
We will then remove SomeView from the layout, stash it, and insert expandable_card_view in its place. Once this is done, SomeView will be reinserted into the LinearLayout with the id card_body. All this has to be done after the completion of the initial layout. To get control after the initial layout is complete, we will use ViewTreeObserver.OnGlobalLayoutListener. Here is the updated code. (I have removed a few things to simplify the example.)
ExpandableCardView
public class ExpandableCardView extends CardView {
public ExpandableCardView(Context context) {
super(context);
}
public ExpandableCardView(Context context, AttributeSet attrs) {
super(context, attrs);
// Get control after layout is complete.
getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
// Remove listener so it won't be called again
getViewTreeObserver().removeOnGlobalLayoutListener(this);
// Get the view we want to insert into the LinearLayut called "card_body" and
// remove it from the custom CardView.
View childView = getChildAt(0);
removeAllViews();
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
inflater.inflate(R.layout.expandable_card_view, ExpandableCardView.this, true);
// Insert the view into the LinearLayout.
((LinearLayout) findViewById(R.id.card_body)).addView(childView);
// And the rest of the stuff...
TextView headingTextView = findViewById(R.id.card_heading);
headingTextView.setText("THE HEADING");
// set collapse/expand click listener
ImageView collapseExpandButton = findViewById(R.id.collapse_expand_card_button);
collapseExpandButton.setOnClickListener((View v) -> toggleCardBodyVisibility());
}
});
}
private void toggleCardBodyVisibility() {
LinearLayout description = findViewById(R.id.card_body);
ImageView imageButton = findViewById(R.id.collapse_expand_card_button);
if (description.getVisibility() == View.GONE) {
description.setVisibility(View.VISIBLE);
imageButton.setImageResource(R.drawable.ic_arrow_up);
} else {
description.setVisibility(View.GONE);
imageButton.setImageResource(R.drawable.ic_arrow_down);
}
}
}
expandable_card_view.java
The CardView tag is changed to merge to avoid a CardView directly nested within a CardView.
<merge
android:id="#+id/expandable_card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="16dp"
android:animateLayoutChanges="true"
app:cardCornerRadius="4dp">
<RelativeLayout
android:id="#+id/card_header"
android:padding="12dp"
android:layout_width="match_parent"
android:layout_height="48dp"
android:orientation="horizontal" >
<TextView
android:id="#+id/card_heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textColor="#color/colorPrimary"
android:layout_alignParentLeft="true"
android:text="HEADING"/>
<ImageView
android:id="#+id/collapse_expand_card_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
app:srcCompat="#drawable/ic_arrow_down"/>
</RelativeLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/card_body"
android:padding="12dp"
android:layout_marginTop="28dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:visibility="gone" >
</LinearLayout>
</merge>
activity_main.xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.example.customcardview.ExpandableCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_android" />
<TextView
android:id="#+id/childView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Say my name."
android:textSize="12sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/imageView" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.example.customcardview.ExpandableCardView>
</LinearLayout>
So, why do I suggest that you use a custom attribute to include SomeView in the layout as I identified at the beginning? In the way outlined above, SomeView will always be inflated and there is some effort to switch the layout around although SomeView may never be shown. This would be expensive if you have a lot of custom CardViews in a RecyclerView for instance. By using a custom attribute to reference an external layout, you would only need to inflate SomeView when it is being shown and the code would be a lot simpler and easier to understand. Just my two cents and it may not really matter depending upon how you intend to use the custom view.

Android: Inflater not working inside custom view. How to write something to text view?

I have created a custom view. Here is the layout of my custom view.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.lenze.android.poc_arcdraw.ArcView
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"/>
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="172dp"
android:id="#+id/textView"/>
</RelativeLayout>
The name of above file is sample_arc_view.xml. My view file is
public class ArcView extends RelativeLayout {
private TextView mTextView;
public ArcView(Context context, AttributeSet attrs) {
super(context, attrs);
readParametersFromAttributeSet(context.obtainStyledAttributes(attrs, R.styleable.ArcView));
init(context);
}
private void init(Context context) {
View view = LayoutInflater.from(getContext()).inflate(R.layout.sample_arc_view,this); // stuck here
mTextView = (TextView) view.findViewById(R.id.textView); // this line is never executed
}
}
Now, whenever I am executing this code it always gets stuck in inflater. I am not able to reach to next line and program crashes. Logs are not helpful as there is no error or exception. Here is the link for logs.
I want to write some dynamic text in the text view.

You entering an endless recursion of inflates. Once you try to inflate
sample_arc_view.xml, android inflater will call constructor of you ArcView.
Wich will try to inflate same layout in endless recursion call.

Thanks for answers. Nikolay's answer helped me in finding error. It was stackoverflow indeed but was never thrown. I am not sure why. I modified my code a little.
New XML is like
<RelativeLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"/>
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="172dp"
android:id="#+id/textView"/>
I removed the line : com.lenze.android.poc_arcdraw.ArcView so recursive calls to ArcView constructor are removed.
I also modified code for inflator to:
LayoutInflater inflater= (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View mCustomView = inflater.inflate(R.layout.sample_arc_view, this,true);

Set the text in horizontal time line

I am trying to implement horizontal timeline. SO I have written the code to design the horizontal line but I am able to figure out how I will write text on the above and below of the line.
One more thing I don't want to use any other library.
I have try to solve it through Custom view as people here have been suggested but got struck.
timeline_segment.xml
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:weightSum="1"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:padding="3dp"
android:textAlignment="textEnd"
android:text="Top"
android:id="#+id/top_data"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_gravity="center"
android:layout_weight="0.5"
android:background="#color/alphabet_a"
android:layout_width="wrap_content"
android:layout_height="2dp" />
<ImageView
android:background="#drawable/circle1"
android:layout_width="15dp"
android:layout_height="15dp" />
<TextView
android:layout_weight="0.5"
android:layout_gravity="center"
android:background="#color/alphabet_a"
android:layout_width="wrap_content"
android:layout_height="2dp" />
</LinearLayout>
<TextView
android:padding="3dp"
android:gravity="center"
android:text="bottom"
android:id="#+id/bottom_data"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</merge>
timeline_segment.java
public class timeline_segement extends LinearLayout {
View rootView;
TextView upperText;
TextView startLine;
TextView endLine;
ImageView circleView;
TextView bottomText;
public timeline_segement(Context context) {
super(context);
init(context);
}
public timeline_segement(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public timeline_segement(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
private void init(Context context) {
rootView=inflate(context, R.layout.timeline_segment, this );
upperText=(TextView) rootView.findViewById(R.id.top_data);
bottomText=(TextView) rootView.findViewById(R.id.bottom_data);
upperText.setText("Top");
bottomText.setText("Bottom");
}
public void setUpperText(String string)
{
upperText.setText(string);
}
public void setBottomText(String string)
{
bottomText.setText(string);
}
}

Decided to answer because the comment box is kinda limiting. This is my comment:
You'll need a custom view to achieve this. You can either composite ready-made views or go full custom
If you choose to composite views, then you start by breaking down that image level by level. At the highest level, its a horizontal layout with 'TimelineCell's (or whatever you choose to call it).
A TimelineCell will basically be a vertical LinearLayout with a right aligned TextView, a View that draws the line and another center aligned TextView.
You can then create these programmatically and add them to a parent horizontal LinearLayout.
If you however choose to go full custom, Youll have to handle measuring, layouting and drawing of all the components including the text above and below the line.
Take a look at this link for a good introduction to custom views on android

RelativeLayout, match parent contains unwanted padding right?

I have a custom header bar (something like actionbar).
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/bg_header">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ibSlider"
android:src="#drawable/ic_drawer"
android:background="#color/transparent"
android:layout_marginLeft="#dimen/side_margin"
android:contentDescription="#string/general_content_description"
android:layout_centerVertical="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="#string/header_branding"
android:id="#+id/tvAppName"
android:layout_toRightOf="#+id/ibSlider"
android:gravity="center_vertical"
android:layout_marginLeft="#dimen/side_margin"
style="#style/branding_orange"/>
<ProgressBar
android:layout_width="20dp"
android:layout_height="20dp"
android:id="#+id/pbLoading"
android:layout_alignParentRight="true"
android:indeterminate="true"
android:layout_marginRight="#dimen/side_margin"
android:layout_centerVertical="true"/>
</RelativeLayout>
When I'm adding this custom view in my activity, there is padding right that I have no idea comes from where! I have added green background to the view in order to find I'm talking about where.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<view
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/headerBar"
android:background="#color/green"
class="com.kamalan.widget.HeaderBar"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/headerBar"/>
</RelativeLayout>
And this is the code of my HeaderBar.
public class HeaderBar extends RelativeLayout {
private static final String TAG = "HeaderBar";
private Context mContext;
private ProgressBar progressBar;
private ImageButton ibMenuSlider;
public HeaderBar(Context context) {
super(context);
this.mContext = context;
init();
}
public HeaderBar(Context context, AttributeSet attrs) {
super(context, attrs);
this.mContext = context;
init();
}
public HeaderBar(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
this.mContext = context;
init();
}
private void init() {
LayoutInflater mInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
RelativeLayout view = (RelativeLayout) mInflater.inflate(R.layout.widget_headerbar, null);
addView(view);
progressBar = (ProgressBar) view.findViewById(R.id.pbLoading);
ibMenuSlider = (ImageButton) view.findViewById(R.id.ibSlider);
}
...
}
Image 1 shows preview of class header (first xml code) and second image displays when it has been added to my activity. I have no idea that green padding comes from where! any idea would be appreciated. thanks.

Problem was the image that I was using as background of Header. Have no Idea why it works on first image but doesn't work on second one. Maybe activity is messing or Theme has bug, as Bob said in comment.
Anyways, I fixed the problem by not using image :)
For other's reference, I changed xml of header as below and I could fix the problem in this way.
<?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="#dimen/header_bar_height"
android:background="#color/gray">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ibSlider"
android:src="#drawable/ic_drawer"
android:background="#color/transparent"
android:layout_marginLeft="#dimen/side_margin"
android:contentDescription="#string/general_content_description"
android:layout_centerVertical="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="#string/header_branding"
android:id="#+id/tvAppName"
android:layout_toRightOf="#+id/ibSlider"
android:gravity="center_vertical"
android:layout_marginLeft="#dimen/side_margin"
style="#style/branding_orange"/>
<ProgressBar
android:layout_width="20dp"
android:layout_height="20dp"
android:id="#+id/pbLoading"
android:layout_alignParentRight="true"
android:indeterminate="true"
android:layout_marginRight="#dimen/side_margin"
android:layout_centerVertical="true"/>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#color/header_divider"
android:layout_alignParentBottom="true"/>
</RelativeLayout>

I also face same problem but i get success when i try customize Actionbar.I am unable to resolve your problem due to absence of drawable and string resource so please provide zip of this one so that i can see directly .....

How to populate a compound viewgroup extending from LinearLayout?

I am trying to create a compound viewgroup after inflating the group from an XML file.
The viewgroup is composed as: A LinearLayout Root, 2 child LinearLayouts. I am able to see the layout correctly in the layout editor; however, when I attempt to add a view (say a button) from the editor, the view does not show up and the application immediately force closes. I was told i may need to Override the onLayout method to correctly draw the view components but I'm am fairly confused.
My Class:
public class FocusBox extends LinearLayout {
private LinearLayout rootLayout,
contentLayout,
topLayout;
public FocusBox(Context context)
{
super(context, null);
}
public FocusBox(Context context, AttributeSet attrs) {
super(context, attrs);
LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
inflater.inflate(R.layout.focus_box, this);
rootLayout = (LinearLayout)findViewById(R.id.focusBoxParent);
contentLayout = (LinearLayout)findViewById(R.id.focusBottom);
topLayout = (LinearLayout)findViewById(R.id.focusTop);
}
}
And the xml:
<?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:padding="4dp"
android:id="#+id/focusBoxParent"
android:orientation="vertical">
<LinearLayout
android:background="#drawable/gradients"
android:layout_weight=".1"
android:gravity="center"
android:id="#+id/focusTop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:text="TextView"
android:id="#+id/focusTitle"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_width="wrap_content"/>
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_weight=".9"
android:id="#+id/focusBottom"
android:background="#drawable/gradient2"
android:orientation="horizontal">
</LinearLayout>
</LinearLayout>

Generally, if you inflate a layout from a valid XML you shouldn't get an error. You should do a clean build and re-deploy the app again.
Also check if you're using the correct class in the import statement in other classes (you could be using a FocusBox from some 3rd-party library instead of the one you made)