A Beginner's Guide to Make Android Apps
Most of the tutorials out in blogs and YouTube say you need not have any kind of programming experience to make apps. Well, that's not the truth. To make apps, you've got to have basic knowledge of programming, let it be some easy programming language like #C, Java Basics, XML, HTML, etc.
If you don't have any kind of programming experience, visit this link to learn or if I find time, I'll post a few links and educational sites to learn making apps for free.
Click to expand...
Click to collapse
How did I learn to make apps and how long it took?
I was a member in the Xperia 2011 device line up and loved porting apps, making ROMS for those lineup. However, my goal was to code apps and make UX. The main difficulty was to find resources and the next one was understanding it without a classroom experience. After all this managing time was another headache. So I used to give up learning new things easily.
Once I started seeing a downfall in the development for the devices, I made up my mind to learn making better UI/UX. That's when I got into making Zooper Widgets and Homscreen Designs. This was just a drill to understand how can someone make their Android Homescreen look beautiful. Things changed and I had to move to the United States and stopped making Homescreens.
Later, I started referring to java concepts even though I knew how to code. Brushed my XML and HTML coding techniques and gave it a shot and it paid off! Since then (2015 October) till date, I've been making apps for my school and personal use with no intentions to upload them to play store.
Click to expand...
Click to collapse
The below image shows our journey to become a professional android app developer. However, one cannot become a professional app developer over night or by going through this guide. You can almost reach half way through if you're understanding and practicing things right.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
To finish the other half, I'd recommend learning it from code camps or attending school or may be by researching things and learning it from other developers or by yourself.
Step1:
Let's not get into writing the code itself first. We first need to understand what are views, layouts, modifying the views and also positioning the views.
I will try my best to refer https://developers.google.com/ resources the most here to make things easy for everyone.
View: A View is a rectangular area visible on the screen. It has a width and height, and sometimes a background color.
ImageView: An ImageView displays an image such as an icon or photo
TextView: A TextView displays text
Button: A Button is a TextView that is sensitive to touch: tap it with your finger and it will respond
ViewGroup: ViewGroup is a big View—often invisible—that contains and positions the smaller Views inside of it.
To understand better with an example visit this linkand start typing in the above definitions in the grey search box
Click to expand...
Click to collapse
Now I assume that everyone's gone through the above link and searched for each item and how does it look like. To implement a view/layout we need a place to code and a language to make the computer understand that we are coding to implement a view.
The place where we code or simply the IDE we will be using is strictly Android Studio. Why is it only Android Studio? You can use any alternative IDE. However, Using Android Studio makes life easier to manage both SDK, the android projects and the IDE helps you finish the code by actively prompting.
The language in which we will be writing the code is XML. XML stands for Extended Markup Language.
Let's take up an example to write a code for a TextView in XML and how does it look as a view.
Code:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello XDA!"
android:textSize="40sp"/>
If the above code is executed, the TextView Looks like this,
Before we even go and talk about the things that are present in the code, Let's understand the syntax of xml. Syntax is nothing but rules to define what a valid XML is. If the syntax isn't right, it wouldn't even show up on your android device.
Here's the syntax for xml
Code:
<ViewName
attribute: "attribute_value"/>
If you carefully observe the syntax, the xml tag/code opens with a opening angle brackets "<" followed by the ViewName in "Camel Case"
The next line has a attribute. attributes must always be lowercase. if you enter it camel case or any other format, you end up with errors.
For every attribute, you'll have a attribute value assigned within "quotes"
You can have any number of attributes as long as they are valid.
The close the xml code. You'll use a forward slash "/" and a closing angle bracket ">"
In the above shown example for a text view, the type of xml code we used is called as a "Self-Closing" tag. An xml can be closed in many different ways. One of the way is "Self-Closing" and the other one is by having "children tags". An example for that tag is shown below.
Code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.aneel.xda.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello XDA!"
android:textSize="40sp"/>
</RelativeLayout>
If we observe. the ViewType in the beginning says "<RelativeLayout" and the end of declaring the "Relative Layout" is just done by using a ">" not a "/>" this is because, ">" indicates there is something after that or in simple words, it's not the end of XML. Right below that there is a child tag for "TextView" which ends right there followed by the "</RelativeLayout". So this means, the "TextView" is a part of "RelativeLayout"
we can close an xml either by "/>" or </ViewName>"
Styling the views
Step2: Styling the views
Now that we know how the code looks for TextView/ButtonView/ImageView, Let's get into styling the views as per our choice.
Code:
<View
android:layout_width="100px"
android:layout_height="100dp"
android:background="#4E4B4F" />
The above code generates a line instead of a box. WE usually make polygons and shapes in px. However, there is a very special reason why we shouldn't be using px (pixels). Every screen is covered by pixels and to understand better, See the image below and look how 2px width and 2px height looks like on different devices.
The dimesnion 2px x 2px in a mdpi device is good to touch and see. the same resolution in a hdpi is also good to see and touch, but when it comes to a xhdpi device we barely can see the pixels. This is the reason why we should use dp (density independent pixels) if we are defining the dimensions of any view.
Lets see the same devices with 2dp x 2dp and see how it looks.
Voila! The 2dp is evenly spread out on all the devices unlike the 2px.
Let's learn a few layout based definitions to understand the code. I'm taking the definitions from developer.google.com again to make it easy for everyone to refer in the future.
wrap_content: We can specify the width or height of a View as a given distance. Alternatively, we can specify it as the special value wrap_content to shrink-wrap the View around its content.
match_parent: To allow a View to expand horizontally to occupy the full width of its parent, we set the View’s layout_width attribute to the special value match_parent. Similarly, to let a View expand vertically to occupy the full height of its parent, we set its layout_height to match_parent.
Click to expand...
Click to collapse
Now let's learn how to set a text size in a ViewType. Just like giving dimensions to a view as "dp" we use "sp"(scale independent pixels) to set the size of text.
Let's look at an example code.
Code:
<TextView
android:textSize="50sp"/>
We can add this line to any view which has text in it. By using "sp" the text looks consistent in all types of devices.
Here's a reference to the material design's typography styles. https://material.google.com/style/typography.html#typography-styles
Please check back in a few hours for more content.
reserved for Daniel Radcliff's magic
Wait, don't forget about Kevin Hart's post here
P.S: Apologies to the moderators. Reserving a lot of place for the guide. Just one more.
reserved
Kudos for the nice guide. http://tutorialspoint.com/ is also another great place to learn.
Sent from my HTC Desire 626s using Tapatalk
Related
Hello
I'm just starting out learning Android, and i only have basic C/C++ programming knowledge, but i've decided to make an app related to my school (just to test Android programming).
I have a UI such as this:
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
And i want to add 1 line between each menu selection. I can do this easily with a <View> and width=match parent and height=1dp in the .xml file (as i've done on the picture showed above), but the problem is that i have around 30-40 xml files where i need this in (Really big menu selection )
Is there any way to simplify this?
I have tried to add my own xml file in the /res/drawable/ folder and that worked out fine with adding the android:background="@xx", but i only want the line inbetween the menu selections, not an entire frame around it.
I tried with the android:shape="line", but i couldn't figure out a way to move it up and down, it was always right in the center of the button.
I hope someone can help me out
- Moon
OK, I guess you want to do it in xml, because you could also add it programatically in a for loop to your list view.
The idea with an own xml file is not bad, though normally you'd want to extend a custom View. This means you create a new xml file with a single text view in your layout folder and then add it to your activity layout via
Code:
<com.example.app.custom_view
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
I don't think you can go shorter using xml. If it is only a list view, you might want to look at some custom list views or at this question here.
Thanks for the reply
I'm still very new to this, so "extend a custom View" says little to me i'm afraid (i'll try and google it and get a better understanding though)
I can easily make a new xml file with a android:shape="line" and set the width to 1dp, but then it ends up like this:
(Just talking about the 1st line)
I don't see any way of forcing it to move further down
I'm currently simply using <LinearLayout> with 7x <Button>. It can most likely be done in 47 other ways, all much smarter, but this currently works for my skill level and for what i need
Would really like to simply create 1 xml file with the properties of the line and then be able to call that xml file whenever i need to input a line in my UI. So if i ever need to change the line width, color or something, i can just change it 1 place and it'll do it all over my app.
I've done this with the actionbar dropdown in the .java files with Extend, but not sure how to go about doing it with xml (prefer xml for the UI)
It's probably extremely easy, but.. ye.. :/
- Moon
Moonbloom said:
Thanks for the reply
I'm still very new to this, so "extend a custom View" says little to me i'm afraid (i'll try and google it and get a better understanding though)
I can easily make a new xml file with a android:shape="line" and set the width to 1dp, but then it ends up like this:
(Just talking about the 1st line)
I don't see any way of forcing it to move further down
I'm currently simply using <LinearLayout> with 7x <Button>. It can most likely be done in 47 other ways, all much smarter, but this currently works for my skill level and for what i need
Would really like to simply create 1 xml file with the properties of the line and then be able to call that xml file whenever i need to input a line in my UI. So if i ever need to change the line width, color or something, i can just change it 1 place and it'll do it all over my app.
I've done this with the actionbar dropdown in the .java files with Extend, but not sure how to go about doing it with xml (prefer xml for the UI)
It's probably extremely easy, but.. ye.. :/
- Moon
Click to expand...
Click to collapse
OK so I googled a bit and it seems to be much easier using a ListView, consider this artcle for how to use it. Then customize the deviders as asked here.
If you really want to stay with the LinearLayout (don't do it!), do it like this:
For the Buttons (not necessarily):
1. create a new xml file (something like "mybutton.xml") in the layout folder.
2. copy your Button code in a single <Button ... /> but leave out the id (and text probably).
3. in your LinearLayout, insert Buttons like this (com.example.app is your appname):
Code:
<com.example.app.mybutton
android:id="@+id/whatever
android:text="@string/thiscanbedoneprogrammaticallyalso"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
For the seperators:
1. same as above ("mydevider.xml")
2. something like this:
Code:
<TextView
android:background = "#FFFFFF"
android:height= "1px"
android:width = "match_parent"
(use 1px and not dp!)
3. same as above (with .mydevider and no text )
I fiddled around with it a bit before seeing your latest post, and got it to work
Added an xml file named "button_divider" and added this code into it:
Code:
<?xml version="1.0" encoding="utf-8"?>
<View xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="1px"
android:background="@android:color/white"
/>
then i simply added
Code:
<include layout="@drawable/button_divider" />
where ever i wanted to draw a line, and it works exactly how i wanted it to
(i know it should probably be in the layout folder, but just added it in drawables to test it out, can always move it, not like it does anything differently)
I'll definately look into ListView, seems like it's build exactly for what i need ^^
But now i at least have a working'ish version of what i needed
Thanks alot for the help, i might be back here on these forums again at some point
- Moon
Shouldn't you just use a listview?
SimplicityApks said:
OK so I googled a bit and it seems to be much easier using a ListView, consider this artcle for how to use it. Then customize the deviders as asked here.
If you really want to stay with the LinearLayout (don't do it!), do it like this:
For the Buttons (not necessarily):
1. create a new xml file (something like "mybutton.xml") in the layout folder.
2. copy your Button code in a single <Button ... /> but leave out the id (and text probably).
3. in your LinearLayout, insert Buttons like this (com.example.app is your appname):
Code:
<com.example.app.mybutton
android:id="@+id/whatever
android:text="@string/thiscanbedoneprogrammaticallyalso"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
For the seperators:
1. same as above ("mydevider.xml")
2. something like this:
Code:
<TextView
android:background = "#FFFFFF"
android:height= "1px"
android:width = "match_parent"
(use 1px and not dp!)
3. same as above (with .mydevider and no text )
Click to expand...
Click to collapse
Tried to get this to work, while im working on figuring out how to use ListView instead as it seems (according to the two of you) that it's much better
I ran into a problem though.. I made a new xml file in the layout folder named "master_button", pasted this code in there:
Code:
<Button xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:textSize="25sp"
android:textColor="@color/Blue"
android:background="@android:color/transparent" />
Then i tried using your solution with <com.example.app.mybutton> (i ofc changed to the real name) but nothing would show up at all.. It seemed to need a class (java file) to be able to do it, but that just went horribly wrong when i tried adding it..
Then i tried to use <Include layout="xx"> as i did with the line earlier.. I can set the android:id="xx" easily, but it seems i cant set the android:text="xx".
Off to try out some more stuff and see if i can get anything working ^^
I think that is because you use the weight in the Button. If you set the width to 0 and it's ignoring the weight you will not see anything Try removing the weight(and probably width and height as well) in the Button and put it in your LinearLayout, where you insert your Button.
Found an easier solution for your Seperators:
I added this to my styles:
Code:
<style name="Divider">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">1dp</item>
<item name="android:background">?android:attr/listDivider</item>
</style>
Then in my layouts is less code and simpler to read.
Code:
<View style="@style/Divider"/>
Click to expand...
Click to collapse
here's the link: linklinklink
Should really just use listview next time. it does it automagically.
If you need to display graphs and/or charts in your application in a stylish, holo-compliant way, this is your go-to library.
I especially needed the BarGraph view for a project I am preparing for the Samsung Smart App Challenge 2013, but unfortunately, the base library by Daniel Nadeau was hardcoding the prepended $ unit, while my project requires several different other units to be displayed.
So I forked the library and added a couple features (I will be adding more over time), so I thought I would share:
Defining the unit programmatically, using BarGraph.setUnit(String unit)
Code:
// Example
BarGraph bg = (BarGraph) findViewById(R.id.bargraph);
bg.setUnit("m");
Appending or prepending the unit programmatically using #BarGraph.appendUnit(Boolean doAppend)
Code:
// Example
BarGraph bg = (BarGraph) findViewById(R.id.bargraph);
bg.appendUnit(true);
==> The result would be :
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Additionnally, I converted the library for proper compatibility with Gradle & Android Studio (IntelliJ).
You can find my fork on Github at the following url: https://github.com/Androguide/HoloGraphLibrary
If you haven't heard of this library before, it currently offers the following views:
You can use them in your project as follows:
LineGraph:
XML
Code:
<com.echo.holographlibrary.LineGraph
android:layout_width="match_parent"
android:layout_height="200dp"
android:id="@+id/graph" />
Java
Code:
Line l = new Line();
LinePoint p = new LinePoint();
p.setX(0);
p.setY(5);
l.addPoint(p);
p = new LinePoint();
p.setX(8);
p.setY(8);
l.addPoint(p);
p = new LinePoint();
p.setX(10);
p.setY(4);
l.addPoint(p);
l.setColor(Color.parseColor("#FFBB33"));
LineGraph li = (LineGraph)findViewById(R.id.graph);
li.addLine(l);
li.setRangeY(0, 10);
li.setLineToFill(0);
BarGraph:
XML
Code:
<com.echo.holographlibrary.BarGraph
android:layout_width="match_parent"
android:layout_height="200dp"
android:id="@+id/graph" />
Java
Code:
ArrayList<Bar> points = new ArrayList<Bar>();
Bar d = new Bar();
d.setColor(Color.parseColor("#99CC00"));
d.setName("Test1");
d.setValue(10);
Bar d2 = new Bar();
d2.setColor(Color.parseColor("#FFBB33"));
d2.setName("Test2");
d2.setValue(20);
points.add(d);
points.add(d2);
BarGraph g = (BarGraph)findViewById(R.id.graph);
g.setBars(points);
g.setUnit("$");
g.appendUnit(true);
PieGraph:
XML
Code:
<com.echo.holographlibrary.PieGraph
android:layout_width="match_parent"
android:layout_height="200dp"
android:id="@+id/graph" />
Java
Code:
PieGraph pg = (PieGraph)findViewById(R.id.graph);
PieSlice slice = new PieSlice();
slice.setColor(Color.parseColor("#99CC00"));
slice.setValue(2);
pg.addSlice(slice);
slice = new PieSlice();
slice.setColor(Color.parseColor("#FFBB33"));
slice.setValue(3);
pg.addSlice(slice);
slice = new PieSlice();
slice.setColor(Color.parseColor("#AA66CC"));
slice.setValue(8);
pg.addSlice(slice);
If you guys have ideas or feature requests, please share. Pull-requests are obviously welcome.
BTW, anyone else participating in the SSAC this year? The $800k prize-money is mindblowing.
1st place is $200k. Considering the fact that it's Samsung, I would expect a higher prize, but I guess it's a specific contest with the Chord SDK. The venture capital pitch and marketing promotion are equally valuable imo.
This is very cool! Thank you for sharing!
Hi this is a cool library. As you asked for feature requests. How about stacked bar charts. So one is able to show a distribution of values in a group over time or categories?
Gesendet von meinem Nexus 7 mit Tapatalk 4 Beta
mickru said:
Hi this is a cool library. As you asked for feature requests. How about stacked bar charts. So one is able to show a distribution of values in a group over time or categories?
Gesendet von meinem Nexus 7 mit Tapatalk 4 Beta
Click to expand...
Click to collapse
That's a very good idea, I'll try to implement it as soon as I have some time. Thanks.
I'll also soon add the possibility to add a dynamic line chart, updated every X milliseconds cleanly in a separate thread
I've added this library to one of my apps that I'm working on. Here is a quick screenshot.
I've had to modify the LineGraph to be able to show the range lines between max and min.
I see a lot more apps and even infographics using the pie graph format. I personally think it looks more clean and easier to digest. I was looking at the challenge you're looking into, and it sounds interesting enough. It might be a perfect opportunity to enter, and just to learn about the whole process of bringing an app to market. We haven't integrated the Chord SDK, but I think it can be easily implemented since our game concept is related to live interactions. I'm more interested in the Venture Capital pitch with Samsung VC - that company has ridiculous amounts of money - it's ridiculous!
Great post!:good:
H3R3T1C said:
I've added this library to one of my apps that I'm working on. Here is a quick screenshot.
I've had to modify the LineGraph to be able to show the range lines between max and min.
Click to expand...
Click to collapse
Nice, very clean UI.
If you feel like submitting a pull-request for your LIneGraph modifications please do so.
Androguide.fr said:
Nice, very clean UI.
If you feel like submitting a pull-request for your LIneGraph modifications please do so.
Click to expand...
Click to collapse
I plan on sharing my code for the graph as soon as I clean up the code and add some more stuff !
Edit: pull request sent!
This looks great - don't have the need for it at the moment but have favourited it for future use! Thanks!
I there anyone figured out how to add bars to barGraph in a loop ? I click on a item from a listview in left slidingmenu, then retrieve data by this dateItem from database and put values in to arrays. than in a loop, I add bar data to points, and eventually setting this points as bars. But graph doesn't changes. anyone got idea ?
Wow, I have been using this lib and I had to do what you have done for showing some other units.
But this lib has a strange behavior in some devices, it's like it doesn't get the screen sizes or layout sizes correctly and shows out of scale characters and wierd shapes on pie charts sometimes (I'm talking about the original HoloGraph lib).
Someone has an a idea of why this happens?
Help using your lib
Hi,
I downloaded your library and sample project from Github but when I'm not able to see the jar file under the library folder. Can you please tell me how to use your library?
Thanks
is there is any onclick listner or event trigrring on click
Hi,
This is realy looking very clean and nice UI graph presentation, i am going to use it in my next project, but before that want ot confirm that,
does it supports events, i mean i want to give an option like drill down for detail reports.
so like on home page, just bar or pie chart with data, and on click of any of the bar, i can open the other activity with Detail information on the selected bar. is it possible to do that using this Lib ???
anyway i will be trying by myself in some time and post my findings.
yogi.306 said:
Hi,
This is realy looking very clean and nice UI graph presentation, i am going to use it in my next project, but before that want ot confirm that,
does it supports events, i mean i want to give an option like drill down for detail reports.
so like on home page, just bar or pie chart with data, and on click of any of the bar, i can open the other activity with Detail information on the selected bar. is it possible to do that using this Lib ???
anyway i will be trying by myself in some time and post my findings.
Click to expand...
Click to collapse
Amazing library, anyone knows how many "lines" its the max to draw? im using LineGraph, but seems dont draw all the lines i need, so what should i do? Thanks
Thanks
Nice job! Very nice
I'll try it soon
Nice very good library
Can I use it for commercial useage?
I am new to Android programming. How do I import this library to a new sample project in Android Studio?
Hi, can I ask if its possible to add a feature where you can click on the individual bars on a Bar Graph? A simple click listener for the bars will do, I just need to display more detail per point in the bar.
Thanks a lot for your library.
Hey guys this is the image which I would like to set at the top of every layout below the action bar...I dont want to include and set it in each and every layout.
So any alternatives for the same. I want this image to be displayed in all oof my application.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
coolbud012 said:
Hey guys this is the image which I would like to set at the top of every layout below the action bar...I dont want to include and set it in each and every layout.
So any alternatives for the same. I want this image to be displayed in all oof my application.
Click to expand...
Click to collapse
If it is just one view, you can do it similar to the dividers in the third answer to this question. Have a style for the list heading (probably referencing the system or support library resources, depending on the lowest API you use) and then just add the small view wherever you want it. There is also another way using the <include> tag, so you can use a separate xml file to declare your header layout.
SimplicityApks said:
If it is just one view, you can do it similar to the dividers in the third answer to this question. Have a style for the list heading (probably referencing the system or support library resources, depending on the lowest API you use) and then just add the small view wherever you want it. There is also another way using the <include> tag, so you can use a separate xml file to declare your header layout.
Click to expand...
Click to collapse
I dont want to go with include even that way I would have to put the include in every layout.
Should I go with and put this into BaseActivity.java so that it would be loaded with each activity.
Code:
View view = new View(this);
view.setLayoutParams(new LayoutParams(2,LayoutParams.FILL_PARENT));
view.setBackgroundColor(Color.BLACK);
layout.add(view);
Or should I go with this only :
Code:
<style name="Divider">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">1dp</item>
<item name="android:background">?android:attr/listDivider</item>
</style>
Then in my layouts is less code and simpler to read.
<View style="@style/Divider"/>
But the main issues with using the style is that I am using 1 style for layouts in which I am repeating the layout...and I cant use 2 styles for 1 ViewGroup...
I want to know the most optimized way...
coolbud012 said:
I dont want to go with include even that way I would have to put the include in every layout.
Should I go with and put this into BaseActivity.java so that it would be loaded with each activity.
Code:
View view = new View(this);
view.setLayoutParams(new LayoutParams(2,LayoutParams.FILL_PARENT));
view.setBackgroundColor(Color.BLACK);
layout.add(view);
Or should I go with this only :
Code:
<style name="Divider">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">1dp</item>
<item name="android:background">?android:attr/listDivider</item>
</style>
Then in my layouts is less code and simpler to read.
<View style="@style/Divider"/>
But the main issues with using the style is that I am using 1 style for layouts in which I am repeating the layout...and I cant use 2 styles for 1 ViewGroup...
I want to know the most optimized way...
Click to expand...
Click to collapse
Well I don't think there is an easy way to get around putting one line in every layout. So I assume that you want to use a single ImageView to show the image, so create a
Code:
<style name="header">
<item name="android:scr">@drawable/yourimage</item>
<!-- additional information like scale Type and such -->
</style>
And then in each layout, just add
<ImageView style="header"/>
Wherever you need it. I think that's the simplest way to do it.
SimplicityApks said:
Well I don't think there is an easy way to get around putting one line in every layout. So I assume that you want to use a single ImageView to show the image, so create a
Code:
<style name="header">
<item name="android:scr">@drawable/yourimage</item>
<!-- additional information like scale Type and such -->
</style>
And then in each layout, just add
<ImageView style="header"/>
Wherever you need it. I think that's the simplest way to do it.
Click to expand...
Click to collapse
Ok thanks for the suggestion...what about the first way I have described above?
else will follow what you have instructed...
coolbud012 said:
Ok thanks for the suggestion...what about the first way I have described above?
else will follow what you have instructed...
Click to expand...
Click to collapse
Ah you're right, you could also do it programmatically. Not sure what the best way would be, but you could create an abstract class HeaderActivity that would contain the code in the onCreate() so all your activities could extend that class instead of Activity or FragmentActivity. You would need to have one ID for all your top level layout, to call findViewById(R.id.top_view).addView(imageView, 0);
In the HeaderActivity. And you could also set your layout directly in its onCreate with an abstract method getLayoutId.
SimplicityApks said:
Ah you're right, you could also do it programmatically. Not sure what the best way would be, but you could create an abstract class HeaderActivity that would contain the code in the onCreate() so all your activities could extend that class instead of Activity or FragmentActivity. You would need to have one ID for all your top level layout, to call findViewById(R.id.top_view).addView(imageView, 0);
In the HeaderActivity. And you could also set your layout directly in its onCreate with an abstract method getLayoutId.
Click to expand...
Click to collapse
seems to be a great idea but...I had dropped out the idea of header and instead simplified the app header a bit...
Have a look at https://play.google.com/store/apps/details?id=com.droidacid.apticalc
U can create one Base Activity which extends "FragmentActivity" or "SherlockFragmentActivity"(if u use it) and then put that header on the top...below it create a fragment and in the whole app just replace that fragment and stay in one activity only..then u just need to have only one layout for the header and you can do the rest very easily....
FABulous
So, Material Design is here and its beautiful. But wait. Its not here yet. And its not for everyone either. So while Google does its thing and squashes bugs and whatnot, why not give your pre-L apps a Material look? Making the ActionBar 56dp high is the most obvious way to go. But why not take it a step further and add the floating action button like the one that the Google+ app has? Too complicated? This library has got you covered. With just a few lines of code, FABulous allows you to add the button and customize its color and drawable too.
Download
https://github.com/FaizMalkani/FloatingActionButton
Instructions:
Place the FAB in a FrameLayout and add your layouts above the FAB view. For best results, keep the FAB height and width at 72dp and in the bottom right of the FrameLayout
Code:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--
Your layouts here. Do not put anything below the FAB layout
-->
<com.faizmalkani.floatingactionbutton.sample.Fab
android:id="@+id/fabbutton"
android:layout_width="72dp"
android:layout_height="72dp"
android:layout_gravity="bottom|right"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp" />
</FrameLayout>
Initialize your FAB in your activity's onCreate()
Code:
Fab mFab = (Fab)findViewById(R.id.fabbutton);
Initialize your FAB in your activity's onCreate()
Fab mFab = (Fab)findViewById(R.id.fabbutton);
If needed, call the other methods of the FAB
Code:
mFab.hideFab();
mFab.showFab();
mFab.setAlpha();
mFab.setOnClickListener();
Nice one, what's holding this back from being used on pre jb devices?
Can Sherlock be used to solve some of the comparability dependencies?
Hi @Faiz Malkani
I managed to backport this to 2.1+, sources are here:
https://github.com/Quinny898/FloatingActionButton-Compat
Here's what the sample project looks like (not included, it's the same + AppCompat, which is complicated to add):
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Thanks Faiz!
One question: it auto-hides while scrolling the page? (the sample app doesn't let me be sure of that)
Jeeko said:
Thanks Faiz!
One question: it auto-hides while scrolling the page? (the sample app doesn't let me be sure of that)
Click to expand...
Click to collapse
You can do something like this, with a scrollview or a list view if you like:
http://android-ed.blogspot.co.uk/2013/09/hiding-bottom-actionbar-during-scrolling.html
Replace the setVisibility calls with show and hide though
This app had it before them https://play.google.com/store/apps/details?id=ee.ioc.phon.android.arvutaja
Laur3nt1u said:
I don't know how Google came with this button but this app had it before them https://play.google.com/store/apps/details?id=ee.ioc.phon.android.arvutaja
Click to expand...
Click to collapse
tho that button looks bad XD, google does copy a lot of stuff from different sources so dont worry bout it
this is probably a dumb question, but could somebody give me a easier tutorial on how to do this? i would really like to try it but i dont really understand how it should be done. im all new to android again after som years with crapple.
thanks in advanced
Thanks for the library, the sample apk looks great.
Importing in Android Studio (I tried many ways) I always have this error, looks like corrupted .png's
Someone else?
h**p://i.gyazo.com/2d17ddabae4e5502bd6fed109e788d68.png
Try copying the FAB Class to your projects src.
Alternatively, if you can wait a few days, I'll be merging a pull request that adds Gradle support
Quinny899 said:
Hi @Faiz Malkani
I managed to backport this to 2.1+, sources are here:
https://github.com/Quinny898/FloatingActionButton-Compat
Here's what the sample project looks like (not included, it's the same + AppCompat, which is complicated to add):
Click to expand...
Click to collapse
great work
looks FABULOUS :laugh: using it in my next app .. thanks :good:
Idea
Hey, thank you for your effort. The FAB looks really good.
To further follow the new design guideline I would suggest that you extend your
Code:
setFabDrawable(Drawable fabDrawable)
method by one line.
Code:
public void setFabDrawable(Drawable fabDrawable)
{
Drawable myDrawable = fabDrawable;
mBitmap = ((BitmapDrawable) myDrawable).getBitmap();
[COLOR="Red"]mBitmap = Bitmap.createScaledBitmap(mBitmap, dpToPx(24), dpToPx(24), true);[/COLOR]
invalidate();
}
This makes the fabIcon as big as it should be regardless the source.
Thanks anyways.
Thanks
For some reason I keep getting this error, although I think all files are in the right place..
"Rendering Problems The following classes could not be found:
-*com.faizmalkani.floatingactionbutton.Fab (Fix Build Path, Create Class)
Tip: Try to build the project. "
What could I do to fix this?
Thanks for your contribution.
But can you teach me how to import the class?
I have imported the jar but I can't use the Fab in .XML file.
There is no mistake but log told me that 1. com.faizmalkani.floatingactionbutton.FloatingActionButton failed to instantiate
and 2. Paint.setShadowLayer is not supported...
So I need a hand. Can anyone help me?
I can test an apk if its ready. drop me a load don't be shy
ywwynm said:
Thanks for your contribution.
But can you teach me how to import the class?
I have imported the jar but I can't use the Fab in .XML file.
There is no mistake but log told me that 1. com.faizmalkani.floatingactionbutton.FloatingActionButton failed to instantiate
and 2. Paint.setShadowLayer is not supported...
So I need a hand. Can anyone help me?
Click to expand...
Click to collapse
It's working, it just doesn't render in the XML builder
Sent from my Nexus 7 using Tapatalk
Faiz Malkani said:
FABulous
So, Material Design is here and its beautiful. But wait. Its not here yet. And its not for everyone either. So while Google does its thing and squashes bugs and whatnot, why not give your pre-L apps a Material look? Making the ActionBar 56dp high is the most obvious way to go. But why not take it a step further and add the floating action button like the one that the Google+ app has? Too complicated? This library has got you covered. With just a few lines of code, FABulous allows you to add the button and customize its color and drawable too.
Click to expand...
Click to collapse
It seems you completely miss to recycle the typed array with a try finally block in the constructor of your custom view.
Problem with Android Studio
Hey, thank you very much for this library, on eclipse all works fine, but in android studio, the little image in the floating action button doesn't display, this is a part of my xml layout file:
Code:
<com.faizmalkani.floatingactionbutton.FloatingActionButton
android:id="@+id/fabbutton"
android:layout_width="72dp"
android:layout_height="72dp"
android:layout_gravity="bottom|end"
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:onClick="fabClicked"
android:drawable="@drawable/ic_action_new"/>
All this is at the end of a framelayout, where is the error? Thank you in advance
Sorry for my bad english
Hi Xda, I've been working on this library for past few months. At last I managed to finish most of functionality and I would like to share it with you. I would like to see what you think about it and I hope someone will will find it useful.
Library is based on InteractiveChartView sample available on Google Developers page: http://developer.android.com/training/gestures/scale.html
Github project page: http://github.com/lecho/hellocharts-android
Apache License 2.0.
Features:
- Line chart
- Column chart
- Pie chart
- Bubble chart
- Combo chart
- Preview charts(for column chart and line chart)
- Zoom(pinch to zoom, double tap zoom), scroll and fling
- Custom and auto-generated axes
- Animations
Few screens from demo application:
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Basic usage:
Every chart view can be defined in layout xml file:
Code:
<lecho.lib.hellocharts.view.LineChartView
android:id="@+id/chart"
android:layout_width="match_parent"
android:layout_height="match_parent" />
or created in code and added to layout later:
Code:
LineChartView chart = new LineChartView(context);
layout.addView(chart);
Every chart has its own method to set chart data and its own data model, example for line chart:
Code:
List<PointValue> values = new ArrayList<PointValue>(numValues);
values.add(new PointValue(0, 2));
values.add(new PointValue(1, 4));
values.add(new PointValue(2, 3));
values.add(new PointValue(3, 4));
Line line = new Line(values).setColor(Color.Blue).setCubic(true);
List<Line> lines = new ArrayList<Line>(1);
lines.add(line);
LineChartData data = new LineChartData();
data.setLines(lines);
LineChartView chart = new LineChartView(context);
chart.setLineChartData(data);
Hello,
Your work seems great !
I will try your library when I will need charts in my next applications and I will make you a feedback .
Sylvain
This charts look awesome! Maybe I try to use it in my math app anytime
Congratulations..!
You are on portal now...
Congratulations.!
By the way nice Work...Thanks for sharing.:good:
Keep coming like this..
So beautiful!
Thx
Wow, thanks, really nice to see that you like it
Hi,
After doing some research about charting lib on the internet, I decide to use your lib on my project. Thank you for your work.
On my project, I want to implement time series on X axis. And the gap between time nodes may be different.
Here's a sample:
flickr.com/photos/[email protected]/15540381266/in/photostream/lightbox
Hi,
I'm glad you noticed this library. .
On my project, I want to implement time series on X axis. And the gap between time nodes may be different.
Click to expand...
Click to collapse
That should be possible to do with HelloCharts. Auto-generated axis tries to keep gaps between axis values equal so for this problem custom axis will be needed. You can pass to custom axis list of AxisValues with values that represents some date or time(for example each AxisValue could hold day number). To define axis labels use AxisValue.setLabel() or AxisValue.setFormatter() methods.
You may need to use method Axis.setMaxLabelChars() to define how much space should be taken by single label. Unfortunately if label is longer than maxLabelCharts it will not be truncated.
Sample code:
Code:
List<AxisValue> axisValues = new ArrayList<AxisValues>();
//fill list with your custom values
//Create new Axis with your custom values
Axis axis = new Axis(values);
//optionaly set max characters for axis labels
axis.setMaxLabelChars(4);
//set axis as bottom horizontal axis
chartData.setAxisXBottom(axis);
That's great to hear it. Okay I'll try to do it as u said.
Thanks for your help.
Can I ask u sth?
1. Is it able to swipe the chart to right/left if the X axis is too long ?
2. Is it able to break line in X axis value? (Ex: 15:00\n12.Oct) ?
3. How to use value formatter?
Thanks in advance.
1. Is it able to swipe the chart to right/left if the X axis is too long ?
Click to expand...
Click to collapse
Yes, for example if you have chart with X values from 0 to 100 you can configure viewport to show values only from 0 to 50, and user will have to scroll/fling to see rest of that chart.
Code:
//create chart view and set chart data
//now configure viewport
Viewport v = new Viewport(chart.getMaximumViewport());
v.left = 0;
v.right = 50;
//chart.setMaximumViewport(v); //Sorry!, that was mistake, you don't have to change maximum viewport in this case.
chart.setCurrentViewport(v, false);
2. Is it able to break line in X axis value? (Ex: 15:00\n12.Oct) ?
Click to expand...
Click to collapse
Unfortunately for now not, text measurement and wrapping is slow and problematic so I decided to not do that.
3. How to use value formatter?
Click to expand...
Click to collapse
If you need your own formatter(you have some logic that decides what label should be displayed) , create class that implements ValueFormatter interface or extends SimpleValueFormatter, for example look at HeightValueFormater class in SpeedChartActivity.java file in samples project(available on github).
If you need to display some numbers with text SimpleValueFormatter should be enough:
Code:
//Example of SimpleValueFormatter usage that displays Foo<some_number>Bar on X axis
//first parameter means how many digits after comma should be visible
ValueFormatter formatter = new SimpleValueFormatter(1, false, "Foo".toCharArray(), "Bar".toCharArray());
Axis xAxis = new Axis(someValues);
xAxis.setFormatter(formatter )
#1: I could fling to see the rest of the chart but it isn't smooth and also very slow. Is that normal ?
#2: I implement this line chart in a ViewPager. When I fling in the chart, it move to the next screen instead of showing the rest of the chart. How can I fix it?
#1. I've tested LineChart with 500 points and viewport set to (0, 50), it works ok, and fling is smooth. Tested on Samsung Galaxy SII(Android 4.1) and Nexus 7/2013(Android 4.4).
How many points do you have on your chart and how many are visible without scrolling?
What device/android version do you use for testing?
Some additional explanation
LineChart is slower than other charts because it uses hardware acceleration only to draw axes, lines unfortunately are drawn on not accelerated bitmap because I experienced glitches when I was drawing lines with hardware acceleration on some devices and some canvas methods don't work with HW.
Other things that can slow down chart:
- every chart will be rendered a little slower on bigger screens and resolutions, depends on device CPU/GPU
- drawing value labels is relatively slow so for big charts it is good idea to not enable it
- drawing labels for axes is a little faster then drawing value labels
- if you use custom ValueFormatter try to make it as fast ass possible, use constants values and char arrays when you can
- cubic lines are a little slower than normal lines
- filled chart(filled area below lines) is very slow, don't use it if you need to display a lot of points on chart(I would say about 25 values is safe for filled area).
- every chart will be rendered much slower on devices with android older than honeycomb(3.0) because there is no hardware accelerations on pre-3.0 android.
#2: Try to use Chart.setContainerScrollEnabled() method, for example:
Code:
//Optionally set horizontal-only zoom type
columnChartView.setZoomType(ZoomType.HORIZONTAL);
//Chart is within ViewPager so enable container scroll mode., horizontal because ViewPager swipes horizontally.
chart.setContainerScrollEnabled(true, ContainerScrollType.HORIZONTAL);
Ps. I committed small change on github, now max zoom is 20 instead of 14 so you will be able to set smaller current viewport.
Ps2. Sorry for late reply, I have busy week.
362
#1: Solved. I used the old jar (hellocharts-library-1.0.jar). I have changed to the newest version on github. Everything is perfect now.
#2: I did it.
Thank you very much.
Hi,
#1: I'm working on pie chart. Am I able to set String labels on it?
#2: As you can see from the screen shot photo. The space in the top and bottom is missing. How can I fix it?
https://www.flickr.com/photos/[email protected]/15653865581
Here's my code:
Code:
<RelativeLayout
android:id="@+id/linear_layout_pie_container"
android:layout_width="match_parent"
android:layout_height="@dimen/dimen_200" >
<lecho.lib.hellocharts.view.PieChartView
android:id="@+id/pie_chart"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</lecho.lib.hellocharts.view.PieChartView>
</RelativeLayout>
Thank you.
Hi,
#1: Yes, you can set String labels for values, for example
Code:
arcValue.setLabel("label".toCharArray());
#2: To leave more space outside of circle for labels change circle fill ratio:
Code:
pieChart.setCircleFillRatio(0.7f); //use values from 0.0f to 1.0f
I know it would be better if PieChart will do this automatically but all staff related to text measuring/drawing on android is a little complicated.
LtP410 said:
Hi,
#1: I'm working on pie chart. Am I able to set String labels on it?
#2: As you can see from the screen shot photo. The space in the top and bottom is missing. How can I fix it?
https://www.flickr.com/photos/[email protected]/15653865581
Thank you.
Click to expand...
Click to collapse
Can I set label both inside and outside the pie chart ?
No, PieChart supports only one label type at the time, inside or outside.
Displaying labels inside and outside at the same time seems to be nice idea, I can't promise but maybe I will add that option.
LtP410 said:
Can I set label both inside and outside the pie chart ?
Click to expand...
Click to collapse
Well, I implement pie chart in ViewPager again, like I did with the line chart above.
Although I try to use this method but I still can swipe in the pie chart at the same time I rotate the chart. Is there any way to solve this problem?
Code:
chart.setContainerScrollEnabled(true, ContainerScrollType.VERTICAL);
chart.setContainerScrollEnabled(true, ContainerScrollType.HORIZONTAL);
There is problem with PieChart because I have no way to determine when user wants to rotate chart and when he wants to change ViewPager page. When PieChart is within ViewPager it should rotate with "more-vertical" gesture and allow user to change page with "move-horizontal" gesture. That worked quite OK on my devices but if there is still a problem you can disable PieChart rotation:
Code:
pieChart.setChartRotationEnabled(false);
Btw. on some devices there is a problem with touch interceptions within support library ViewPager and DrawerLayout so just in case you may use HackyViewPager from lecho.lib.hellocharts.view.hack package. More info: https://github.com/lecho/hellocharts-android/issues/5
LtP410 said:
Well, I implement pie chart in ViewPager again, like I did with the line chart above.
Although I try to use this method but I still can swipe in the pie chart at the same time I rotate the chart. Is there any way to solve this problem?
Code:
chart.setContainerScrollEnabled(true, ContainerScrollType.VERTICAL);
chart.setContainerScrollEnabled(true, ContainerScrollType.HORIZONTAL);
Click to expand...
Click to collapse