I want to make a View that consists of few other standard elements. There are ProgressBar, TextViews and ImageView. I declared how to layout them in res/layout/myView.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_marginRight="10dp"
tools:ignore="HardcodedText,ContentDescription" >
<ImageView
android:id="#+id/qItemImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/qItemNameTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="5dp"
android:layout_toRightOf="#id/qItemImageView"
android:gravity="center"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<ProgressBar
android:id="#+id/qProgressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/qItemNameTextView"
android:layout_alignParentRight="true"
android:layout_below="#+id/qItemNameTextView"
android:max="100"
android:progress="50" />
<TextView
android:id="#+id/qLevelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/qItemImageView"
android:layout_alignTop="#id/qItemImageView"
android:text="7"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="bold" />
<TextView
android:id="#+id/qTimeTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/qProgressBar"
android:layout_alignLeft="#id/qProgressBar"
android:layout_alignRight="#id/qProgressBar"
android:layout_alignTop="#id/qProgressBar"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="01:01:01"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/black" />
</RelativeLayout>
I also created a new class, but do not know how can I bind it to this resource file...
import android.content.Context;
import android.view.View;
public class QueueRowView extends View {
public QueueRowView(Context context) {
super(context);
}
}
How can I make my control look like specified in layout file?
Is there a reason why you need a separate class for this layout? You could just include this layout file into another one. If you really want the extra class, then look at Fragments.
Related
Hi I have made layout with couple of ImageView and TextView elements due to reduction of code duplication.
I have occurred to two problems:
I need to update these elements inside of layout using data binding, but I don't know how can I access to them in order to update images and texts?
The visibility of layout should be bind from VM object(default visibility is GONE) but it doesn't work. Even if I update VM setter for visibility, the layout is till visible on the screen.
The code:
included layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/details"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#FF0000">
<ImageView
android:id="#+id/image_details"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/text_details"
android:text="details"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/favorites"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#00FF00">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="details"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/record"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#0000FF">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="details"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/remind_me"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#FF0000">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="details"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/return_to_begin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#00FF00">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="details"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
activity layout(this is a snippet, the whole xml is too large)
<include layout="#layout/manu_layout"
android:layout_above="#+id/info"
android:layout_alignParentRight="true"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:visibility="#{vm.infoMenu}"/>
viewModel method for visibility:
public void setInfoMenu() {
if(menuVisibility == View.VISIBLE){
menuVisibility = View.GONE;
setMediaControlView(false);
}else {
menuVisibility=View.VISIBLE;
setMediaControlView(true);
}
notifyPropertyChanged(BR.infoMenu);
}
#Bindable
public int getInfoMenu(){
return menuVisibility;
}
Please let me know if you need any additional code snippet.
Can you please help me to solve these problems?
Thanks,
Hogar
Make sure you have <layout> as a root tag of your xml file if you want to use DataBinding.
You can have a id of your <include> and acceess controls of included layout via it. For example you have a id as 'included' of your <include> then you can access it as binding.included.details or binding.included.favourite
My main activity(one xml file, and one java file) contains a help button, and I want to display the whole layout(including the paragraph I typed on a Textview) after button clicked. It was successfully launched, all imageview were displayed but not the Textview.
Here's the content of the xml file:
<?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="#drawable/tbs_background"
tools:context="limitless.the_bat_signal.aboutPage">
<TextView
tools:text="about the app"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tbs_text_about"
android:textStyle="normal|italic"
android:textAlignment="center"
android:textColor="#android:color/darker_gray"
android:fontFamily="sans-serif"
android:layout_below="#+id/tbs_title_text"
android:layout_centerHorizontal="true"
tools:ignore="UnusedAttribute" />
<TextView
tools:text="#string/about"
android:id="#+id/tbs_text_aboutDetails"
android:layout_width="300dp"
android:textColor="#android:color/darker_gray"
android:textSize="16sp"
android:layout_height="wrap_content"
android:layout_below="#+id/tbs_text_about"
android:layout_centerHorizontal="true"
android:layout_marginTop="12dp" />
<ImageView
android:layout_height="wrap_content"
app:srcCompat="#drawable/tbs_title_text"
android:id="#+id/tbs_title_text"
android:adjustViewBounds="true"
android:layout_width="250dp"
android:layout_below="#+id/tbs_icon"
android:layout_centerHorizontal="true"
tools:ignore="ContentDescription" />
<ImageView
app:srcCompat="#drawable/tbs_icon"
android:layout_marginTop="14dp"
android:id="#+id/tbs_icon"
android:layout_width="128dp"
android:layout_height="128dp"
tools:ignore="ContentDescription"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<Button
android:id="#+id/tbs_home"
android:background="#drawable/tbs_home"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/tbs_title_text"
android:layout_toEndOf="#+id/tbs_title_text"
android:layout_marginBottom="10dp" />
</RelativeLayout>.
Then my Activity 2 named aboutPage calling out the XML file above:
public class aboutPage extends AppCompatActivity {
Button btn_help;
TextView tbs_title_text;
TextView tbs_text_about_details;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_about);
}
}.
I'm new to android, please tell me what am I missing. Thanks!
The text attribute in your code is wrong, the namespace should be android:text="#string/about" instead of tools:text=="#string/about".
So the resulting textview will look like,
<TextView
android:text="about the app"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tbs_text_about"
android:textStyle="normal|italic"
android:textAlignment="center"
android:textColor="#android:color/darker_gray"
android:fontFamily="sans-serif"
android:layout_below="#+id/tbs_title_text"
android:layout_centerHorizontal="true"
tools:ignore="UnusedAttribute" />
Fix it and you will be good to go.
The problem is you're using tools:text this is only for design view and will not translate to code. Use android:text instead.
Ok, I realize this is kind of a strange question but I have no idea what is causing it.
I have created a custom view with a square. I've added a few of those to the activity with defining it in the xml of the activity, so everyone of them has a unique ID. Each of them can be manipulated (change the color of the square) with for example the button click. All was working well until I clicked on some EditText I also had defined in my activity. And for some reason OnDraw() of my custom view fired. All of the custom views defined in that activity were updated with the same color.
I have no idea why this fires when I click the EditText. Any EditText. I have tried adding a new one and it is the same.
<?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"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="#dimen/activity_horizontal_margin">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editText"
android:singleLine="true"
android:layout_alignTop="#+id/button"
android:layout_toLeftOf="#+id/button"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Send"
android:id="#+id/button"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/modesList"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:layout_marginTop="#dimen/activity_horizontal_margin"
android:layout_above="#+id/editText" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Text"
android:id="#+id/textView3"
android:layout_above="#+id/editText"
android:layout_centerHorizontal="true" />
<com.zavod404.orglce.ledcontroller.ModeColorsView
android:id="#+id/experiment"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
This is my layout. Some of the custom view are on other layouts and they too get updated when I click on whichever EditText.
I have a header that i have to include in multiple activities and i want to handle the OnClickListener for the Buttons from same activity. i followed this question Button Onclick Listener in included layouts
but in my case it doesnot work.
i have common_header.xml as:
<?xml version="1.0" encoding="utf-8"?>
<merge
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:id="#+id/layout_top_bar"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:clickable="true"
android:background="#color/titlebarBackground"
>
<ImageButton
android:id="#+id/btn_menu"
android:layout_width="52dp"
android:layout_height="52dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:contentDescription="menu"
android:background="#drawable/borderless_button_unselected"
android:src="#drawable/menu"
/>
<TextView
android:id="#+id/txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/btn_account"
android:textColor="#color/titlebarForeground"
android:textSize="16sp"
android:text="#string/signin"
android:background="#drawable/transparent_signin_selector"
/>
<ImageButton
android:id="#+id/btn_account"
android:layout_width="52dp"
android:layout_height="52dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:contentDescription="menu"
android:background="#drawable/borderless_button_unselected"
android:src="#drawable/account"
/>
</RelativeLayout>
<ListView
android:id="#+id/listview_account"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:divider="#color/menuDivider"
android:dividerHeight="1px"
android:layout_below="#+id/layout_top_bar"
android:visibility="gone"
>
</ListView>
<ListView
android:id="#+id/listview_menu"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:divider="#color/menuDivider"
android:dividerHeight="1px"
android:layout_below="#+id/layout_top_bar"
android:visibility="gone"
>
</ListView>
</merge>
and in another layout i have used it like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/appBackground" >
<com.example.myApp.MenuView
android:id="#+id/common_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button
.../>
<Button
.../>
</RelativeLayout>
my MenuView class is:
public class MenuView extends RelativeLayout {
private LayoutInflater inflater;
public MenuView(Context context, AttributeSet attrs) {
super(context, attrs);
inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
inflater.inflate(R.layout.common_header, this, true);
}
}
it doesnot show me any error the app runs but the common_header is not merged in my layout.i couldnot figure out where is my mistake.so please help.
You are overriding RelativeLayout so just have a RelativeLayout as the root element of your layout instead of the merge tag.
You can then use it just as you are using it.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:id="#+id/layout_top_bar"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:clickable="true"
android:background="#color/titlebarBackground"
>
<ImageButton
android:id="#+id/btn_menu"
android:layout_width="52dp"
android:layout_height="52dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:contentDescription="menu"
android:background="#drawable/borderless_button_unselected"
android:src="#drawable/menu"
/>
<TextView
android:id="#+id/txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/btn_account"
android:textColor="#color/titlebarForeground"
android:textSize="16sp"
android:text="#string/signin"
android:background="#drawable/transparent_signin_selector"
/>
<ImageButton
android:id="#+id/btn_account"
android:layout_width="52dp"
android:layout_height="52dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:contentDescription="menu"
android:background="#drawable/borderless_button_unselected"
android:src="#drawable/account"
/>
</RelativeLayout>
<ListView
android:id="#+id/listview_account"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:divider="#color/menuDivider"
android:dividerHeight="1px"
android:layout_below="#+id/layout_top_bar"
android:visibility="gone"
>
</ListView>
<ListView
android:id="#+id/listview_menu"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:divider="#color/menuDivider"
android:dividerHeight="1px"
android:layout_below="#+id/layout_top_bar"
android:visibility="gone"
>
</ListView>
</RelativeLayout>
A short explanation about merge tags, even though it is not what you are looking for, but for other googlers that this may help:
Merge tags are used for reusing layout files and should be used as root of file that is then used from a different layout file with an include tag:
<include layout="#layout/file_name_of_file_with_merge_root">
This way the layouts are merged and the hierarchy is minimized but click listeners are not reused.
Many popular apps like Google Maps, Facebook, Foursquare, etc. have header and/or footer bars on most of their activities. These headers often include very useful buttons, and
I would like to create one for my app. Does anyone know how they are done? I haven't been able to find anything so far.
Here are some pictures of what I mean:
http://www.flickr.com/photos/calebgomer/6262815430
http://www.flickr.com/photos/calebgomer/6262815458
Using this way you can make your header-footer xml and use it to any of your activity also you just need to write code for the controls in header-footer once in HeaderFooter.java and can access it your project.
Build your HederFooter.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:weightSum="10"
android:id="#+id/commonlayout" android:background="#FFFFFF">
<LinearLayout android:id="#+id/llheader"
android:layout_width="fill_parent" android:layout_height="0dp"
android:background="#drawable/bar" android:layout_weight="1">
<RelativeLayout android:id="#+id/relativeLayout1"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_gravity="center">
<Button
android:id="#+id/Button_HeaderFooterSubscribe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="2dp"
android:layout_centerVertical="true"
android:background="#drawable/subscribe"
/>
<Button
android:id="#+id/Button_logout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="2dp"
android:layout_centerVertical="true"
android:background="#drawable/logout"
/>
<Button
android:id="#+id/Button_playlist"
android:layout_marginLeft="2dp"
android:layout_width="wrap_content"
android:layout_centerVertical="true"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:background="#drawable/tempadd"
/>
</RelativeLayout>
</LinearLayout>
<LinearLayout android:id="#+id/lldata"
android:layout_weight="8" android:layout_width="fill_parent"
android:layout_height="0dp" android:background="#FFFFFF">
</LinearLayout>
<LinearLayout android:id="#+id/llfooter"
android:layout_weight="1" android:layout_width="fill_parent"
android:orientation="horizontal" android:layout_height="0dp"
android:visibility="visible" android:background="#drawable/fbg"
android:weightSum="5.0" android:gravity="center"
android:layout_margin="0dp">
<Button android:id="#+id/home" android:layout_height="wrap_content"
android:layout_width="wrap_content" android:layout_weight="1"
android:background="#drawable/home" android:textColor="#FFFFFF"
android:padding="10px"></Button>
<Button android:id="#+id/issue" android:layout_height="wrap_content"
android:layout_width="wrap_content" android:layout_weight="1"
android:background="#drawable/issue" android:textColor="#FFFFFF"
android:padding="10px"></Button>
<Button android:id="#+id/browse" android:layout_height="wrap_content"
android:layout_width="wrap_content" android:layout_weight="1"
android:background="#drawable/browse" android:textColor="#FFFFFF"
android:padding="10px"></Button>
<Button android:id="#+id/search" android:layout_height="wrap_content"
android:layout_width="wrap_content" android:layout_weight="1"
android:background="#drawable/search" android:textColor="#FFFFFF"
android:padding="10px"></Button>
<Button android:layout_height="wrap_content" android:id="#+id/favorite"
android:background="#drawable/favorite" android:layout_width="wrap_content"
android:layout_weight="1"
android:textColor="#FFFFFF" android:padding="10px"></Button>
</LinearLayout>
</LinearLayout>
Then Create One HeaderFooter.java Activity
public class HeaderFooter extends Activity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.headerfooter);
}
}
Now Extend above activity to your all other activities and inflate your particular view in the middle layout of the headerfooter.xml
public class Home extends HeaderFooter
{
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
ViewGroup vg = (ViewGroup) findViewById(R.id.lldata);
ViewGroup.inflate(Home.this, R.layout.home, vg);
}
}
Just create a xml as you need.
Add these XML to your other screens using tag in your other Screen XMLs.
Sample is here.
You can handle the button click as you need in each activity.
Hope this helps.
Design Xml layout with header,footer and body.you have to extend the main activity every time,you have to change body by inflating desired layout.
I think the element that you're liking in those layouts is the fact that they're using a FrameLayout for the lower part of the display.
They're probably doing something like this:
<LinearLayout android:orientation="vertical
.../>
<head layout element>
<FrameLayout element>
<footer layout element>
</LinearLayout>