Toolbar Title and Icon in Center - java

I am trying to use custom toolbar. I want icon and title in center of my toolbar. I have tried lot for set it in center but I am unable to do it. My XML is like below
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?actionBarSize"
android:layout_width="match_parent"
android:background="#color/colorPrimary">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="horizontal">
<ImageView
android:padding="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"/>
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:gravity="center"
android:text="MyApplication"
android:textAppearance="#style/TextAppearance.Widget.AppCompat.Toolbar.Title"
android:textColor="#color/colorWhite" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
But its not display perfect as per my need. I want first logo and than title in center of toolbar but its look like this
Look
Let me know if someone can help me for do it. I am really sorry if its very simple. I am learning yet. Thanks

Try this instead:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?actionBarSize"
android:layout_width="match_parent"
android:paddingRight="16dp"
android:background="#color/colorPrimary">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:padding="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/ic_launcher"/>
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MyApplication"
android:textAppearance="#style/TextAppearance.Widget.AppCompat.Toolbar.Title"
android:textColor="#color/colorWhite" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
Using LinearLayout will allow you to easily make sure the views don't overlap. I also added 16dp of padding to the right side to compensate for the 16dp margin android automatically adds to the left side.

Try giving layout margin for the image view and Align the textview center horizontal which will give you your desired output.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?actionBarSize"
android:layout_width="match_parent"
android:background="#color/colorPrimary">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="300dp"
android:padding="5dp"
android:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="MyApplication"
android:textAppearance="#style/TextAppearance.Widget.AppCompat.Toolbar.Title"
android:textColor="#color/colorWhite" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>

Try this! A little bit easier to just use a LinearLayout with a horizontal orientation imo. Change the imageview source and title text as needed:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?actionBarSize"
android:layout_width="match_parent"
android:background="#color/colorPrimary">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center_horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher_background"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Title"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>

Related

Align Bitmap Image inside ImageView - CS50 Pokedex Android

I have been working on CS50 and now I am tracking android. I almost finished my PSet Pokedex, but small thing is bothering me.
I am trying to align bitmap image on top of ImageView, but I could not do it. Could you please help me? I tried "scaletype", "layout_gravitiy" etc. But it does not seem to work. I want image to be just below description stating that this should be changed by the java code.
Please see current view here
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".PokemonActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/pokemon_name"
android:textAlignment="center"
android:textSize="18dp"
android:textStyle="bold"
android:paddingTop="10dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/pokemon_number"
android:textAlignment="center"
android:textSize="16dp"
android:paddingTop="5dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/pokemon_type1"
android:textAlignment="center"
android:textSize="16dp"
android:paddingTop="5dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/pokemon_type2"
android:textAlignment="center"
android:textSize="16dp"
android:paddingTop="5dp" />
<Button
android:id="#+id/pokemon_button_catch"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:paddingTop="5dp"
android:textSize="24dp"
android:onClick="toggleCatch"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/pokemon_description"
android:textAlignment="center"
android:textSize="16dp"
android:textStyle="bold|italic"
android:paddingTop="50dp"
android:text="This is testing something, this should changed by the java code."/>
<ImageView
android:id="#+id/pokemon_avatar"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
Welcome to StackOverFlow !
If there is no special requirement than no need to use match_parent inside ImageView. You can do following adjustment-
<LinearLayout 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:orientation="vertical"
tools:context=".PokemonActivity">
..............
<ImageView
android:id="#+id/pokemon_avatar"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
Happy coding !
sorry. I was roasting snow in a furnace. I found out that actually source image is one to blame. Image size does not wrap the content but it has extra space around content. This is the reason when it is enlarged, there is space between text and image.

How can I convert an XML to make a programmatically view in Android Java

I made a design for a comment section in XML, but I want to create it programmatically when I get some data from database. How can I convert all of these to Java?
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
app:cardCornerRadius="20dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="2">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/complete"
android:scaleType="centerCrop"
android:layout_gravity="center">
</ImageView>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.75" >
<TextView
android:id="#+id/commentFullname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Calin Onaca:"
android:textColor="#000"
android:layout_gravity="center"/>
<TextView
android:id="#+id/commentReply"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:textColor="#000"
android:text="So Bleesed i choosed him no matter what you say i will always choose him"/>
<com.google.android.material.button.MaterialButton
android:id="#+id/postReply"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Reply"
android:layout_gravity="center" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_marginTop="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000"
android:text="Reply: "/>
<TextView
android:id="#+id/replyText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000"
android:text="Thank you very much my dear" />
</LinearLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
All the texts will be displayed from database. I know it sounds stupid, but I'm a begginer and I really don't know how to do this. :) Thank you in advance!
Use one of the LayoutInflater inflate methods that best satisfies your use case. The below example will create View containing your layout.
View commentView = LayoutInflater.from(getApplicationContext()).inflate(R.layout.comment_layout,null);

Floating Action Button over Scrollview?

