Develop Reference

Android ActionBar height using a custom layout

I can set my ActionBar height in my styles.xml resource file:
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="actionBarSize">40dp</item>
</style>
This way, my action bar is a bit smaller than the default one. But a white gap appears below the ActionBar. The content starts at the same position as if the ActionBar had the same height.
EDIT:
My layout 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"
android:id="#+id/mainMenuLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="top">
<FrameLayout
android:id="#+id/mmContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/mmBottomNavigation" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/mmBottomNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:menu="#menu/bottom_navigation_menu"
app:itemBackground="#color/white"
app:itemIconTint="#color/btn_nav_itam_color"
app:itemTextColor="#color/btn_nav_itam_color" />
</RelativeLayout>
EDIT 2:
I tried it on a blank Application. The actionBarSize attribute works as expected. Also there's no white gap.
My app uses a custom layout for the action bar - custom_action_bar.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="0dp" android:layout_margin="0dp"
android:background="#color/colorPrimary" >
<TextView
android:id="#+id/titleTvLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="#string/app_name"
android:textColor="#color/actionBarText"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/titleTvRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:text="#string/title_bar_loggedin"
android:textColor="#color/actionBarDarkText"
android:textSize="12sp"
android:textStyle="bold" />
</RelativeLayout>
And this layout is set in the Activity:
public static void setCustomTitle(AppCompatActivity apc, String userName) {
if (apc.getSupportActionBar() != null) {
apc.getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
apc.getSupportActionBar().setDisplayShowCustomEnabled(true);
apc.getSupportActionBar().setCustomView(R.layout.custom_action_bar);
View view = apc.getSupportActionBar().getCustomView();
TextView tvLeft = (TextView) view.findViewById(R.id.titleTvLeft);
TextView tvRight = (TextView) view.findViewById(R.id.titleTvRight);
tvLeft.setText(apc.getResources().getString(R.string.app_name));
String rightTitle = apc.getResources().getString(R.string.title_bar_loggedin) + " " + userName;
tvRight.setText(rightTitle);
}
}

Add standard height in your style or layout, example added for style.xml
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:actionBarStyle">#style/CustomActionBar</item>
</style>
<style name="CustomActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:actionBarSize">40dp</item>
<item name="android:background">#color/colorPrimary</item>
</style>

Set the parent layout height to "match_parent" in your layout resource file.

This is a hack but for the parent container of the content area, you can add a top margin of -8dp.
android:layout_marginTop="-8dp"
This will pull the contents up.

Android Studio ImageButton changing shape after implementing a style

I've searched here and it doesn't seem like anyone has had this problem.
I'm following the Android Studio tutorials from here.
Basically what is happening is that my buttons look fine when I implement my XML code, but when I transfer over some of the XML code to my styles.xml and import it into my activity_main.xml file, my button changes its dimensions.
Here's my activity_main.xml file.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
android:padding="16sp"
tools:context=".MainActivity"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageButton
android:id="#+id/decreaseTeam1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_minus"
android:contentDescription="#string/minus_button"
android:background="#drawable/button_background"
android:onClick="decreaseScore" />
<ImageButton
android:id="#+id/increaseTeam1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_plus"
android:contentDescription="#string/plus_button"
android:layout_alignParentEnd="true"
android:onClick="increaseScore"
android:background="#drawable/button_background"/>
<TextView
android:id="#+id/score_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="#string/initial_score"/>
<TextView
android:id="#+id/team1_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="#string/team_1"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageButton
android:id="#+id/decreaseTeam2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_minus"
android:background="#drawable/button_background"
android:contentDescription="#string/minus_button"
android:onClick="decreaseScore"
/>
<ImageButton
android:id="#+id/increaseTeam2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_plus"
android:contentDescription="#string/plus_button"
android:onClick="increaseScore"
android:background="#drawable/button_background"/>
<TextView
android:id="#+id/score_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="#string/initial_score"/>
<TextView
android:id="#+id/team2_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="#string/team_2"/>
</RelativeLayout>
</LinearLayout>
My strings.xml file.
<resources>
<string name="app_name">Scorekeeper</string>
<string name="team_2">Team 2</string>
<string name="initial_score">0</string>
<string name="plus_button">Plus Button</string>
<string name="minus_button">Minus Button</string>
<string name="team_1">Team 1</string>
</resources>
drawable.ic_minus:
<vector android:height="40dp" android:viewportHeight="24.0"
android:viewportWidth="24.0" android:width="40dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#FF000000" android:pathData="M19,13H5v-2h14v2z"/>
</vector>
drawable.ic_plus:
<vector android:height="40dp" android:viewportHeight="24.0"
android:viewportWidth="24.0" android:width="40dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#FF000000" android:pathData="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</vector>
drawable.button_background:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke
android:width="2dp"
android:color="#color/colorPrimary"/>
</shape>
I hope I have not missed anything out. If you copy paste my code inside an empty activity activity_main.xml file, you should see something like this.
Now the problem:
I want to implement some styles for my buttons. I have updated my styles.xml as such. In this case I have a parent ScoreButton which only takes the background, whereas the child elements are the plus and minus, which takes the picture and description.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="ScoreButtons" parent="Widget.AppCompat.Button">
<item name="android:background">#drawable/button_background</item>
</style>
<style name="PlusButtons" parent="ScoreButtons">
<item name="android:src">#drawable/ic_plus</item>
<item name="android:contentDescription">#string/plus_button</item>
</style>
<style name="MinusButtons" parent="ScoreButtons">
<item name="android:src">#drawable/ic_minus</item>
<item name="android:contentDescription">#string/minus_button</item>
</style>
</resources>
And if I update one of my button's code as such, for instance, replacing #+id/decreaseTeam1 with the code below:
<ImageButton
android:id="#+id/decreaseTeam1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
style="#style/PlusButtons"
android:onClick="decreaseScore" />
The minus button suddenly becomes inflated.
I read that child views override parent views, but I don't see how that can be a problem, since there is no change to the image size, nor have I compressed it.

