Android how to create simple custom UI elements
Use a TextView. The light bulb can be a left compound drawable. Set the background to a rounded rectangle shape drawable. This can all be specified in XML. See TextView.
This can also be accomplished with a LayerList drawable if text is not wanted. (The TextView solution also works without text - just set the text to "" or null.)
<layer-list>
<item>
<shape android:shape="rectangle">
<corners android:radius="5dp" />
<solid android:color="#FF9800" />
</shape>
</item>
<item
android:drawable="@drawable/ic_baseline_lightbulb_24"
android:width="48dp"
android:height="48dp"
android:gravity="left|center_vertical" />
</layer-list>
The layer list is set as a background to a simple View.
<View
android:layout_width="250dp"
android:layout_height="56dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:background="@drawable/light_bulb_layer_list" />
To create the View in code:
View view = new View(context);
view.setLayoutParams(new ViewGroup.LayoutParams(width, height));
Drawable dr = ContextCompat.getDrawable(context,R.drawable.light_bulb_layer_list)
view.setBackground(dr);
Sure thing.
In this case a simple xml file like so would suffice. Let's name it something.xml
inside the layout
folder.
<LinearLayout ...>
<ImageView ...>
</LinearLayout>
In another layout xml file you may just:
<ConstraintLayout ...>
<include android:id="@+id/something"" layout="@layout/something" android:layout_width="70dp">
</ConstraintLayout>
See Reusing layouts
If you'd like to get a children you can always get them by using findViewById
on your Activity or Fragment. If you're using Databinding or Viewbinding it just gets better: They'll appear as fields in the XBinding
class that was generated out of the XML file
Hi VanessaF, going a little bit further with the clarifications you asked in the comments:
<include />
The <include />
tag is a special XML tag that we can use in our Android XML layout files to indicate that where we placed the <include/>
we'd like it to be replaced by some other XML determined via the layout
attribute inside the <include />
tag.
Here's an example:
Considering layout/example.xml
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello!"/>
And considering layout/parent.xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button .../>
<include layout="@layout/example"/>
<ImageView android:drawable="@drawable/ic_send"/>
</LinearLayout>
Whenever I use R.layout.parent
somewhere (for example in setContent
from the Activity
the view that would get generated would be as follows:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button .../>
<!-- PLEASE NOTICE THAT <include/> IS GONE -->
<!-- AND HAS BEEN REPLACED WITH THE CONTENTS the specified layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello!"/>
<ImageView android:drawable="@drawable/ic_send"/>
</LinearLayout>
Effectively re-using the layout without writing a full-blown custom view.
Notice: All attributes you specify inside the <include/>
tag will effectively override the others specified inside the layout file. Let me illustrate this using an example:
Consider again layout/example.xml
. Notice that this time the TextView
will shrink to the size of the text both in height and width.
<TextView
android:text="Hello!"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
And consider the parent: layout/parent.xml
. Notice that I am setting the attributes android:layout_width
and android:layout_height
.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include
layout="@layout/example"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
In this case, when Android replaces <include/>
for the contents of @layout/example
it will also set android:layout_width="match_parent"
and android:layout_height="match_parent"
because they were specified on the <include/>
tag effectively ignoring the original attributes set inside layout/example.xml
(which were set to "wrap_content")