I have to design a screen where at the top I need to show some user details and then at center I have a tab bar and bottom part will show the page selected from the tab. But I am not able to show the tabbar at center. It can set either at top or bottom of the screen. How can I set the tabbars at center so that we can show some information at top of the bar and show the selected page of tabs at bottom part?
In this example image I need to show the user profile pic, username, and some other details of user at top where "Material is good" written. and below that the tabbar like this image.
You may have to create View pager, Tab Layout, fragments etc..
below is the project that i made similar to your request go though it...
Hers the github link
i hope it helps...:)
Do you want to achieve it like following screenshot?
If so , you could download this demo, Then changed Main.axml like following code.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="name tom"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="age 10"
/>
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="50">
<android.support.v4.view.PagerTabStrip
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:paddingTop="10dp"
android:textColor="#fff" />
</android.support.v4.view.ViewPager>
</LinearLayout>
Related
When I click on a Marker inside a MapFragment, two buttons appear on the bottom of the map (for route and search). How can I customize those buttons?
I searched for some tips here but only find how to add buttons to the info window...
Thanks.
You can use a FrameLayout with 3 children, and set the android:visibility of the bottom buttons to invisible.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:name="com.google.android.gms.maps.SupportMapFragment"
/>
<Button
android:layout_gravity="bottom|left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
android:text="Button 1"/>
<Button
android:layout_gravity="bottom|right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
android:text="Button 2"
/>
</FrameLayout>
(If you dont set the android:visibility="invisible", you can see these 2 buttons in the bottom of your mapFragment, see image below)
In your onMarkerClick method, you can change the invisibility of the these 2 buttons to visible, sample code:
button1.setVisibility(View.VISIBLE);
button2.setVisibility(View.VISIBLE);
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>
So, I have this one activity that looks like this:
http://i.imgur.com/UzexgEA.jpg
As you can see, it has a button, a list and a button.
If certain conditions are met, I want to hide both buttons just show the list, but as you can see in the next image, the buttons are still taking up space:
http://i.imgur.com/OyLIfSk.jpg
So my question, what can I do to enlarge the list to take that space out?
Here is my layout for the buttons and the list:
<?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" >
<Button
android:id="#+id/findSelected"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="registrarAsistencia"
android:text="Registrar Asistencia" />
<ListView
android:id="#+id/listaAlumnos"
android:layout_width="fill_parent"
android:layout_height="376dp"
android:layout_weight="2.29" />
<Button
android:id="#+id/btnChecarBoxes"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="seleccionarTodosNinguno"
android:text="Seleccionar / Deseleccionar todo" />
</LinearLayout>
And here it is the layout for the list's contents:
<?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="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:orientation="vertical" >
<TextView
android:id="#+id/rowTextView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:padding="10dp"
android:textSize="16sp"
android:textStyle="bold"/>
<TextView
android:id="#+id/rowTextView2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:padding="10dp"
android:textSize="16sp"
android:textStyle="italic"/>
</LinearLayout>
<CheckBox
android:id="#+id/CheckBox01"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:focusable="false"
android:padding="10dp" />
</RelativeLayout>
Do not make the buttons View.INVISIBLE. Make the buttons View.GONE. There are three visibility states:
visible (normal)
invisible (pixels not drawn, but still takes up space)
gone (not included in rendering)
In the java code
yourView.setVisibility(View.GONE);
and in the XML code
android:visibility="gone"
Thier are 3 state
visible: normal
invisible : takes space and invisible
gone : no space and no visibility
Use
android:layout_height="0dp"
android:layout_weight="1"
In addition to #CommonsWare's answer
You should use a layout that fits well in all screen sizes. If you give you layout a fixed height like android:layout_height="376dp" it will look good only on the device (or emulator) you're testing on. What you have to do is to make sure that your listview takes up all (and only) the space left by your buttons.
Check out this article and this answer to better understand layout weights.
for hiding your widget
yourEditText.setVisibility(View.GONE)
for visbility of your widget
yourEditText.setVisibility(View.VISIBLE)
I am creating an application that contains a header with a button on the right that should slide a list view to left when I click on it(similar to the chat list in Facebook)
-->
When I was including this header without putting the list view in it, it was working properly. But now I am inserting this list view inside the .xml file of the header (because the header is always shown for the user and he can click on this list view button in any layout that is shown for him).
The problem that I want to include this header to all the other layouts without changing the way they looks and show this list each time he click on the button.
I searched and found a lot of answers but every solution was about making the same as I did in the previous screen shots in each page which is not an optimistic solution for multiple pages.
*I am working on API level 10 and want to find the solution without using Actionbar.
Tell me please if more information would be helpful, any help will be really appreciated.
Thanks in advance.
UPDATE my xml file :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/GeneralRelativeLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<RelativeLayout android:id="#+id/rel_layout"
android:layout_width="200dp"
android:layout_height="fill_parent"
android:background="#android:color/white" android:layout_alignParentRight="true">
<LinearLayout android:id="#+id/fake_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="gone"></LinearLayout>
<ListView android:id="#+id/list_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:background="#android:color/background_dark"
></ListView>
</RelativeLayout>
<RelativeLayout android:id="#+id/rel_layout_second"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/black">
<LinearLayout android:id="#+id/lin_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#android:color/background_light"
android:orientation="vertical"
android:layout_centerHorizontal="true" android:layout_alignParentTop="true">
<Button android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="slide"
android:layout_gravity="right|center"></Button>
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
Try to create a RelativeLayout for the ListView with a android:visibility="gone" and all the other components in the same User Interface inside another RelativeLayout.
Then change its visibility upon the state of the menu if it's opened or closed.
Guess this should be a way to go:
<?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:clickable="false">
<LinearLayout
android:id="#+id/thisistopbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:paddingLeft="3dp"/>
<include here listview etc../>
</LinearLayout>
you can also make the top bar general and include it in every screen. But the basic idea is like above xml, and put the button on the top bar.
I am using my own subclass of Dialog and trying to build it in such a way that if there is not enough content to fill the screen, it will shrink to fit the content (i.e. wrap_content). I can do this with the following layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/dialog_bg">
<RelativeLayout
android:id="#+id/title_container"
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center_vertical"
android:background="#drawable/dialog_title_bg">
. . .
</RelativeLayout>
<LinearLayout
android:id="#+id/button_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/content"
android:orientation="horizontal">
. . .
</LinearLayout>
<FrameLayout
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/title_container">
</FrameLayout>
</RelativeLayout>
(I've removed the bits that - I think - are not important). This works great when the content doesn't fill the screen:
But when the content is big, it pushes the buttons off the bottom:
A slight adjustment, I change the button_container so it's got layout_alignParentBottom="true" and the content is above it, like so:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/dialog_bg">
<RelativeLayout
android:id="#+id/title_container"
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center_vertical"
android:background="#drawable/dialog_title_bg">
. . .
</RelativeLayout>
<LinearLayout
android:id="#+id/button_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
. . .
</LinearLayout>
<FrameLayout
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/title_container"
android:layout_above="#+id/button_container">
</FrameLayout>
</RelativeLayout>
Now it works for when the content is too big for the screen:
But when the content does not fill the screen, the dialog still does:
How can I get the best of both worlds? I could probably do it in code by setting the "maxHeight" to the height of the screen minus the dialog border and the height of the title and buttons, but that seems a bit hacky to me. I tried looking at the implementation of AlertDialog (which seems to handle this situation correctly) but it looked like black magic to me...
Edit: as requested, here is the content of the layout file that I add to the FrameLayout that represents the "content" of the dialog:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ListView
android:id="#+id/report_items"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" />
</RelativeLayout>
Instead of frame layout, better to use the linear. It will work.. If u post the xml code then I can check..