Develop Reference

Android how to create simple custom UI elements

I would like to create simple custom UI elements in Android like the ones from the screenshot:
The light bulb should always have the same size but the rectangle should vary in the width. One option of doing this is to use Canvas elements. But I would like to ask whether there is also an easier approach for doing this. Is it possible to maybe only do this by using XML files? I would like to use these UI elements then in the LayoutEditor like e.g. a TextView where I can adjust the widht and height either in the XML layout file or programmatically.
Any idea how I can do that in an easy way?
Update: I tried the suggested approach from Cheticamp and I have the following code inside my Fragment:
public class Test extends Fragment implements Runnable {
/*
Game variables
*/
public static final int DELAY_MILLIS = 100;
public static final int TIME_OF_A_LEVEL_IN_SECONDS = 90;
private int currentTimeLeftInTheLevel_MILLIS;
private Handler handler = new Handler();
private FragmentGameBinding binding;
private boolean viewHasBeenCreated = false;
public Test() {
// Required empty public constructor
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
binding = FragmentGameBinding.inflate(inflater, container, false);
getActivity().setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
container.getContext();
viewHasBeenCreated = true;
startRound();
return binding.getRoot();
}
public void startRound () {
currentTimeLeftInTheLevel_MILLIS =TIME_OF_A_LEVEL_IN_SECONDS * 1000;
updateScreen();
handler.postDelayed(this, 1000);
}
private void updateScreen() {
binding.textViewTimeLeftValue.setText("" + currentTimeLeftInTheLevel_MILLIS/1000);
/*
IMPORTANT PART: This should create a simple custom UI element but it creates an error
*/
View view = new View(getActivity());
view.setLayoutParams(new ViewGroup.LayoutParams(100, 100));
Drawable dr = ContextCompat.getDrawable(getActivity(),R.drawable.light_bulb_layer_list);
view.setBackground(dr);
ConstraintLayout constraintLayout = binding.constraintLayout;
ConstraintSet constraintSet = new ConstraintSet();
constraintSet.clone(constraintLayout);
constraintSet.connect(view.getId(),ConstraintSet.BOTTOM, ConstraintSet.PARENT_ID,ConstraintSet.BOTTOM,0);
constraintSet.connect(view.getId(),ConstraintSet.TOP,ConstraintSet.PARENT_ID ,ConstraintSet.TOP,0);
constraintSet.connect(view.getId(),ConstraintSet.LEFT,ConstraintSet.PARENT_ID ,ConstraintSet.LEFT,0);
constraintSet.connect(view.getId(),ConstraintSet.RIGHT,ConstraintSet.PARENT_ID ,ConstraintSet.RIGHT,0);
constraintSet.setHorizontalBias(view.getId(), 0.16f);
constraintSet.setVerticalBias(view.getId(), 0.26f);
constraintSet.applyTo(constraintLayout);
}
private void countDownTime(){
currentTimeLeftInTheLevel_MILLIS = currentTimeLeftInTheLevel_MILLIS -DELAY_MILLIS;
updateScreen();
}
#Override
public void run() {
if(viewHasBeenCreated) {
countDownTime();
}
}
}
Unfortunately, this code leads to a "java.lang.NullPointerException: Attempt to invoke virtual method 'boolean android.content.Context.isUiContext()' on a null object reference". It is thrown by the line View view = new View(getActivity());. Here is the complete error message:
E/AndroidRuntime: FATAL EXCEPTION: main
Process: com.example.game, PID: 12176
java.lang.NullPointerException: Attempt to invoke virtual method 'boolean android.content.Context.isUiContext()' on a null object reference
at android.view.ViewConfiguration.get(ViewConfiguration.java:502)
at android.view.View.<init>(View.java:5317)
at com.example.game.Test.updateScreen(Test.java:72)
at com.example.game.Test.countDownTime(Test.java:91)
at com.example.game.Test.run(Test.java:97)
at android.os.Handler.handleCallback(Handler.java:938)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loop(Looper.java:223)
at android.app.ActivityThread.main(ActivityThread.java:7656)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:592)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:947)
Any idea what the problem is? Without the custom UI element the Fragment works fine.

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