The problem is that in the style definition, your ScoreButtons has Widget.AppCompat.Button as parent. This style defines a minHeight and minWidth, as follows:
<style name="Base.Widget.AppCompat.Button" parent="android:Widget">
<item name="android:background">#drawable/abc_btn_default_mtrl_shape</item>
<item name="android:textAppearance">?android:attr/textAppearanceButton</item>
<item name="android:minHeight">48dip</item>
<item name="android:minWidth">88dip</item>
<item name="android:focusable">true</item>
<item name="android:clickable">true</item>
<item name="android:gravity">center_vertical|center_horizontal</item>
</style>
So, in order to solve your problem, you just have to remove the parent from ScoreButtons style:
<style name="ScoreButtons">
<item name="android:background">#drawable/button_background</item>
</style>

You have an error in your style. You are using an ImageButton not a Button
So, you should write
<style name="ScoreButtons" parent="Widget.AppCompat.ImageButton"> // ImageButton
<item name="android:background">#drawable/button_background</item>
</style>

you are making a mistake while assigning a style. you need to use ImageButton instead of using Button.
Use this:
<style name="ScoreButtons" parent="Widget.AppCompat.ImageButton">
<item name="android:background">#drawable/button_background</item>
<item name="android:contentDescription">#string/minus_button</item>
</style>
Instead of this:
<style name="ScoreButtons" parent="Widget.AppCompat.Button">
<item name="android:background">#drawable/button_background</item>
<item name="android:contentDescription">#string/minus_button</item>
</style>

chat layout in Android

I am trying to create a layout like this (the blue bubble):
However, in my XML below, the blue bubble extends to the whole width of the fragment though I have specified the width as wrap_content everywhere. Any ideas ?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:paddingRight="17dp"
android:paddingLeft="17dp"
android:layout_alignParentRight="true"
android:gravity="right"
android:layout_gravity="right"
android:paddingTop="5dp">
<RelativeLayout
android:layout_width="wrap_content" android:id="#+id/bubble_user" android:gravity="end" android:background="#drawable/chat_user_reply_background" android:layout_alignParentRight="true"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/user_reply_status"
android:layout_width="12dp"
android:layout_height="12dp"
android:layout_alignBottom="#+id/chat_user_reply"
android:layout_marginBottom="5dp"
android:layout_marginRight="10dp"
android:layout_alignParentRight="true"
android:src="#drawable/ic_single_tick"
android:visibility="visible" />
<TextView
android:id="#+id/user_reply_timing"
style="#style/chat_timings"
android:layout_alignBottom="#id/chat_user_reply"
android:textColor="#color/gray"
android:paddingBottom="5dp"
android:layout_marginRight="2dp"
android:layout_toLeftOf="#id/user_reply_status"
android:text="17:10" />
<TextView
android:id="#+id/chat_user_reply"
style="#style/chat_text_message_style"
android:layout_toLeftOf="#id/user_reply_timing"
android:maxWidth="280dp"
android:autoLink="web"
android:text="Rahul Agrawal is a good boy but he does not know what he wants." />
</RelativeLayout>
</RelativeLayout>
<style name="chat_text_message_style">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">#color/chat_message_text_color</item>
<item name="android:paddingTop">5dp</item>
<item name="android:paddingBottom">5dp</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingRight">8dp</item>
<item name="android:textSize">18sp</item>
</style>
<style name="chat_timings">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textSize">12sp</item>
</style>

Check the size of the image used as background for RelativeLayout or change the width of the Layout.Using the same xml with 100dp of width.
UPDATE
The maxWidth of the TextView adjust it according to design.
It looks like this:

Separator for a two column List view not working in Android

