Android ActionBar custom layout styling - android

I'm just starting android development coming from IOS and again stubbled onto a problem.
And after 1 day of trying i decided that i will ask the people of stack overflow.
So my problem:
I have an app and in the action bar (default no sherlock) i want 1 logo and 2 lines of text.
And trough the internet i fount the setCustomView for the action bar.
And the custom xml is loaded but i can't get the layout right.
So first i setup the action bar:
private void setupActionBar() {
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setDisplayUseLogoEnabled(false);
actionBar.setDisplayHomeAsUpEnabled(false);
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setDisplayShowHomeEnabled(false);
LayoutParams lp1 = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
View customNav = LayoutInflater.from(this).inflate(R.layout.actionbar, null); // layout which contains your button.
actionBar.setCustomView(customNav, lp1);
}
Than the xml:
<?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:layout_gravity="fill_horizontal"
android:orientation="horizontal"
android:background="#color/Blue">
<TextView
android:id="#+id/text_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/title_menu"
android:textColor="#color/White"
android:paddingLeft="5dp"
android:layout_gravity="left"/>
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/Icon"
android:layout_gravity="center"/>
<TextView
android:id="#+id/text_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/title_help"
android:layout_gravity="right"
android:textColor="#color/White"
android:paddingRight="5dp"/>
</LinearLayout>
But the result is something what i'm not looking for:
So what am i forgetting/doing wrong/or should i do?

try change the root layout into relative layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_horizontal"
android:orientation="horizontal">
<TextView
android:text="left text"
android:layout_toLeftOf="#+id/icon"
android:layout_alignParentLeft="true"
android:id="#+id/text_left"
android:gravity="left"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="5dp"/>
<ImageView
android:layout_centerHorizontal="true"
android:id="#+id/icon"
android:layout_width="10dp"
android:layout_height="wrap_content"
android:src="#drawable/bg_sunrise"
android:layout_gravity="center"/>
<TextView
android:text="Right txt"
android:layout_toRightOf="#+id/icon"
android:id="#+id/text_right"
android:layout_width="match_parent"
android:gravity="right"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:paddingRight="5dp"/> </RelativeLayout>

you're not getting your result because:
u need to:
if you use AppCompat theme
add to your activity layout
in code eg. in onCreate() set a toolbar to replace the action bar.

You could also use LinearLayout as a root and add android:weightSum and specify a layout_weight on the three child views.
What is android:weightSum in android, and how does it work?

Related

Custom Actionbar remove left and right space issue