I suggest reading Custom View Components from the official Android documentation. In fact, you should become very familiar with this documentation for everything you do with Android apps.

How to resolve method 'setText(java.lang.String)

I know this has been posted countless times and im sorry but I have tried to follow the solutions but can't seem to fix it.
Basically I'm trying to read records from Android SQLite Database, but I keep getting the error at setText.
public class Landing extends AppCompatActivity{
public Button buttonProducts;
public void countRecords(){
int recordCount = new TableControllerAppointments(this).count();
ScrollView textViewRecordCount = findViewById(R.id.textViewRecordCount);
textViewRecordCount.setText(recordCount + " records found.");
}
I'm following a tutorial and I added this code to my XML file,
<ScrollView
android:id="#+id/textViewRecordCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:padding="1dp"
android:text="#string/textViewRecordCount"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.182"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/buttonCreateAppointment"
app:layout_constraintVertical_bias="0.146" >
<LinearLayout
android:id="#+id/linearLayoutRecords"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
</LinearLayout>
</ScrollView>
Sorry if im not posting right this is my first time. I think its something to do with my ScrollView but not sure, any help would be much appreciated
Thanks

How to resolve method 'setText(java.lang.String)
FYI
setText() is method of textview not a method of Scrollview because ScrollView does not have any setText()
You can not use as Scrollview.setText("Nilesh");
textview.setText("Nilesh");

It must be like this I hope
public Button buttonProducts;
public void countRecords(){
int recordCount = new TableControllerAppointments(this).count();
TextView textViewRecordCount = findViewById(R.id.textViewRecordCount);
textViewRecordCount.setText(String.ValueOf(recordCount) + " records found.");
}
You can't set text to Scrollview, first you have to understand this, it's basic

You're trying to set text for "Scrollview", which is absolutely wrong. Scroll view is a view which is using for scroll the layout while the application runs. to full fill your requirement you have to declare a TextView. Then you can set the text for it.

Android Programmatically setting button text

Does anybody know how to programmatically set the text of a button?
thing is i'm not calling this from the main layout(setContentView) i'm calling it in a view thats inflated after an asynctask
heres what i have tried but this is giving a null pointer exception on the 2nd line
Button mButton=(Button)findViewById(R.id.contact);
mButton.setText("number");
heres my layout where i am calling the button
<Button
android:id="#+id/contact"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/address"
android:layout_toLeftOf="#+id/badge"
android:background="#drawable/ic_btn_call"
android:textSize="10dp"
android:textStyle="bold"
android:textColor="#color/white"/>
here my view i'm inflating
ClubInfo = LayoutInflater.from(getBaseContext()).inflate(R.layout.clubinfocell,
null);
TextView TeamNameText = (TextView) ClubInfo.findViewById(R.id.TeamName);
TeamNameText.setText(teamName);
TextView AddressText = (TextView) ClubInfo.findViewById(R.id.address);
AddressText.setText(address1);
Button mButton=(Button)ClubInfo.findViewById(R.id.contact);
mButton.setText(telephone);

Then use your view's object to initialize it:
Button mButton = (Button)your_view_object.findViewById(R.id.contact);
mButton.setText("number");
When you try to identify a view other than your Activity's layout, you have to pass the reference of that view like this. If not Android will keep looking for this element from the layout which you provided in the setContentView().
For example, consider you have inflated a view like this:
View View = mInflater.inflate(R.layout.gridelement, null);
Then use this View's object for the Button present in that inflated layout:
Button mButton = (Button)View.findViewById(R.id.contact);

change your code as:
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);//set layout here in which u have add contact in xml
Button mButton=(Button)findViewById(R.id.contact);
mButton.setText("number");
EDIT:
Your \res\layout\main.xml look like as:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button
android:id="#+id/contact"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/address"
android:layout_toLeftOf="#+id/badge"
android:background="#drawable/ic_btn_call"
android:textSize="10dp"
android:textStyle="bold"
android:textColor="#color/white"/>
</LinearLayout>

