I want to create an android interface, something like a launcher. For this, I need to make a custom title bar and 2 borders in each side of the screen.
I have several activities in my app, and I need this to be in all of them, so I need to create independent layouts, one with the custom titlebar and another with the borders. The result may be this:
This is the xml for the borders:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/border_left"
android:layout_width="100dip"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_alignParentLeft="true"
android:background="#000000" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/border_right"
android:layout_width="100dip"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_alignParentRight="true"
android:background="#000000" >
</RelativeLayout>
And this is the xml for the tittle:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/title"
android:layout_width="fill_parent"
android:layout_height="26dip"
android:orientation="horizontal"
android:background="#000000" >
The questions are 2:
How can I put in the middle of the titlebar (the red square) a logo (image)?
How can I insert these 2 layouts into the other activities? For example, how could I make my plain main layout include these 2 layouts?
Answer for the second question: include the layout into another layout:
<include
layout = "#layout/custom_tittlebar" >
</include>
I'm still fighting with the titlebar, I want to put the image that way and I'm thinking if this is the best way, or maybe I have to create an image with photoshop setting the logo on it, and then set it as background in the layout.
Related
The main layout for an app I'm writing is on RelativeLayout with a LinearLayout and a FrameLayout inside. In the LinearLayout, there's the buttons and text and stuff the user actually interacts with. Inside the FrameLayout, there's a graphic. The FrameLayout stays in the bottom-right corner and the LinearLayout is at the top.
When displayed on most different size screens, this layout works great. However, there is one device whose screen is too small and just an annoying little bit of this graphic shows. Is there a way to automatically disable an object if there isn't enough room for it in the XML? I know I could programmatically calculate it, but I'm wondering if there's a better way
Here's a the relevant parts of my layout file:
<?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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/buttonLayout">
</LinearLayout>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_below="#id/buttonLayout">
<ImageView
android:layout_width="139dp"
android:layout_height="48dp"
android:layout_gravity="bottom" />
</FrameLayout>
</RelativeLayout>
I want to set the logo of my app to the bottom left hand side of the screen and be in the background. the reason i want to do this is to allow the users to modify the background colors which would not be possible if i simply set the entire activity or layout background to an image to give same impression.
Another way of asking this is how do i set an image to bottom left hand corner and below other controls?
i don't know if i understand correct. but what you ask is pretty simple.
<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"
android:background="#bbbbbb"
>
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="bottom|left"
android:layout_margin="10dp"
android:src="#ffff00" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00000000"
android:orientation="vertical">
<!-- Put your views here -->
</LinearLayout>
</FrameLayout>
you can change the frame layout's background as you wish and keep logo on bottom left corner.
Also you can set your LinearLayout (which you can use any layout. it is up to you) background to transparent so you will see background. and any extra view inside the linear layout (your view container) will be on top always.
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/your_desired_full_background">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher_logo"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"/>
</RelativeLayout>
I am new to ViewPagerIndicator. I am using LineIndicator along with my ViewPager. The default look is tiny blue lines wherever you position them.
However, if I want to, say, change the color and the width and height, how would I do that?
Update
If you look at the sample phones shown, the one in the center has red lines at the bottom. The title of the app says "Line / Styled (via layout)". That is what I am trying to achieve.
You just need to style your LinePageIndicator in your .xml layout file.
EX:
<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="fill_parent"
android:layout_height="fill_parent">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
<com.viewpagerindicator.LinePageIndicator
android:id="#+id/indicator"
android:padding="5dip"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
app:strokeWidth="4dp"
app:lineWidth="30dp"
app:unselectedColor="#FF888888"
app:selectedColor="#FF880000"
/>
</LinearLayout>
I need your advice regarding my design and if you have a better idea (or you agree with me) that it is good. for some reason I have a feeling it is a "stone age programming style" but lets see.
Basically I have my xml relative layout. In the center (vertical and horizenatlly). I want to display "either" 3 buttons OR 3 texts depending on some user input. So what I did is the following:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clipChildren="false"
android:clipToPadding="false" >
<RelativeLayout android:id="#+id/Buttons"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" >
<Button1 .../>
<Button2 .../>
<Button3 .../>
</RelativeLayout>
<RelativeLayout android:id="#+id/Texts"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" >
<TextView1 .../>
<TextView2.../>
<TextView3.../>
</RelativeLayout>
</RelativeLayout>
Depending on the user input in the code I set visibility to either Visible or Invisible
Is this alright? and if not what do you suggest?
What you need is View.GONE, and View.VISIBLE.
With View.GONE - the layout doesn't occupy any space (almost as if it didn't exist at all). If you use View.INVISIBLE, to the user, the view (buttons, or text in your case) will not be visible, but they will still be there on the screen, thus shifting the other view (buttons, or text) up or down (the view won't be in dead center).
TIP: You can use 'android:layout_centerInParent' instead of 'android:layout_centerHorizontal' and 'android:layout_centerVertical'.
In my opinion, what you have done may be primitive, but it is simple, which is good :) But if you still want some options and make life complicated, then
Put each of the blocks in a separate xml and use include.
Make 2 views and then use ViewFlipper to flip them based on user requirements.
But for the simple requirement that you have, I think u r doing fine.
The include option would work something like this,
layout_1.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/Buttons"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" >
<Button1 .../>
<Button2 .../>
<Button3 .../>
</RelativeLayout>
layout_2.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/Texts"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" >
<TextView1 .../>
<TextView2.../>
<TextView3.../>
</RelativeLayout>
your main_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clipChildren="false"
android:clipToPadding="false" >
<include layout="#layout/layout_1" />
<include layout="#layout/layout_2" />
</RelativeLayout>
The include helps you in making reusable layouts and also helps in keeping your xml files grow out of proportions, specially when you have complicated UIs.
First option is:
You can add all the three buttons or textviews in Linearlayout and center it in parent by using android:layout_centerInParent.
Second option is:
You can center the middle button out of all the three buttons and adjust the other two buttons with respective to the middle button. Same way we should also repeat this for textviews. In this option, we should make all the three views visibility to View.GONE explicitly.
I'm using a Relative layout as the root or parent container and I have two buttons to place inside this Layout. The buttons need to be placed one on top of the other. The problem is that I want to position these buttons so that they appear below the center of the view but not directly below. That is within the bottom half of the view I want the buttons to appear halfway along that half portion. I tried adding a the buttons as children of a RelativeLayout (that was centered in the middle) inside the parent RelativeLayout and that sort of achieves what I'm trying to but then the Eclipse complains with a warning stating that one set of Relative Layout tags is useless and that I should consider getting rid of it.
Then I tried giving a one of the buttons a top margin with respect to its parent and then placing the other button under the this button with the top margin. This seems to work until I try it out in other virtual devices and I find out that depending on the screen sizes and dimensions it might or might not appear where I want it to (especially not the case with tablet devices).
Ok, so then I'm not sure how to achieve what I want the right way (without warnings or errors). Here's my current code
<?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"
android:background="#drawable/default_real" >
<Button
android:id="#+id/sm_panel_email_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="300sp"
android:background="#drawable/info_view_email_button" />
<Button
android:id="#+id/sm_panel_web_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/sm_panel_email_button"
android:background="#drawable/info_view_web_button" />
</RelativeLayout>
How about using two layouts and the android:layout_weight attribute
<?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:background="#drawable/default_real"
android:orientation="vertical" >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"/ >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:id="#+id/sm_panel_email_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/info_view_email_button" />
<Button
android:id="#+id/sm_panel_web_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/sm_panel_email_button"
android:layout_centerHorizontal="true"
android:background="#drawable/info_view_web_button" />
</RelativeLayout>
</LinearLayout>