I have custom actionbar but it gives some margin from left and right. I don't want any margin from left or right. I have tried some solutions but there is no progress. How can i remove them ? Thanks in advance
custom_actionbar.xml:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/yazi"
android:orientation="horizontal">
<TableRow>
<ImageButton
android:id="#+id/imgSideBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center_vertical"
android:scaleType="centerCrop"
android:background="#mipmap/menu_open" />
<TextView
android:id="#+id/txtBaslik"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:padding="10dp"
android:text="Some text"
android:textAlignment="center"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/white"
android:textSize="18sp" />
<TextView
android:id="#+id/txtAsamaSayisi"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:padding="10dp"
android:text="1/24"
android:textAlignment="viewEnd"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="#dimen/_9sdp"
android:textStyle="bold"
android:visibility="invisible" />
<ImageButton
android:id="#+id/imgArrows"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center_vertical"
android:background="#android:color/transparent"
android:src="#mipmap/left_right_arrows"
android:visibility="invisible" />
</TableRow>
</TableLayout>
And my java class:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main_menu);
//Setting custom actionbar
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setDisplayShowCustomEnabled(true);
getSupportActionBar().setCustomView(R.layout.custom_actionbar);
//Some codes...
}
And screenshot of my result. As you can see there are some margins from left and right.
Edit: my main xml codes:
<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:layout_gravity="center"
android:gravity="center"
tools:context="com.cybersoft.intvrg.BeyannameDoldur">
<FrameLayout
android:id="#+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true">
</FrameLayout>
</RelativeLayout>
My styles.xml code:
<style name="CustomTheme" parent="Theme.AppCompat.Light">
<!--<item name="contentInsetStart">0dp</item>-->
<!--<item name="contentInsetEnd">0dp</item>-->
<item name="android:windowContentOverlay">#null</item>
<item name="android:homeAsUpIndicator">#null</item>
</style>
Call View class .
You should add LayoutParams.MATCH_PARENT
Special value for the height or width requested by a View.
MATCH_PARENT means that the view wants to be as big as its parent,
minus the parent's padding, if any
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setDisplayShowCustomEnabled(true);
View viewOBJ = getLayoutInflater().inflate(R.layout.custom_actionbar,null);
LayoutParams layoutParams = new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT);
getSupportActionBar().setCustomView(viewOBJ, layoutParams);
It looks like you are defining a margin somewhere in your java code, I can't see any other way it should display like that. Maybe you can find it yourself or you can show us the Java Code where you are defining the actionbar.
Additionally, the documentation says that TableRow enforces its children to always use MATCH_PARENT and WRAP_CONTENT for layout_width and layout_height respectively. This could lead to some issue, if not specified correctly.
Best regards.
This happens because ActionBar keep some space for "Home" button and some others.
To remove them, you have to add this properties in your root action bar Layout:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarFromActivityB"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetRight="0dp"
app:contentInsetEnd="0dp">
<TableLayout
...
>
/>
As you can see you have tu put your layout from your action bar inside a android.support.v7.widget.Toolbar. Later you will have to inflate it with setSupportActionBar(toolbar) being toolbar the view from XML before (toolbarFromActivityB).
As you have your toolbar in other file, you will have to include it in your activity xml (<include layout="#layout/custom_actionbar" />)
Don't get the existing "actionbar" and inflate a customview. Instead of that set a new toolbar for your new Activity.

Custom Action bar layout not getting proper width

I am trying to use a custom layout for action bar with navigation drawer but it seems like the width is not consistent.
Here's how it looks like right now:
ListView http://imageshack.com/a/img673/867/fTvd6X.png
For some reason the width is not occupied completely on the left of the action bar.
The items currently used in the custom action bar are : app name(Text View), Spinner(Some Text), ImageView on the right of Spinner.
This is how my layout xm looks like:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#000" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<ImageView
android:layout_width="35dp"
android:layout_height="35dp"
android:padding="10dp"
android:layout_gravity="center_vertical|left"
android:src="#drawable/someIcon" />
<TextView
android:id="#+id/appTextLabel"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:padding="10dp"
android:text="someAppName"
android:textColor="#555555"
android:textSize="24sp"
android:textStyle="bold" />
<Spinner
android:id="#+id/locationSpinner"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#000"
android:spinnerMode="dropdown" />
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center_vertical|right"
android:src="#drawable/location_down_icon" />
</LinearLayout>
And sample code for Action bar :
mActionBar = getSupportActionBar();
mActionBar.setDisplayShowTitleEnabled(false);
mActionBar.setDisplayShowCustomEnabled(true);
mActionBar.setCustomView(actionBarLayout);
No idea whats going wrong with this.
Any help will be really appreciated. Thanks .. :)
Is this a space for icon (or logo)?
you might try
getActionBar().setDisplayShowHomeEnabled(false);
but you have flags ActionBar.DISPLAY_SHOW_HOME and ActionBar.DISPLAY_HOME_AS_UP, maybe they are important for you...
also you might try set transparent icon
getActionBar().setIcon(new ColorDrawable(getResources().getColor(android.R.color.transparent)));

Android Action Bar: Can I replace a custom Title in appcompat v7