your mButton is null.so NPE.are you refrenced xml resources after setContentView
onCreate(){
...
setContentView(R.layout.yourlayout);
Button mButton=(Button)findViewById(R.id.contact);
mButton.setText("number");
}

check R.java files import statement
are you sure that you have import it of the project you use ..
and just format your layout (.xml ) file save it and again type the same statement

Android: Inflating layout takes to long

Found a Solution!
I now use a ViewPager instead of a ViewFlipper.
The Views are now generated within my run() method (which is already there because I fetch data from the web) and saveed in a Map.
In my Handler I only call pagerAdapter.notifyDataSetChanged() the pagerAdapter uses the Map of views and it works smooth and fast.
So I'm now looking for a away to have the ViewPager scroll endless, but thats another problem not connected to this one ;)
Thank all of you for your answers and keep up the good support.
I'm quite new to Android development and facing a problem while inflating a (huge) layout.
I getting some Data from a Webservice which works fine then i'm using a handler within my Activity to bring this data to the frontend. Here is my handleMessage:
public void handleMessage(Message msg) {
LayoutInflater inflater = getLayoutInflater();
List<Integer> gamedays = new ArrayList<Integer>(games.keySet());
Collections.sort(gamedays);
for (Integer gameday : gamedays) {
View gamedaytable = inflater.inflate(R.layout.gamedaytable, null);
TableLayout table = (TableLayout) gamedaytable.findViewById(R.id.gameDayTable);
table.removeAllViews();
List<Game> gamelist = games.get(gameday);
int rowcount = 2;
for (Game game : gamelist) {
View tableRow = inflater.inflate(R.layout.gamedayrow, null);
TextView homeTeam = (TextView) tableRow.findViewById(R.id.gameDayHome);
TextView awayTeam = (TextView) tableRow.findViewById(R.id.gameDayAway);
TextView gameResult = (TextView) tableRow.findViewById(R.id.gameDayResult);
gameResult.setBackgroundResource(R.drawable.resultbackground);
homeTeam.setText(game.getHomeTeam().getName());
awayTeam.setText(game.getAwayTeam().getName());
if (game.getHomegoals() < 0 || game.getAwaygoals() < 0) {
gameResult.setText("-:-");
} else {
gameResult.setText(game.getHomegoals() + ":" + game.getAwaygoals());
}
if (rowcount % 2 == 0) {
tableRow.setBackgroundColor(0xffdee0dd);
} else {
// setting alternative background
tableRow.setBackgroundColor(0xfff1f3f0);
}
rowcount++;
table.addView(tableRow);
}
flipper.addView(gamedaytable);
}
flipper.setDisplayedChild(thisgameday - 1);
pd.dismiss();
}
My Problem is that this code runs quite slow and d the processdialog freezes for about 1 second before it disappears and the layout is shown.
games consists of 34 entries which contains 9 entries by itself.
So I'm adding 34 Views consisting of a relativeLayout () which holds the table
I think the problem is, that android starts to draw and calculte the layout and this takes too long.
If I'm correct i can not use AsynTask because i can not do UI stuff there and im doing UI stuff only.
I looking for a way to have the process dialog not freezing while doing this.
Or maybe I'm doing some completly wrong
R.layout.gamedaytable:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff1f3f0"
android:focusableInTouchMode="false" >
<TableLayout
android:id="#+id/gameDayTable"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:focusableInTouchMode="false" >
</TableLayout>
</RelativeLayout>
R.layout.gamedayrow:
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:focusableInTouchMode="false"
android:paddingBottom="5dp"
android:paddingTop="5dp" >
<TextView
android:id="#+id/gameDayHome"
style="#style/textsizeSmallScreen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="Mannschaft 1" />
<TextView
android:id="#+id/textView2"
style="#style/textsizeSmallScreen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text=":" />
<TextView
android:id="#+id/gameDayAway"
style="#style/textsizeSmallScreen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Mannschaft 2" />
<TextView
android:id="#+id/gameDayResult"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="5dp"
android:background="#drawable/resultbackground"
android:paddingLeft="10dip"
android:text="0:5"
android:textColor="#FFFFFF"
android:textSize="11dp"
android:textStyle="bold"
android:typeface="monospace" />
</TableRow>
Additional Info:
This is how the Table should look like.
So i'm not sure if this should really be a ListView because for me its tabledata ;)
table

