Can I create a android custom control using the xml attributes alone? - android-layout

Is it possible to create a android UI custom control. I need three labels to be placed inside a single Linear Layout. Should I need to extend Linear Layout class for this purpose?
Is it possible without extending the class(Linear layout) - means using a single xml file with a Linear Layout and the required labels alone? Is it possible to use this xml file alone without extending Linear Layout class??
Thanks in advance

use this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
/>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
/>
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medium Text"
/>
</LinearLayout>

Yes, you can. You have to create XML layout, just like in Zaz Gmy's answer and create your cusom view by extending LinearLayout. Then you must inflate this layout in your views code with view as parent container:
inflater.inflate(R.layout.my_layout, this, true);

Related

In Android Studio the widgets are moving up on the screen during emulation

I am new to both Stack Overflow and Android Studio and learning to code now.
I did a basic user and password layout in Android Studio like this:
When I ran this on emulator, it displays the widgets like this:
I tried to change the width of the EditText fields, buttons, but nothing I have tried seems to be working.
How do I solve this?
What am I missing or am I doing something wrong ?
Layout code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
android:weightSum="1">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="233dp"
android:scaleType="fitStart"
android:visibility="visible"
app:srcCompat="#drawable/worldcurrency" />
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Enter ammount"
android:textSize="18sp" />
<EditText
android:id="#+id/dollar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="numberDecimal" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="convert"
android:text="Convert" />
<TextView
android:id="#+id/rupees"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Your layout's parent is a ConstraintLayout, but it's lacking every constraint. ConstraintLayout is characterised by the ability to set constraints to every view, forcing its behaviour across screens of different sizes and orientations.
If you really want to use a ConstraintLayout I suggest taking a look at the ConstraintLayout Documentation. Once you've properly set the constraints, you should have an xml like this (note the constraint* attributes in my Views.
So, your layout has no constraints, it's likely it will end at "random" positions. Moreover, you've set the views coordinates with tools, which is valid only for the layout preview, not for runtime. And moreover, the use of absolute coordinates is very not recommended, since it can cause problems across different screen sizes.
If ConstraintLayout is an optional choice for you, you can change the layout parent to a LinearLayout with vertical orientation, I think it's more suitable for the layout you're building (I'm assuming this by your screenshots).Hope I helped, let me know. Good luck and happy coding!

Keyboard Panel to choose diiferent views(Custom)

I need to make a Panel on which I'll be able to switch between different custom keyboard views that i have designed.
Something like this
My keypad with navigation panel and custom view of my Numeric keypad
At least two strategies can be applied.
Put your custom KeyboardView inside another ViewGroup, ex.:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
\>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Wazup?!"
/>
<org.dodroid.customime.CustomKeyboardView
android:id="#+id/keyboard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:keyBackground="#drawable/samplekeybackground"
android:keyPreviewLayout="#layout/preview"
android:popupLayout="#layout/keyboard_popup_keyboard"
/>
</LinearLayout>
Instead of TextView can be your custom panel.
Create one more Row at top with navigation buttons.

Define list view with static elements on android in xml?

I want to create fragment which would display static menu as a set of rows in a list.
I like iOS method with static cells in a tableview. How can I achieve this in android (so no code is needed to define elements, just xml)
Is there any regular way to define static elements in xml next way
(pseudo-code)
list_view.xml
<List view>
- use element my_row with onclick=row1_clicked and title="row 1"
- use element my_row with onclick=row2_clicked and title="row 2"
- use element my_row with onclick=row3_clicked and title="row 3"
- use element my_row with onclick=row4_clicked and title="row 4"
</List view>
my_row.xml
<My Row>
- text field (title should go here)
- on click (on click should go here)
</My Row>
So basically I want to "include" row in list and do it on xml level (without code).
Unfortunately, list view definition via xml is forbidden. Mess with adapters is required instead.
Some progress can be made using a string-array, e.g.,
<?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" >
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:entries="#array/sports_array"/>
</LinearLayout>
couple with
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string-array name="sports_array">
<item>Shuttle Badminton</item>
<item>Tennis</item>
<item>FootBall</item>
</string-array>
</resources>
source: http://theopentutorials.com/tutorials/android/listview/android-creating-and-populating-listview-items-in-xml/
You can use a vertical LinearLayout nested within a ScrollView to get what you're looking for. Put your "listview" items inside the LinearLayout, and style them to look like elements of a listview.
If you absolutely must use a ListView (e.g. you're using ListFragment), you'll have to use a ListAdapter subclass or roll your own.
Actually there is a way!
Re-using Layouts with include - Tag
Simply define a Layout you want to reuse.
<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:orientation="horizontal">
<ImageView
android:id="#+id/profileImage"
android:layout_width="128dp"
android:layout_height="128dp"
android:src="#drawable/lena" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/profileOnline"/>
</LinearLayout>
Then include it in your ViewGroup as many times as required
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal">
<include layout="#layout/titlebar"/>
<TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/hello"
android:padding="10dp" />
...
</LinearLayout>
You can also override all the layout parameters (any android:layout_* attributes) of the included layout's root view by specifying them in the tag. For example:
<include android:id="#+id/news_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
layout="#layout/title"/>
More information at http://developer.android.com/training/improving-layouts/reusing-layouts.html

In Android, how do I position an image on top of another to look like a badge?

Please see below:
I tried using Absolute layout, but that's deprecated. I appreciate your help, thanks.
RelativeLayout is a great option.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:scaleType="centerCrop"
android:src="#drawable/iconImage" />
<ImageView
android:id="#+id/badge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/icon"
android:layout_alignTop="#+id/icon"
android:src="#drawable/badge" />
If you actually want a badge with a dynamic number/text, then you can make the second ImageView a TextView (or a ViewGroup such as LinearLayout or RelativeLayout) and give it a background drawable and set the text to what you want.
Have a look at the ViewBadger project on github(but keep in mind that you shouldn't try to copy other platforms UI elements in android apps).

Android app RelativeLayout not showing

so im trying to use a relative layout (for basic app tabs at the bottom of the screen) and it is not showing when i place it inside the LinearLayout after 2 other layouts (a LinearLayout and a ScrollView). The ScrollView contains several textViews and scrolls nicely on its own and the linearlayout before it also works nicely, but the relativelayout that i have tried to place at the bottom of the screen does not work.
Here is the general code for what i am trying to do:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:orientation="vertical"
android:background="#drawable/common_bg"
android:layout_height="fill_parent">
<LinearLayout android:layout_width="fill_parent"
android:layout_height="50dp">
<TextView android:layout_height="50dp"
android:text="Heading"
android:gravity="center"
android:textSize="17dp"
android:textColor="#color/white"
android:textStyle="bold"
android:layout_width="fill_parent">
</TextView>
</LinearLayout>
<ScrollView android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="none"
android:layout_gravity="top"
android:layout_marginBottom="60dp">
<LinearLayout android:layout_width="fill_parent"
android:orientation="vertical"
android:paddingTop="15dp"
android:layout_weight="1"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:layout_height="fill_parent">
<TextView android:layout_width="wrap_content"
android:textColor="#color/white"
android:textSize="18dp"
android:textStyle="bold"
android:text="#string/text"
android:layout_height="wrap_content">
</TextView>
</LinearLayout>
</ScrollView>
<RelativeLayout
android:id="#+id/bottomMenu"
android:layout_width="wrap_content"
android:layout_height="60dp" />
</LinearLayout>
UPDATE: the Relative layout that im using is custom in a way that i cant actually show the code for it here, but it contains a radio group with several buttons.
UPDATE 2: Ok, so I solved the problem by manipulating the layout_height="wrap_content" on the 3 layouts (the first linear, the one holding the scroller, and the bottom relativelayout) as well as manipulating the layout_wieght of each of them until I was satisfied with the way it looked... it doesnt seem like this is the best possible solution, but it worked so i cant complain too much lol...
The relative layout in itself wont be displayed in an xml graphical layout or when you are running the app, it needs a child element to occupy the parent layout, try putting a text view inside the relative layout, it'll be displayed, position it right below the linear layout having the scroll view, it'll work properly, i just tried it with your code and it works

Resources