I want to add a custom action title on the left of the actin bar, replacing with the default title just like in the below image the default image is shown
And here I want to add this title.
You need to change the logo and the title in action bar.
You can use
getActivity().getActionBar().setTitle("your title");
and
getActivity().getActionBar().setLogo(your draw id);
It is very easy to do ..
There's lot's of way to do this task as defined above .. but I will suggest to make use of custom view for Action bar(As this will work on all devices as same) .. this will let you create much more complex view's in a very handy and easy way.
For your query you make make use of custom views for ActionBar..
You can create customized action bar like this ..
actionBar = getSupportActionBar();
actionBar.setCustomView(R.layout.xyz); // Set custom view like this
// In your case you want an icon ...
ImageView image = (ImageView) actionBar.getCustomView().findViewById(R.id.fare_ll); // Get id of custom view like this
Also you need to set this property ..
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
// Now you can do any sort of stuffs with this icon .. like you can perform click functionality
Here's your xyz.xml file .. This file is just for your reference purpose .. this will let you know how to create custom view for Action Bar. :)
<?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="fill_parent"
android:orientation="horizontal"
>
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center|start"
android:id="#+id/confirm_cabs_back"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/b"
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/city_spinner_layout"
android:layout_gravity="center"
>
<TextView
android:id="#+id/action_city"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="XYZ"
android:textStyle="bold"
android:textColor="#color/taxi_blue"
android:layout_gravity="center"
/>
<!-- <ImageView
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/drop_down" /> -->
</LinearLayout>
</LinearLayout>
<!-- <LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|center"
android:gravity="end"
android:id="#+id/fare_ll"
> -->
<LinearLayout
android:layout_width="2dp"
android:layout_height="fill_parent"
android:background="#color/grey" >
</LinearLayout>
<!-- android:layout_marginTop="2dp"
android:layout_marginBottom="2dp" -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hard_61"
android:id="#+id/fare_ll"
android:layout_gravity="center|end"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:textColor="#color/black"
/>
<!-- </LinearLayout> -->
</LinearLayout>
You are good to go ..
You need to use the following code to get this:
private ActionBar actionBar;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
actionBar = getActionBar();
actionBar.setTitle("");
actionBar.setLogo(R.drawable.logo); //logo needs to be defined in the drawables folder.
}

Sherlock actionBar.setIcon(android.R.color.transparent) leaves gap to left

I have tried searching on Google and stackoverflow but I didn't find the solution.
Problem:
Code:
actionBar = activity.getSupportActionBar();
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setDisplayShowTitleEnabled(false);
//actionBar.setDisplayUseLogoEnabled(false);
//actionBar.setDisplayHomeAsUpEnabled(false);
//actionBar.setDisplayShowHomeEnabled(false);
actionBar.setIcon(android.R.color.transparent);
LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT,
Gravity.CENTER_HORIZONTAL | Gravity.CENTER_VERTICAL);
LayoutInflater inflator = (LayoutInflater)activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
LinearLayout v = (LinearLayout) inflator.inflate(R.layout.header, null);
actionBar.setCustomView(v, lp);
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
header.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/topheaderbackground" >
<TextView
android:id="#+id/topcaption"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center_vertical|center_horizontal"
android:text="ABC"
android:textColor="#ebf5ff"
android:textSize="9.6pt"
android:textStyle="bold"
android:typeface="sans" />
</LinearLayout>
What I have tried:
actionBar.setDisplayShowHomeEnabled(false);
But result is:
Please Help!!!
[Edit]:
I am using Theme.Sherlock.
[Result of Doctoror Drive's suggestion]:
actionBar.setBackgroundDrawable(activity.getResources().getDrawable(R.drawable.topheaderbackground));
new header.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/topcaption"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center_vertical|center_horizontal"
android:text="ABC"
android:textColor="#ebf5ff"
android:textSize="9.6pt"
android:textStyle="bold"
android:typeface="sans" />
</LinearLayout>
As you can see text is not in center, any suggestion???
It's not the icon, it's a CustomView that's leaving the gap.
You should change the color of ActionBar in styles.
http://developer.android.com/guide/topics/ui/actionbar.html#AdvancedStyles
And then add custom view with no background, just a TextView in center.
EDIT:
After you've set it to center, the space for your text is space of actionbar content minus the size of icon to the left (which is transparent). Try setting ActionBar display options.
remove
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setDisplayShowTitleEnabled(false);
and add instead
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
Tell me if you still have the issue, then I will tell plan B.
EDIT, plan B:
Alright, there is a problem with flipping when above is set so try adding padding to root of your TextView. Set ActionBar mode:
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM |
ActionBar.DISPLAY_SHOW_HOME);
And in xml, I think the LinearLayout there is useless. Try setting plain and clean TextView
<TextView
android:id="#+id/topcaption"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingRight="?android:attr/actionBarSize"
android:gravity="center"
android:text="ABC"
android:textColor="#ebf5ff"
android:textSize="9.6pt"
android:textStyle="bold"
android:typeface="sans" />
If that will not work, try
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingRight="?android:attr/actionBarSize"
android:orientation="horizontal">
<TextView
android:id="#+id/topcaption"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:gravity="center"
android:text="ABC"
android:textColor="#ebf5ff"
android:textSize="9.6pt"
android:textStyle="bold"
android:typeface="sans" />
</LinearLayout>