I want to separate data of two columns in a List View by a line or any block, as shown here
I tried following solutions, unfortunately they did not work
Solution 1
Solution 2
Please check code for my application and correct me if i missed any thing
Main Activity XML
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" tools:context=".Time" android:background="#color/accent_material_dark" android:orientation="horizontal">
<TextClock android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="#+id/textClock" android:layout_gravity="center_vertical" android:format24Hour="#android:string/yes" />
</LinearLayout>
Row Layout XML
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:orientation="horizontal" android:layout_height="fill_parent" android:layout_width="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android">
<TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="#+id/rowTextView1" style="#style/clock1"></TextView>
<TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="#+id/rowTextView2" style="#style/clock2"></TextView>
</RelativeLayout>
Styles XML
<resources>
<!-- Clock application theme. -->
<style name="clock1">
<!-- Customize your theme here. -->
<item name="android:background">#24598a</item>
<item name="android:padding">10dp</item>
<item name="android:textSize">16sp</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_alignParentLeft">true</item>
</style>
<style name="clock2">
<!-- Customize your theme here. -->
<item name="android:background">#24598a</item>
<item name="android:padding">10dp</item>
<item name="android:textSize">16sp</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_alignParentRight">true</item>
</style>
<style name="AppTheme" parent="android:style/Theme.Holo.Light.DarkActionBar"></style>
</resources>

try this example layout code for your list item view
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/white"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#+id/divider"
android:gravity="left|center_vertical"
android:text="Some data info" />
<View
android:id="#+id/divider"
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_toLeftOf="#+id/clockInfo"
android:background="#android:color/black" />
<TextView
android:id="#+id/clockInfo"
android:layout_width="60dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:gravity="center"
android:text="11:11" />
</RelativeLayout>

scrollview is extremly slow on ics (android 4.0) when containing a long textview

Here's my problem, i'm developing a news applicaiton and i used scrollview wrapping a textview to show the content of the news.
But i found that scrolling is extremly slow on android 4.0 ics when the textview is quite long, and the longer the text, the slower the scrolling is. While on android 2.3 devices things just go as fast as expected.
I don't know whether this is really a system bug cause i found this similar problems reported on the android project
Here's my layout:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:id="#id/lst_news_details"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/list_background"
android:fadingEdge="none"
android:gravity="center" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="10dp"
android:orientation="vertical" >
<TextView
android:id="#id/tv_news_details_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/Detail_Title"/>
<TextView
android:id="#id/tv_news_details_category"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/Detail_Category"/>
<TextView
android:id="#id/tv_news_details_created_at"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
style="#style/Detail_Time"/>
<include layout="#layout/detail_horizontal_divideline" />
<ImageView
android:id="#id/img_news_details_image"
style="#style/Detail_Picture"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:layout_gravity="center_horizontal"
android:contentDescription="#string/image_contentDescription"/>
<TextView
android:id="#id/tv_news_details_context"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_gravity="center_horizontal"
style="#style/Detail_Content"/>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="10dip" />
</LinearLayout>
</ScrollView>
<!-- actionbar shadow -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/action_bar_shadow"
>
</LinearLayout>
</FrameLayout>
And my style.xml
<style name="Detail_Title">
<item name="android:textColor">#color/list_item_title</item>
<item name="android:textSize">18sp</item>
<item name="android:shadowColor">#color/list_item_text_shadow</item>
<item name="android:shadowDx">0</item>
<item name="android:shadowDy">2</item>
<item name="android:shadowRadius">2</item>
</style>
<style name="Detail_Category">
<item name="android:textColor">#color/list_item_category</item>
<item name="android:textSize">14sp</item>
<item name="android:shadowColor">#color/list_item_text_shadow</item>
<item name="android:shadowDx">0</item>
<item name="android:shadowDy">2</item>
<item name="android:shadowRadius">2</item>
</style>
<style name="Detail_Time">
<item name="android:textColor">#color/list_item_time</item>
<item name="android:textSize">14sp</item>
<item name="android:shadowColor">#color/list_item_text_shadow</item>
<item name="android:shadowDx">0</item>
<item name="android:shadowDy">2</item>
<item name="android:shadowRadius">2</item>
</style>
<style name="Detail_Content">
<item name="android:textColor">#color/detail_content_text</item>
<item name="android:textSize">16sp</item>
<item name="android:autoLink">all</item>
<item name="android:shadowColor">#color/list_item_text_shadow</item>
<item name="android:shadowDx">0</item>
<item name="android:shadowDy">2</item>
<item name="android:shadowRadius">2</item>
</style>
<style name="Detail_Picture">
<item name="android:layout_gravity">center</item>
<item name="android:gravity">center</item>
<item name="android:background">#drawable/image_frame</item>
</style>
By the way, i've already set
android:minSdkVersion="7"
android:targetSdkVersion="14"
But haven't set the hardware accelerated flag yet.
Is there any solution? Please help me, thanks!

Well, i've found the solution on my own
just set android:hardwareAccelerated="false" in the manifest.xml
Still quite confused about the reason, waiting for an explanation.

Note that you can add the android:hardwareAccelerated="false" for a specific activity (or even a specific view) as seen here: http://developer.android.com/guide/topics/graphics/hardware-accel.html if you want to keep the rest of your app hardware accelerated.