I want to make a layout as shown in the image below. On the top, there are common widgets required to be there always and similarly at the bottom. The tabs I want only in the middle for the two and should control only the portion which is under those tabs. Common widgets are independent of the tabs.
I tried many ways to achieve this. I am able to get tabs on top or bottom of the display but not at the middle. The tabs are not showing up at all but the objects under the tab are showing overlapping each other in the same display.
Please suggest how to make this layout.
You can use ViewPager Indicator Library.
Download from https://github.com/JakeWharton/Android-ViewPagerIndicator
And make ur layout something like
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/another_bg"
android:orientation="vertical" >
<ImageView
android:layout_width="match_parent"
android:layout_height="50dp"
android:src="#drawable/ic_launcher" />
<com.viewpagerindicator.TabPageIndicator
android:id="#+id/main_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<android.support.v4.view.ViewPager
android:id="#+id/main_pager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_marginTop="0dp"
android:layout_weight="1" />
</LinearLayout>
You can put tab any where u want.
One option is to use a custom layout in the ActionBar
final ActionBar actionBar = getActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
actionBar.setCustomView(R.layout.myactionbar);
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
In your layout (myactionbar) you put the text, the image and manually draw the tabs below them.
It involves some work, since those are not "real" tabs. you can create real tabs and manually call onTabSelected(), onTabUnselected() by setting the onClick() listener to the textViews.
<?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" >
<TextView
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:gravity="center"
android:text="YOUR TEXT" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#android:drawable/btn_star" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3" >
<TextView
android:id="#+id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/tab_indicator_holo"
android:gravity="center"
android:singleLine="true"
android:text="TAB1" />
<View style="#style/SeparatorVertical" />
<TextView
android:id="#+id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/tab_indicator_holo"
android:gravity="center"
android:singleLine="true"
android:text="TAB2" />
<View style="#style/SeparatorVertical" />
<TextView
android:id="#+id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/tab_indicator_holo"
android:gravity="center"
android:singleLine="true"
android:text="TAB3" />
</LinearLayout>
</LinearLayout>
Related
How to remove the space Mikepenz Material Drawer.I used custom layout for profile menu and drawer Items. I didnt set Margin or padding for those views. And i also tried activity horizontal margin to 0.
Help would be appreciated. same margin right side also. Profile menu is Ok. it has no problem.whereas draweritem facing the problem.
Below code is Profile Menu
<?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:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/imgUserProfileImage"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_margin="#dimen/min_margin"
android:src="#drawable/parent" />
<com.CustomTextView
android:id="#+id/txtUserName"
style="#style/label_text_primary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="10dp"
android:text="Noorul"
app:font="#string/montserrat_semi_bold" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="0.3dp"
android:layout_marginTop="#dimen/min_margin"
android:layout_marginLeft="#dimen/min_margin"
android:background="#999999" />
</LinearLayout>
</LinearLayout>
And Below Code is for Drawer Item Menu
<?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:id="#+id/lnrSecond_menu"
android:layout_width="match_parent"
android:layout_height="#dimen/material_drawer_item_secondary"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<View
android:id="#+id/view"
android:layout_width="3dp"
android:layout_height="match_parent"
android:background="#color/primary"
android:visibility="gone"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center">
<ImageView
android:id="#+id/material_drawer_icon"
android:layout_width="#dimen/profile_img"
android:layout_height="#dimen/profile_img"
android:padding="#dimen/most_most_normal_margin"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical|start"
android:orientation="vertical">
<com.CustomTextView
android:id="#+id/material_drawer_name"
style="#style/label_text_secondary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical|start"
android:textDirection="anyRtl"
android:text="Some Secondary Text"
app:font="#string/montserrat_regular"
/>
<com.CustomTextView
android:id="#+id/material_drawer_description"
style="#style/label_text_secondary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:visibility="gone"
app:font="#string/montserrat_regular"
android:text="Some drawer text" />
</LinearLayout>
<LinearLayout
android:id="#+id/material_drawer_badge_container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="right|center">
<com.CustomTextView
android:id="#+id/txtMenuBadge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/min_margin"
android:gravity="center"
android:text="99" />
</LinearLayout>
</LinearLayout>
Where I made the Mistake? Help me i will be grateful to you guys.
The drawer adds this padding because it is default for all items inside the Material Design Guidelines. As there is an issue with API 17 I have to set this programatically in this line:
https://github.com/mikepenz/MaterialDrawer/blob/develop/library/src/main/java/com/mikepenz/materialdrawer/model/BasePrimaryDrawerItem.java#L104
You might also want to post the DrawerItems you use, as the screenshot does not look like you use the default items.
If you already create your own CustomDrawerItem you just want to set the padding to 0px again (If you extend from the BasePrimaryDrawerItem) If you do not extend from it you should be fine.
The drawer does not set this padding on the items anywhere else than here.
I have an issue over Scroll bar in my layout.
My layout contains a scrollbar which contains two layouts. The first layout has static height. And the second latout contains tabHost for tabgroup. Second layout also contains Expandable Gridview.
The issue is, when I load my layout, It shows Tabbar directly and hides the first layout. We can scroll But initially I need to show the top layout instead of tabHost. Can anyone help me to slove this issue?
Thanks in Advance...
I have added my code snippet from xml file.
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/header"
android:fillViewport="true" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<RelativeLayout
android:id="#+id/relay1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true" >
<include
android:id="#+id/cover"
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/coverphoto" />
<ImageView
android:id="#+id/ximg_logo"
android:layout_width="70dip"
android:layout_height="70dip"
android:layout_below="#+id/cover"
android:layout_marginLeft="16dip"
android:layout_marginTop="-42dip" />
<TextView
android:id="#+id/xtxt_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/ximg_logo"
android:layout_marginLeft="5dip"
android:layout_toRightOf="#+id/ximg_logo"
android:ellipsize="end"
android:ems="5"
android:singleLine="true"
android:textColor="#color/sixty_black"
android:textSize="20sp" >
<requestFocus />
</TextView>
<Button
android:id="#+id/xbtn_follow"
style="#style/follow_button_normal"
android:layout_width="95dip"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/cover"
android:layout_marginRight="7dip"
android:background="#drawable/buttons_shape_fill_orange"
android:text="#string/str_follow" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/cover"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#color/fifty_black"
android:orientation="vertical"
android:paddingLeft="3dip"
android:paddingRight="3dip"
android:weightSum="3" >
<RelativeLayout
android:id="#+id/xlay_following"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_alignParentTop="true"
android:layout_marginTop="10dip"
android:layout_weight="1"
android:onClick="following" >
<TextView
android:id="#+id/xtxt_imfollowing"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:textColor="#color/white"
android:textSize="18sp" />
<TextView
android:id="#+id/xtxt_imfollowing_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/xtxt_imfollowing"
android:layout_centerHorizontal="true"
android:padding="5dip"
android:text="#string/str_im_following"
android:textColor="#color/white"
android:textSize="14sp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/xlay_follower"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:onClick="follower" >
<TextView
android:id="#+id/xtxt_myfollower"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dip"
android:textColor="#color/white"
android:textSize="18sp" />
<TextView
android:id="#+id/xtxt_myfollowers_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/xtxt_myfollower"
android:layout_centerHorizontal="true"
android:padding="5dip"
android:text="#string/str_myfollowers"
android:textColor="#color/white"
android:textSize="14sp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/xlay_interests"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_alignParentBottom="true"
android:layout_below="#+id/xlay_follower"
android:layout_centerHorizontal="true"
android:layout_weight="1" >
<TextView
android:id="#+id/xtxt_interests"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dip"
android:textColor="#color/white"
android:textSize="18sp" />
<TextView
android:id="#+id/xtxt_interests_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/xtxt_interests"
android:layout_centerHorizontal="true"
android:paddingBottom="5dip"
android:text="#string/str_interest"
android:textColor="#color/white"
android:textSize="14sp" />
</RelativeLayout>
</LinearLayout>
<RelativeLayout
android:id="#+id/xrl_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#color/fifty_black"
android:padding="10dip" >
<ImageView
android:id="#+id/ximg_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/ic_msg" />
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:id="#+id/relay2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/relay1"
android:layout_marginTop="10dip" >
<TabHost
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dip" >
</TabWidget>
<View
android:layout_width="match_parent"
android:layout_height="1dip"
android:background="#color/orange" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/tab1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:id="#+id/tab2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:id="#+id/tab3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
</LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>
</RelativeLayout>
</RelativeLayout>
</ScrollView>
Of course, the RelativeLayout rl1 overlaps with rl2. They're both match_parent on layout_width. You need to align both layouts with left/right or top/bottom using android:layout_alignParentTop or android:layout_alignParentLeft="true".
However you cannot use it for RelativeLayout. It is used for the UI elements inside RelativeLayout or LinearLayout.
Since you did not post the full layout file with your tab elements or any UI, I cannot give you any xml example.
I have a similar issue and one way that works for my layout is to change the height and visibility like below (using your layout schema as a good example):
<RelativeLayout
android:id="#+id/relay1"
android:layout_width="match_parent"
android:focusable="true"
android:layout_height="0dp"
android:visibility="gone"
>
Notice the android:layout_height and visibility. Of course I know you don't want your first layout to be absolutely hidden always. But this is the idea, and you can do the same with your second layout relay2.
Here's a sample code to hide/show a layout, dynamically. Object relayLayout is your relay1 view.
if "hide the layout" {
relayLayout.setVisibility(LinearLayout.GONE);
}
else {
relayLayout.setVisibility(LinearLayout.VISIBLE);
}
Notice setVisibility and the valid constants.
Now, sample code to set the height of a view. This may be the only code you need and may actually work better.
ViewGroup.LayoutParams layoutParams = relayLayout.getLayoutParams();
layoutParams.height = 0;
relayLayout.setLayoutParams(layoutParams);
Notice ViewGroup.LayoutParams and height attribute, mainly. In this code, the layout will be hidden and the second layout should rise to the top.
Another solution and possibly the best is the Google's answer to show/hide 2 different layouts. In your layout file, I see 2 very different layout designs and so this is applicable in your case.
One webpage stating this is Building a Dynamic UI with Fragments.
It's good reading.
Here's a sample code, making this idea work:
// Create new fragment and transaction
Fragment newFragment = new ExampleFragment();
FragmentTransaction transaction = getFragmentManager().beginTransaction();
// Replace whatever is in the fragment_container view with this fragment,
// and add the transaction to the back stack
transaction.replace(R.id.fragment_container, newFragment);
transaction.addToBackStack(null);
// Commit the transaction
transaction.commit();
The sample code is from Fragments.
One advantage of this code and layout design is that your 2 layouts are separated in 2 files, at least, and forces separation for future code changes.
Have fun with this :-) Tommy Kwee.
I have the following xml file:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/FrameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
</android.support.v4.view.ViewPager>
<LinearLayout
android:id="#+id/musicLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center"
android:orientation="horizontal"
android:padding="10dp"
android:focusable="true"
android:visibility="visible" >
<ImageView
android:id="#+id/backward"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/backward" />
<ImageView
android:id="#+id/stop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="8dp"
android:src="#drawable/stop" />
<ImageView
android:id="#+id/pausePlay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="8dp"
android:src="#drawable/play" />
<ImageView
android:id="#+id/forward"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="8dp"
android:paddingRight="10dp"
android:src="#drawable/forward" />
</LinearLayout>
The framelayout is for an actionbar with tabs which are the viewpager in the above layout. The actionbar works perfect. The problem that I want to solve is that the last linearlayout, which is actually a media player floating in the bottom of the screen, needs to be hidden when I press outside the linearlayout! I have tested the onfocuschangelistener in the musicLayout and onclick in the pageviewer but nothing happens! What am i doing wrong?
Edit:
In case it helps, every tab is a fragment with its own layout which is added to the viewPager.
I think the easiest solution to this problem would be to add a transparent view that matches parent of your ViewGroup. Basically, you would have the ViewPager, LinearLayout and View at the same level. You can then register an onClickListener on your transparent View and that should do the trick.
Layout should be something as simple as this :
<View android:id="#+id/transparent_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"/>
I want to create a Wizard like layout which should look like described:
* at the top should be some kind of title of the current dialog
* at the bottom should be a navigation bar containg buttons for next/previous and various operations. THis bar should always(!) be at the very bottom of the screen.
* at the center should be a list (should use all the space left, except the title bar and the navigation bar described above)
My first attempt is posted below. I used framelayout however I was told this is a bad idea. The problem I ran into is that last row of my list is below the bar with the buttons at the bottom of the screen. Do you have any suggestions on how I could solve my Problem?
Thanks
Here's my not working draft:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="vertical" >
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="horizontal" style="#android:style/ButtonBar">
<ImageView android:src="#drawable/person"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<TextView android:text="#string/personstring"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:textStyle="bold" android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
<ListView android:visibility="visible" android:id="#android:id/list"
android:layout_width="fill_parent" android:layout_height="fill_parent" />
</LinearLayout>
<LinearLayout android:id="#+id/footer"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:orientation="horizontal" android:layout_gravity="bottom|center"
android:layout_alignParentBottom="true" style="#android:style/ButtonBar">
<ImageButton android:id="#+id/loacreation.previousButton"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_weight="1" android:src="#drawable/buttonarrowleft" />
<ImageButton android:id="#+id/loacreation.nextButton"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_weight="1" android:src="#drawable/buttonarrowright" />
</LinearLayout>
</FrameLayout>
Use a RelativeLayout as your outermost container, and the LinearLayout that contains your buttons can have android:layout_alignParentBottom="true".
I am doing a simple chat application and I want to show balloons similar to the iphone's sms app.
So I am doing an Activity with a ListView with a certain layout.
This are my layouts:
/* Activity Layout */
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ListView android:id="#+id/chat_log"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stackFromBottom="true"
android:layout_marginTop="50dp"
android:transcriptMode="alwaysScroll"
android:layout_weight="1"
android:cacheColorHint="#00000000"
android:clickable="false"
/>
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<EditText android:id="#+id/chat_input_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="bottom"
/>
<Button android:id="#+id/chat_send_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/chat_send_button"
/>
</LinearLayout>
</LinearLayout>
Other:
/* Row Layout */
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/userprofile_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/chat_ballon_left" >
<TextView
android:id="#+id/chat_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="2dp"
android:text="haasdasdasdasdasdasdasdoo" />
</FrameLayout>
Here's the result.
My issues:
The gray line which I would like to remove.
Text is not using the whole space.
Somehow even thought I've added android:clickable="false" the balloons are clickable.
The FrameLayout is unnecessary, so use the TextView as a root element (with the chat_ballon_left background of course). Set the width to match_parent so that the text takes the whole space.
BTW nice baloons, don't forget to have hdpi versions too :)