Define list view with static elements on android in xml? - android-layout

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

Related

android studio expandable bottom sheet with recycleview

I'm trying to achieve something like this:
as you can see the bottom sheet is expandable when there is more than one line of the recycleview.
I want to implement the same thing in the profile page so that if posts are more than three lines then I can expand the bottom sheet, then I can scroll the recycleview (when the sheet is expanded).
my current xml:
<LinearLayout
android:id="#+id/allPosts"
android:layout_below="#+id/userinfo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:paddingTop="5dp"
android:paddingRight="5dp"
android:paddingLeft="5dp"
android:background="#drawable/rounded_behind_recycleview"
android:orientation="vertical"
android:elevation="1dp">
<com.taimoorsikander.myapplication.Widgets.B_RecycleView
android:id="#+id/recycle_view"
android:overScrollMode="never"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="match_parent"/>
</LinearLayout>
^
it looks like the image I attached but it is not expandable yet.
is this possible in Android Studio? if yes, please help.
In this tutorial they teach you how to set the Behaviour in the BottomSheetFragment,
take a look it's really helpful, there you will find how to set the Behaviour that you want with BottomSheetBehaviour.from(...)...
Kotlin language
Basically you have to set the height(Ex: peekHeight = 50) you want than and set "false" to hide the bottomSheet and "true" to (isDraggable).
There is 2 ways of doing this declarative in the XML or programmatically, I'll show the first:
1º Your first layout needs to be CoordinatorLayout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
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"
tools:context=".MainActivity">
<include layout="#layout/bottom_sheet" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
2º The bottomSheetLayout:
<?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"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:behavior_hideable="false"
app:behavior_peekHeight="100dp"
app:behavior_skipCollapsed="true"
app:layout_behavior="#string/bottom_sheet_behavior">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
app:cardBackgroundColor="#81D4FA" />
</LinearLayout>
Pay attention to this TAGS, which states the behavior and state of the BottomSheet:
app:behavior_hideable="false"
app:behavior_peekHeight="100dp"
app:behavior_skipCollapsed="true"
app:layout_behavior="#string/bottom_sheet_behavior"

Place WebView below GridView in Android Layout?

Below is the xml layout for my Android App. I am trying to positions a webview below the gridview on the screen.
Can anyone help explain what I need to do to get that to work?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/db1_root"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/HomePage"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<GridView
android:id="#+id/Grid"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="90dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
android:scrollbars="vertical" />
<WebView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/webView1" />
</LinearLayout>
</LinearLayout>
Thanks
I think two minor changes will help make this work for you. First, when creating a LinearLayout, the android:orientation attribute is required to indicate whether the children should be added horizontally or vertically. Since you want one view on top of the other, add android:orientation=vertical to the HomePage LinearLayout. Second, your GridView currently has a android:layout_height of fill_parent. This will cause it to expand vertically and fill up the entirety of the LinearLayout, which will keep your WebView from being displayed. Try changing this attribute to wrap_content.
Making the height of both children wrap_content could possibly cause you to have some empty space in your app. If you need either the GridView or WebView to take up all of the empty space in the view, you can use the android:layout_weight attribute. Assign the view you want to expand to fill all remaining space after the rest are drawn the attribute like this: android:layout_weight=1. (Here, the 1 represents 100% of the remaining space) If you want more granular control over what percentage of the parent your children occupy, look into using decimal values with the android:layout_weight attribute or android:weightSum on the parent in conjunction with a android:layout_weight on each of the children. Hope this helps!
Use android:layout_height="wrap_content" in Gridview
Set orientation attribute in inner linear layout.
android:orientation="vertical"
Give fixed height of WebView and set android:layout_weight="" in both child.
Try below code and change according to your webview height and grid view height.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/db1_root"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/HomePage"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:weightSum="2"
android:orientation="vertical">
<GridView
android:id="#+id/Grid"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:columnWidth="90dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
android:layout_weight="1"
android:scrollbars="vertical" />
<WebView
android:layout_width="fill_parent"
android:layout_height="200dp"
android:layout_weight="1"
android:id="#+id/webView1"
/>
</LinearLayout>
</LinearLayout>
In above code I give Height of WebView 200dp change according to your requirement.

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

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

Android: How to build tabs like the ones show on Android UI Page

