Android Studio ile Youtube Bottom Navigation View Yapımı

esatgozcu ANDROİD-JAVA Aralık 6, 2017 | 0

Youtube’nin telefon uygulamalarını altında bulunan anasayfa, trendler, abonelikler, etkinlikler, kitaplık arasında gezinme kolaylığı sağlayan ve uygulamanın alt tarafında bulunan navigasyon özelliğine bu makalede nasıl yapabileceğimize bakacağız.

Öncelikle yapılması gereken ayarları yapalım.

build.gradle dosyamıza dizayn için kullanacağımız aşağıdaki kodu ekleyelim.

1	implementation 'com.android.support:design:26.1.0'

build.gradle dosyamızın son hali aşağıdaki gibi olması gerekiyor.

build.gradle

apply plugin: 'com.android.application'

android {

compileSdkVersion 26

defaultConfig {

applicationId "com.example.esatgozcu.buttonnavigationviewyapimi"

minSdkVersion 15

targetSdkVersion 26

versionCode 1

versionName "1.0"

testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"

}

buildTypes {

release {

minifyEnabled false

proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

}

dependencies {

implementation fileTree(dir: 'libs', include: ['*.jar'])

implementation 'com.android.support:appcompat-v7:26.1.0'

implementation 'com.android.support.constraint:constraint-layout:1.0.2'

testImplementation 'junit:junit:4.12'

androidTestImplementation 'com.android.support.test:runner:1.0.1'

androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'

implementation 'com.android.support:design:26.1.0'

}

colors.xml, strings.xml ve styles.xml dosyamızı aşağıdaki gibi düzenliyoruz.

colors.xml

<?xml version="1.0" encoding="utf-8"?>

</resources>

strings.xml

<string name="app_name">ButtonNavigationViewYapimi</string>

<string name="anasayfa_text">Ana Sayfa</string>

<string name="trendler_text">Trendler</string>

<string name="abonelikler_text">Abonelikler</string>

<string name="etkinlikler_text">Etkinlikler</string>

<string name="kitaplık_text">Kitaplık</string>

</resources>

styles.xml

<item name="colorPrimary">@color/colorPrimary</item>

<item name="colorPrimaryDark">@color/colorPrimaryDark</item>

<item name="colorAccent">@color/colorAccent</item>

</style>

<item name="windowActionBar">false</item>

</style>

</resources>

Bu ayarlamalarımız yaptıktan sonra geriye uygulamada kullanacağımız iconları projemize dahil etmek kalıyor. Buraya tıklayarak indiriyoruz youtube_android_icon dosyasının içindekilerini res klasörünün altına atıyoruz.

Alt tarafta bulunan itemleri tanımlayamak için res klasörünün altına bir menu dosyası oluşturuyoruz. menu dosyasının altına da menu_navigation.xml dosyası oluşturuyoruz ve aşağıdaki gibi düzenliyoruz.

menu_navigation.xml

<?xml version="1.0" encoding="utf-8"?>

<item android:id="@+id/anasayfa"

android:title="@string/anasayfa_text"

android:icon="@drawable/ic_action_youtube_ana_sayfa_icon" />

<item android:id="@+id/trendler"

android:title="@string/trendler_text"

android:icon="@drawable/ic_action_youtube_trendler_icon"/>

<item android:id="@+id/abonelikler"

android:title="@string/abonelikler_text"

android:icon="@drawable/ic_action_youtube_etkinlikler_icon" />

<item android:id="@+id/etkinlikler"

android:title="@string/etkinlikler_text"

android:icon="@drawable/ic_action_youtube_abonelikler_icon" />

<item android:id="@+id/kitaplık"

android:title="@string/kitaplık_text"

android:icon="@drawable/ic_action_youtube_kitaplk_icon" />

</menu>

activity_main.xml dosyamız Fragment’i menülerle birlikte görüntülemek için kullanılan content_main.xml dosyasındaki bir FrameLayout ile birlikte BottomNavigationView widget’ına sahip bir Araç Çubuğuna sahiptir. activity_main.xml ve content_main.xml dosyamızı aşağıdaki gibi düzenliyoruz.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
tools:context="com.example.esatgozcu.buttonnavigationviewyapimi.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/arkaplan"
app:title="YouTube"
app:titleTextColor="@color/text"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_main" />
<android.support.design.widget.BottomNavigationView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_gravity="bottom"
android:background="@android:color/white"
app:elevation="8dp"
app:menu="@menu/menu_navigation"
app:itemBackground="@color/arkaplan"
app:itemIconTint="@color/text"
app:itemTextColor="@color/text"/>
</android.support.design.widget.CoordinatorLayout>

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout 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"

tools:context="com.example.esatgozcu.buttonnavigationviewyapimi.MainActivity">

<android.support.design.widget.AppBarLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:theme="@style/AppTheme.AppBarOverlay">

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:background="@color/arkaplan"

app:title="YouTube"

app:titleTextColor="@color/text"

app:popupTheme="@style/AppTheme.PopupOverlay" />

</android.support.design.widget.AppBarLayout>

<android.support.design.widget.BottomNavigationView

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/bottom_navigation"

android:layout_width="match_parent"

android:layout_height="56dp"

android:layout_gravity="bottom"

android:background="@android:color/white"

app:elevation="8dp"

app:menu="@menu/menu_navigation"

app:itemBackground="@color/arkaplan"

app:itemIconTint="@color/text"

app:itemTextColor="@color/text"/>

</android.support.design.widget.CoordinatorLayout>

content_main.xml

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout 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"

app:layout_behavior="@string/appbar_scrolling_view_behavior"

tools:context="com.example.esatgozcu.buttonnavigationviewyapimi.MainActivity"

tools:showIn="@layout/activity_main">

<FrameLayout

android:id="@+id/fragment_frame"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Alt tarafta olan menülerimizi tanımladığımız xml dosyalarımızı aşağıdaki gibi düzenliyoruz.

fragment_abonelikler.xml

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout 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="match_parent">

<TextView

android:id="@+id/textView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/abonelikler_text"

android:textAppearance="@style/TextAppearance.AppCompat.Display2"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

fragment_anasayfa.xml

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout 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="match_parent">

<TextView

android:id="@+id/textView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/anasayfa_text"

android:textAppearance="@style/TextAppearance.AppCompat.Display2"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

fragment_etkinlikler.xml

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout 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="match_parent">

<TextView

android:id="@+id/textView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/etkinlikler_text"

android:textAppearance="@style/TextAppearance.AppCompat.Display2"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

fragment_kitaplik.xml

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout 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="match_parent">

<TextView

android:id="@+id/textView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/kitaplık_text"

android:textAppearance="@style/TextAppearance.AppCompat.Display2"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

fragment_trendler.xml

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout 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="match_parent">

<TextView

android:id="@+id/textView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/trendler_text"

android:textAppearance="@style/TextAppearance.AppCompat.Display2"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Oluşturduğumuz fragmentleri java sınıflarımızla aşağıdaki gibi bağlıyoruz.

AnasayfaFragment.java

package com.example.esatgozcu.buttonnavigationviewyapimi;

import android.app.Fragment;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class AnasayfaFragment extends Fragment {

public static AnasayfaFragment newInstance() {

return new AnasayfaFragment();

}

@Nullable

@Override

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {

return inflater.inflate(R.layout.fragment_anasayfa, container, false);

}

TrendlerFragment.java

package com.example.esatgozcu.buttonnavigationviewyapimi;

import android.app.Fragment;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class TrendlerFragment extends Fragment {

public static TrendlerFragment newInstance() {

return new TrendlerFragment();

}

@Nullable

@Override

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {

return inflater.inflate(R.layout.fragment_trendler, container, false);

}

AboneliklerFragment.java

package com.example.esatgozcu.buttonnavigationviewyapimi;

import android.app.Fragment;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class AboneliklerFragment extends Fragment {

public static AboneliklerFragment newInstance() {

return new AboneliklerFragment();

}

@Nullable

@Override

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {

return inflater.inflate(R.layout.fragment_abonelikler, container, false);

}

EtkinliklerFragment.java

package com.example.esatgozcu.buttonnavigationviewyapimi;

import android.app.Fragment;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class EtkinliklerFragment extends Fragment {

public static EtkinliklerFragment newInstance() {

return new EtkinliklerFragment();

}

@Nullable

@Override

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {

return inflater.inflate(R.layout.fragment_etkinlikler, container, false);

}

KitaplikFragment.java

package com.example.esatgozcu.buttonnavigationviewyapimi;

import android.app.Fragment;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class KitaplikFragment extends Fragment {

public static KitaplikFragment newInstance() {

return new KitaplikFragment();

}

@Nullable

@Override

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {

return inflater.inflate(R.layout.fragment_kitaplik, container, false);

}

Son olarak MainActivity.java sınıfımızı oluşturuyoruz.

MainActivity.java

package com.example.esatgozcu.buttonnavigationviewyapimi;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
public class MainActivity extends AppCompatActivity {
private BottomNavigationView mBottomNavigationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
setupBottomNavigation();
if (savedInstanceState == null) {
AnasayfaFragmentYukle();
}
}
private void setupBottomNavigation() {
mBottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_navigation);
mBottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.anasayfa:
AnasayfaFragmentYukle();
return true;
case R.id.trendler:
TrendlerFragmentYukle();
return true;
case R.id.abonelikler:
AboneliklerFragmentYukle();
return true;
case R.id.etkinlikler:
EtkinlikFragmentYukle();
return true;
case R.id.kitaplık:
KitaplikFragmentYukle();
return true;
}
return false;
}
});
}
private void AnasayfaFragmentYukle() {
AnasayfaFragment fragment = AnasayfaFragment.newInstance();
FragmentTransaction ft = getFragmentManager().beginTransaction();
ft.replace(R.id.fragment_frame, fragment);
ft.commit();
}
private void TrendlerFragmentYukle() {
TrendlerFragment fragment = TrendlerFragment.newInstance();
FragmentTransaction ft = getFragmentManager().beginTransaction();
ft.replace(R.id.fragment_frame, fragment);
ft.commit();
}
private void AboneliklerFragmentYukle() {
AboneliklerFragment fragment = AboneliklerFragment.newInstance();
FragmentTransaction ft = getFragmentManager().beginTransaction();
ft.replace(R.id.fragment_frame, fragment);
ft.commit();
}
private void EtkinlikFragmentYukle() {
EtkinliklerFragment fragment = EtkinliklerFragment.newInstance();
FragmentTransaction ft = getFragmentManager().beginTransaction();
ft.replace(R.id.fragment_frame, fragment);
ft.commit();
}
private void KitaplikFragmentYukle() {
KitaplikFragment fragment = KitaplikFragment.newInstance();
FragmentTransaction ft = getFragmentManager().beginTransaction();
ft.replace(R.id.fragment_frame, fragment);
ft.commit();
}
}

package com.example.esatgozcu.buttonnavigationviewyapimi;

import android.app.FragmentTransaction;

import android.os.Bundle;

import android.support.annotation.NonNull;

import android.support.design.widget.BottomNavigationView;

import android.support.v7.app.AppCompatActivity;

import android.support.v7.widget.Toolbar;

import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

private BottomNavigationView mBottomNavigationView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

setSupportActionBar(toolbar);

setupBottomNavigation();

if (savedInstanceState == null) {

AnasayfaFragmentYukle();

}

private void setupBottomNavigation() {

mBottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_navigation);

mBottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {

@Override

public boolean onNavigationItemSelected(@NonNull MenuItem item) {

switch (item.getItemId()) {

case R.id.anasayfa:

AnasayfaFragmentYukle();

return true;

case R.id.trendler:

TrendlerFragmentYukle();

return true;

case R.id.abonelikler:

AboneliklerFragmentYukle();

return true;

case R.id.etkinlikler:

EtkinlikFragmentYukle();

return true;

case R.id.kitaplık:

KitaplikFragmentYukle();

return true;

}

return false;

}

});

}

