This is a translation from the same question in Spanish, and I'm posting it here since I think you could provide more information than our small community.
I am blind from birth and I am studying the career of systems engineering at the university.
I would like to know how I can program the graphical interface of an application in Android Studio. I have searched for tutorials and found several that, for example, to add a button, drag it to the place where you want it to be and it is automatically added to it.
In my case, by not seeing, this is impossible since my screen reader is not qualified to do that kind of work. So my question is how could I do to program android graphical interfaces without seeing?
You can code your layouts in XML.
Writing in XML gives you the full control on how you want to code your layouts.
I'm also Visually Impaired and I'm coding layouts in XML since many years.
There's a good tutorial at tutorialpoint which can help you in this. Also, I'm pasting one of the xml code sample of a layout from my app for your reference. You can find the code below the link:
Tutorial:
https://www.tutorialspoint.com/android/android_user_interface_layouts
XML Layout Sample:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_create_theme" />
</android.support.design.widget.CoordinatorLayout>
Related
I currently making a messaging app for my school project. I'm just starting mobile development this semester. Currently have run into a problem where when I add android ViewPager my activity_main.xml shows:
On the preview of the activity_main.xml
android...ViewPager (in blacktext in grey brackground)
For further explanation:
Anyway I was just thinking of following along to a tutorial because i'm stiil not that capable enough to code but are proffessor still told us to make an app even though his not really teaching that much. That's why i dont understand anything at all.
I just went to this tutorial and decided to use it for my whole project since i dont know anything at all.
So I went and watch and followed along a playlist on how to make a messaging app on this youtube channel Coding cafe, this is currently the video I'm watching and following:
https://www.youtube.com/watch?v=3Am-iad_Gkg&index=5&list=PLxefhmF0pcPmtdoud8f64EpgapkclCllj
First Project:
The first few tutorials everything was fine but at video number 5
Ive' watch the whole video did everything he did but after running the app if you see on his video the tabs were working on his but not on mine I just saw the title of my app but the tabs were not showing at all.
I tried looking at my work then i saw my xml file and there goes the:
click to see image
On the preview of the activity_main.xml
android...ViewPager (in blacktext in grey brackground)
I didn't know what to do because i was stupid did not know what to search, I search android...ViewPager, viewpager in android studio not working but all i was getting was "how to make a appbartab" and other tutorials on how to make one but i was afraid since this project is due february I' really rushing.
New Project Redo:
Back to the problem so after that i did not know what to do so I went and redo the project. Followed his tutorial again then I noticed that my problem was in the viewpager itself in the xml file.
When I typed the:
android View pagerin my activity_main.xml
It showed this again:
On the preview of the activity_main.xml
android...ViewPager (in blacktext in grey brackground)
so I was like what do i need to do?
So in the "First Project:" I already finished coding and doing everything he did in the video really carefully and as said it did not work
In "New Project Redo:" my progress is up until this point (timestamp 3:16)
I was afraid of going further because this code (see it on the video timestamp 3:16)
Made my activity_main preview do this:
On the preview of the activity_main.xml
android...ViewPager (in blacktext in grey brackground)
I dont know what the problem is so I really need help.
This is my code, as i've said havent add the fragment or anything yet cause i redid the project my progress is still in video 5 (timestamp 3:16).
Refer to the video for more information some people also have this problem in the comments but there are no replies.
https://www.youtube.com/watch?v=3Am-iad_Gkg&index=5&list=PLxefhmF0pcPmtdoud8f64EpgapkclCllj
If anyone can help me then thank very much.
My activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
tools:context=".MainActivity">
<include
android:id="#+id/main_page_toolbar"
layout="#layout/app_bar_layout">
</include>
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabLayout
android:id="#+id/main_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/main_tabs_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/appBarLayout">
</android.support.v4.view.ViewPager>
</RelativeLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity
{
private Toolbar mToolbar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mToolbar= (Toolbar) findViewById(R.id.main_page_toolbar);
setSupportActionBar(mToolbar);
getSupportActionBar().setTitle("Chatterfly");
}
}
app_bar_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_app_bar"
android:background="#color/colorPrimary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.v7.widget.Toolbar>
I expect to have my app have an actual app bar where which has chats groups and contacts in it. Which right now isnt showing up when I run the app it only shows the Title of my app.
You need to add tab into your tab layout in order to show tab there by doing somehting like this tabLayout.addTab(tabLayout.newTab().setText(title));
As reference you can also look at this code, you can ignore the fragment adapter add the moment if you don't need it at the moment.
There are 100+ layouts in a resource folder on android, I can go through them one by one and look at the preview in android studio. They all utilise code like:
tools:text="text for preview"
tools:visibility="visible"
Is there a way to inflate all those one after another in a list/linear layout? And upgrade the tools:xyz attribute to be shown as the real android:xyz attribute in this view
Context&Purpose: To show them in the app under a debug menu dedicated specifically to show available layouts. This is to communicate with both other developers and people without android studio.
I want to avoid doing it manually as it needs to be maintained and that can end very badly for debug functionality such as this. (And that it is a lot of layouts does not help either of course)
After writing it down it feels unlikely, but maybe someone out there have a nice angle on this?
Depending on the complexity of each layout, inflating a hundred of them at once could be quite taxing. You may run out of memory, or get a fair bit of jank. If you are OK with this, then I would say try using the include tag in your debug screen layout
A simple/naive implementation would be something like
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/A"/>
<include layout="#layout/B"/>
<include layout="#layout/C"/>
<include layout="#layout/D"/>
...
</LinearLayout>
I probably wouldn't recommend doing this, but it might get the job done.
As far as the second part of your question, using tools values as actual values, I don't think there is a way to accomplish this. In fact the tools values are not even available during run time as they are stripped out during the build process.
<LinearLayout 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"
android:gravity="center"
android:orientation="vertical"
tools:context="com.bignerdranch.android.geoquiz.CheatActivity">
<TextView
android:id="#+id/answer_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="24dp"
tools:text="Answer"/>
I am a novice in programming. I started with Big Nerd Ranch programming book. I came across this code. In the book it is stated as:
"This namespace allows you to override any attribute on a widget for the
purpose of displaying it differently in the Android Studio preview. Since TextView has a text attribute,
you can provide a literal dummy value for it to help you know what it will look like at runtime. The
value “Answer” will never show up in the real app. Handy!"
What does that actually mean? I am completely new. I know this is foolish question, please help me in this.
Thanks to that line
xmlns:tools="http://schemas.android.com/tools"
you can use in all your XML something like that
tools:text="Answer"
Thanks to that line
xmlns:android="http://schemas.android.com/apk/res/android"
you can use in all your XML element the android attribute, for example
android:id="#+id/answer_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="24dp"
The book you're reading is a good book, keep continue and don't give up!
Tools is basically a collection of extra properties you can add to your TextView that assist you when designing layouts in Android Studio. In this particular example, tools:text allows you to put a fake value into your TextView which will only show up in the the layout preview in Android Studio.
This will allow you to see what a TextView looks like when designing your layout in Android Studio, but you don't have to worry about removing that dummy text from your layout when you build a "real" version of your app for a phone.
See also: Tools Attribute Reference
I started with development with material design.
My layouts and styles are separated in those for pre-lollipop devices and those for lollipop and higher.
E.g i use
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
style="#style/Toolbar" />
In my pre-lollipop layout file and
<Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
style="#style/Toolbar" />
in the other one.
Therefore I am forced to use two different objects in the related activity class. That confuses me a lot and leads to confusing code.
I know how to distinguish between API levels via
Build.VERSION.SDK_INT
Nevertheless what is the best approach to solve this problem?
Thank you for answers
i usually use android.support.v7.widget.Toolbar, because it's compatible with other API. The regular one will give you a lot of problems if you use it a lot in your code.
I want to ask you, if is possible in Android to make a control, which will take my own parameters.
I want, that my control will looks like:
<my.own.control
android:style
attributes
>
<include name=”” value=””>
<include name=”” value=””>
</my.own.control>
or
<my.own.control
Android:style
attributes
>
<include>
<name></name>
<value></value>
</include>
<include>
<name></name>
<value></value>
</include>
</my.own.control>
The reason why I want to do it this way, is to dynamically edit includes.
The most important question is, how to read includes on initialize.
Or do you have another advice?
Unfortunately this is not possible.
There is an open bug on the android project for it that was reviewed and accepted by Romain-gui, one of the lead android developers at google.
http://code.google.com/p/android/issues/detail?id=14532
There is however a workaround, it is explained very well at http://kevindion.com/2011/01/custom-xml-attributes-for-android-widgets/