So android goes out of its way to build this nice UI guide for everyone to use. But I don't see anywhere where it shows code examples of how to build these elements.
The UI guidelines for tabs can be found here. http://developer.android.com/design/building-blocks/tabs.html.
Does anyone know how to create tabs likes the this one?
Any help would be appreciated, thanks.
SOLUTION POSTED
Ok, so here is what I ended up doing after probably wasting about 10 hours trying to make some good looking tabs.
First I scrapped the whole idea of using android's implementation of tabs. For one reason the tab host widget is suppose to deprecated for the action bar, but the action bar only works from android 3 on.
I finally figured out that if a used a linear layout and as the background for the linear layout i put the image I wanted to use (using a 9 patch image). Then create another linearlayout and textview in order to put text over top of that linearlayout. Then make your linear layout clickable. Then as you get more advanced you can make you linear layout background a xml selector and you are good to go. Incase you didn't get all that here is my code.
LinearLayout
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:background="#color/main_screen_bg_color"
android:orientation="horizontal"
android:padding="2dp" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#drawable/selector_not_current"
android:clickable="true"
android:onClick="onClickSub"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="Example 1"
android:textColor="#color/black"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#drawable/selector_current"
android:clickable="true"
android:onClick="onClickFoodDetails"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="Example 2"
android:textColor="#color/black"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
Example Selector
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/selected_pressed_tab" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#drawable/selected_pressed_tab" /> <!-- focused -->
<item android:drawable="#drawable/selected_tab" /> <!-- default -->
Hope this helps everyone. Android tabs were just too difficult an annoying to work with that it was easier just to make my own from scratch. Good Luck!
do something like this.
this is a full working code. enjoy
somewhere in oncreate method of activity extending Tabactivity
tabHost = getTabHost();
Intent intent;
intent = new Intent().setClass(this, FirstActvity.class);
setupTab("NearBy", intent, R.drawable.firsttabdrawable);
intent = new Intent().setClass(this, SecondActivity.class);
setupTab("History", intent, R.drawable.secondtabdrawable);
intent = new Intent().setClass(this, ThirdActivity.class);
setupTab("Setting", intent, R.drawable.thirdtabdrawable);
define setupTab methods as
private void setupTab(String tag, Intent intent, int selectorId) {
View tabView = LayoutInflater.from(tabHost.getContext()).inflate(R.layout.view, null);
tabView.setBackgroundResource(selectorId);
TabSpec setContent = tabHost.newTabSpec(tag).setIndicator(tabView).setContent(intent);
tabHost.addTab(setContent);
}
view.xml 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"
>
</LinearLayout>
and firsttabdrawable.xml in drawable folder as
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When selected, use grey -->
<item android:drawable="#drawable/selectedfirsttabimage"
android:state_selected="true" />
<!-- When not selected, use white-->
<item android:drawable="#drawable/notselectedfirsttabimage" />
</selector>
define secondtabdrawable.xml and thirddrawable.xml in the same way
The tabs you need are part of the ActionBar. Specifically they are displayed when the ActionBar is in Navigation Tab mode.
http://developer.android.com/guide/topics/ui/actionbar.html
(see under "Adding Navigation Tabs")
You may want to use www.ActionbarSherlock.com which is a library that will give you the ActionBar on nearly all versions of Android. It works the same as the official one, and includes the tabs.
Do not use the TabActivity any more, it's old and being deprecated. ActionBar is the future.

Using "merge" and "include"

I'm trying to put a copyright image in the bottom of my LinearLayout with an "include tag". I am doing it successfully, but when I'm trying to add android:layout_marginTop="330dp" or android:layout_marginBottom="20dp" for instance to my include - it doesn't show in the UI.
What is the problem ?
Here is my code:
copyrights.xml:
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:src="#drawable/copyrights"
android:id="#+id/copyrights"
android:layout_width="fill_parent"
android:layout_height="40dip"/>
</merge>
mylayout.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:padding="10dip"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<include layout="#layout/copyrights" android:layout_marginTop="330dp"/>
</LinearLayout>
The <include /> tag is basically a copy&paste instruction for the android layout framework. It's not an actual object in your layout hierachy. That means that it can't have margin/padding/size/any other layout property.
Assign the margin to the <ImageView /> in your layout instead.

Resources