Title not showing on the mainActivity

I have put up a spinner on Android Action Bar, i have placed the spinner in test.xml layout and i am calling it like this in the main activity in the OnCreate() method
ActionBar actionBar = getActionBar();
actionBar.setBackgroundDrawable(new ColorDrawable(Color.GREEN));
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setCustomView(R.layout.activity_test);
setContentView(R.layout.activity_main);
actionBar.setTitle("Home");
But my title is not showing. i want to show HOME as title on that action bar what should i do?
My activity_test
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Spinner
android:id="#+id/planets_spinner"
android:layout_width="100dp"
android:layout_height="50sp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#drawable/arrow2"
android:layout_weight="0.08"
android:drawSelectorOnTop="true" />
</RelativeLayout>
I have solved the problem by adding a textView to my activity_test, as this whole activity is showing on the ActionBar so i have added a text view and problem is solved :)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<Spinner
android:id="#+id/planets_spinner"
android:layout_width="100dp"
android:layout_height="50sp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#drawable/arrow2"
android:drawSelectorOnTop="true" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/planets_spinner"
android:layout_alignParentLeft="true"
android:layout_marginBottom="6dp"
android:layout_marginLeft="6dp"
android:textStyle="bold"
android:textSize="20sp"
android:textColor="#ffffff"
android:text="Scene" />
</RelativeLayout>
When you set android:layout_alignParentRight="true" , RelativeLayout uses all the space including the title space and title is not displayed. You can check the behaviour by drawing a border around the RelativeLayout. But RelativeLayout doesnt consume more space if you dont use android:layout_alignParentRight="true". It doesnt consume more space if you use android:layout_alignParentLeft="true", too. It works weird for only android:layout_alignParentRight="true". In order to show a view at the right of the parent, the following worked for me:
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/profile_image"
android:layout_width="40dp"
android:src="#drawable/ic_launcher"
android:layout_height="40dp"
android:background="?android:selectableItemBackground"
android:padding="3dp"
android:scaleType="centerCrop" />
Do not use RelativeLayout. Just the view you need.
Then you can align right with the LayoutParams shown as following:
actionBar.setCustomView(R.layout.actionbar_layout);
actionBar.setDisplayShowCustomEnabled(true);
ImageView imageProfile = (ImageView)actionBar.getCustomView();
int length = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 40, getResources().getDisplayMetrics());
Toolbar.LayoutParams layoutParams = new Toolbar.LayoutParams(
length,
length, Gravity.RIGHT
| Gravity.CENTER_VERTICAL);
imageProfile.setLayoutParams(layoutParams);
Now you should be able to view both ActionBar title and the ImageView.

Categories

Resources