I'm revamping my app to follow look more "Material Design-ey", but have run into trouble with the FAB. I have a scrollview with two floating action buttons:
When I scroll to the bottom, the FABs cover my content. I want to be able to scroll a little past the bottom so the FABs can be align_parent_bottom without overlapping anything:
(should be able to scroll a little more for FABs to be aligned below)
(Before scrolling down)
How do I create extra space at the bottom of my app after scrolling down to the max for the FABs to rest?
<?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="wrap_content"
android:background="#68d9cc">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#68d9cc">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:elevation="20dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<ImageView
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:id="#+id/back"
android:onClick="cancel"
android:src="#drawable/ic_arrow_back_black_24dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Test example"
android:textSize="22sp"
android:id="#+id/header"
android:textColor="#color/textColorPrimary"
android:layout_gravity="center"
android:paddingRight="10dp"
/>
</android.support.v7.widget.Toolbar>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/linear"
android:layout_marginBottom="55dp"
android:layout_below="#+id/textView12"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:textColor="#android:color/black"
android:layout_below="#+id/textView12"
android:text="textview:"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<EditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/textView4"
android:layout_alignBottom="#+id/textView4"
android:layout_toEndOf="#+id/textView4"
android:layout_toRightOf="#+id/textView4"
android:imeOptions="actionDone"
android:inputType="text" />
</LinearLayout>
<ListView
android:id="#+id/listview"
android:layout_width="wrap_content"
android:choiceMode="singleChoice"
android:layout_height="300dp"
android:layout_below="#+id/toolbar"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:elevation="9dp">
</ListView>
<TextView
android:id="#+id/textView12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="78dp"
android:gravity="center_horizontal"
android:text="textview"
android:textColor="#000000"
android:textSize="18sp"
android:layout_below="#+id/listview"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
</ScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/cancel"
android:onClick="cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:clickable="true"
app:fabSize="normal"
app:srcCompat="#drawable/ic_close_black_24dp"
/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/done"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:clickable="true"
app:fabSize="normal"
app:srcCompat="#drawable/ic_done_black_24dp"
/>
</RelativeLayout>
If you are aiming for Material Design as you mentioned, then putting those Floating Action Button like that are not encouraged. Either stack them on top of each other on the right, or have one where it will open multiple mini FAB on click.
An easy fix however I can think of here would be to add paddingBottom to your layout so it would have more "content" and it would scroll up more.
I would read this section if you haven't already.
https://material.io/guidelines/components/buttons-floating-action-button.html#

linear layout not filling parent down the remaining part of the screen in a scrollview

I am designing a layout for an activity where some contents like Textview, spinner and buttons are arranged in the upper part of the screen. I want to position image view to the bottom of the screen with a match_parent attribute to fill to the remaining bottom of the screen and it has become a challenge to me as the image view is filling to the bottom of the remaining part of the screen. This is the entire layout of the upper section/part of the screen
<?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="fill_parent"
android:layout_height="fill_parent" >
<ScrollView
android:layout_width="fill_parent"
android:background="#drawable/xxxVal"
android:padding="10dp"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TextView
android:id="#+id/dataVaues"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textSize="25sp"
android:gravity="center_horizontal"
android:textColor="#000"
/>
<Spinner
android:id="#+id/spinBundle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6sp"
android:textColor="#000"
android:prompt="#string/_prompt" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textColor="#000"
android:text="Plan" />
<TextView
android:id="#+id/bundle"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:textSize="30sp"
android:textColor="#000"/>
<!-- android:inputType="phone" -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textColor="#000"
android:text="PValue:" />
<TextView
android:id="#+id/value"
android:inputType="value"
android:layout_height="wrap_content"
android:textSize="30sp"
android:layout_width="match_parent"
android:textColor="#000"/>
<TextView
android:id="#+id/validValue"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Valid:"
android:textColor="#000000" />
<TextView
android:id="#+id/valid"
android:inputType="valid"
android:layout_height="wrap_content"
android:textSize="30sp"
android:layout_width="match_parent"
android:layout_marginBottom="10dp"
android:textColor="#ff0000"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical" >
<Button
android:id="#+id/proceed"
android:text="Proceed"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:textColor="#000"/>
<Button
android:id="#+id/data"
android:text="Check"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_marginTop="10dp"
android:textColor="#000"/>
</LinearLayout>
this is remaining part of the layout with a view flipper for an image that I want it to fit down to the remaining part of the screen but its not fitting as it shrinks up
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="3dp"
android:gravity="center_horizontal"
android:orientation="vertical" >
<ViewFlipper
android:id="#+id/flipper1"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:flipInterval="5000"
android:inAnimation="#anim/slide_in_right"
android:outAnimation="#anim/slide_out_left" >
</ViewFlipper>
</LinearLayout>
</LinearLayout>
</ScrollView>
</RelativeLayout>
please kindly assist!
Try adding the imageview to the Viewflipper like so:
<ViewFlipper
android:id="#+id/simpleViewFlipper"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src=IMAGE />
</ ViewFlipper >
Having said that you might find some issues regarding swiping when using a viewflipper inside a scrollview

Move toolbar to top of relative layout

I am trying to put my button in the center, but keep my toolbar at the top. At the moment both are in the middle because of the gravity "center".
Is there a way to do this without using padding attributes? Otherwise it will look different on other screen sizes.
Here is my main_activity:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_gravity="center">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:background="#2196F3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
</android.support.v7.widget.Toolbar>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
It is simple, change to this:
<?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="match_parent" >
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#2196F3"
android:minHeight="?attr/actionBarSize" >
</android.support.v7.widget.Toolbar>
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:text="New Button" />
</RelativeLayout>
try below xml
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:background="#2196F3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
</android.support.v7.widget.Toolbar>
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="New Button" />
</RelativeLayout>
Try android:layout_centerInParent="true"
for your button
for the tool bar try android:layout_alignParentTop="true"
Create a separate layout for your toolbar and set its gravity to top.

Categories

Resources