private void AnasayfaFragmentYukle() {

AnasayfaFragment fragment = AnasayfaFragment.newInstance();

FragmentTransaction ft = getFragmentManager().beginTransaction();

ft.replace(R.id.fragment_frame, fragment);

ft.commit();

}

private void TrendlerFragmentYukle() {

TrendlerFragment fragment = TrendlerFragment.newInstance();

FragmentTransaction ft = getFragmentManager().beginTransaction();

ft.replace(R.id.fragment_frame, fragment);

ft.commit();

}

private void AboneliklerFragmentYukle() {

AboneliklerFragment fragment = AboneliklerFragment.newInstance();

FragmentTransaction ft = getFragmentManager().beginTransaction();

ft.replace(R.id.fragment_frame, fragment);

ft.commit();

}

private void EtkinlikFragmentYukle() {

EtkinliklerFragment fragment = EtkinliklerFragment.newInstance();

FragmentTransaction ft = getFragmentManager().beginTransaction();

ft.replace(R.id.fragment_frame, fragment);

ft.commit();

}

private void KitaplikFragmentYukle() {

KitaplikFragment fragment = KitaplikFragment.newInstance();

FragmentTransaction ft = getFragmentManager().beginTransaction();

ft.replace(R.id.fragment_frame, fragment);

ft.commit();

}

Böylelikle Button Navigation View’i nasıl yapabileceğimizi öğrenmiş olduk. Artık sizde uygulamalarınıza navigasyon ekleyerek zenginleştirebilirsiniz. Projenenin kaynak kodlarını buraya tıklayarak indirebilirsiniz.

android android makaleleri android öğrenme android studio android studio dersleri android studio makaleleri bottom navigation java mobil yazılım yazılım yazılım makaleleri youtube bottom navigation

Android Studio ile Youtube Bottom Navigation View Yapımı

Android Studio ile Youtube Bottom Navigation View Yapımı

Bir cevap yazın Cevabı iptal et

İLETİŞİM

SON MAKALELER

SON YORUMLAR

ARŞİV

KATEGORİLER