You seem to be building a list, you should probably look at using a ListView, which'll have the advantages of only needing to build the UI for the number of rows currently being shown, and to also do view re-use, so that you don't need to inflate as many rows.

Found a Solution!
I now use a ViewPager instead of a ViewFlipper. The Views are now generated within my run() method (which is already there because I fetch data from the web) and saveed in a Map. In my Handler I only call pagerAdapter.notifyDataSetChanged() the pagerAdapter uses the Map of views and it works smooth and fast. So I'm now looking for a away to have the ViewPager scroll endless, but thats another problem not connected to this one ;)
Thank all of you for your answers and keep up the good support.

It is better to go for Listview. Even we can add more than one design of rows in the listview in an optimized manner which will improves the performance better.

You definitely can do this on an AsyncTask. While you cannot update the UI on the doInBackground method of an AsyncTask, you can from the onProgressUpdate.
I would break up the code so you are iterating through items while in doInBackground, call publishProgress for each item, and then do the UI updates for the item when you get a callback in onProgressUpdate.

creating a countdowntimer

I've created a countdown timer that counts Days:Hrs:Mins:Sec. using regular text view and updating it using my handler works fine for me.
however I want to create a cool animation for the changing digits:
1st Q:
I have 2 options as I see it to draw the numbers:
1. using a home made font applied with a style
2. using a textview/btn with no text on them and applying a backrgound image using setBackgroundResource()
--what should I choose?
2nd Q:
I've created a wrapper for ViewFlipper(not extending it)
public class transitionair extends Activity {
SpecialFlipperWrapper m_thousand;
SpecialFlipperWrapper m_hundred;
SpecialFlipperWrapper m_tens;
SpecialFlipperWrapper m_ones;
#Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
ViewFlipper flipper_Tsnds=(ViewFlipper)findViewById(R.id.yearThousand);
m_thousand = new SpecialFlipperWrapper(flipper_Tsnds, this, 9);
ViewFlipper flipper_Hndrds=(ViewFlipper)findViewById(R.id.yearHundread);
m_hundred = new SpecialFlipperWrapper(flipper_Hndrds, this, 9);
ViewFlipper flipper_Tns=(ViewFlipper)findViewById(R.id.yearTens);
m_tens = new SpecialFlipperWrapper(flipper_Tns, this, 9);
ViewFlipper flipper_Ons=(ViewFlipper)findViewById(R.id.yearOnes);
m_ones = new SpecialFlipperWrapper(flipper_Ons, this, 9);
m_thousand.startFlipping();
m_hundred.startFlipping();
m_tens.startFlipping();
m_ones.startFlipping();
}
}
however trying to fetch one of the latter views that come after the yearThousand id are retrieving null
XML I'm Using is:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ViewFlipper
android:id="#+id/yearThousand"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ViewFlipper
android:id="#+id/yearHundread"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ViewFlipper
android:id="#+id/yearTens"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ViewFlipper
android:id="#+id/yearOnes"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
ps xml's for the animation itself are working so I left them out
Main questions is: can I make it better?
second question is: how?
third question is why is my layout returning null on the second call to it and how can I avoid it?
10XX